코드잇 스프린트 8주 차 후기

코드잇 스프린트 4기

 

기간

2024-02-12 ~ 2024-02-17

 

과제

팀 데일리 미션: 매일 팀마다 1명이 1개의 질문을 하고 나머지 팀원들이 답변

위클리 미션: 주마다 배운 내용을 바탕으로 스프린트 과정 동안 만들어가는 개인 프로젝트

위클리 페이퍼: 주마다 정해진 2개의 주제에 대해 조사

 

학습

토픽 18. React로 웹사이트 만들기

토픽 19. Styled Components

 

스터디

codingTest: 매 주 월, 목 코딩 테스트 문제 1개 풀이

으쌰으쌰: 매일 모던 자바스크립트 Deep Dive 책 정해진 진도 공부 후 정리

 

후기

그동안 웹 사이트에 하나의 페이지만 있는 구조로 위클리 미션이 진행되었었다.

이번 8주 차 위클리 미션에서는 /shared, /folder 페이지가 나뉘어 처음으로 여러 페이지가 있는 구조로 작업을 했다.

 

컴포넌트를 나누는 이유가 재사용을 염두에 두는 것인데 현재 내 컴포넌트 구조는 재사용 하기가 힘들다.

나름 이번에는 styled-components도 적용해 봤는데 아직 크게 와닿지 않는 상태다. 분명 Button 컴포넌트를 만들었는데 비슷하지만 미세하게 다른 button에 어떻게 Button 컴포넌트를 사용해야 할지 모르겠다.

그리고 어디서 state를 관리하고 props를 내려줘야 할지 생각도 잘 나질 않고 컴포넌트를 왔다 갔다 하면서 머릿속이 어지럽고 꼬이고 있다.

 

솔직히 지금 많이 어렵다...

 

작은 구조의 컴포넌트로 연습하면서 state, props 감을 잡아야겠다.

 

현재까지 위클리 미션으로 진행하는 프로젝트 폴더 구조.

Linkbrary
 ┣ public
 ┃  ┗ index.html
 ┗ src
    ┣ assets
    ┃ ┗ card_default.png
    ┣ components
    ┃ ┣ Button
    ┃ ┃ ┣ Button.jsx
    ┃ ┃ ┗ index.js
    ┃ ┣ Card
    ┃ ┃ ┣ Card.css
    ┃ ┃ ┣ Card.jsx
    ┃ ┃ ┣ CardList.jsx
    ┃ ┃ ┗ index.js
    ┃ ┣ Icon
    ┃ ┃ ┣ svg
    ┃ ┃ ┃ ┣ sns
    ┃ ┃ ┃ ┃ ┣ IconFacebook.jsx
    ┃ ┃ ┃ ┃ ┣ IconInstagram.jsx
    ┃ ┃ ┃ ┃ ┣ IconTwitter.jsx
    ┃ ┃ ┃ ┃ ┗ IconYoutube.jsx
    ┃ ┃ ┃ ┣ IconKebabMenu.jsx
    ┃ ┃ ┃ ┣ IconLink.jsx
    ┃ ┃ ┃ ┣ IconLogo.jsx
    ┃ ┃ ┃ ┣ IconSearch.jsx
    ┃ ┃ ┃ ┗ IconStar.jsx
    ┃ ┃ ┗ index.js
    ┃ ┣ Layout
    ┃ ┃ ┣ Footer
    ┃ ┃ ┃ ┣ Footer.css
    ┃ ┃ ┃ ┣ Footer.jsx
    ┃ ┃ ┃ ┗ index.js
    ┃ ┃ ┣ Header
    ┃ ┃ ┃ ┣ Header.css
    ┃ ┃ ┃ ┣ Header.jsx
    ┃ ┃ ┃ ┗ index.js
    ┃ ┃ ┣ index.js
    ┃ ┃ ┣ Layout.css
    ┃ ┃ ┗ Layout.jsx
    ┃ ┣ SearchBox
    ┃ ┃ ┣ index.js
    ┃ ┃ ┣ SearchBox.css
    ┃ ┃ ┣ SearchBox.jsx
    ┃ ┃ ┣ SearchBoxLink.jsx
    ┃ ┃ ┗ SearchBoxLink.styled.js
    ┃ ┗ Tab
    ┃ ┃ ┣ styles
    ┃ ┃ ┃ ┣ Tab.styled.js
    ┃ ┃ ┃ ┗ TabList.styled.js
    ┃ ┃ ┣ index.js
    ┃ ┃ ┣ Tab.jsx
    ┃ ┃ ┗ TabList.jsx
    ┣ contexts
    ┃ ┗ LoginContext.jsx
    ┣ hooks
    ┣ pages
    ┃ ┣ Folder
    ┃ ┃ ┣ FolderPage.jsx
    ┃ ┃ ┗ FolderPage.styled.js
    ┃ ┣ Landing
    ┃ ┃ ┣ LandingPage.css
    ┃ ┃ ┗ LandingPage.jsx
    ┃ ┗ Shared
    ┃ ┃ ┣ SharedPage.css
    ┃ ┃ ┗ SharedPage.jsx
    ┣ utils
    ┃ ┗ date.js
    ┣ api.js
    ┣ App.css
    ┣ App.jsx
    ┗ index.js

 

 

감사합니다.