전체 글221 Next.js Docs (3) Defining Routes, Pages and Layouts Defining Routes Routes를 정의하고 구조를 잡는 방법에 대해서 알아본다. Creating Routes Next.js는 폴더가 routes를 정의하는 파일 시스템 기반의 router를 사용한다. 각각의 폴더는 URL segment에 매핑되는 route segment를 나타낸다. 중첩된 route를 만들려면 폴더를 중첩시키면 된다. page.js라는 특수한 파일은 route의 진입접을 위해 사용된다. 위의 예에서 /dashboard/analytics URL 경로는 page.js 파일이 없기 때문에 공개적으로 접근이 불가능하다. 이 폴더는 컴포넌트, 스타일, 이미지나 기타 배치 파일을 저장하는데 사용될 수 있다. Creating UI 각각의 route segment에서 UI를 만들기 위해 특별.. 2023. 6. 10. Next.js Docs (2) Routing Fundamentals 공식문서 읽어보기 2번째 Router Fundamentals. Next.js 13에서 추가된 App Router를 기준으로 공식문서를 읽고 정리해본다. Routing Fundamentals 애플리케이션의 뼈대인 라우터를 Next.js에서는 어떤 컨셉으로, 어떤 방식으로 handling하는지 이 문서에서 소개한다. Terminology 앞으로 이 문서에서 다음의 단어들을 많이 볼 것이다. - Tree : 계층구조를 시각화하기 위한 규칙. 예를 들면 부모와 자식이 있는 컴포넌트 트리나 폴더 구조 등 - Subtree : Tree의 일부분으로 새 root부터 시작해서 leaf에서 끝난다. - Root : tree나 subtree의 첫번째 노드, 예를 들면 루트 레이아웃 - Leaf : 자식이없는 subtree.. 2023. 6. 7. 메인 프로젝트 회고 한달간의 메인프로젝트가 끝이났다. 매일 만나서 아침에 회의하는게 익숙해질때가 되니까 끝이 나는 것 같다. 사실상 처음으로 제대로 진행하는 그룹 프로젝트이다. 직전에 진행했던 프리 프로젝트는 기존에 있는 stackoverflow라는 사이트를 클론 코딩하는 프로젝트여서 약간 학습의 연장선? 같은 느낌이었는데 메인 프로젝트는 실제로 기획부터 배포까지 전부 하게되어서 실제로 사용될 서비스를 만드는 느낌으로 작업을 진행했던 것 같다. 제대로 진행한 프로젝트이니 만큼 끝까지 제대로 하기 위해서 회고 블로그도 열심히 작성해 보기로 했다! 프로젝트 소개 프로젝트 이름 : 나만의 친환경(Our ECO Story) 프로젝트 소개 : 친환경 생활 실천을 공유하고 공감하는 우리들의 커뮤니티 Github : https://gi.. 2023. 6. 5. Next.js Docs (1) React Essentials Next.js 공부를 하기위해 공식문서를 읽어보기로 했다. 뭔가 읽다 보니까 지나가면 까먹을거 같아서 번역하면서 기록을 남겨본다. 오역주의.. Introduction Next.js는 React Framework이다. React Component로 만든 interface를 좀 더 좋은 구조, 특징, 최적화를 도와준다. 또한 번들링이나 컴파일링도 도와주기 때문에 개발자가 tool을 세팅하는 시간을 줄여준다. Main Feature 1. Routing : Server Component 최상단에 위치한 라우터가 layout, nested routing, loading states, error handling 등을 도와준다. 2. Rendering : SSR, CSR을 지원한다. 또한 static, dynamic.. 2023. 6. 2. 메인프로젝트(4) 메인 프로젝트가 벌써 끝날때가 되었다.. 시작한지 얼마 안된거 같은데 시간이 금방금방 가는 것 같다. 이번주는 기능을 마무리하고 배포, 버그수정, 문서작업 위주로 진행했다. 생각보다는 무난하게 작업이 끝나서 제출일날 오후에 여유롭게 끝냈다. 기능 마무리 Oauth 로그인 내 파트의 다른 기능은 거의 마무리가 되었고, Oauth 로그인이 남아있었다. Oauth 로그인은 제대로 해본적이 없어서 주말동안 열심히 공부해서 구현하려고 로직을 공부했다. 내가 공부한 로직은 프론트쪽에서 구글로부터 authorization code를 받아서 백엔드로 넘겨주고, 백엔드에서 그 코드를 가지고 구글에 토큰을 요청해서 받아서 다시 프론트로 넘겨주는 방식이었다. 그런데 백엔드분이 구현한 로직은 정확하게는 어떻게 동작하는지 잘 .. 2023. 5. 28. 메인 프로젝트(3) 메인프로젝트 3주차가 끝이났다. 화면 구성은 어느정도 완성이 된 것 같고(디자인은 아직이지만) 기능구현 같은 경우 백엔드와의 통신 부분 구현중인데 그래도 약간 순항중인 느낌이라서 다음주 초까지는 구현이 가능할 것 같다! 그런데 다음주 목요일까지 코드스테이츠측에 프로젝트 발표자료와 영상을 제출해야 해서 빨리빨리 끝내고 발표자료 준비도 해야되서 매우 바쁠것으로 예상된다. 오늘,내일 주말동안 약간 어떻게 할지 구상이라도 해놓아야 할 거 같다. Home 페이지 홈페이지에 관리자 채택글을 캐러셀 형태로 볼 수 있도록 캐러셀을 만들고, 작성자가 입력한 주소를 카카오맵으로 띄울 수 있도록 카카오맵 Api를 연결해보았다. 일단은 채택글이 백엔드쪽에서 구현이 안되어서 더미데이터로 구성해놓았는데, 화면에 잘띄워져서 백엔드.. 2023. 5. 20. 이전 1 2 3 4 5 6 7 8 ··· 37 다음
