TIL | WIL

221016~221022 12주차 [실전 프로젝트 5주차 + 피드백 받은 소감]

✅ 로고 수정 ✅ 온보딩 페이지 추가 ✅ 브라우저 대응 화면 수정 ✅ 메인 페이지 레시피 보는 방법 수정 ✅ 버그 수정 ✅ 코드 리팩토링 작업 중... 서비스 런칭 후 약 60개 정도의 피드백을 받았다! 불편사항, 개선사항, 버그 카테고리를 나누어서 정리했다. 생각보다 엄청 상세하게 피드백을 받아서 정말 감사했다 🥹 버그를 우선적으로 수정했고 많은 사람들이 불편사항으로 적어준 것들을 먼저 수정했다! 대부분이 UX 관련 피드백이었다. 내가 만든 사이트이기에 나는 익숙하게 사용했지만, 처음 사이트를 방문한 사용자는 헷갈려했다. 예를 들어, 메인 페이지의 가로 스크롤 기능. 검색 및 작성을 위해 재료 태그를 만드는 방법 등이 있었다. 개발을 진행하면서 사용자 입장에서 사이트를 바라보는 시간이 부족했던 것 같다..

221009~221015 11주차 [실전 프로젝트 4주차 + 서비스 런칭 회고]

✅ 채팅 기능 구현 - 채팅 리스트, 새로운 채팅 메시지 수신 여부 메인에서 아이콘으로 표시하기 ✅ 무한 스크롤 - 메인 페이지, 검색 페이지 ✅ 서버 요청 쿼리 React-Query로 모두 변경 ✅ AWS S3 + Cloud Front 배포, 가비아에서 도메인 구매 ✅ 자잘한 버그들 수시로 수정.. 🎉 10월 19일 서비스 런칭 🎉 4주간의 프로젝트가 끝나고 서비스를 런칭했다. 🎉경축🎉 서비스 런칭까지 일주일밖에 안 남은 시점에서 서버 요청 코드를 모두 React-Query로 바꾸기 위해 공부하고 적용하느라 정신없이 시간이 지나갔다. 또한 채팅 기능을 구현하고 무한 스크롤도 적용했다. 배포는 쉽게 되는 듯했으나.. 깃헙 액션으로 자동 배포하는 것에 실패해서 시간을 많이 날려 먹었다..😭 결국은 CLI로..

220925~221008 9,10주차 [실전 프로젝트 2,3주차 회고]

