[2주차] 주간회고록

🗺️ 2주차 (24.02.21 - 2.27)

 

🪴 핵심 3줄 요약

- 리액트 기억 되살리기 솔솔 

- 시간 분배 잘 하는 연습하기

- 계획 미리 세우고 확인하면서 공부하기

 

🎠 이번 주 목표 

✅ 리액트 기초 강의 해당 범위 듣기

✅ 챌린지 올출하기

✅ 주간회의 참여하기

 

🥞 칭찬하고 싶은 점

- 과제, 퀴즈 제출 한 점

 

 

🍆 고치거나 버려야 할 점

- 시간 분배 잘 못하는 점. 해야 할 것이 있을 때 하던 일 그만 두는 연습을 해야겠다. 

 

 

🍬 일일 스프린트 모음

📆 2/21 (수)

✅ 주간 회고록 수정 & 제출

✅ 챌린지 제출

☑️ 리액트 기초 #4.0-4.3

☑️ 리액트 기초 #5.0-5.1

 

📆 2/22 (목)

✅ 퀴즈 제출

☑️ 리액트 기초 #4.0-4.3

☑️ 리액트 기초 #5.0-5.1

 

📆 2/23 (금)

놀러갔다네

 

📆 2/24 (토)

☑️ 리액트 강의 밀린 것 듣기 - #4.0-5.2

 

📆 2/25 (일)

☑️ 졸작 재출

 

📆 2/26 (월)

✅ 퀴즈 제출

 

📆 2/27 (화)

✅ 퀴즈 제출

 

 

💐 이번 주 배운 내용

 

🍊 기억하고 싶은 내용

1. useMemo()

최적화를 위해 useMemo() 를 활용할 수 있다. 

만들어놓은 컴포넌트를 React.memo(컴포넌트 이름) 이렇게 memo 안에 넣으면, 

해당 컴포넌트의 부모 컴포넌트가 리렌더링 될 때 변화한 UI 가 없다면, 

해당 컴포넌트는 re-rendered 되지 않는다. 

 

2. props 의 기본 값 설정해주기 (JS) & 타입 설정해주기 - propTypes 사용

props 를 받아오면서 = 로 값을 넣어주면 따로 보내주지 않았을 때 기본 값으로 설정된다. 

이건 리액트가 아니라 JS 문법이지만 까먹어서 멤모

 

 

3. css - module 사용법

이렇게 하면, 

Button.module.css 라는 파일 안에 있는 .btn 클래스를 적용할 수 있다. 

 

그럼 랜덤한 class name 을 갖게 된다. 

그렇기에 똑같은 className 을 다른 파일 내에서도 사용할 수 있다. 

CRA 의 기능. 

 

4. useEffect()

https://react.dev/reference/react/useEffect

useEffect – React

컴포넌트는 기본적으로 state 의 값이 변경되면 재렌더링이 된다. (function 내에 있는 코드가 다시 실행됨.)

다시 render 될 때마다 반복 실행되어도 괜찮은 코드가 있을 수도 있지만 이렇게 하지 않고, 

component 가 처음 render 될 때만 코드가 실행되길 원할 수도 있다. 

가령 API 를 통해 데이터를 가져올 때, 이후에 state 가 변화할 때 굳이 같은 API 에서 데이터를 가져오고 싶진 않을거임. 

[] 안에 변했을 때 렌더되길 원하는 state 를 넣어주면 된다. 

 

5. 우분투에 git 설치

최근에 노트북을 포멧해서 우분투 세팅을 다시 하고 있다. 

(1) 깃 설치하기

sudo apt install git

비밀번호 입력하면 설치된다.

(2) 잘 설치됐는지 git 버전 확인하기

git --version

(3) push 할 때 올라갈 내 정보 입력해주기

git config --global user.name 이름

git config --global user.email 이메일

 

*여기부턴 레포지토리 생성 시 알려주는 것과 동일

(4) git 저장소 만들기

git init

