[TIL] 리액트 숙련 주차 시작 221202

터미널 꾸미기, 예쁜 게 최고야!

미련 못 버리고 다시 건드린 oh my zsh(z-shell)! 파일을 다 지우고 다시 설치했다. 노마드 코더 아저씨의 강의를 보며 하나하나 따라하고 에러가 나면 해결될 때까지 폭풍 구를링을 했다. 예쁜 사과와 아이콘들이 잘 보인다! 🍎📂🏠  너무 뿌듯해서 바로 캡쳐했다.

그런데 리액트 파일을 실행하니 한글이 다 깨져서 보였다.

"fontFace": "MesloLGS NF",

그래서 저 부분을 추가했더니 해결됐다.

 

- zsh path 경로가 안 맞아서 code . 이 터미널에서 실행이 안되는 문제도 있었는데 terminal.integrated.profiles.widows 안에 있는 path : "(여기)"를 지우니 해결됐다. (이제 터미널로 vscode를 실행할 수 있고 파일/폴더 만들기, 파일명 수정, 파일/폴더 삭제가 가능하다)

VS Code <- Terminal 명령어

• mkdir [폴더명] : 폴더 만들기
• touch [파읾명] : 파일 만들기
• mv [옛파일명] [새파일명] : 파일명 변경
• rm [파일명] : 파일 제거
• rm -rf [폴더명] : 폴더 제거

- "terminal.integrated.defaultProfile.window" : "zsh" 이건 아예 추가해야 하는 걸 몰랐는데 (역시 동사나사) 신원님이 알려주셨다.

 

- terminal.integerated.fontFamily에서 powerlevel10k의 'Meslo ~ '말고도 'Ubuntu ~ Powerline'처럼 powerline폰트를 추가해 줘야 한다. 여기는 터미널의 폰트를 지정하는 곳이다.

 

- editor.fontFamily 여기도 'Meslo ~'를 써줘야 한다. 나는 vscode 기본 서체를 다 지웠다가 다시 적었는데 기본 서체는 그냥 두고 추가만 하는 걸 추천한다. 이 부분은 vscode의 폰트를 지정하는 곳이다. (json파일 말고 settings에서 추가할 수도 있음)

 

- files.AutoGuessEncoding 이 부분은 settings에서 ~encoding 을 체크하면 된다. (json에서는 true라고 나옴)**

 

*scheme 부분들이 적용 안 돼서 색이 옅어졌는데 저걸 설정하다가 시간이 너무 지나서 애써 못 본 척 했다. (내킬 때 찾아보고 바꿀 예정..)

 

아 설정할 때 계속 zshrc 파일을 열어야 하는데 (mac 기준) 이 명령어를 치면 이 파일의 텍스트를 편집할 수 있는 창이 나온다.

open -a TextEdit ~/.zshrc

 tree 설치, 신기해!

이렇게 설치하면 파일 구조를 한 눈에 볼 수 있다. 신기했다. 저렇게 캡쳐해 놓으면 나중에 프로젝트를 깃허브에 올리고 README를 꾸밀 때 프로젝트 구조를 설명할 때 좋을 것 같다. 

 

https://pongsoyun.tistory.com/123

Mac 터미널에서 파일구조 트리로 확인

VS CODE 명령어

- shift로 바꾸고 싶은 코드 선택하고 ctrl + d 하면 동시에 선택된 값들이 바뀜

- 한 줄로 만들기 ctrl + j

- alt + cmd + 키보드 위아래 화살표 : 해당 줄의 코드들 다 선택됨

- alt + 키보드 위아래 화살표 : 해당 줄의 코드가 위아래로 이동함

- alt + shift + 키보드 위아래 화살표 : 위아래로 복사

map( )

      {boxList.map((box, index) => {
        return (
          <StBox key={index} borderColor={box}>
            {getBoxName(box)}
          </StBox>
        );
      })}

 

map(( ) => {return(<comp>)}) 이렇게 콜백함수를 쓸 때는 {}로 안에 return까지 넣어줘야 함

 

      {boxList.map((box, index) => (
        <StBox key={index} borderColor={box}>
          {getBoxName(box)}
        </StBox>
      ))}

 

map({( ) => (<comp>)) 함수를 넣지 않으면 () 이렇게 괄호를 써야 함!!!

 

+ 리액트에서 map을 사용하여 컴포넌트를 반복 렌더링 할 때는 반드시 컴포넌트에 key를 넣어줘야 합니다.

key가 필요한 이유는 React에서 컴포넌트 배열을 렌더링했을 때 각각의 원소에서 변동이 있는지 알아내려고 사용하기 때문입니다. 만약 key가 없다면 React는 가상돔을 비교하는 과정에서 배열을 순차적으로 비교하면서 변화를 감지하려 합니다. 하지만 key가 있으면 이 값을 이용해서 어떤 변화가 일어났는지 더 빠르게 알아낼 수 있게 됩니다. 즉, key값을 넣어줘야 React의 성능이 더 최적화 됩니다.

 

key는 아래와 같이 넣어주면 됩니다. props 처럼 생겼지만, props로 설정하지 않아도 key를 넣을 수 있습니다.

  <div style={style}>
      {users.map((user) => {
        return <User user={user} key={user.id} />;
      })}
    </div>

그리고 간혹 map((value, index)=>{}) 처럼, map에서 지원해주는 index를 사용해서 key를 넣는 경우가 있습니다. 이것은 좋지 않은 방식이니 지양하시길 바랍니다. 지양하는 이유에 대해서 리액트 공식문서에서 이렇게 언급하고 있습니다.

 

https://ko.reactjs.org/docs/lists-and-keys.html#keys

리스트와 Key – React

👊🏻 오늘 한 일

• 터미널, vscode 환경 설정
• 10:30 ~ 12:30 하체 웨이트
• React 숙련 주차 강의 듣기
• JS 기본, React 입문 ~ 숙련 주차 notion 읽기
• React 입문 주차 팀 과제 개념들 복습

😲 오늘 느낀 점

나는 동영상 하나보다 책 한 권을 읽는 게 더 좋다. 글로 읽는 게 더 이해가 잘 된다.

지금 당장은 이해가 다 안 돼도 콩나물 물 주듯 계속 보면 조금씩 알게 되겠지?..  

새벽에 크리스마스 캐롤을 들으며 공부했다.

공부할 게 진짜 너무 심각하게 많다 ^^

👏🏻 오늘의 칭찬

미뤘던 거 했음

🤔 오늘 아쉬운 점

11시 언어스터디 였는데 깜빡했었다. 알고리즘을 못 풀었다.

⛵️ 내일 할 일

• React 숙련 주차 강의 듣기
• React 숙련 주차 퀴즈
• [노마드 코더] React 강의 듣기
• [프로그래머스] 34. 모의고사 git pus