로그인, 회원가입 ✅ 소셜 로그인 통합->통합 안 함으로 수정 ✅ 로그아웃, 회원가입, 회원탈퇴 공통 ✅ 레시피 좋아요 기능 컴포넌트로 분리 ✅ 풋터의 [ # ]버튼 클릭 시 Best Tag List 조회 및 태그 선택해서 검색 메인 페이지 ✅ 메인 페이지 로그인 여부, 팔로우한 유저 유무에 따라 보여주는 화면 변경 ✅ 검색 기능 (태그 최대 5개, 제목, 닉네임) 검색 페이지 ✅ 검색 페이지 레시피 관련 페이지 ✅ 레시피 상세 페이지 Swiper 라이브러리로 제작 및 작성자 유무에 따른 버튼 변경 ✅ 레시피 수정 페이지 Swiper 라이브러리로 제작 2주 밀린 WIL .. 🥲 그동안 엄청 시간이 빨리 갔다. 처음 프로젝트를 시작할 땐 여유가 넘쳤는데, 생각대로 잘 안 풀린 부분들도 있었고 하다 보니 전..

220918~220924 8주차 [실전 프로젝트 1주차 회고]

✅ 메인 페이지(베스트 레시피, 최신 레시피 조회) ✅ 댓글 CRUD ✅ 레이아웃, 태그, 레시피 컴포넌트 제작 ✅ 카카오 로그인, 회원가입 ✅ 이슈, PR 로 협업하기 일주일 단위로 계속 미니 프로젝트를 하다 보니, 기본 CRUD 기능 구현은 빠르게 완료했다. 물론 UX 부분이 아직 부족하고, 무한 스크롤, 스켈레톤, 알럿창 대신 스낵바 사용 등등은 남아 있다. 실전 프로젝트인 만큼 그동안 하고 싶었지만, 시간이 부족해서 하지 못했던 것들을 해볼 생각이다. 또한 단순히 기능 구현에 만족하는 것이 아니라 유지 보수성, 가독성, 최적화 등등을 고려하고 있다. 실전 프로젝트 1주차 회고 1. 리덕스를 꼭 써야할까? 전역으로 데이터를 관리할 때 사용하는 리덕스. 현 프로젝트에서 정말 필요할까? 라는 의문이 든..

220911~220917 7주차

✅ 오설록 클론코딩 프로젝트 마무리 ✅ 깃헙 리드미 작성 ✅ 모바일 환경 개발 유의점 자료 수집 [클론코딩 프로젝트 마무리] 처음 계획했던 기능들 모두 구현하고 오류 없이 배포까지 완료한 첫 프로젝트다. 이제까지 뭐가 하나씩 아쉽고 부족했는데, 이번엔 만족스럽게 끝낼 수 있었다. 여유가 있어서 리드미 작성도 정성껏 했다. 아쉬웠던 점은 트러블 슈팅을 기록하지 않아서 적기 어려웠다는 것. 이슈로 기록하는 습관을 가지도록 하자! [실전 프로젝트 시작] 금요일부터 실전 프로젝트가 시작됐다. 6주라는 긴 시간이 주어진 만큼 욕심이 많이 생겼다. 얼결에 부리더가 되어서 부담감이 더 크다. 먼저 프로젝트 주제를 정하고 최소 기능 구현부터 추가 기능 구현까지 나눠서 계획했다. 그 후, 화면 설계, api 설계를 했다..

220904~220910 6주차 혼자서 프로젝트 완료 🥹

✅ [식물일기] 프로젝트 완료. 게시글 CRUD, 댓글 CRUD, 로그인(JWT), 회원가입, 마이페이지 기능 구현 ✅ MUI 활용. ✅ [오설록] 클론 코딩 프로젝트 시작. PostCss Module 활용. 메인 페이지 완료. ✏️ axios intercepter 공부중.. https://axios-http.com/kr/docs/interceptors ✏️ react 테스트 코드 작성 인강 시작 ✏️ 반응형 사이트 만드는 법 이번 주는 정말 정신이 없었다. 식물일기 프로젝트의 프론트 부분을 혼자 맡아서 했기 때문이다. 다른 조들은 2-3명의 프론트 담당자가 있었지만, 우리 조는 프론트 팀원이 갑자기 입원을 하는 바람에 나 혼자 프론트 전반을 맡게 되었다. 근데 정말 놀랍게도! 나 혼자서 다 할 수 있었..

220828~220903 5주차

✅ 팀 과제 끝! (+게시글 최신 순, 오래된 순 선택 정렬, 헤더 버튼 수정) ✅ axios 공부 및 실습. ✅ heroku 배포 실습. ✅ redux-toolkit 정리, 사용은 할 수 있는데 완벽하게 이해가 되진 않았다. https://lazygay.tistory.com/37 6주차 미니 프로젝트 시작! ✅ material ui 활용해서 로그인, 회원가입 화면 작업! + 정규화 표현식을 이용해 유효성 검사. 🔐 로그인 완료시 토큰 저장 및 활용법 공부중... 5주차 프로젝트는 프론트 팀원들과 함께 했다면, 6주차부터는 프론트 2명, 백 2명이 한 팀이 되어서 미니 프로젝트를 진행하게 됐다. 로그인 성공시 서버로부터 토큰을 받아오는데, 이 토큰을 어떻게 관리해서 로그인 유무를 판단하는지 공부를 하고 ..

220821~220827 4주차

한 주 돌아보기. ✅ 개인 과제 To-Do List 완료 (Redux, Router 이용) + GitHub Pages 로 배포 배포시 흰 화면만 보이는 문제 발생! 해결 -> https://lazygay.tistory.com/29 ✅ 늘 헷갈리던 용어 정리 MPA SSR SPA CSR 용어 정리 -> https://lazygay.tistory.com/32 ✅ Life Cycle 개념 정리 -> https://lazygay.tistory.com/34 ✅ Hook 생긴 이유와 종류 -> https://lazygay.tistory.com/35 ✅ Styled Component 사용법 익혀서 팀플에서 사용 중. ✅ 팀 프로젝트 [유머 게시판 만들기] - 헤더, 메인 페이지 (전체 게시글 조회), 검색 기능 구현..

220814~220820 3주차

1. React 주요 컨셉 공부 드림코딩 리액트 강의를 들으며 YouTube clone 코딩 (유튜브 API 활용) 👉 복습 필수! 혼자서 다시 만들기 흐름 이해는 되지만, open API를 활용하는 것이 익숙하지 않아 어렵다. API Key 는 외부로 노출되지 않도록 .env 에 넣고 관리해야 한다. 서비스 관련 로직은 따로 관리해야 한다. Dom 개념 공부 참고자료 👍 https://wit.nts-corp.com/2019/02/14/5522 React 공식 문서로 class component 와 function component 공부 리액트 공식 문서 main concepts 2. React 관련 라이브러리 공부 캠프에서 제공된 학습 자료를 보고 redux 공부. todo list 를 redux du..

220807~220813 2주차

시간이 미친 듯이 빨리 갔다. 이번 주차는 알고리즘 주차 + 리액트 입문 주차였다. 일-목은 알고리즘 문제 풀이. 금요일부터는 리액트 공부 시작! 👻 저번 주에 계획했던 이번 주의 목표 깃과 깃헙 공부 Git 인강을 보며 전체적으로 어떤 기능이 있고 어떻게 쓰는 것인지는 알았지만, 그걸 실제로 협업하며 쓰지는 못하겠다. 인강은 지식을 쉽고 빠르게 얻을 수 있지만 그만큼 기억의 휘발성도 강하다. 때문에 기록하지 않으면 모두 사라진다. 😥 그걸 알면서도 기록하며 공부하지 못한 것은, 조급함 때문이다. 아무래도 기록하며 공부하면 시간이 2배 이상 든다. 그리고 당장 쓸 지식이 아니다 보니 중요성은 알지만, 필요성은 떨어진다. 때문에 1주 차에 프로젝트를 하며 가장 필요했던 부분들을 먼저 정리하려 한다. 다음 ..

220729~220806 1주차

🔥 엄청 바빴지만, 그만큼 많이 배웠던 한 주 ✨ 느낀점 1 : 협업의 중요성 ⛓ 캠프가 시작하자 마자 프로젝트 조가 짜여졌다. 인사만 하고 바로 프로젝트 주제 선정부터 api 설계, 화면 설계, ERD 설계, 기능 분배가 이루어졌다. 우리 조의 프로젝트는 [편의점 신상을 리뷰하는 웹사이트] 였다. 내가 맡은 부분은 메인페이지 화면 구현과 메인페이지의 기능 구현이었다. 각 페이지로 갈 수 있는 넷바를 만들고 게시글 검색과 게시글 상세 보기 기능을 구현해야 했다. 각자 맡은 부분만 잘 하면 프로젝트가 문제 없이 완성되는 줄 알았으나 그건 나의 착각이었다..! 게시글 상세 조회 기능을 구현 하려면 게시글의 정보가 db 에 어떻게 저장되는 지를 알아야 했는데, 게시글의 이미지 저장 방식을 정하지 못해 게시글 ..