[유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 - 1주차 회고 및 배운 것

 

React를 공부하기 위해 혼자 프로젝트를 만들려고 할 때, 백엔드가 필요할 때가 생겨서 Next.js에 관심이 생겼다..

그래서 좋은 기회로 Next.js를 배우고, React와 Next.js를 활용해 프로젝트까지 진행하는 프론트엔드 프로젝트 캠프에 참여했다! 벌써 시작한지 일주일이 지났는데, 사실 이번주는 면접 준비 + 면접 때문에 5일 중에 3일밖에 참여하지 못했다

하지만, 그 사이에 생각보다 많은 것을 배우고 생각해 볼 수 있었다

 

 

 

---

🙋‍♀️배운것들

src 폴더 구조(index를 곁들인..)

이전 프로젝트들에서도 협업에서 가장 신경 쓰였던 부분은 폴더 구조였다.

 

처음 배울 때에 따라 자신만의 스타일을 갖고 있다고 생각해서 결국엔 협업과정에서 서로 설득하고 맞춰가야 하는 부분이라고 생각한다. 직전 프로젝트에서는 atomic design을 적용해서 Page, Template, Organism, Molecule, Atom... 등 단위 별로 폴더 구조를 만들었다. 추가적으로 api, hooks, assets 등도 폴더를 따로 만들어서 관리했다.

 

 

사실 이번 실습에서도 비슷한 구조로 만들기는 했지만, 조금 더 폴더 구조를 명확히 해서 재사용성을 높일 수 있었다고 생각한다. 특히, 각 폴더마다 index.ts를 둬서 import할 때의 경로를 훨씬 더 보기 편하게 둔 것이 나중에도 사용할만한 좋은 방법인 것 같다.

// components/index.ts

/** 공통적으로 사용되는 컴포넌트 */
export { Header } from "./common/header/Header";

/** HOME 페이지에서 관리하는 컴포넌트 */

export { GetTodayWidget } from "./home/GetTodayWidget";
export { GetHourlyWidget } from "./home/GetHourlyWidget";
export { GetKakaoMapWidget } from "./home/GetKakaoMapWidget";
export { GetTodayHighlightsWidget } from "./home/GetTodayHighlightsWidget";
export { GetDayItem } from "./home/GetDayItem";

/** UI 기초 컴포넌트 */
export { Avatar, AvatarImage, AvatarFallback } from "./ui/avatar";
export { Button, buttonVariants } from "./ui/button";
export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardDescription,
  CardContent,
} from "./ui/card";
export { Input } from "./ui/input";
export { Separator } from "./ui/separator";
export { SearchBar } from "./ui/search-bar";

export { GetSunriseAndSunset } from "./home/GetSunriseAndSunset";
export { GetWavesWidget } from "./home/GetWavesWidget";
export { GetWeekWidget } from "./home/GetWeekWidget";

이런 식으로 컴포넌트 폴더 안에 index.ts를 만들고 해당 폴더에서 사용되는 모든 함수를 가져와서 export를 해준다.

// 컴포넌트를 사용하고자할 때 경로가 직관적임

import {
  Header,
  GetTodayWidget,
  GetHourlyWidget,
  GetKakaoMapWidget,
  GetTodayHighlightsWidget,
  GetWeekWidget,
} from "@/components";

그러면 해당 컴포넌트를 사용하고자 할 때, import문이 길어지지도 않고 + 경로가 직관적이라 협업에서 더 효과적일 것 같다.

 

 

useState, useMemo, useEffect

React를 쓰다 보면 자주 쓰게 되는 3 대장 같은 느낌의 리액트의 훅이다. useMemo 말고 나머지 두 개는 자주 썼는데, 막상 이게 뭔지 설명하라고 하면 하기 힘들었었다. 이번주에 리액트의 기초부터 다시 하면서 왜 쓰는지, 뭔지, 어떻게 쓰는지에 대해서 다시 생각해 볼 수 있었다.

 

 

💛 useState

useState는 리액트의 함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 훅이다.

이전 클래스 형 컴포넌트에서는 this를 사용했지만, 함수형 컴포넌트에서는 useState를 사용한다.

const [상태값, 업데이트함수] = useState(초기값)

• 초기값은 컴포넌트가 랜더링 될 때 한 번만 사용됨
• 상태값은 변경될 때마다 재랜더링( = 상태값이 변경되면 해당 상태를 사용하는 컴포넌트가 다시 랜더링 됨)
• 업데이트 함수는 비동기적임!!!!

 

 

💙 useMemo

useMemo는 리액트에서 성능 최적화를 위해 사용되는 훅으로, 계산 비용이 큰 값을 메모이제이션(캐싱)합니다.

const 메모이제이션된값 = useMemo(() => 계산할_함수(), [의존성배열]);

• 의존성 배열의 값이 변경될 때만 계산할 함수가 다시 실행됨
• 불필요한 계산을 방지하여 성능 향상
• 주로 복잡한 계산이나 큰 객체 생성 시 사용

 

💚 useEffect

함수형 컴포넌트에서 부수효과를 처리하는 데에 사용되는 리액트의 훅, 컴포넌트가 랜더링 될 때, 상태가 업데이트될 때, 언마운트될 때 등의 시점에서 특정 작업을 수행

useEffect(() => {
	실행할 함수
}, [의존성배열])

• 컴포넌트가 랜더링 된 이후에 실행됨 
• 두번째 인자인 의존성 배열의 값이 바뀌면 실행됨
• 의존성 배열이 빈 배열이라면 컴포넌트가 마운트될 때 한 번만 실행됨

---

🙎‍♀️1주차 회고

사실 react를 또 한다고 했을 때, 이미 프로젝트를 세 번이나 했는데 얻어가는 게 있을까? 라는 생각이 먼저들긴했다...

하지만, 막상 강의를 듣는데 useState가 뭐죠? 하면 할 대답이 없다는 걸 깨달았다. 특히 이번주에 면접이 있어서 기술면접을 대비하는데 그런 기초적인 내용과 내 언어로 풀어서 설명하는 방법을 배울 수 있었다.

 

아쉬운 점은 아무래도 인생 첫 면접에 떨려서 많이 집중을 못했다는 점..... 심지어 이틀이나 수업을 못들었다는 점이 아쉽다. 왜냐면 이틀 빠지고 다음날 수업듣는데 진도가 빨라서 그런가 따라가는 게 좀 힘들었다..

 

2주차에는 react를 조금만 더 이렇게 저렇게 활용하는 방법을 배우고 빠르게 Next.js를 공부해보고 싶다. 그리고, 강의에 최대한 빠르게 잘 따라가는 것이 목표이다... 하다보면 종종 에러가 떠서 진도를 놓칠뻔 했적이 많다..

 

전체적으로 알찼다...!!! 첫날 마곡 한 번 가보고 1시간 반을 지하철 출근길에서 낑겨서 가보고 바로 온라인으로 도망갔다..

하지만 온라인도 강사님이 잘 챙겨주셔서 좋았다...!!!

 

 

 

---

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 과정(B-log) 리뷰로 작성 되었습니다.

 

#유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프 #React #Next.js #프론트엔드개발자양성과정 #개발자교육과정