:: git log --branches --graph --decorate --oneline

• 빨간색 글자 (ex. origin/master) :: remote영역 :: 내가 remote에 push한 지점
• 초록색 글자 (ex. master) :: local영역 :: 해당 branch의 최신 commit
• HEAD :: 현재 작업 중인 branch :: ex) develop branch에서 log를 확인했을 때 :: ex) pages/boardlist branch에서 log를 확인했을 때

2. commit을 지우고 싶다면?

예를 들어, develop branch에서 AWS라이브러리 추가 commit을 지운다고 가정해보자. 우선 git reset --hard ac6f43e을 입력하면 'AWS라이브러리 추가'의 직전 commit인 '초기세팅 수정' commit으로 이동한다. 여기서부터 commit을 새로 쌓아올리면 'AWS라이브러리 추가' commit은 삭제된다. ** Github에 push한 commit을 삭제하고 싶다면, 위와 동일한 과정을 거친 후에 새로운 commit을 입력하고 push하자.**

• 주의사항 :: git reset --hard만 입력할 경우에는 현재 branch에서 작업한 내용 중 commit하지 않은 내용만 지워진다. :: 이 방법으로 지우면 원격 저장소에 흔적도 없이 commit을 삭제할 수 있다. 하지만 내 commit을 pull 한 팀원이 있다면, 다음에 그 팀원이 push할 때 내가 지운 commit이 다시 추가될 수 있다! 즉, 1. 나 혼자만 사용하는 브랜치에 커밋을 push하였고, 이를 되돌리고 싶은 경우 2. 팀원들과 직접 커뮤니케이션해서 내가 되돌릴 커밋을 pull한 팀원이 없다고 확인된 경우 사용하자! 출처: https://enant.tistory.com/45 [ENAN]

• reset 외에 revert 명령어를 사용할 수도 있다. 단, history에 남기 때문에 되돌릴 수도 있으므로 공개되면 안되는 파일이 업로드된 경우에는 reset을 사용해야 한다.

3. 그 외

Git의 개념과 명령어가 잘 정리된 블로그가 있어 명령어가 헷갈릴 때마다 챙겨보려고 기록한다.

각자의 작업물을 develop 브랜치에 머지하는 과정에서 log가 뒤엉키고 conflict를 해결하더라도 동일한 conflict가 지속적으로 발생했다.

원인

develop 브랜치에서 각각의 branch를 생성하지 않고 master에서 각각의 branch를 생성했다.

해결 방법

1. repo 이동 1) github의 기존 repository를 삭제한다. 2) local에서 정상적인 방법으로 새로운 branch를 생성한다. (ex. master → develop → branch) 3) 기존 branch의 작업물을 새로운 branch로 옮긴다. 4) 기존 branch는 삭제한다. 5) github에 새로운 repository를 생성한다. 6) local과 새로운 repository를 연결한다. 7) push한다.

2. git cherry-pick 명령어 사용하여 브랜치에서 브랜치로 커밋 이동하기

결과

두 가지의 이유로 에러가 발생했다.

1) react 스크립트의 버전 오류로 인해 발생한 에러

• 에러 내용 :: Could not find a required file. Name: index.js
• 해결방법 :: npm i react-scripts --save

2) 각자가 추가로 설치한 라이브러리로 인해 발생한 에러

• npm i react-scripts --save :: react-script 업데이트
• npm i react-kakao-login :: 카카오 로그인 라이브러리
• npm i axios :: axios 라이브러리
• npm i --save-dev @types/react-slick :: slick 라이브러리 타입스크립트 버전
• npm install react-slick --save :: slick 라이브러리 리액트 버전
• npm install slick-carousel :: slick 라이브러리 css

위의 과정을 거친 후에 정상적으로 작동하는 모습을 확인할 수 있었다.

끝❗️

추가로 알게 된 내용

github에서 merge할 때도 커밋처럼 github에 merge한 내용을 정리할 수 있다.

아래의 내용은 해당 블로그를 참조하였습니다.

0) 기본 구조

• master (A)에서 branch를 하나 생성
• branch에서 commit이 발생 → (b) → (c)
• master (A)에서 commit 발생 → (A')
• 모든 작업은 branch에서 이루어진다고 가정

  ** 예시를 위한 것일뿐, master에서는 작업하면 안됩니다.

1) merge

• commit (d)의 베이스는 master (A')와 commit (c)

요약: 베이스가 여러 갈래로 나뉘기 때문에 커밋과 log가 복잡하고 알아보기 어렵다.

2) squash

• commit (a), (b), (c)를 합친 하나의 commit (a,b,c)를 생성
• commit (a,b,c)의 베이스는 master (A)

3) rebase

• commit (a)의 베이스는 master (A')

요약: 베이스 자체를 옮겨버리기때문에 log가 깔끔해져서 알아보기 쉽다.

4) rebase & squash

오늘의 결론

1. merge보다는 squash와 rebase를 사용하자.
2. rebase와 squash를 같이 하면 필요한 커밋만 남으니 커밋을 깔끔하게 관리할 수 있다.

페이지가 내려간 상태에서 페이지를 올렸다가 다시 내리면 데이터를 처음부터 받아오는 문제가 발생했다.

페이지별로 데이터를 받아오기 위해 id를 state에 넣어두고 데이터를 불러올 때마다 1씩 id값을 더하도록 코드를 짰다.

const getItems = async (pageLoadId: number): Promise<void> => {
  const res = await fetch(`/data/mock${pageLoadId}.json`);
  const json = await res.json();
>    
  const result = json;
>    
  setDataList(prevState => {
    return [...prevState, ...result];
  });
>    
  setPageLoadId(prevState => {
    return prevState + 1;
  });
};
>
useEffect(() => {
  const handleIntersection = (entires: any) => {
    entires.forEach((entry: any) => {
      if (!entry.isIntersecting) {
        return;
      }
>
      getItems(pageLoadId);
>            
    });
};
>
  const io = new IntersectionObserver(handleIntersection);
>
  if (target.current) {
    io.observe(target.current);
  }
>
}, [dataList]);

그런데 id값을 확인해보니 내려갈 때는 정상적으로 1이 더해지는데, 올라올 때는 -1이 더해지는 현상이 나타났다.

원인

observer의 관찰을 disconnect하는 코드가 빠져있어서, 관찰 대상으로 등록된 모든 DOM이 보일 때마다 콜백함수가 실행되었다.

해결 방법

useEffect의 return값에 observer의 관찰을 disconnect하는 메소드가 실행되게끔 arrow function을 추가했다.

const getItems = async (pageLoadId: number): Promise<void> => {
  const res = await fetch(`/data/mock${pageLoadId}.json`);
  const json = await res.json();
>    
  const result = json;
>    
  setDataList(prevState => {
    return [...prevState, ...result];
  });
>    
  setPageLoadId(prevState => {
    return prevState + 1;
  });
};
>
useEffect(() => {
  const handleIntersection = (entires: any) => {
    entires.forEach((entry: any) => {
      if (!entry.isIntersecting) {
        return;
      }
>
      getItems(pageLoadId);
>            
    });
};
>
  const io = new IntersectionObserver(handleIntersection);
>
  if (target.current) {
    io.observe(target.current);
  }
>
  return () => io.disconnect();
}, [dataList]);