(5) 만든 프로젝트 repository 와 연동하기  

git remote add origin 깃레포지토리주소

 

 

6. VS code prettier 세팅 - 아래 참조해서 세팅

https://green-grapes.tistory.com/entry/VSCode-prettier-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

[VSCode] prettier 설정하기

 

7. VS code 에서 깃허브로 push 하려고 하는데 생긴 오류

 

..? 아까 입력 다 했는데

 

 

알고 보니 Name 과 Email 모두 " " 따옴표 안에 써줘야 했다... 머쓱~

^_^;

 

8. 다른 페이지로 이동하거나, 새로고침 시 이미지가 사라지는 (엑박뜨는) 오류와 해결

이전 기수에서도 과제를 하면서 Header 에 png 형식의 로고를 넣곤 했는데, 

디즈니 과제 때도 그렇고 Header 에 딱! 자리잡고 있어야 할 로고가 자꾸 사라져서 짜증났던 기억이 있다.

근데 왜그러지 하고 기능 잘 되니까 넘어갔었다가 이번에도 그러길래 찾아봤다. 

(참고로 require 을 붙여도 해결되지 않았다. 오히려 react 가 오류라고 얘기함)

원인은 src 에 직접적으로 이미지 path 를 적어준 것. 

처음 작성한 코드

      <Link to="/">
        <img src="src/assets/marvel_full.png" alt="MARVLE" />
      </Link>

 

수정한 코드

import logo from '../assets/marvel_full.png';

export default function Header() {
  return (
    <div className="">
      <h1>Fetured</h1>
      <Link to="/">
        <img src={logo} alt="MARVLE" />
      </Link>

이렇게 

이미지를 logo 라는 변수로 import 해준 뒤, src 에 변수를 넣어줬다. 

이제 Header 가 뜰 때마다 로고라는 변수를 계속 사용하기 때문에 이미지를 잘 가져오게 됐다. 

음 근데 완전하게 이해는 안돼서 다시 찾아봐야 할 것 같다. 

 

 

 

 

 

 

⛳ 질문

 

 

 

 

👟 주간 회의와 조별 활동

- 재환님이 TA 로 계신 2조로 편성됐다! 햄뿡이를 좋아하신다. 

 

 

 

 

🌵 생각 기록

지난 10주 스터디 때와 다르게, 이번엔 강의를 하나씩 다 듣고 있다. 

잠시 공부를 안해서 까먹은 것도 있지만, 다시 들어보니 처음 공부할 때랑 전혀 다른 느낌이다. 

처음엔 잘 이해가 안됐었고, 이후에 10주 스터디를 할 땐 강의를 안듣고 프로젝트를 했다. 

당시엔 나름의 도전이고 답지를 보지 않고 스스로 만들어보겠다는 각오였지만 

요 며칠 강의를 다시 보면서 아 내가 아는 게 별로 없었구나, 이전에 강의를 제대로 듣지 않았구나 하는 깨달음 뿐이다.

요약하자면 아, 오만했구나. 하는 탄식. 

 

더불어 현재로썬 전반적인 리액트가 익숙하기에 훨씬 재밌게, 그리고 빠르게 듣고 있다. 

'아 맞다 싶은 내용만 필기를 하고 나머지는 오 저렇게 하면 됐었지 끄덕끄덕' 하면서 듣고 있는데, 

강의를 들으면서 참 재밌구만! 이라고 느낀 건 처음인 듯 싶다. (코코아톡 이후에)

해야해서 하는 공부가 아니라 필요해서 하는 공부의 마인드는 이렇게 다르구나 느끼고 있다. 

그리고 취업 마지노선 기간을 없앴다. 

이 점도 즐겁게 공부하는 데 큰 도움이 되고 있다. 우선은 취업보단 개발 공부에 재미를 붙여보려고 한다. 

그렇다고 이전에 했던 노력들이 수포로 돌아가는 건 아니니까...!

 

 

 

라고 썼지만 요 며칠은 집중을 못했다.