d

commerce/README.md

@@ -0,0 +1,51 @@
+## 고객 활동 로그 분석
+
+커머스 필드에서 고객의 활동을 분석하는 것은 매출로 이어지기에 고객의 행동을 여러 각도에서 분석하는 것은 중요하다.
+야래의 내용은 네이버 스마트 스토어와 고도몰(NHN 쇼핑몰 제작 플랫폼)에서 트래킹하여 사용자들에게 제공하는 요소들이다.
+
+- 고객 데이터: 스토어의 고객 현황 (주문 고객 통계, 성별/연령대/고객 등급간 구매 통계, 재구매 통계)
+- 마케팅 분석: 유입이 발생한 마케팅 채널 통계, 마케팅 채널 성과, 키워드별 유입 및 결제 성과
+- 쇼핑행동 분석: 페이지/상품별 고객의 주요 행동 데이터(유입 고객 수, 체류 시간, url / 상품 상세 조회 수, 상품 ID, 상품명, 결제 상품 수량)
+- 실시간 분석: 1시간 단위의 스토어 거래 정보를 실시간으로 제공
+- 판매 분석: 배송 통계, 판매 성과, 상품별 결제 데이터
+
+![image](https://github.com/user-attachments/assets/376ef164-8264-4e4e-ace8-8029e63538ef)
+
+### 고객 활동 분석을 돕는 툴로 GA(Google Analytics), GTM(Google Tag Manger)들이 있는데, 이 둘의 차이를 짚어보자.
+
+### GTM
+
+![img](https://github.com/user-attachments/assets/e1e5e2ee-ea1d-4742-bea8-59882d0b0273)
+
+- GTM 스크립트를 삽입한 뒤, GA 혹은 다른 툴로 연결한다.
+- 여러 툴(GA, Facebook 등)을 사용할 수 있게 해주는 중간 다리 역할을 한다.
+- GA와 같은 여러 툴(도구)들을 관리할 수 있게 해준다.
+- GA에 자바스크립트 추적 코드(= 태그라고도 함)를 쉽게 추가하고 규칙을 정의할 수 있다.
+- 사용 목적
+  - 자바스크립트 추적코드 관리 가능(GA는 이 심어진 코드를 바탕으로 분석 보고서를 제공한다.)
+
+### GA
+
+![Google Analytics](https://github.com/user-attachments/assets/fb9aa3bc-bcda-419d-981c-ff2b6124e182)
+
+- GA 스크립트, 로그 수집 코드를 삽입할 수 있다.
+- 유입 및 행동 레포트에 따라 목표 전환이 가능하다.
+- 태그를 개발자가 삽입해야한다.
+- 사용 목적
+  - 웹 사이트 방문자 수, 방문자의 접속 지역 파악
+  - 세션 당 페이지 수, 이탈 수 파악
+  - 가장 인기있는 페이지, 이벤트 파악
+  - 접속한 기종(android, ios) 파악
+
+### 정리
+
+- GA - 사이트 활동에 대한 보고서를 제공하는 분석 도구
+- GTM - 정의된 규칙에 따라 추적 코드를 실행하는 도구
+- GTM과 GA는 서로 완전히 대체될 수 없다.
+- 사용 목적이 아예 다르며, GTM은 GA 관리를 편하게 해줄 수 있는 툴이다.
+- A/B 테스트나, 유의미한 데이터를 뽑기 위해선 GA를 이용해야한다.
+
+Cf) 참고
+
+- https://mingg123.tistory.com/265
+- https://theanalytics.kr/8-%EA%B5%AC%EA%B8%80%ED%83%9C%EA%B7%B8%EA%B4%80%EB%A6%AC%EC%9E%90-gtm%EC%99%80-%EA%B5%AC%EA%B8%80%EC%95%A0%EB%84%90%EB%A6%AC%ED%8B%B1%EC%8A%A44-ga4-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%B0%A8%EC%9D%B4/

css/css_notepad.md

@@ -1,4 +1,67 @@
 ** css 상식 
+ - css와 sass(Syntatically Awesome Style Sheets) 차이
+
+   css를 사용해 style을 적용할 경우,
+
+     1. 선택자(Selector)를 지정할 때, 불필요한 부모 요소 선택자를 매번 적어야 한다.
+
+     2. 프로젝트 규모가 커져감에 따라 중복해서 수정해야 되는 부분이 늘어난다. 가령, 반복적으로 사용된 부모 요소 선택자의 이름이 변경 된 경우.
+
+     3. 연산 기능에 한계가 있다.
+
+     4. 구문이 존재하지 않는다.
+
+   -> 따라서 sass는 css의 태생적 한계를 보완하기 위해 아래와 같은 기능을 제공한다.
+
+     1. 변수의 사용
+
+     2. 조건문과 반복문
+
+     3. import
+
+     4. 중첩(nesting)
+
+     5. mixin
+
+     6. extend / inheritance
+
+ - word-break와 word-wrap의 차이 
+
+   이 정도까지 알아야 싶나 하지만, 혹시나 하는 마음에 어느정도 큰 틀만 알고 다음에 다시 보기 위해 해당 내용 관련해서 캡처한 것을 올린다.
+
+   참고 사이트: cf)https://wit.nts-corp.com/2017/07/25/4675
+
+   word-break 속성:
+
+   ![image](https://user-images.githubusercontent.com/53415000/148174541-7ef24ee2-1588-4402-b762-cb344f2eb525.png)
+
+
+   <br/>
+   word-wrap 속성:
+
+   ![image](https://user-images.githubusercontent.com/53415000/148174651-87321c04-a87c-4d0f-a82e-52fac866c9c9.png)
+
+   미세한 차이가 있는 듯하다.
+
+
+ - overflow-wrap: break-word vs word-break: break-word
+
+  ![image](https://user-images.githubusercontent.com/53415000/148054710-437d9cfe-88df-4e64-9bdb-00cf77492887.png)
+
+  요약해서 정리하자면,
+
+  - overflow-wrap: word-break (<=> break-words, tailwind에서 같은 표현)
+
+  ![image](https://user-images.githubusercontent.com/53415000/148173454-68534762-d8a0-4cd3-b7a5-2e24a9bee215.png)
+
+  - word-break: break-all(<=> break-all, tailwind에서 같은 표현)
+
+  ![image](https://user-images.githubusercontent.com/53415000/148173592-974f5060-aa95-49a8-b6ec-e0a81ecb9609.png)
+
+
+  - word-wrap: word-break
+
+
 
  - self-start(<=> align-self: flex-start)
 

feconf/component.md

@@ -0,0 +1,25 @@
+<h1>컴포넌트, 다시 생각하기</h1><br/>
+<br/>
+
+<blockquote>
+  <div>
+   <span>
+    <b>질문</b>이 <b>정답</b>보다 중요하다. <br/>
+   </span>
+   <span>
+    <b>관점</b>이 <b>기술</b>보다 중요하다.   
+   </span>
+ </div>
+</blockquote>
+
+  * Coponent 설계 시 Principle
+
+    1. 비슷한 관심사는 가까운 곳에(co-location)
+
+    2. 데이터를 ID 기반으로 정리하기
+
+    3. 의존한다면 의존성 그대로 드러내기
+
+    4. 모델 기준(리모트 데이터)으로 컴포넌트 분리하기
+
+cf) 보다 자세한 내용은 블로그에 정리해놓았습니다.<br/> https://searching-power.tistory.com

functionalProgramming/readme.md

@@ -0,0 +1,58 @@
+* 함수형 프로그래밍
+
+
+니콜라스의 영상을 보며 정리한 내용입니다.
+
+
+  - '함수형 프로그래밍'은 코드 작성 '스타일'이다. 함수형 프로그래밍 개념을 어떤 프로그래밍 언어에도 사용가능하다.
+
+  - clojure와 scala는 아예 함수형 프로그래밍으로 설계된 언어이고 빌트인 기능이 있어 함수형 코드를 작성하기 쉽다.(cf, Clojure, F#, Elixir, Erlang)
+
+  - 함수형 프로그래밍을 배우면, 프로그래밍 문제를 해결할 때 유용한 새로운 관점과 접근 방식을 얻을 수 있다. 
+
+  - 함수형 방식에서는 버그 자체가 발생하기 어렵다. 
+
+<br />
+* 왜 함수형프로그래밍이 좋을까?
+
+  - 이 이유를 알려면 명령형(imperative) 코드, 선언형(declarative) 코드간의 차이를 살펴야 한다.
+
+    - 선언형: 원하는 결과를 표현하기 위해 코드가 작성(ex, '토스트를 만들어줘')
+
+    - 명령형: 원하는 결과를 얻기 위해 필쵸한 지침에 따라 코드가 작성(ex, '빵을 가져오고, 토마토를 가져오고, 햄을 가져와서 합쳐라')
+
+  - 선언형 코드의 예시
+
+    - css는 선언형 언어(원하는 결과만 작성하면 된다.)
+
+    - 선언형 코드는 원하는 결과값을 선언하는 것. / 명령형 코드는 결과값에 어떻게 도달하느냐에 관한 것.
+
+    - js에는 선언형 코드 형태의 함수를 갖고 있다. filter, replaceAll 등과 같은.
+
+    - 텍스트 문자열에서 공백을 제거하고, 다른 문자로 대체하는 작업을 한다고 가정한다고 할 경우,
+
+      ```
+	명령형(imperative) 코드에서는 아래와 같이 작업
+	function spaceToHeart(text) {
+	   let result = "";
+	   for (let i=0; i<text.length; i++) {
+	     if (text === " ") {
+	       result += "♥"
+	     } else {
+	        result += text[i]
+	     }
+	   }
+	   return result;
+	}
+
+	선언형 코드에서는 아래와 같이 작업
+	text.replaceAll(" ", ♥);
+      ```
+
+  - 명령형 코드는 요구사항을 충족하는데 필요한 모든 단계를 하나씩 적는다.
+
+  - 명령형 코드가 읽기가 더 쉽고, 함수가 무슨 역할을 하는지 이해하기가 편하다. 그리고 요구사항의 구현이 개발자에게 달려있는데, 이때 개발자가 코드를 원하는 대로 작성하다 보면 버그나 실수가 더 생길 수 있고, 동료들이 이해하는데 어려울 수 있다.
+
+  - 모든 선언형 코드는 명령형코드 위에 쓰여진다고 말할 수 있다.
+
+  - 선언형 코드를 간혹 싫어하는 경우도 있는데, replaceAll, filter과 같은 함수들의 작동방식을 미리 알아야 하기 때문이다.

git/errorList.md

@@ -0,0 +1,13 @@
+* failed to push some refs to 'https://github.com/~.git' 에러
+
+  - 위 오류는 깃헙에서 readme.md 파일을 생성한 후 local에서 pull을 안 한 상태로 작업을 진행했기 때문에 발생한다.
+
+  - 해결방법은 아래와 같다.
+
+  ```
+    1) git push -u origin master 
+
+    2) git pull origin master
+
+    3) git push -f origin master // 기존의 commit 이력을 강제로 덮어씌운다
+  ```

git/pushOption.md

@@ -0,0 +1,3 @@
+* git push시 -u 옵션(git push -u origin master)
+
+  - '-u' 옵션은 앞으로 master 라는 현재 브랜치를 자동으로 origin이라는 원격저장소의 master 브랜치로 연결해, 간단히 git push/pull만 입력하여 작업할 수 있도록 해준다.

git/readme.md

@@ -0,0 +1,30 @@
+## git clone 시 동일 repo 다른 branch clone 할 때
+
+  * https://icerabbit.tistory.com/69
+
+    - 위 사이트에서 소개된 내용대로 -b 옵션으로 브랜치에 있는 내용을 가져오되 repo의 이름을 다른 이름으로 재지정해주면 같은 repository의 다른 브랜치의 내용을 local로 가져올 수 있다.
+
+    ```
+      eg)
+
+        1) git clone git:url~~
+
+	2) git clone -b git:url~~ DIR_NAME 
+
+    ```
+
+## git reset --hard 명령어로 파일 날려버린 일..
+
+  * 특정 시점으로 파일을 전부 되돌리려고 하여 위 명령어를 실행했다.
+
+    - 결과, 특정 시점으로 프로젝트를 돌렸지만, 작업 중이던 파일들도 깨끗이 사라졌다....
+
+    - 이러한 참사를 되돌리고자 검색 중, git reflog 명령어로 HEAD 목록을 확인하고 그 목록 중에 원하는 시점의 HEAD 번호로 git reset --hard(지웠던 내용을 다시 지우는 꼴)를 통해 복구할 수 있다고 한다.
+
+    - 하지만, 이 방법이 유효하려면 commit이 되어 있어야 한다는 전제가 있다..
+
+    - 결국, commit 이 되지 않은 파일이 날아간 상황에서 해당 파일들을 복구할 수 있는 방법이 없었다..
+
+    - 그러다 vscode에 자체적으로 지원하는 TIMELINE 기능으로 특정 파일들에 대해 저장된 내역을 확인할 수 있다는 동료의 말을 듣고 날아갔던 파일들을 복구할 수 있었다.
+
+    - 함부로 git reset --hard 사용하지 말 것, 커밋을 자주할 것..