결과

깔끔하게 해결❗️

문제

observer의 관찰대상이 드러날 때 loadItems 함수가 반복적으로 호출되는 것까지는 확인했지만, datas에 데이터가 쌓이지 않고 초기값 아래에 새로운 값으로 갱신되기만 하는 문제가 있었다.

원인

useEffect가 한 번만 호출되며, loadItems 함수가 외부 변수를 기억하고 있는 것이 원인이었다.

loadItems 함수는 useEffect가 호출될 때마다 새로 그려지는데, useEffect가 한 번만 호출되며 loadItems 함수는 새로 그려지지 않는다. 그렇기때문에 loadItems 함수는 처음에 그려질 당시의 외부 변수값을 기억해두고 호출될 때마다 꺼내 사용한다.

해결 방법

1. useEffect가 원할 때마다 호출되도록 dependency를 바꾼다.
2. loadItems 함수에 외부 변수를 사용하지 않는다.

결과

1. datas가 업데이트될 때마다 useEffect가 호출되도록 dependency를 변경.

2. 외부 변수에 영향을 받지 않도록 매개 변수 활용.

설명

직관적인 이해를 돕기 위해 연욱님께서 코드샌드박스에 작성하신 코드를 몇 줄 빌려왔다. 사이트에 방문해서 직접 버튼을 클릭해보면 이해에 큰 도움이 될 듯하다.

function Home() {
  const [count, setCount] = useState(0);
>
  const asyncUpdate = () => {
    setTimeout(() => {
      // setCount(count + 1); // 이상한데?
      // setCount((prev) => prev + 1); // 원하는 대로 나오는걸?
    }, 2000);
  };
>
  const immediateUpdate = () => {
    setCount(count + 1);
  };
>
  return (
    <div>
      <h2>count:{count}</h2>
      <button onClick={asyncUpdate}>asyncUpdate</button>
      <button onClick={immediateUpdate}>immediateUpdate</button>
    </div>
  );

여기 2초에 1번, 자동으로 1을 더하게 만드는 버튼과 누르는 즉시 1을 더하는 버튼이 있다. 그리고 setTimeout함수 안에 외부 변수를 사용할 때와 사용하지 않을 때의 차이를 나타내는 각각의 코드가 있다.

1. setCount(count + 1) :: asyncUpdate버튼을 누른 후 immediateUpdate버튼을 여러번 누르다보면 숫자가 잘 올라가다가 갑자기 뚝 떨어지는 모습을 볼 수 있다.

2. setCount((prev) => prev + 1) :: 위의 코드와는 달리 숫자가 누르는 대로 자연스럽게 올라가는 모습을 볼 수 있다.

함수가 호출될 때마다 외부 변수에서 업데이트된 값이 아닌 초기값만 가져오는 문제가 있음을 알 수 있다. 외부 변수를 기억하는 것은 클로저 함수의 특징이다.

클로저

외부 변수를 기억하고 이 외부 변수에 접근할 수 있는 함수를 말한다. 출처: 코어 자바스크립트

클로저를 이해하기 위해서는 스코프 체인과 렉시컬 스코프, 그리고 실행 컨텍스트와 렉시컬 환경에 대한 사전 지식이 필요하다.

1. 스코프 체인부터 시작해보자.

• 사전 지식 :: 스코프는 함수 단위로 생성된다. :: 밖에 있는 변수를 내부에서 사용하는 것은 가능하다. (내 집 안에서는 밖에 있는 물건을 가져다가 쓸 수 있는데, 밖에서 다른 집 안에 있는 물건을 가져올 수는 없는 것처럼....?)

let d = 4;
>
function  outer() {
  let c = 3;
  let b = 2;
>  
  function inner() {
    let b = 1;
    let a = 0;
    >
    console.log(d);
  }
>
  inner();
}
>
outer();

• 실행되는 과정

1) outer함수를 호출하면 inner함수가 자동으로 호출된다. 

2) inner함수에서 console.log(d)가 실행된다.

3) 이 때 변수 d를 찾기 시작하는데, 스코프를 기준으로 탐색을 한다.

4) console.log(d)가 호출된 inner함수의 스코프에서 제일 먼저 변수 d를 찾는다.

5) 없다면 outer함수의 스코프에서 변수 d를 찾는다.

6) 없다면 전역 스코프에서 변수 d를 찾는다.

7) 있다면 변수 d의 값을 반환하고, 없다면 에러를 띄운다.

• 정리 :: 변수(d)를 찾기 위해 연결된 스코프(inner → outer → 전역)를 타고 올라가야한다는 것을 알 수 있다. 이처럼 변수를 찾을 때는 연결된 스코프를 타고 올라가며 찾으라는 규칙이 바로 스코프 체인이다.

2. 렉시컬 스코프

• 사전 지식 :: 스코프는 함수 단위로 생성된다. :: 렉시컬 스코프는 상위 스코프를 결정하는 방식이다. :: 렉시컬 스코프는 호출되는 위치가 아니라 선언되는 위치에 따라 결정된다.

출처: 모던 자바스크립트 Deep Dive

var x = 1;
>
function foo() {
  var x = 10;
  bar();
}
>
function bar() {
  console.log(x);
}
>
foo(); // 10
bar(); // 1

• 실행되는 과정

1) bar는 전역에서 선언되었지만, foo함수 안에서 호출되었다.

2) 이 때 렉시컬 스코프 방식을 따를 경우 bar가 선언된 전역 스코프가 bar의 상위 스코프가 된다.

3) bar함수가 호출되었을 때 bar함수 내부 스코프에 변수 x가 있는지 확인한다.

4) 없다면 스코프 체인 규칙에 따라 상위 스코프인 전역 스코프에 변수 x가 있는지 확인한다.

• 정리 :: 렉시컬 스코프는 상위 스코프를 지정하는 방식 중 하나이고, 대부분의 프로그래밍 언어는 렉시컬 스코프 방식을 따르고 있다. 헷갈리면 렉시컬 스코프 방식 = 선언된 위치라고 기억하자.

실행 컨텍스트와 렉시컬 환경은 설명할 만큼 충분히 내용을 이해한 후에 추가할 예정입니다.

2016년

풀이

function solution(a, b) {
  let date = new Date(`${a} ${b}, 2016`).getDay();
>  
  switch (date) {
    case 0 : 
      return 'SUN';
      break;
    case 1 : 
      return 'MON';
      break;      
    case 2 : 
      return 'TUE';
      break;
    case 3 : 
      return 'WED';
      break;
    case 4 : 
      return 'THU';
      break;
    case 5 : 
      return 'FRI';
      break;
    case 6 : 
      return 'SAT';
      break;
  }
}

