탕스로그

모노레포란?? 여러 개의 다른 프로젝트 코드를 하나의 repo에서 관리하는 전략이다. 왜 구축하게 되었는가?? 신촌 연합 IT 동아리 CEOS 16기에서 프론트엔드 스터디 커리를 진행하면서, 팀 프로젝트를 제외하고도 5개의 레포지토리가 생성되었다... 이 5개의 레포지토리는 1개의 바닐라 자바스크립트 레포, 3개의 react 레포, 1개의 next.js 레포로 구성되어있는데, 뭔가 이 레포지토리들을 하나의 레포지토리로 합병해서 관리할 수는 없을까... 하던 중 모노레포 시스템을 알게되어 바로 적용해보게 되었다. 바닐라 자바스크립트 레포는 node_modules를 관리할 필요가 없기 때문에 모노레포 시스템의 의도와는 맞지 않으나 단순히 나의 편의성을 위해 다른 레포들과 같이 모노레포로 관리하게 되었다. 그..

2/10 데모데이를 마지막으로 CEOS 16기 활동이 끝이 났다!!! CEOS 16기 회고를 쓰기에 앞서 내가 왜 CEOS를 지원했었더라.. 하는 생각에 내가 작성했던 합격 후기글을 들어가봤다. 지원동기를 보니, '내가 했던 걸 또 하지 않는 동아리 같았고 빡세게 공부할 수 있을 것 같은 동아리 같았다.' 라고 되어있는데, 회고 시점에서 돌아보니 맞는 말이다. 시험기간을 제외하고 팀 프로젝트를 들어가기 전까진 매주 수요일은 세션 일요일은 스터디 이 지옥의 스케줄이 함께했고, 매 세션과 스터디는 거의 항상 과제가 있었다. 매주 두 개의 과제를 해야한다는 얘기... 수요일까지는 아이템 빌딩, 창업과 관련한 과제가 있었고 일요일까지는 개발 능력 향상을 위한 프론트 개발 과제가 있었다. 16기 프론트 스터디 커..

2/10 CEOS 16기 데모데이를 마지막으로 팀 프로젝트가 끝이 났다!!!🥳🥳🥳 이번에는 Finble 프론트 개발에서 내가 경험하고 배웠던 것을 위주로 다뤄보겠다. 기술 스택✨ React 이제까지 프론트 스터디를 리액트로 진행하기도 했고, 디자인팀이 설계해준 디자인시스템을 제대로 활용할 수 있는 방안을 생각했을 때, 컴포넌트화를 효율적으로 할 수 있는 React로 개발을 진행하는게 맞다고 생각했다. 원래는 Next.js를 쓸까도 고민했으나, 내가 이번 CEOS 활동을 통해 리액트 지식에 대한 깊이가 깊어진만큼, 이를 적용한 프로젝트를 해보고 싶어 React를 선정하게 되었다. 다음 프로젝트를 할 기회가 생긴다면 그 때는 Next.js를 도전해보고 싶다. TypeScript 누군가가 자바스크립트를 쓸지,..

나는 공식 일정대로라면 1월 한달간 ( 6주는 개발한 듯 ) Finble을 개발했다. 개발 계획✨ 이는 CEOS 세션 중에 개발 시작에 앞서 개발 계획을 미리 작성한 것인데... 개발은 대부분 계획대로 잘 진행이 되었고, 1월 말 ~ 2월 초에는 변경된 디자인에 따른 디자인 수정 & QA에 따른 기능 보완이 진행되었다. 아키텍쳐✨ 프론트 개발은 React.js + TypeScript + Redux-toolkit 로 진행하였고 배포를 위해 Amazon S3를 사용하였다. CI/CD는 Amazon S3가 제공해주는 것을 사용했다. 개발 규칙✨ 1. 커밋 시 깃모지를 사용해 직관적으로 표현한다. 이 때, ✨ ( 새 기능 추가 ), 🎨 ( 코드 스타일 수정 ), 🐛 ( 버그 수정 ) 을 나타낸다. 2. 기능 단..

이제까지 프론트 스터디에 대한 후기만 남겼었지만, CEOS에서는 이제까지 1월 한 달 간의 팀 프로젝트 개발을 위해 10주차 세션에 걸쳐 각 팀의 아이디어에 대한 빌딩을 해왔었다. 세션에 대한 후기는 CEOS 후기에서 다루겠다. 아무튼 아이디어 빌딩을 해서 최종적으로 내가 12월 말부터 개발하게 된 Finble 프로젝트를 소개해보려고 한다. Finble 소개✨ Finble은 간단하게 말하면 주린이를 위한 주식 포트폴리오 관리 서비스이다. 원래는, 아래와 같은 아이디어로 시작했다. 하지만 아이디어 빌딩을 거치고 거쳐... mvp에 필수적인 핵심기능들만 남겼다. 이 때, 중점을 '가상의 투자 실험을 통한 더 나은 주식 포트폴리오 만들기'에 두고 핵심 기능을 선별했다. 핵심기능✨ 1. 기존 포트폴리오 등록 유..

