[#1day] 프론트엔드 공부 주저리

한참 프로젝트를 경험하고 공부하기 위해 이것저것 지원하던 어느 날 인프런에 들어갔는데 수업이 하나 눈에 띄었다.
바로, [만들면서 배우는 프론트엔드 DO IT 코딩] 이라는 수업이었다!

하루 하루 공부하며 배운 것을 정리해보고 느낀점을 작성해보고자 한다.

인프런 수업 링크

---

 

https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C

만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript) - 인프런 | 강의

---

원래 다른 수업이었다면 들을까 말까 고민했을텐데 이 수업의 특이한 점은 바로 Next.js에 TypeScript를 사용한다는 점이었다.

FE 개발자를 준비하고 있는 과정에서 Next.js는 이제 막 떠오르고 사용되는 기술이라고 할 수 있다고 생각한다.
이전 친구들과 간단한 WEB을 만들어보자 했을 때에도 조금 사용해 보았지만, 실제로 퍼블리싱 이외의 것은 해본적이 없다.

곰곰히 생각해보니 이전에도 그다지 BE와 연결 혹은 JWT를 이용한 토큰 처리 방식 등 큼직한 것들은 다른 친구들이 진행했던 것 같은데😢

 

이 수업이 처음 보자마자 더욱 마음에 들었던 것 중 추가적인 것은 vercel을 이용한 배포까지 진행한다는 점, 그리고 대표적인 Todo List가 아닌 피드백 서비스를 만들 수 있다는 점이었다.

먼저 수업에서 제공되는 github 주소로 들어가 초기 세팅은 clone 했다. 여기서 당황했던 점은 내 생각은 fork만으로 해당 초기 세팅이 불러와 질 것이라는 착각을 했다는 점이다.
main branch를 fork 했는데 알고보니 이 branch 많이 개발된 branch였다.

(꼭 확인을 안해서 한 번 할일을 두 번으로 늘린다...😂)

코딩을 하다보면 느끼는 것이 있는데, 내가 모르는 건 이미 남이 몰랐던 것일 수 있다. 구글링이나 검색 시 이미 누군가가 해결방안을 올려두었다는 의미이다.

---

git clone -b [clone하고자 하는 브랜치 이름] [복사한 주소(ex. https://~~)]

---

해당 클론을 통해 파일을 생성하면 먼저 파일을 실행하기전 필요한 작업이 있다.
바로 yarn을 이용한 필수 폴더를 다운로드 받아야한다는 것이다.
만약 yarn을 별도로 설치하지 않았을 경우 다음과 같은 명령어를 통해 설치될 수 있다.

---

npx yarn install

---

이후 실행 명령어를 입력(yarn dev)할 경우 localhost를 통해 확인할 수 있게 된다.
여기서 하나의 의문이 들었다.

어라 그렇다면,
⇨NPM으로 설치하면 어떻게 작동하지?⇦

매우 놀랍게도 npm으로 설치해도 잘 작동하는 모습을 확인할 수 있었다.
조금 다른 점은 프로그램을 localhost에서 확인하도록 작동시키는 방법이었는데, yarn은 dev라는 명령어만 작성하면 되었지만 npm의 실행명령어는 npm run dev 라는 차이가 있다는 것이다.

조금 더 프로젝트를 진행해봐야겠지만, 두가지의 버전으로 공부해보고 NPM과 Yarn의 차이점에 대해서도 별도로 공부해봐야겠다는 생각이 들었다.

추가글 - 내가 느낀 Next의 장점👏-

React와 Next js를 조금씩이지만 다뤄보고 느낀 Next.js의 장점이 있다.

바로, Next.js의 page 라우팅이 굉장히 쉽다는 것이다.

이는 공식 문서에도 잘 나와 있는데, 기본 create-react-app / create-next-app 을 통한 초기 프로젝트 세팅시 파일과 폴더들이 생성된다.

 

그 폴더들 중 ❗pages 폴더❗를 주의깊게 보아야 한다.

 

해당 폴더의 index파일은 바로 경로 http://localhost:3000/ 를 나타내는 파일이 된다.

예를들어, 내가 pages 안에 recruit이라는 파일을 생성했다고 보자. (typescript를 함께 사용하면 tsx 파일이 생성된다.)

 

해당 파일을 생성하게 될 경우 http://localhost:3000/recruit 을 접속하게 되면 해당 파일로 접근하게 된다는 것이다.

react의 경우 따로 react router를 통한 라우팅이 필요했는데 파일 한개로 라우팅 작업을 대신해줄 수 있다는 것은 굉장한 강점이 아닐 수 없다!

 

조금 더 자세한 내용의 경우 다음 공식 문서 페이지를 참고해 보면 좋을 것 같다.

 

https://nextjs.org/docs/basic-features/pages

Basic Features: Pages | Next.js