과정

let date = new Date(`${a} ${b}, 2016`); VSC에서 console.log로 찍어봤을 때와 runJS에서 console.log로 찍었을 때 나오는 생김새가 다르길래 호기심이 생겨서 겸사겸사 반환값의 타입을 확인해봤다.

• VSC

• runJS

당연히 문자열일거라고 생각했는데, 찾아보니 참조형 데이터타입 중 하나인 Date 객체 타입이었다. new operator는 그동안 종종 사용해왔기에 분명 객체 타입의 인스턴스를 생성한다는 것을 알고 있었다. 섣불리 문자열이라고 판단한 이유에 대해 고민해보니 Date 메소드와 헷갈렸다는 결론이 나왔다. 그래서 리팩토링을 할 때는 Date 메소드를 사용해봤더니 훨씬 깔끔하게 코드를 작성할 수 있었다.

  let date = Date();
  date.slice(0, 3).toUpperCase();

사용 기술 스택

• React with TypeScript, React-Router, SCSS
• Redux
• Create React App
• ESLint, Prettier

세팅 과정

1. npx create-react-app (폴더명) --template redux-typescript :: Redux를 사용한다면 위의 코드 한 줄로 React, Redux, TypeScript, Redux toolkit을 모두 설치할 수 있다.

2. npm install react-router-dom --save :: React-Router 설치

3. npm install -D prettier eslint-config-prettier eslint-plugin-prettier :: ESLint의 포맷팅과 Prettier 포맷팅의 충돌 방지

• 타입스크립트를 사용한다면 아래의 코드도 설치 npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react

*4. .vscode/settings.json 파일 생성 후 아래 내용 복사 붙여넣기 *

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
  "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  "javascript.format.enable": false,
  "eslint.alwaysShowStatus": true,
  "files.autoSave": "onFocusChange"
}

5. .eslintrc 파일 생성 후 아래 내용 복사 붙여넣기

{
  "extends": ["react-app", "plugin:prettier/recommended"]
}

6. 코드 컨벤션 협의

• 특이사항이 없다면 .prettierrc 파일 생성 후 아래 내용 복사 붙여넣기**

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "semi": true,
  "useTabs": true,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

• 3 ~ 6번에 대한 설명은 ESLint와 Prettier 초기 설정 방법을 참고.

7. npm install node-sass@4.14.1 :: Sass 설치

8. css 초기 설정 :: common.scss 및 reset.scss

주의사항

사전에 사용할 기술 스택과 라이브러리, 컨벤션을 모두 정리하고 세팅을 시작했지만, 세팅 도중에 몇 가지 변경사항이 생겼다. 하지만 바로 결정하기 힘든 부분이라 저녁을 먹으며 결정을 하고 나중에서야 세팅을 마무리했다. 그로 인해 변경 사항 중 몇 가지를 반영하지 않아 팀원들과 하나하나 찾아가며 수정해야 하는 불상사가 발생했다. 다음에 초기세팅을 할 때는 세팅 도중에 변경하는 일이 없도록 사전에 확실히 마무리하고 앉은 자리에서 끝내야겠다. 그러면 번거로운 일 없이 깔끔하게 초기환경을 세팅할 수 있지 않을까.

eslint 설치

• CRA(Create-React-App)에는 eslint가 내장되어 있으니 설치 파트는 건너뛰셔도 무방합니다.

1. npm install eslint --save-dev

2. npx eslint --init :: 단, package.json파일이 없는 경우 npm init을 먼저 설치할 것

*3. npx eslint 적용할 파일명 * :: ex) npx eslint test.js

4. git을 이용하는 경우에는 .gitignore 파일에 .eslintcache 추가하기

Prettier와 충돌막기 (포맷팅룰 세팅)

** 1. npm i -D prettier eslint-config-prettier eslint-plugin-prettier **

• eslint-config-prettier :: prettier와 겹치는 포맷팅룰을 삭제
• eslint-plugin-prettier :: prettier의 포맷팅 기능을 추가

** 2. 타입스크립트를 사용하는 경우만 아래의 내용을 추가 설치하시면 됩니다.** :: npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react

• @typescript-eslint/parser :: 타입스크립트 parser 사용
• @typescript-eslint/eslint-plugin :: 타입스크립트 룰 모음집
• eslint-plugin-react :: 리액트와 관련된 eslint 룰셋

** 3. root에 .eslintrc 파일을 생성하여 아래 내용을 복사 붙여넣기**

• src, public폴더와 같은 위치에 생성할 것!

{
  "extends": ["plugin:prettier/recommended"]
}

Airbnb의 eslint를 같이 쓰고 싶다면 아래와 같이 해주세요.

1) npm i -D eslint eslint-config-airbnb-base eslint-plugin-import

2) root에 .eslintrc 파일을 생성하여 아래 내용을 복사 붙여넣기

• src, public폴더와 같은 위치에 생성할 것!

{
  "extends": ["airbnb-base", "plugin:prettier/recommended"]
}

** 4. 여기서부터는 팀 컨벤션에 따라 원하는 옵션을 추가하거나 뺄 수 있습니다. **

• 추천 세팅

1) root에 .vscode폴더를 만들고 settings.json을 파일 생성한 후에 아래 내용을 복사 붙여넣기 ** settings 오타주의❗️ s빼먹으면 안됩니다❗️

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
  "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
    "javascript.format.enable": false,
    "eslint.alwaysShowStatus": true,
    "files.autoSave": "onFocusChange"
}

2) root에 .prettierrc 파일을 생성한 후 아래 내용을 복사 붙여넣기

{
  "printWidth": 100, // 한 줄에 들어갈 수 있는 글자 수 제한
  "tabWidth": 2, // tab 클릭 시 들여쓰기 = space 2번 
  "singleQuote": true, // 작은 따옴표 사용
  "trailingComma": "all", // [1, 2, 3,] 허용, false는 불허
  "bracketSpacing": true, // [1,2] → [ 1, 2 ]
  "semi": true, // 세미콜론 사용 여부
  "useTabs": true, // 탭 사용 여부
  "arrowParens": "avoid", // (x) => x를 x => x로 변환
  "endOfLine": "lf" // EoF 방식이라고 하는데 아직 이해 못함
}

• 주의사항 :: 다양한 설정파일이 존재할 경우 다음과 같은 순서로 설정이 적용됩니다. 중복되는 항목은 마지막에 적용되는 설정이 반영됩니다. settings.json → .editorconfig → .prettierrc :: eslint와 prettier 외에 다른 포맷터는 충돌을 일으킬 수 있으니 설치하지 말 것 :: Window 환경에서 delete 'cr' prettier/prettier 문제가 발생할 수 있습니다. 도움이 될만한 글을 링크로 남겨둡니다.

두 정수 사이의 합

풀이