이번 미션은 CEOS 마지막 스터디!!! CEOS에서는 스터디가 끝난 이후에 방학 때 한달동안 팀 프로젝트를 진행하게 되는데 이 때 같이 협동을 하게 될 팀 내의 백엔드 2명 & 프론트 2명이 함께 파트장 & 데모데이 우수팀 투표를 진행할 수 있는 페이지를 만드는 것이 목표이다. 본격적인 팀 프로젝트를 진행하기 전에 간단한 토이프로젝트를 해보며 협동심을 기르는 것이 주 목적인듯!!!! 구현해야 하는 것 1. 회원가입 - 파트 ( 프론트, 백, 디자인, 기획 ) 과 팀 ( 5개중 하나 ex. Finble ) , 이름, 아이디, 비밀번호, 이메일 주소를 통해 회원가입을 진행한다. 2. 로그인 - 아이디 / 비밀번호를 통해 로그인을 진행한 후 accessToken을 저장한다. 후에 모든 api 통신 시 헤더에..

이번 미션은.. 지난주 netflix 프로젝트 업그레이드 버전!! 이번에 구현해야 할 것은 다음과 같았다. 1. 동적라우팅을 이용한 상세페이지 이동 2. 검색페이지에서 검색어를 입력하면 실시간으로 결과화면 반환 그럼.. 각각 어떻게 구현했는지 알아보자!!!! 1. 동적라우팅을 이용한 상세페이지 이동 동적 라우팅이란?? /detail/[id].tsx 와 같이 [ ] 로 감싼 파일명을 정의해준 후, link를 이용해서 'detail/12345' 와 같은 주소로 이동하면, nextJS가 알아서 query.id 에 12345 를 담아서 /detail/[id].tsx 화면을 띄워준다!!! 한마디로, 내가 /detail/[id]의 주소를 따로 지정해주지 않아도 /detail/[임의의어떤값] 으로 이동하고 싶어하는 ..

5주차 미션은 무려 팀 미션!!! 후에 한달동안 프로젝트를 같이 하게 될 나의 프론트메이트.. 채연이와 개발을 하게 되었다. 그리고 이번 미션은 nextJS를 이용해서 SSR을 적용한 netflix 페이지를 만드는 것이었는데..! 난 nextJS를 말만 들어봤지 전.혀 써본 적이 없기 때문에 ㅎㅎ 엄청난 시련을 겪게 되었다... 우리의 야무진 개발 타임라인은 다음과 같았다. 개발 타임라인 11/7 ( 월 ) : 첫 회의.. 파트 나누기 11/8 ( 화 ) : 페이지, 컴포넌트 레이아웃 잡기 완료 11/9 ( 수 ) : nextJS 공부 -> 서버 연결 완료 (?) 이렇게만 보면 우리의 일이 수월했겠지만.. 난 nextJS만 쓰면 얘가 알아서 SSR을 해주는 줄 알고 그냥 fetch를 박아서 서버 연결을 ..

CEOS의 세번째 스터디에서는 채팅페이지 하나를 만드는 것이었다면, CEOS의 네번째 스터디에서는 그 연장선으로 라우터를 사용해서 메인, 채팅방, 설정 화면을 오가는 SPA 만들기! 를 해보았다. 사실.. 3주차 때 나름 구조를 잘 잡아놨다고 생각했기 때문에.. 라우터만 좀 하면 수월하겠다! 고 생각한 나를 매우 친다.. 생각보다 힘들었다. 이번 글은 바로 Key Questions 부터 시작하겠다! 조사해야할 개념은 다음과 같다. 1. Routing 이란? 네트워크적인 개념으로 설명하자면, '어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정'이라고는 하는데, 좀 더 풀어서 쓰면 하나의 페이지에서 다른 주소로 이동하면 다른 페이지를 보여주는 것을 의미한다. 보통 프론트엔드에서 라우터..

CEOS의 세번째 스터디는 무려 타입스크립트로 채팅방 구현하기..ㅎ 1주차 바닐라자바스크립트 -> 2주차 리액트 -> 3주차 리액트 with 타입스크립트...? 진짜 진도가 급발진이 따로 없다... 죽을 맛이다. 먼저 이번 주차의 미션 목표는 다음과 같다. 여기서 내가 죽을 맛이었던 포인트는... 바로 redux, context API 등 상태관리를 하는 것이 좋다는 것이었다. 왜냐면 이번에는 밑의 화면과 같이 채팅하는 사람이 한명에서 끝나지만, 이어지는 다음 스터디는 채팅하는 유저가 추가된다고...ㅎ 그래서 이번 프로젝트에서 상태관리 라이브러리를 써봐야 편하다는 것이었다. 밑은 내가 구현한 채팅방 화면이다... 무려 셀프 채팅이 가능하다.. 찌부된 커비로 말을 하면 아이스커비에서 해당 내용이 보이는 그..