📌 PROJECT/2307 제로힙 : 가계부 SNS 썸네일형 리스트형 📌 PROJECT/2307 제로힙 : 가계부 SNS Meta 태그 컴포넌트 및 중복 출력 이슈 구현 기능 메타 태그 생성 컴포넌트 아래와 같이 HeadMeta 컴포넌트를 생성하여 팀 프로젝트에서 공통된 형식의 메타 태그를 생성하고자 했다. HeadMeta 컴포넌트 (해당 블로그 참고) import Head from 'next/head'; interface HeadMetaProps { title?: string; description?: string; url?: string; image?: string; } export default function HeadMeta({ title, description, url, image }: HeadMetaProps) { return ( ); } 아래와 같이 필요한 컴포넌트에 필요한 값을 넣어주면 된다. userMetaData.ts export const USE.. 📌 PROJECT/2307 제로힙 : 가계부 SNS [Next.js 13] SSR로 동적 meta태그 생성하기 (pages router) [ 상황 ] - /user/profile/[userId] -> 동적 라우팅으로 특정한 유저의 페이지로 접속하는 상황 - 유저 페이지 자체는 유저가 쓴 게시글 페이지보다는 SEO 중요도는 다소 떨어지지만, 추후 확장을 위해 이미 개발해둔 동적 페이지에서 기능을 구현 - 마이 페이지와 유저 페이지는 한 컴포넌트를 공유하여 사용 (전역에 저장된 나의 loginId와 동적 라우팅으로 접속한 페이지에서 params로 추출한 userId를 비교하여 분기 처리) [ 개발 환경 ] - nextjs는 pages router 구조로 개발 중이며 데이터 요청은 Tanstack-Query를 사용합니다. - 관련 포스팅 : [Next.js 13] SSR로 동적 meta태그 생성하기 (app router) 구현 기능 마이 페이.. 📌 PROJECT/2307 제로힙 : 가계부 SNS 프로젝트 4주차(데모데이) KPT : 최선의 선빵 - 지옥의 CORS 들어가며 프론트 withCredentials: true 적용된 상태 백엔드 https://zerohip.co.kr/ 혹은 https://www.zerohip.co.kr/ 에 접속하면 vercel uri를 프록시하고, 해당 uri에서 api.zerohip.co.kr/request uri로 요청을 보내면 해당 uri따라서 http://localhost:8080으로 프록시해서 웹 서버 내부의 로직 수행. https://zerohip.co.kr/ : 인증서 적용 https://www.zerohip.co.kr/ & https://api.zerohip.co.kr/ : 와일드카드 인증서 적용 클라이언트랑 서버통신은 https , 서버내부통신 http 리버스 프록시 사용 상태 지옥의 CORS 좌절, 희망 그리고.. 좌.. 📌 PROJECT/2307 제로힙 : 가계부 SNS 프로젝트 3주차 KPT : 기승전결의 ‘전’ 이번 주를 되돌아보면 참 다사다난 했던 일주일이었다. 너무 바쁜 나머지 1, 2주차처럼 회고를 틈틈이 작성할 틈도, 여유도 결코 없었다. 모든 일이 잘 해결된 지금의 시점에서 시원한 보리차를 마시며 한 주를 조금이나마 되돌아본다. 🐱 우리는 현재 가장 힘든 마지막 언덕을 오르고 있다. 그 말을 다르게 하면, 정상 역시 거의 코 앞에 있다는 것이다.. 기승전결의 ‘전’ 배포가 안 된다 가장 큰 고민은 배포가 안 되는 것이었다. 그래서 백엔드 분들과 밤을 새며, 배포에 대한 과정을 함께 하기도 했고 아서 멘토님이 보실 수 있는 에러 공유 채널에 글을 올리기도 했다. (아래는 잠을 주무시지 않고 배포에 매달리셨던 백엔드 팀원 분들..) 걱정을 잘 안 하는 성격이라 일단 해결 방법은 찾을 것이고 해결은 되겠지,.. 📌 PROJECT/2307 제로힙 : 가계부 SNS 프로젝트 2주차 KPT : 나는 혼자가 아니다 1. 혼자 가면 빠를 순 있다. 1주차 회고에서 깨달음을 얻었음에도 불구하고, 인간은 역시 망각의 동물인가 갑자기 변하기는 쉽지가 않다. 이유는 아래와 같다. 발단 내가 맡은 페이지는 피그마에서 미처 만들어두지 않은 페이지(회원 탈퇴 등..)였다. 늘 극한의 효율을 추구해왔던 나는, 무에서 유를 창조하는 디자인을 하면서 공통된 디자인도 그렇고, 정말 사소한 요소들(회색 글자를 hover했을 때 글자 색)에 대해 정말 아무런 고민도 없이 휘리릭 CSS 처리를 해버렸다. 주말에 작업해서 팀원들을 호출하기 미안한 것도 있었으나, 그렇게 하는 것이 일처리에 있어서 효율적이었던 것도 있었다. (물론 피그마 작업에 인터렉티브 효과까지 있었으면 기획 단계에서 논의가 다 끝나는 문제였겠지만 아쉽게도 우리는 그렇게까지는.. 📌 PROJECT/2307 제로힙 : 가계부 SNS 프로젝트 1주차 KPT : 모두가 같은 마음일 수는 없다. 그리고.. 모두가 같은 마음일 수는 없어, 그건 당연해. 직장을 다니기는 했지만 커뮤니케이션 적으로 문제가 생긴 적은 단 한 번도 없었다. 학교에서는 각자의 업무가 별개여서 안내만 하면 되는 것이었고 보통은 그 업무에 대한 것은 업무 담당자가 가장 잘 알기에 관리직을 제외하고는 말을 얹을 이유가 없는 부분이었다. 특히 나의 경우, 정보 부장을 맡았을 때도 사실 정보부엔 나 혼자(ㅋㅠㅠ)였기 때문에 내가 정보부의 대소사를 결정하고, 사업 신청하고, 예산 집행하고, 시스템을 구축하여 회의 시간에 통보만 하면 되는 문제였다. 하지만, 본격적으로 팀 프로젝트를 하면서 같은 장소, 다른 마음, 각자의 전문성을 가진 사람들과 협업하여 하나의 방향을 잡고 하나의 결과를 만들어야 하는 것은 정말 쉽지 않은 부분이라는 생각이 들었.. 📌 PROJECT/2307 제로힙 : 가계부 SNS Next.js : npx next start npx next start npx next start CLI는 Next.js 애플리케이션이 프로덕션 모드로 시작할 수 있게 하는 명령어다. Next.js 프로젝트에서 해당 스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리에서 찾으면 아래와 같다. 즉, npx next start를 실행했을 때 어떤 코드가 작동하는 지를 찾아보려고 한다. 찾아가는 과정 사실 npm run start? yarn start 와 같이 프로덕션 모드로 시작하게 해주는 Next.js 스크립트를 먼저 찾아야 했다. 따라서 가장 기본 문서인 getting-started의 installation에서 start와 관련한 설명을 찾았다. next.js/docs/01-getting-started/01-installa.. 📌 PROJECT/2307 제로힙 : 가계부 SNS [기획 단계] 프론트엔드 기술 스택 최종 선정 및 이유 프로젝트에 본격적으로 들어가기 전에, 어떤 기술 스택을 사용해야 하는가? 그리고 왜 사용해야 하는가? 에 대해 팀 차원에서의 자료 조사 및 (필요한 경우) 블로그 포스팅 후 최종 회의를 진행했고 결정된 스택들은 아래와 같다. 프론트엔드 사용 기술 스택 ⬆️ 기술스택 3D 관계도 제작 정보 포스팅 패키지 매니저 npm 선택한 이유 : 우선 패키지 매니저의 경우, 성능을 고려한다면 pnpm이나 현재 팀 구성원의 기술 숙련도를 고려하여 기존에 사용한 npm으로 선정하게 되었다. (다음 프로젝트에서는 꼭 pnpm을 사용하고 싶다!) 비교 과정 요약 : yarn berry : 직접 의존하고 있지 않은 모듈을 require()하는 유령 의존성에 관한 문제를 해결하기 위한 Plug'n'Play(PnP)라는 새로운 패.. 📌 PROJECT/2307 제로힙 : 가계부 SNS 기술 스택 선정 고민 : Vite vs Next.js 앞서 포스팅한 번들러 스택 선정 고민에서 내린 결론은 아래와 같았다. 즉, 우리 프로젝트에서 서버 사이드 렌더링(SSR)이 더 효율적이라면 Next.js를, 클라이언트 사이드 렌더링(CSR)이 더 효과적이라면 Vite를 쓰는 것이다. 하지만, 이와 같은 단편적인 이유 뿐만 아니라 종합적인 pros and cons를 비교하기 위해 포스팅을 하며 개념을 정리해보고자 한다. CRA와 Vite CRA (과거 공식 문서 참고) Create-React-App(이하 CRA)는 React 애플리케이션을 쉽고 빠르게 생성하기 위한 공식적이었던(과거형) 툴체인이다. 프로젝트 구성, 개발 서버, 번들링 등을 사전 구성하여 별도의 설정 없이 React 애플리케이션을 시작할 수 있도록 해준다. 즉, 프론트엔드 빌드 파이프라인을.. 📌 PROJECT/2307 제로힙 : 가계부 SNS 기술 스택 선정 고민 : 번들러 부제 : 스스로 불러들인 재앙 발단 : 본격적으로 메인 프로젝트에 들어가기 전에 프론트엔드 팀원들과 스택 선정에 대해 심도깊은 논의를 해보고 싶었다. 전개 : '일단 저지르고 보는 파'인 나는 팀원들에게 아래와 같은 제안을 하였다. 절정 : 역시 사랑스러운 우리 팀원들은 흔쾌히 오케이! 를 외쳐주셨다. 하지만, 5번과 6번의 개념은 나와 같이 너무나 생소한 분야라고 하시는 것 같아 잽싸게 '제가 할게요' 찬스를 썼다. 결말 : 따라서 머리를 싸매며 '번들러'와 '빌드' 등과의 개념과 열심히 맞서 싸우며 정보의 바다를 헤엄치는 중이다. 하지만, 결론적으로는 프로젝트에 들어가기 전에 꼭 필요한 개념이다! 빌드란? 빌드는 배포를 하기위한 선행과정으로 작성한 코드와 애플리케이션이 사용하는 이미지, css등을 모.. 📌 PROJECT/2307 제로힙 : 가계부 SNS [기획 단계] 제로힙 프로젝트 기획서 작성 기획서 검토 회의 드디어 메인 프로젝트가 시작되었다! 우리 팀 같은 경우에는, 프론트엔드는 미리 다 스카웃이 된 상태였고 백엔드 팀원만 구하면 됐었다. 프리 프로젝트 회고 때 만난 분들 등 웬만한 분들께 제의를 드려보았지만 이미 팀이 구성되어 있는 상황이었고, 팀 빌딩 시간 때 열심히 홍보를 해서 백엔드 분 3명을 모집할 수 있었다. 기획과 문서 작업, 사용 스택 등은 이미 어느 정도 정리된 상태였기 때문에, 팀 모집 역시 작성된 기획서를 위주로 홍보를 했고, 그렇게 결성된 팀의 첫 회의 주제는 '기획서 검토하기'였다. [노션] '기획서 검토' 회의 기록 보러가기 -> 해당 기획서를 같이 검토하며, 기술적인 구현 부분이나 더 수정/보완 등 아이디어를 정교화하는 작업을 진행했다. 노션을 활용한 검토 아래와.. ⬆︎ 이전 1 다음