function solution(a, b) {
  let sumA = 0;
  let sumB = 0;
  if( a > b) {
    sumA = a*(a+1)/2, sumB = (b-1)*b/2;
    return sumA - sumB;
  } else {
    sumA = (a-1)*a/2, sumB = b*(b+1)/2;
    return sumB - sumA;
  }
}

과정

1부터 n까지의 합을 계산하는 n(n+1)/2 공식을 사용했다. a와 b의 값을 비교하여 큰 값의 합에서 작은 값의 합을 빼는 방식으로 접근했다. 예를 들어 a = 5, b = 3일 때, 1 ~ 5까지의 합(sumA)에서 1 ~ 2까지의 합(sumB)을 뺐고, 반대로 a = 4, b = 5일 때는, 1 ~ 5까지의 합(sumB)에서 1 ~ 3까지의 합(sumA)를 뺐다.

풀고 나니 보다 효율적인 방법이 있을 것 같아 다른 사람들의 풀이를 살펴봤다. 그리고 난 엄청난 충격에 빠졌다.

function adder(a, b){
  return (a+b)*(Math.abs(b-a)+1)/2;
}

위의 코드는 a부터 b까지의 산술평균을 구하는 (a+b)n/2 공식을 사용했다. 여기서 n은 a부터 b까지의 더할 숫자의 개수를 의미한다. 즉 (a+b)n/2는 (a+b)(b-a+1)/2와 같다. 그리고 개수를 셀 때 음수는 필요없으므로 (b-a)의 절대값을 구하기 위해 Math.abs 메소드를 사용했다. 예를 들어 a = -10, b = 3일 때, 위의 식에 대입하면 (-10 + 3)(|-10 - 3| + 1) / 2 이므로 -7 * (|-13| + 1) / 2 = -49라는 값을 도출할 수 있다.

틈틈이 수학공부도 해야겠다.....

• npm install -g typescript :: 전역 설치

• tsc -v :: 버전 확인

• index.html 생성

• ts파일 생성 :: 타입스크립트 파일의 확장자는 ts이다. (ex. app.ts)

• tsc app.ts :: ts파일을 js파일로 변환

• tsc --init :: tsconfig.json 파일 추가 :: tsconfig.json 파일이 추가되며 duplicate function implementation 에러가 사라지는 것을 확인할 수 있다.

• tsc -w app.ts :: 자동 컴파일

• live server로 구현 내용 확인

특징

1. 다운 레벨링

ECMAScript의 하위 버전에서 상위 버전의 내용을 호환 가능하도록 변환하는 과정을 다운레벨링이라고 한다. 특정 파일을 ES6버전에 맞추고 싶다면 아래와 같이 코드를 입력하면 된다. :: tsc --target es2015 파일명 (input.ts 등)

2. 타입 추론

타입스크립트는 말 그대로 타입을 추론할 수 있다. 아래의 코드를 보자.

let test = 5;
test = 'five'; // error

변수 test에 타입을 선언하지 않았지만 5를 할당하는 순간, 변수 test의 타입은 number로 추론되었다. 다시 말해서, 컴퓨터는 let test:number = 5; 로 인식했다. 그래서 변수 test에 문자열을 할당하게 되면 error를 반환한다.

3. 타입 명시

타입스크립트는 선언할 때 데이터 타입을 명시하기 위해 만들어진 언어로, 타입 명시는 타입스크립트의 본질이라고 말할 수 있다. 타입은 string, number, string[], number[], boolean 외에도 여러가지가 있으며 선언할 때, 변수와 함수의 매개변수 그리고 함수의 반환값에 명시할 수 있다.

참고: PoiemaWeb

1) 변수

let greeting: string = 'hi';
greeting = 'welcome';

2) 함수의 매개변수

function sendGreeting(message: string, userName: number) {
  return `${message}, ${userName}`;
}
>
sendGreeting('hi', 'Jack') // hi, Jack
sendGreeting('hi', 1) // 매개변수와 타입이 다르므로 error 반환
sendGreeting('hi') // 매개변수와 인자의 수가 일치하지 않으므로 error 반환

• 특이사항 :: 매개변수와 타입이 다른 인자는 에러가 발생한다. :: 매개변수 수와 인자 수는 일치해야 한다.

2-1) 선택적 매개변수

입력을 해도 되고 안해도 되는 매개변수를 만들고 싶다면 optional을 활용하면 된다. optional로 만들고 싶은 변수(혹은 매개변수 등)뒤에 물음표를 붙여주면 된다. userName?: number 이런 식으로.

function sendGreeting(message: string, userName?: number) {
  return `${message}, ${userName}`;
}
>
sendGreeting('hi', 'Jack') // hi, Jack
sendGreeting('hi') // hi, undefined
sendGreeting('hi', 1) // 매개변수와 타입이 다르므로 error 반환

• 특이사항 :: 단, 인자가 전달되지 않으면 undefined를 반환한다. :: 선택적 매개변수는 반드시 필수 매개변수 뒤에 위치해야 한다.

2-2) 기본 매개변수

선택적 매개변수를 사용할 때, undefined가 반환되는 것을 방지하기 위해 기본 매개변수를 사용한다. 그리고 기본 매개변수를 사용하면 타입추론으로 인해 타입을 명시할 필요가 없고, 선택적 매개변수 역시 적용되지 않는다.

function sendGreeting(message = 'Hello', userName = 'there') {
  return `${message}, ${userName}`;
}
>
sendGreeting(); // hello, there
sendGreeting('Good Morning'); // Good morning, there
sendGreeting('Good afternoon', 'Jenny'); // Good afternoon, Jenny

3) 함수의 반환값

함수가 반환하는 값의 타입 또한 지정할 수 있는데, 매개변수를 지정하는 소괄호 다음에 타입을 지정하면 된다. 예를 들면 function greeting (msg = 'Hello', user = 'there'):string { } 이런 식으로 사용할 수 있다.

function sendGreeting(message = 'Hello', userName = 'there'):string {
  return `${message}, ${userName}`;
}

• 특이사항 :: 타입 void는 오로지 반환값이 없는 함수만 명시할 수 있다. :: 지정한 반환값의 타입과 실제 반환값이 다를 경우, 에러가 발생한다.

3-1) void

타입 void에는 null과 undefined만 할당이 가능하다.

단, --strictNullChecks가 true일 때는, null은 any와 null 타입에만 할당할 수 있다. (undefined는 예외적으로 void에 할당 가능)

3-2) 화살표 함수식으로 변환

const sendGreeting = (message: 'Hello', userName = 'there'):void => {
  console.log(`${message}, ${userName}`);
}

• 특이사항 :: 위의 코드와 같이 반환값이 없는 경우 반환값의 타입으로 void를 지정한다.

3-3) 객체구조의 형태로 타입을 지정

함수의 반환값을 객체 형태의 타입으로 지정할 수도 있다.

function getData(data:number):{
  studentID: number;
  studentName: string;
  gender: string;
  data: number;
} {
  return data;
}

4. 타입 단언

