깊고 넓은 삽질

짧은 기간동안 다양한 사람들과 팀 프로젝트를 할 기회가 있었다. 각 프로젝트를 진행한 시간도 모두 2주 내외로 짧기도 하고 쉬는 기간도 짧아서 바로바로 회고록을 쓰지 못했다. 그래서 이 포스팅 하나에 각 프로젝트에 대한 짤막한 회고를 적고자 한다. 아래의 모든 프로젝트에서 팀장과 풀스택을 맡았다. 프로젝트의 결과물들은 현재 배포를 중단하였습니다. 시연 영상과 발표자료는 구글 드라이브 링크를 참고해주세요. 1. 침착맨 팬 페이지 만들기 프로젝트 (2주) Typescript, React, Express, MongoDB GitHub - calmdownmanfanpage/calmdownmanfanpage: 침착맨 팬페이지 침착맨 팬페이지. Contribute to calmdownmanfanpage/calmdow..

프로젝트 개요 및 목표 SAT 시험을 대비하기 위한 웹앱 구현 실제 온라인 SAT 앱과 최대한 비슷한 경험 제공이 목표 선생님이 시험을 칠 학생들을 관리할 페이지도 구현 기한은 2주차에 시험페이지 프로토타입 제공, 4주차에 완성 페이지 제공 실제 SAT 앱에서 사용되는 용어 및 주요 기능 | 펼쳐서 보기 더보기 문제 단위 | Exam, Section, Module, Question Exam: 시험 set 단위. 가장 넓은 단위 Section: Exam의 하위 단위. Reading and Writing(영어)과 Math(수학)로 구분(과목이라고 생각하면 됨) Section이 바뀔 때 Break time이 존재(10분) Section마다 제한 시간이 다름 Module: Section의 하위 단위. 각 Sec..

웹 서비스를 기획부터 배포, 운영까지 할 기회가 생겨 그 과정을 기록하고자 한다. 좋은 기회를 준 친구에게 감사의 마음을 전한다. 1. 기획 | 짝선배 짝후배 문화 이어가기 친구의 대학교에는 짝선배 짝후배 문화가 있다. 신입생의 학교 적응을 위해 선배와 짝을 지어주는 문화라고 한다. 학생회에서 주최하는 프로그램이었는데 문제는 학생회가 사라지면서 이 문화도 흐지부지 사라질 위기에 처했다. 좋은 문화의 명맥을 이어가기 위해 나와 내 친구 둘이서 웹사이트를 운영해보기로 했다. 웹사이트의 기능은 간단하다. 사용자가 본인의 정보와 원하는 탐색 범위를 제출하면 해당 범위에 적합한 상대를 이어주는 것이다. 개발 일정은 2월 초에 시작해 3월 개학 이전까지 배포를 목표로 잡았다. 원하는 탐색 범위 받기 사용자가 원하는..

리팩터링의 전제 조건은 리팩터링 후에 정상 동작하는 것이다. 리팩터링 후 정상적으로 동작하는지 확인하기 위해서는 테스트가 필요한데, 테스트 자동화가 되어있지 않아 많이 불안한 상태였다. 자동화가 되어있지 않으면 사람의 눈으로 확인하기 때문에 정확하지 않을 수 있고 확인하는 데에 시간이 많이든다. 만약 여러 코드가 의존하고 있는 부분을 리팩터링 한다면 그 부분을 의존하고 있는 코드들을 모두 테스트해봐야 정확한 테스트가 가능한데, 이는 사람이 하기엔 너무 많은 일이다. 하여, 늦었지만 지금부터라도 테스트 자동화를 위해 테스트 코드를 짜 보고자 한다. 테스트 자동화 환경 설정 (jest) ⬇ 더보기 yarn add --dev jest jest-environment-jsdom @testing-library/re..

