NEXT10 12. 30. 42일차 TIL Next프로젝트 KTP회고 힘들었던 next프로젝트가 끝이 났다. 이번 프로젝트에서는 기획당시 구상했던 기능들이 잘 구현되지 않고 마무리하게 되어 아쉬움이 가장 많이 남는 프로젝트가 될 것 같다. 1. 완성된 사이트 모습하루만에 완성된 디자인 시안과 적용된 모습이다.. 이제 tailwind는 확실하게 알게 된 것 같다.2. KPT 회고1) Keep -PR이 적극적이었고 잘 활성화 함파일구조를 잘 나누어서 정리함비즈니스로직과 뷰 로직을 잘 구분하여 관리함아이디어를 활발하게 제시함모두 책임감 있게 프로젝트에 참여함에러나, 트러블이 생겼을 때 서로 공유하고 같이 해결하려고 노력함2) Problem 조밀한 계획의 필요성구현이 안된다고 해서 쉽게 포기한 점 → “일일운세 기능의 완벽한 구현“추후 문제점을 고려하지 않고 계획을 쉽게 세워버림.. 2024. 12. 30. 12. 27. 41일차 TIL next 팀프로젝트 트러블슈팅 왜 이러는건지 진짜 하나도 모르겠다."use server"import { createServerClient } from '@supabase/ssr';import { cookies } from 'next/headers';export const serverSupabase = () => { const cookieStore = cookies(); return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll(); }, setAll(cookiesT.. 2024. 12. 28. 12. 26. 40일차 TIL next 팀프로젝트 어떻게 보면 TIL이라기보다는 일기에 가까울 수도 있겠다.정신이 없는 팀프로젝트가 시작되었고, 이전에 정리했던 내용을 토대로 next의 특징인 서버사이드, 클라이언트 사이드에서의 렌더링 방식을 고민하며 프로젝트에 참여하고 있다.이번 팀프로젝트는 난이도가 너무 어렵다.가장 큰 문제는 한 번 결정된 사항이 10분마다 바뀌어서 로직을 반복하여 수정하고 있다는 것이다.전체적인 코드를 살펴보고 리펙토링하고, 로직을 수정하고를 반복하고 있어 정신이 너무 없다..내가 담당한 페이지는 my-page 부분인데 일단 로그인 부분을 계속 해서 수정하고 있기 때문에 확인할 수가 없다.지금은 로그인을 담당한 팀원과 함께 머리를 맞대고 개발 진행 중이며 기능이 Server side에서 잘 작동하길 바라고 있다.현재 프로젝트에서는.. 2024. 12. 27. 12. 23. 39일차 TIL 효율적인 파일 구조와 렌더링 방식 Next 팀 프로젝트가 시작되었다. 주제를 선정한 뒤 와이어프레임을 작성하고, MVP를 설정했다. 이어서 각 페이지의 렌더링 방식을 논의해 결정하고, 프로젝트 셋업까지 마무리했다. 그러므로 오늘은 효율적인 파일 구조와 렌더링 방식을 정리해보려고 한다.1. Next.js의 기본 규칙과 폴더Next.js는 파일 기반 라우팅 시스템을 제공하므로 파일 구조를 어떻게 설계하느냐에 따라 프로젝트의 유지보수성과 가독성이 크게 달라진다.유지보수성 : 프로젝트가 커질수록 코드가 복잡해지는데, 폴더 구조가 페계적이면 유지 보수가 훨씬 용이해진다.팀 협업 : 여러 명이 작업할 때 공통된 구조가 있으면 코드 탐색과 작업 분배가 쉬워진다.재사용성과 확장성 : 재사용할 컴포넌트를 모으고, 특정 기능별 코드를 분리해두면 확장 시 .. 2024. 12. 24. 12. 19. 38일차 TIL Next.js 과제_03 마무리, 커리어코칭 정리 롤 api를 이용한 프로젝트가 끝났고 나름 만족스러운 페이지를 만들었다고 생각한다. 이후 커리어 코칭을 통해 취업에 대한 조언을 얻을 수 있었다.1. 프로젝트 기능챔피언 목록 페이지 (/champions) : SSR방식으로 구현챔피언 디테일 페이지 (/champions/[id]) : CSR 방식으로 구현아이템 목록 페이지 (/items) : SSR 방식으로 구현게임 소개 페이지 (/intro) : SSR 방식으로 구현챔피언 로테이션 페이지 (/rotation) : CSR 방식으로 구현2. 폴더 구조📦src ┣ 📂app # Next.js 라우트 및 페이지 설정 ┃ ┣ 📂api/rotation # 로테이션 관련 API 엔드포인트 ┃ ┣ 📂champ.. 2024. 12. 19. 12. 18. 37일차 TIL Riot API활용 프로젝트 Suspense, 트러블슈팅 며칠 째 과제를 끝내기 위해 그리고 이쁘게 만들기 위해 몰두하고 있다. 개발하면서 정말 여러가지의 트러블을 경험했지만 그 중에서 제일 이해가 안되는 문제를 다뤄보려고 한다. 바로 suspense를 어떻게 써야하는지에 대한 것이다.1. Suspense란 무엇인가?먼저 Suspense란 무엇인지 알아볼 필요가 있다. Suspense란 비동기 데이터를 로딩하거나, 컴포넌트를 동적으로 로드할 때 로딩 상태를 처리하기 위한 React의 내장 기능이다. React 16.6v 에서 처음 도입되었으며, 주로 동적 컴포넌트 로드와 서버 컴포넌트의 데이터 로딩을 처리하는 데 사용된다. Suspense는 UI가 렌더링되기 전에 필요한 데이터를 로드하거나 작업이 완료되기를 기다리는 동안 특정 UI(fallback)를 표시해준.. 2024. 12. 19. 이전 1 2 다음