타입이 헷갈리지 않도록 한 가지 타입으로 단언하는 것을 말한다. 단언을 하는 방법에는 angle-bracket문법과 as문법이 있다. JSX와 함께 사용할 때는, as문법의 단언만 허용된다.

4-1) angle-bracket" 문법

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

4-2) as-문법

let div = document.querySelector('div') as HTMLDivElement // let div: HTMLDivElement
div.innerText;

단언하기 전 div는 HTMLDivElement || null의 유니언 타입을 가지고 있다. null일 경우 오류가 발생할 수 있기때문에 에러를 띄운다. 이 때 에러를 미연에 방지하기 위해 타입을 단언한다.

5. Interface

객체 형태의 타입을 지정할 때 효율성과 가독성을 높여주는 것이 바로 interface이다. interface는 ts에서 js로 컴파일할 때 삭제되기때문에 렌더링에 영향을 주지 않는다.

interface Student {
  studentID: number;
  studentName: string;
  gender: string;
  data: number;
}
>
function getData(data:number):Student{
  return {
    studentID: number;
    studentName: string;
    gender: string;
    data: number;
  };
}

• 특이사항 :: 반드시 대문자로 시작한다. :: interface의 구조와 return 값의 구조는 동일해야 한다. 만약 return 값이 interface의 구조와 다르다면 에러가 반환되는 것을 확인할 수 있다.

4-1) interface 내 메소드 사용

interface Student {
  studentID: number;
  studentName: string;
  gender?: string;
  data: number;
  addComment? (comment: string): string;     
  deleteComment?: (comment:string) => string;
}
>
function getData(data:number):Student{
  return {
    studentID: number;
    studentName: string;
    data: number;
  };
}

4-2) 읽기전용 프로퍼티

특정 프로퍼티 앞에 readonly를 붙이면 된다. 읽기전용으로 만들 경우 재할당이 불가능하다.

예제 1.

interface Student {
  readonly studentID: number;
  studentName: string;
  gender?: string;
  data: number;
  addComment? (comment: string): string;     
  deleteComment?: (comment:string) => string;
}
>
function getData(data:number):Student{
  return {
    studentID: number;
    studentName: string;
    data: number;
  };
}

예제 2.

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // 오류!
ro.push(5); // 오류!
ro.length = 100; // 오류!
a = ro; // 오류!

4-3) 선택적 프로퍼티

return할 때 interface의 내용을 빼고 싶다면?! 이 때 활용할 수 있는 것이 optional이다. 선택적 매개변수와 동일한 방법으로 사용할 수 있다.

interface SquareConfig {
  color?: string;
  width?: number;
}
>
function createSquare(config: SquareConfig): {color: string; area: number} {
  let newSquare = {color: "white", area: 100}; // 기본값
  if (config.color) {
      newSquare.color = config.color;
  }
  if (config.width) {
      newSquare.area = config.width * config.width;
  }
  return newSquare;
}
>
let mySquare = createSquare({color: "black"});

K번째 수

풀이

function solution(array, commands) {
  let answer = [];
  commands.map(el => {
    let result;
    result = (array.slice(el[0]-1, el[1]).sort((a, b) => {return a - b}))[el[2]-1];
    answer.push(result);
  })
  return answer;
}

과정

오늘 문제의 핵심은 sort였다. 처음에 sort()로 사용하며 순서를 정의하지 않고 사용하였더니 테스트 2번에서 에러가 발생했다.

sort 메소드를 사용할 때 순서를 정의하는 함수를 넣지 않을 경우에는, 비교 대상을 모두 문자열로 변환하며 유니코드를 기준으로 정렬한다.

[1, 5, 10, 20, 16]을 정렬하는 경우, 순서를 정의하는 함수에 따라 아래와 같이 결과값이 달라진다.

1. sort(); // [1, 10, 16, 20, 5] 2. sort(function(a, b) {return a - b}); // [1, 5, 10, 16, 20] :: 오름차순 (a - b) 3. sort(function(a, b) {return b - a}); // [20, 16, 10, 5, 1] :: 내림차순 (b - a)

폰켓몬

풀이

function solution(nums) {
  let trans = new Set(nums);
  let array = [...trans];
  let numsCount = nums.length/2;
  let arrayCount = array.length;
>  
  if (nums.length/2 >= array.length) {
    return arrayCount;
  } else {
    return numsCount;
  }  
}

과정

오늘의 문제의 핵심은 중복 제거였다. 위코드 초기에는 새 배열을 만들고 push, shift 메소드를 활용해 중복을 제거하는 방법을 활용했다면 이번에는 set을 활용하여 문제를 풀었다.

• set은 배열을 입력하면 중복 값을 제거하여 유일한 값만 저장한다.

1. let trans = new Set([1, 2, 3, 3]); 2. console.log(trans); // Set(3) {1, 2, 3}

• 이 값들을 배열로 변환하기 위해 스프레드 오퍼레이터를 활용한다.

3. let array = [...trans]; 4. console.log(array); // [1, 2, 3]

• 위의 과정을 축약하면 아래와 같다.

let trans = [...new Set([1, 2, 3, 3])]

위의 내용을 토대로 리팩토링을 진행했다.

function solution(nums) {
  let array = [...new Set(nums)];
  return array.splice(0, nums.length/2).length;
}

조금 더 찾아보니 위의 코드를 한 줄로 줄일 수도 있었다.

const solution = nums => [...new Set(nums)].splice(0, nums.length/2).length;

단지 효율성만을 위한 코드를 짠다면 한 줄로 줄인 코드가 최선이고, 가독성과 효율성 모두를 고려한다면 처음 리팩토링한 코드가 최선 아닐까?

오늘의 미팅 내용

오늘 한 일

• 캘린더 컴포넌트와 예약 컴포넌트 머지
• 예약 컴포넌트

기록

• 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달하는 방법 1) 부모 컴포넌트에서 함수를 선언하고, 해당 함수를 자식 컴포넌트에 props로 넘겨준다. 2) 전달받은 함수를 자식 컴포넌트에서 호출하되, 전달할 데이터를 함수의 인자로 입력한다.

문제

1. cannot update a component ('...') while rendering a different component ('...')

• 상황: 연결된 컴포넌트 또는 페이지가 동시에 렌더링이 일어나서 발생하는 오류
• 원인 :: 함수형 컴포넌트를 사용할 때, state가 컴포넌트끼리 연결되어있는 상태에서 state값이 변경되면 연결된 모든 컴포넌트에서 동시에 렌더링이 발생한다.
• 해결방안
  • state가 변하면 렌더링이 발생하므로 전달할 데이터를 변수에 담아서 전달한다.

며칠동안 state의 특성을 정확하게 이해하지 못하고, 잡힐듯말듯 애매한 상태가 지속되어 답답했었는데, 잠결에 뭔가가 머리 속을 스쳐지나가면서 단번에 이해가 되었다. 이런 경험이 처음이라 당황스럽기도 하고 새롭기도 해서 기록으로 남기기 위해 블로그에 적는다.

