탕스로그

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 등 상태관리를 하는 것이 좋다는 것이었다. 왜냐면 이번에는 밑의 화면과 같이 채팅하는 사람이 한명에서 끝나지만, 이어지는 다음 스터디는 채팅하는 유저가 추가된다고...ㅎ 그래서 이번 프로젝트에서 상태관리 라이브러리를 써봐야 편하다는 것이었다. 밑은 내가 구현한 채팅방 화면이다... 무려 셀프 채팅이 가능하다.. 찌부된 커비로 말을 하면 아이스커비에서 해당 내용이 보이는 그..

CEOS의 두번째 스터디! 1주차에 바닐라 js로 짠 투두리스트를 react로 리팩토링하기!!!! 1주차에 바닐라로 짜면서, 와 난 react로 편하게 살았더니 이렇게 자바스크립트를 못하네...?라는 생각을 했었는데, 이번 주차에 react로 리팩토링하면서 느낀 것은, react도 그닥 잘하진 않네... 였다. 아직 갈 길이 멀다. 일단 먼저, 이번 주차의 스터디 목표는 다음과 같다. 미션 목표를 본 후에 바로 react로 투두리스트 짜기에 돌입했다. 프로젝트 진행 중 힘들었던 부분 1. map을 쓸 때는 괄호에 주의하자. 이번에 제일 에러를 찾기도 힘들었고, 에러를 찾고나서도 현타가 왔던 부분은 {doingList.map((list) => ( moveList(doingList, list.id, list..

CEOS의 첫 스터디! 바닐라 js로 투두리스트 작성하기... React로만 얼레벌레 구현해온 나는 이번 미션을 받자마자 상당히 막막했었다. 이번 스터디의 목표는! 다음과 같다고 한다. 미션을 진행하기 앞서, Key Questions에 대한 구글링을 진행해보았다. Key Questions 1. DOM은 무엇인가요? 웹 브라우저가 HTML 페이지를 인식하는 방식. 트리 구조로 이루어진 객체이며 이 객체를 이용해 js가 html/css로 이루어진 웹페이지에 접근할 수 있다. 2. HTML (tag) Element를 JavaScript로 생성하는 방법은 어떤 것이 있고, 어떤 방법이 가장 적합할까요? 1) insertAdjacentHTML : 타겟 HTML Element의 특정 위치에 원하는 노드를 추가할 수..