밀린 리팩터링 조지기 5월쯤 부터 시작한 티 플랫폼 사이트 개설 프로젝트 teave가 어느덧 5개월이 지나고 있다. 그간 나름의 리팩터링을 해왔었지만 최근 한 달동안은 기능 구현에만 초점을 맞췄던 것 같다. 이제 곧 teave 팀에서 나가야 하는데 후임 프론트 엔지니어에게 이 상태로 넘겨 줄수는 없다. 현재 teave의 프론트엔드 코드는 구조가 뒤죽박죽 되어있다. 처음부터 끝까지 나 혼자 짠 코드들이지만 중간중간에 새로운 패턴을 학습해 적용해 여러 패턴이 섞여있다. 이를 하나의 직관적인 패턴으로 통일하는 것이 1차적인 목표다. 2차 목표는 컴포넌트 분리다. 플랫폼 사이트 특성상 비슷한 컴포넌트들이 많다. 그런데 각자 역할과 기능이 조금씩 달라서 새로 만들다 보니 현재 여러 컴포넌트들에서 중복되는 부분이 ..

기간 목표 github repository 09.13 ~ 09.15 (약 2일) 특정 깃헙 레파지토리(angular-cli)의 이슈 목록과 상세 내용을 확인하는 웹 사이트 구축 https://github.com/wanted-team-11/assignment4 09.16 ~ 09.18 (약 2일) API 서버와 통신해서 작동하는 댓글 프로젝트를 Redux를 통해 구현 https://github.com/wanted-team-11/pre-onboarding-assignment-week-3-2-team-11 09.20 ~ 09.25 (약 5일) 투자 관리 서비스의 관리자 기능 구현 https://github.com/wanted-team-11/pre-onboarding-assignment-week-4-1-team..

09.02 ~ 09.04 이커머스 사이트 리뉴얼 (github repo https://github.com/wanted-team-11/assignment2) 09.06 ~ 09.08 영화 트레일러 사이트 개발 (github repo https://github.com/wanted-team-11/assignment3) 두번째, 세번째 과제 | 이커머스 사이트 리뉴얼 두번째 과제 :: 과일을 판매하는 이커머스 사이트의 판매 페이지를 리뉴얼하고 판매자 관리 페이지를 개발하는 과제였다. 판매 페이지 리뉴얼은 페이지네이션으로 상품을 보여줘야한다. 판매자 관리 페이지는 제품을 판매하는 판매자가 상품의 정보를 입력, 수정하는 페이지를 구현한다. 세번째 과제 :: 제공받은 API를 이용해 영화 목록들을 보여주고, 영화 선..

원티드 프리온보딩 프론트엔드 코스를 참가하면서 배운 점들을 정리하고자 글을 쓴다. 이 코스는 매주마다 주어지는 기업과제를 팀과 함께 해결해나가는 과정이다. 과제와 별개로 매주 프론트엔드와 관련된 강의가 열린다. 참가자 모두 사전 과제로 todo app을 각자 만들었고 임의로 배정된 7~8명이 한 달동안 한 팀이되어 진행한다. 08.30 ~ 09.01 todo app (github repo https://github.com/wanted-team-11/assignment1) 첫 과제 | 협업의 방법 배우기 첫 과제는 팀에서 하나의 todo app을 만드는 것이었다. 과제의 목적은 최선의 결과물이 아닌 협업하는 방법을 공부함에 있었다. 강의 시간 때 배운 협업은 깃 버전관리나 코드포메팅 등 기술적인 부분이었다..

🏁 지난 주 목표 | 리액트쿼리 활용, 본투비루트 시작 Teave :: 리액트쿼리로 전환 대수술 ◼ 최근에 원티드 프리온보딩 코스에서 배운 리액트 쿼리를 우리 프로젝트에도 적용해보기로 했다. 리액트 쿼리를 사용한 커스텀 훅으로 서버 데이터를 사용하는 로직을 모두 분리하고, 서버 데이터의 스키마를 model폴더에 넣어서 관리했다. ◼ 지난주에 완성된 페이지 도안들을 마크업 했다. 검색 결과 페이지를 마크업 할 때 처음에는 검색 페이지와 결과 페이지를 나눠서 구현했었다. 그런데 검색페이지에 딱히 들어갈 컴포넌트가 없는데 불필요하게 페이지가 나뉘는 것 같았다. 그래서 검색시 하나의 페이지에서 useRouter의 쿼리 유무로 결과 페이지 분기를 나눴다. 이 때 쿼리는 배열이 올 수도 있어서 타입가드를 따로 해줘..