• 상세페이지 레이아웃 구현
• 예약 컴포넌트 레이아웃 구현
• react-datepicker 라이브러리 사용

끄적

처음으로 라이브러리를 사용했다. react-datepicker라는 캘린더 라이브러리인데 사용하기 쉬워 많이 사용되는 라이브러리라고 한다. 공식 홈페이지를 있는 코드를 참고하면 커스터마이징도 가능하다.

1. 설치 :: npm install react-datepicker --save

2. package.json 파일에서 설치 여부 확인 :: "react-datepicker": "^4.2.0" (21.08.19.)

3. 사용하려는 페이지에 import :: import DatePicker from "react-datepicker"; :: import "react-datepicker/dist/react-datepicker.css";

CSS를 커스터마이징하기 위해 크롬 개발자 도구에서 하나씩 찍어가며 클래스 네임을 파악해야 했다.

아래는 저렇게 하나씩 찍어가며 만든 결과물!!

생각보다 결과물이 너무 잘나와서 마음에 쏙 들었다. 처음에는 아무 것도 모르고 라이브러리를 통째로 뜯어서 고치려고도 했었는데 멘토님께 여쭤보니 그건 지금 할 수 있는 일은 아니라고 단호하게 말씀하셨다. 앞으로도 라이브러리를 쓸 일이 많겠지. 라이브러리를 뜯었을 때 분석할 수 있는 수준으로 얼른 성장해야지.

언젠가는 나만의 라이브러리를 직접 만들어서 쓰는 개발자가 되어야지.

오늘 한 일

• 프로젝트 주제 및 팀 공개
• 프로젝트 진행 방향 설정 :: 프론트/백엔드 간이 미팅(5분 내외) 후 팀 데일리 오전 미팅 진행 :: 오후 6시 30분 프론트/백엔드 간이 미팅 후 데일리 wrap-up 진행
• 깃허브 초기환경 세팅
• Styled Component 설치 및 초기 세팅
• 벨로그 생성
• 슬랙 채널 개설
• API 정의서 생성하기
• 상세 페이지 및 예약 컴포넌트 초기 레이아웃 구현

끄적

PM이 되었다. 하루가 어떻게 갔는지도 모르겠다. 초기 세팅하랴, 미팅 시간과 방법 정하랴, 정신이 없었다. 이번에도 깃 초기환경은 내가 세팅했는데, 역시나 문제가 생겼다.

프로젝트 폴더보다 상위 폴더에 git init을 입력하면서 프로젝트 폴더에 .git폴더가 생성되지 않았다. 이를 모른 채로 push했더니 멘토님께서 수정 리뷰를 남겨주셨다. 알아보니 Create React App을 설치하면 자동으로 해당 폴더에 .git폴더를 생성한다. 그래서 git init을 별도로 입력하지 않아도 된다. 그리고, 상위 폴더에 .git폴더가 있는 경우 하위 폴더에서 Create React App을 입력하더라도 .git폴더가 생성되지 않는다.

• 결론: git push할 경우 상위 폴더가 push되면 .git폴더가 어디 위치해있는지 찾아보자.

• 해결 방법

1. 상위 폴더에서 .git 폴더를 삭제하고 원하는 폴더에서 git init 실행한다.
2. local과 github repository를 새로 연결한다. :: git remote URL
3. git add .
4. git commit -m "first commit"
5. git push origin master --f :: --f(force)를 입력하지 않으면 push가 reject된다. :: force를 입력하면 기존의 내용 위에 강제로 덮어씌여지며 기존 내용이 사라진다.
6. github에서 업데이트 되었는지 확인

1차 프로젝트에서 종규님이 팀을 이끌던 기억을 되살려, 회고할 때 세웠던 목표를 이루었으면 한다. PM 화이팅!!

소감

우선 치킨푸드 팀원들 모두에게 다시 한 번 감사 인사를 하고 싶다. 프로젝트 중간중간에도, 마치고 나서도 인사했지만 내가 프로젝트에 대해 느끼는 긍정적인 감정의 대부분은 팀원들 덕분이라고 생각한다. '갈등이 없어서 이상하다, 이게 맞나?'라는 생각이 들 정도로 소통이 잘 되었고 서로가 서로를 배려하는 마음이 너무 잘 느껴졌다. 2차 프로젝트에서도 다들 큰 고비없이 원하는 바를 이루었으면 하는 바람이다.

마지막으로 우리 팀이 클론한 사이트의 전반적인 flow를 끝으로 소감은 마무리!

프로젝트 회고

처음으로 작성하는 회고록이다보니 막연하기도 했고, 두고두고 읽히는 회고록을 작성하고 싶었다. 그래서 선배 개발자들의 프로젝트 회고록을 참고하여 어떻게 쓸지 방향을 잡았다.

회고록은 프로젝트를 진행하며 겪은 사실을 바탕으로 내가 느낀 점을 정리하여, 우리가 더 나은 방향으로 발전하기 위해 적는 글이다. 그래서 주제를 크게 나, 프로젝트 그리고 우리로 나누어 쓰기로 했다.

1. 프로젝트

내가 프로젝트에서 맡은 파트는 로그인 페이지, 회원가입 페이지, 네비게이션 바, 그리고 마이 페이지까지 총 4가지였다.

위에서 보면 알다시피 로그인 페이지와 회원가입 페이지는 내가 원하는 방향에 맞춰, 구현하려는 기능을 모두 구현하였기에 너무나도 만족스럽게 완성되었다. '재사용성을 높인 코드를 만들겠다'는 개인적인 목표와 팀의 목표를 모두 충족시킨 페이지였다.

반면에 네비게이션 바와 마이 페이지는 아쉬운 점이 많이 남았다.

네비게이션 바는 컴포넌트가 3단계로 구성되어 있어서 동적 라우팅을 연결하려니 경로를 트래킹하기가 거의 불가능에 가까웠다. 애초에 나는 a태그를 활용해 링크를 직접 꽂아줄 계획으로 각각의 상수 데이터를 만들었다. (리액트에 대한 이해도 부족으로 발생한 대참사였다.)

Nav컴포넌트에서 상수데이터를 구역별로 각각 만들어 ListComponent와 연결시켰다. 여기까지는 괜찮았지만 문제는 subNav에서 발생했다.

subListComponent를 새로 만들어서 subCategory_list 상수 데이터를 nav → SubLiComponent → ListComponent로 전달하는 단계를 거치다보니 동적 라우팅의 경로를 지정하기가 힘들었다.

1-1) SubLiComponent의 코드

1-2) subCategory_list 상수 데이터의 코드

