탕스로그

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 통신 시 헤더에..

졸업 프로젝트를 위해 VS Code 내에 React Native 개발환경을 세팅하였다! 그 과정은 다음과 같다. 1. Homebrew 설치 https://brew.sh/ 에 방문하면 다음과 같은 명령문이 나온다. 이를 터미널에서 실행하면, 와 같이 다운로드가 진행된다. 2. VSCode 설치 brew install cask brew install --cask visual-studio-code 를 순서대로 터미널에 실행하면 된다. 필자는 VSCode가 설치되어 있어서 패스했다. 3. Node.js 설치 brew install wget touch $HOME/.zshrc wget -q0- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | ba..

이 글은 2021-2 ~ 2022-1 의 두 학기에 걸쳐 이화여자대학교 캡스톤디자인프로젝트A/B 과목에서 개발한 졸업프로젝트에 대한 개요이다. organization : https://github.com/E-Albatross 우리 팀이 설계한 앱 '바른글씨'는 다음과 같은 기능을 제공한다. 1. 다양한 필기체, 연습지의 제공을 통한 다양한 모바일 필기 기능 2. 사용자의 글씨를 바른글씨만의 기준을 통해 점수를 매겨 제공 3. 사용자의 글씨 연습 내용 이미지로 저장해 어플 내 갤러리에 저장 4. 사용자의 글씨 점수를 그래프화 나는 팀의 리더와 프론트엔드 개발자를 맡아 프로젝트를 진행하였다. 1. Figma 2. 개발환경 3. 어플 소개

이번 미션은.. 지난주 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 이란? 네트워크적인 개념으로 설명하자면, '어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정'이라고는 하는데, 좀 더 풀어서 쓰면 하나의 페이지에서 다른 주소로 이동하면 다른 페이지를 보여주는 것을 의미한다. 보통 프론트엔드에서 라우터..