심지어 동적 라우팅에 익숙하지 않은 데다가, 최종 발표까지 위코드에서 의논할 수 있는 시간이 10시간도 채 남지 않은 상황이었다. 결국 우리는 발표까지 동적 라우팅을 완벽하게 적용하지 못해 몇몇 페이지를 시현하지 못했다. 팀원들이 고생하여 만든 페이지를, 기능을 보여줄 수 없다는 사실에 발표를 하면서도 큰 자괴감이 들었다. 동적 라우팅을 미리 공부했다면..., 최종 머지가 일찍 이루어졌다면..., 돌이킬 수 없는 후회가 머리 속을 한참동안 떠나지 않았다.

지금와서 여유를 가지고 생각해보면 네비게이션 바를 새로 만드는게 오히려 빠를 수도 있었고, 숙소를 잡고 새로운 대안을 찾을 수도 있었다. 문제를 발견했을 당시에 최선의 선택을 하지 못한 이유가 무엇일까?

마감이 코앞이라는 생각에 마음이 조급해져 눈앞에 보이는 문제를 해결하기에 급급했다. 생각해보면 마이 페이지도 급하게 만들어지면서 퀄리티가 많이 떨어졌다. 그리고 백신 접종 일정으로 인해 멘토님들께서 바빠지시면서 최종 머지가 지연되는 동안에도, '늦지 않게 해주시겠지'라며 대비책을 마련하지 않고 안일하게 기다리기만 했다. 이 두 가지가 가장 주요한 원인이었다고 생각한다.

#결론 요약

• 2차에서는 각각의 모듈을 완성해서 붙이는 방법이 아닌, 우선 기본적인 틀을 만들어 하나의 온전한 결과물을 만든 후에 기능을 하나씩 덧붙이는 방법으로 프로젝트를 진행해야겠다.
• 그리고 마감기한 하루 전까지는 완성하는 방향으로 계획을 짜야겠다.
• 한 가지 더, 1차 때처럼 호흡이 너무 잘맞아 여유가 생기거든 문제가 발생할 수 있는 경우의 수를 충분히 고민하고 그에 대한 대비책을 미리 마련해야겠다.

2. 우리

우리 팀은 프로젝트를 진행하며 무엇을 소통해야 하는지조차도 몰랐던 나에게, 프로젝트를 하며 소통 해야 하는 내용뿐만 아니라 소통 방법에 대해서도 알려주었다. 그 내용을 앞으로의 프로젝트에서도 활용하기 위해 정리해보았다.

1) API 정의서

프론트와 백엔드가 데이터를 주고 받을 때 JSON을 이용할 경우에는 객체의 형태를 이용한다.

만약 백엔드에서 name이라는 키 값으로 데이터를 전송했는데, 프론트에서는 키 값을 member라고 입력하고 데이터를 받으려고 한다면, 원하는 데이터를 사용할 수 없다.

키 값을 일치시키지 않을 경우 통신하는 과정에서 고생할 것이 분명하기에, 팀원 모두가 동일한 키 값을 사용하는 것이 중요하다. 이를 위해 우리 팀은 시작 단계에서 종규님의 주도 하에 API정의서를 제작했고, 트렐로에 업로드하여 프로젝트 기간동안 수시로 확인하며 무난하게 통신할 수 있었다.

• 치킨푸드 팀의 API 정의서

2) config.js

통신을 할 때 반드시 입력해야 하는 것이 하나있다. 바로 서버의 IP주소다. 우리의 서버는 유동IP였기에 매일 IP주소를 갱신해야 하는 불편함이 있었다. 한 두 개를 수정할 때는 그런가보다 했는데 점점 수정사항이 늘어날수록 오타가 증가하는 등 IP주소를 바꾸는 일이 스트레스로 다가왔다. 이를 한 번에 해결할 수 있는 것이 config.js다. config.js는 IP만을 관리하는 환경 변수 파일인데, IP를 변수에 할당해서 사용하기때문에 일일이 바꿀 필요없이 변수 값만 변경해주면 된다. 심지어 common.scss처럼 공용으로 사용하니 팀원 모두가 사소한 일로 스트레스 받는 일이 줄어들었다.

3) 시각 자료

우리 팀의 경우에는 시각 자료를 다양하게 활용하는 모습을 볼 수 있었다. 미팅시간이 되면 프론트 멤버들은 노트와 볼펜을 챙겼고, 백엔드 멤버들은 노트북을 챙겼다. 프론트가 노트와 펜으로 그려가며 설명했다면, 백엔드는 keynote와 excel을 활용해 데이터를 정리하여 설명했다. 그리고 미팅이 끝나면 PM이 트렐로에 미팅 내용을 정리하여 업로드했다.

• 키노트

• 노트

• 정리

이렇듯 우리 팀의 소통은 과정과 끝이 명확했다.

LOVE면담 때까지만 하더라도 원활한 소통을 위해서는 지식이 중요하다고 생각했다. 소통은 구두로만 이루어지는 것이고, 상대방을 이해시키기 위해서는 상대방의 언어로 말해야만 한다고 생각했다. 우리 팀이 소통하는 방법을 관찰하기 전까지는 말이다.

2차 프로젝트에서는 시각 자료를 활용하고, 미팅 내용을 기록했을 때 1차와 달리 다른 문제가 발생하지는 않는지 관찰해봐야겠다.

#결론 요약

• 시각 자료 활용하기
• 기록으로 남기기
• 상대방의 말을 정확히 이해한 것이 맞는지, 그 자리에서 내가 이해한 내용을 상대방에게 얘기하기

3. 나

나에 대한 부분은 수정보완하여 업데이트 예정!

• 발표 준비
• ppt 마무리
• 최종발표
• 이력서 작성
• 회고록 작성

끄적

페이지 개개인의 완성도는 치차하고 통일성이 가장 아쉬움 원인

1. 서로의 코드에 대해 살피지 않았다. 코드의 기능이 잘 작동하는지를구두로만 확인

2. 시간이 촉박 (멘토님들의 백신접종 일정으로 인해 머지가 늦어짐)

3. 프론트끼리 머지를 해서 기본 레이아웃을 기반으로 코드를 짜야함

4. 나는 효율적인 코드라고 생각했지만 팀원들이 읽기는 힘들어헸다

5. 리팩토링하며 코드의 재사용성에 대해서만 고려하고 동적 라우팅에 대한 고려를 하지 않았다. (url은 변하지 않기에 상수데이터에 입력 후 link로 연결하려고 했다)

6. 재사용성은 활용할 만큼 활용해볼 수 있어서 익숙해지기도 했고 재밌었다

공통

• CRA를 사용한 초기 세팅
• common.scss 제작

네비게이션 바

• 공통 Nav UI 구현
• 로그인 상태에 따라 버튼 레이아웃 변경
• Local Storage에서의 토큰의 여부를 통해 로그인 여부 확인
• Local Storage에서 토큰을 삭제로 로그아웃 기능

로그인/회원가입 페이지

• 회원가입+로그인 페이지 UI 구현
• fetch를 이용해 백엔드와 통신하여 회원가입 페이지에서 아이디 중복체크 및 추천인 확인 기능 구현
• 필수입력 사항 미입력시 회원가입 불가 기능 구현
• 회원가입페이지에서 비밀번호 일치 여부 검사 기능 구현
• 사용자 인증(Authentication) 완료에 따른, Local Storage에서의 access token(JSON Web Tokens) 관리

마이페이지

• 마이페이지 UI 구현
• 사용자 인증(Authentication) 완료에 따른, Local Storage에서의 access token(JSON Web Tokens) 관리

• 프론트엔드 최종 merge
• nav 동적 라우팅
• 세세한 오류 수정
• 1차 프로젝트 최종 발표 준비
• ppt 작성

끄적

저녁시간이 다되어 최종 merge가 이루어졌다. 그 전에 각각의 페이지가 백엔드와 통신이 이루어지고 기능이 모두 정상적으로 구현되는 모습을 확인까지 하고 merge를 했다. 물론 라우팅과정에서 문제가 발생할 거라고 예상은 했지만, 예상보다 문제가 컸다.

애초에 네비게이션 컴포넌트는 재사용성을 중심으로, 페이지의 경로를 각각 지정할 계획으로 리팩토링했다. 동적 라우팅의 존재 자체를 몰랐기에, 상수 데이터 파일을 만들어 경로를 직접 지정해줄 계획이었다. 그렇게 리팩토링은 지난 주에 끝났는데, 지난 화요일에 동적 라우팅에 대한 세션이 진행되며 나는 1차 멘붕에 빠졌다. 성훈 멘토님과 상의한 결과, 내 nav코드에서는 경로를 직접 지정해주는게 낫겠다는 결론이 나왔다. 이 때 이 내용을 팀원들과 공유했다면 미리 해결할 수 있었을까.

그렇게 최종 merge가 되고 SubNav(아래 이미지의 동그라미 친 부분)에서 동적 라우팅으로 다른 페이지에 접근하려 하면서 문제가 생겼다.

내 코드는 하나의 ListComponent에 1번, 2번, 3번 각각의 상수 데이터를 연결해 다양한 곳에서 활용할 수 있도록 재사용성을 높이는 데에 초점을 맞췄다.

• 하지만 subCategory_list 상수 데이터를 nav → SubLiComponent → ListComponent로 전달하는 단계를 거치다보니 동적 라우팅의 경로를 지정하기가 힘들었다.

간략히 내 코드를 보자면,

1) nav 컴포넌트(부모)에서 map을 활용해서 SubLiComponent에 subCategory_list의 데이터를 전달하는 코드

1-1) SubLiComponent의 코드

1-2) subCategory_list 상수 데이터의 코드

아직 해결이 되지 않아 내일 발표 전까지 수정해보고, 대안에 대해서도 고민해봐야할 듯 하다.

끝❗️

• 데이터와 토큰 받아서 mypage에 userName 입력하기

끄적

• commons.scss의 내용을 다른 scss파일에서 사용하기 위해서는 scss파일에서 common.scss파일을 import해야 한다.

• a태그를 div 태그로 바꾸고 onclick 이벤트 부여하는 방법을 쓸 수도 있다. :: a태그는 페이지 새로고침이 발생 :: link태그와 a태그, onclick 이벤트 각각 어떤 차이가 있는지 찾아봐야겠다.

오늘 처음으로 토큰을 다뤄봤다.

• 주의할 점 1) URL 체크 사항 :: http:// :: :8000

  submitUserInfo = e => {
    // e.preventDefault();
    fetch('http://10.58.1.207:8000/members/agreement', {
      method: 'POST',
      body: JSON.stringify(this.state.userInfo),
    })
      .then(response => response.json())
      .then(result => console.log('결과: ', result));
  };

로그인 성공 시 토큰 받아서 localStorage에 저장하는 코드

fetch('LOGIN_API', {
  method: 'POST',
  body: JSON.stringify({
    email: this.state.email,
    password: this.state.password,
  })
})
  .then(res => res.json())
  .then(res => {
    if (res.message === 'SUCCESS') {
      localStorage.setItem('token', res.access_token);
      this.props.history.push('/main');
    } else {
      alert('다시 입력해주세요!')
    }
  })

저장된 토큰 사용하는 방법

fetch('UPDATE_CART_API', {
  method: 'POST',
  headers: {
    Authorization: localStorage.getItem('token'),
  }
  body: JSON.stringify({
    cartId: this.state.cartId,  
  })
})
.then()
.then()

• signup 아이디 중복체크 기능, 백엔드와 통신 완료
• signin 페이지 리팩토링
• conflict 해결

끄적

어제 wrap-up 미팅에서 오늘 멘토님께서 merge해주시면 conflict해결 후에 전반적으로 수정하자는 얘기를 했다. 그런데 멘토님들의 백신 접종 일정때문에 오후 6시까지 merge가 되지 않아 본의아니게 시간이 붕 떠버렸다. 무엇을 해야 할 지 찾아헤매다가 로운님께서 도움을 요청하셔서 한동안 로운님을 도와드렸다. 계획이 틀어진 상태에서 갑자기 개인 공부를 하자니 글이 눈에 들어오지를 않았다. 위코드 기간동안 라운지를 배회한 적이 없었는데.... 그런데 나만 그런게 아니라 동기 대부분이 오늘따라 루즈한 것처럼 느껴졌다. 그러다가 wrap-up 미팅 직전에 성훈 멘토님이 merge해주겠다는 말씀을 해주셔서 wrap-up 미팅 때 전반적인 계획을 수정했다. 회원탈퇴 기능까지 구현해보는게 2차 스프린트 목표였는데, 각자 현재 맡은 바를 먼저 끝낸 팀원이 회원탈퇴 기능 구현을 시도하고 수요일(11일)자정까지 구현한 기능만 소개하기로 했다.

미팅 후 간단히 저녁을 먹고 본격적으로 바빠지기 시작했다. conflict를 해결하는 것이 1차 과제였고, SignUp에서 만든 컴포넌트를 활용해 SignIn페이지를 리팩토링 하는 것이 내 2차 과제였다.

• conflict 해결하기

처음에는 master(main)에서 pull을 하지 않고, 브랜치에서만 conflict를 수정했다. 그랬더니 push하더라도 conflict가 제대로 해결되지 않아 merge를 할 수가 없었다.

conflict를 해결하기 위해서는 아래와 같은 절차를 거쳐야했다.

1) git switch master :: master(main)으로 이동 2) git pull origin master :: local master에 github master를 내려받기 3) git switch 브랜치명 :: 브랜치로 이동 4) git merge master :: 브랜치와 master(main) 병합 5) conflict 발생 6) conflict 수정

github master의 내용을 local master와 브랜치에 업데이트하는 과정이 끝났다.

7) git add . 8) git commit 9) git push origin 브랜치명

conflict 해결

저게 해결되면 merge가 가능하다는 이미지를 볼 수 있다. 만약 merge를 막아놓은 경우 아래와 같은 이미지를 확인할 수 있다.

끝❗️