프로젝트28

• 

  [섞어마셔] 프로젝트 7일차 - 마지막날, 팀원과의 마찰, 전체회고 드디어 고난의 일주일이 끝나는 날입니다. 마지막 날이기 때문에 새로운 기능을 추가하지 않고 디자인만 살짝 변경을 해야 합니다.1. SearchPage 버그 고치기어제와 동일하게 로컬에서는 search가 제대로 작동하는데 배포환경에서는 작동을 안 하고 있었습니다.vercel, netlify 둘 다 배포를 해보고 배포 세팅을 건드려봐도 해결이 안돼서 search와 관련된 코드를 하나씩 보기 시작했습니다. 천천히 다른 팀원과 읽어보니 문제가 되는 코드를 발견했습니다.// api.js baseURL을 설정해놓은 파일export const searchApi = axios.create({ baseURL: "/api/json/v1/1", headers: { "Content-Type": "application/jso.. 프로젝트/섞어마셔(shake_drink) 2024. 4. 26.

• 

  [섞어마셔] 프로젝트 6일차 - like 로컬 스토리지와 연결, netlify 연결 발표까지 D-1 마무리 단계입니다.오늘은 like부분을 새로고침을 해도 사라지지 않게 로컬스토리지와 연결을 하고 네트리파이와 연결을 하였습니다.그리고 세세한 디자인 변경사항을 함께 수정하고 팀원들의 머지를 도왔습니다. 1. like 로컬 스토리지와 연결연결하는건 쉬웠지만 리팩토링하는데 조금 애를 썼습니다. 우선 이 코드는 각 Card컴포넌트에 하나씩 다 들어가있습니다. 아래의 코드를 보고 겁먹지마시고! 하나씩 천천히 설명을 해보겠습니다.// idDrink는 api로 받아온 칵테일의 idconst { idDrink } = cockTailData; // localStorage에서 'likes' 데이터 가져오기 및 초기 like 상태 설정const likesData = JSO.. 프로젝트/섞어마셔(shake_drink) 2024. 4. 24.

• 

  [섞어마셔] 프로젝트 5일차 - 팀원 돕기, 환경구축의 필요성 할 일은 거의 다 끝나서 팀원들을 도와줬습니다. 어제 밤에는 직장다니시는 팀원분이 계셨는데 api데이터를 받아오는 구조를 잘 모르셔서 밤 12시까지 옆에서 상주하면서 계속 알려드렸습니다. 그리고 디스코드에 계속 있으면서 다른 팀원들의 스타일링이라던지 github사용법, 머지해달라는 요청 같은 것을 하루 종일 처리하면서 하루를 마무리했습니다. 1. 좋은 프로젝트 환경 구축의 필요성 초기에 프로젝트를 세팅을 할 때 간략하게 설명을 하고 잘 모르는게 있다면 나에게 물어보면 됩니다!라고 미래의 내가 알아서 처리하겠지 라는 안일한 마음가짐으로 넘겼습니다. 이렇게 프로젝트를 세팅을 하니깐. 질문을 할 때 검색을 하여 찾아보고 질문을 하는게 아니라 단발성 질문(이건 뭐에요? 저건 뭐에요? 이건 어떻게 하는거에요?)이.. 프로젝트/섞어마셔(shake_drink) 2024. 4. 23.

• 

  [섞어마셔] 프로젝트 4일차 - cocktailGame 제작, github사용법 블로깅 벌써 목요일이 되었습니다. 프로젝트는 어느 정도 구색을 잡은 것 같은데 팀적으로 삐걱되는 느낌입니다. 1. 프로젝트의 방향성 처음에 스택, 폴더구조, 커밋 컨벤션, 브랜치 네이밍룰, PR룰을 다 정해놓았는데 몇몇 팀원분들이 규칙을 따르지 않아서 깔끔하게 프로젝트를 운영하는 것을 포기하고 주먹구구식으로라도 프로젝트를 완성하도록 방향을 잡았습니다. 이렇게 된 이유는 팀원들의 수준을 파악하지 못하고 github을 사용법을 강요하거나, 다른 팀원들의 요청으로 새로운 스택(MUI, tailwind, Zustand)을 스택을 넣어서 그런 것 같습니다. 다른 스택을 추가하지 말고 공통적으로 들은 코딩 알려주는 누나의 강의에서 나온 Bootstrap, redux-toolkit만 적용했어야 했는데 아쉬움만 남습니다. 또.. 프로젝트/섞어마셔(shake_drink) 2024. 4. 23.

• 

  [섞어마셔] 프로젝트 3일차 - Header, Card 컴포넌트 제작 프로젝트의 초기세팅이 마무리되었고 이제는 본격적으로 개발을 할 차례입니다. 제 담당인 Header와 Card 컴포넌트의 제작에 들어갔습니다. 1. Header 처음으로 헤더를 MUI를 통해서 제작을 해보았습니다. MUI 공식문서에서 App bar를 기반으로 만들었으며 만들기는 편했지만 프론트엔드 취업을 준비하는 사람 입장에서는 bootstrap이나 MUI를 사용하는게 꺼려지기는 했습니다. 하지만 일주일이라는 시간동안 프로젝트를 완성하기 위해서는 어쩔 수 없는 선택이였습니다. Header는 반응형으로 만들었습니다. 1) 넓은 화면 넓은 화면에서는 메뉴가 탭형태로 보이고 서치기능도 가능하도록 하였습니다. 그리고 로그인 유뮤에 따라 "LOGIN" 또는 프로필 이미지가 뜨도록 만들었습니다. 2) 작은 화면 작은.. 프로젝트/섞어마셔(shake_drink) 2024. 4. 19.

• 

  [에러] 두 개의 이벤트가 겹쳐있을때 - (e.stopPropagation,e.preventDefault) 0. 문제점 위스키 카드인데 카드를 누르면 "detail"페이지로 이동을 합니다. 또는 하트를 누르면 찜이 되는 기능도 있습니다. 하트를 누를때 하트가 클릭됨과 동시에 "detail"페이지로 이동을 하였습니다. e.preventDefault 를 사용해서 막으려 했는데 작동을 안해서 검색을 해보니 e.stopPropagation를 사용해야 된다고 하여 이렇게 정리하게되었습니다. "A추가"를 누르면 A가 추가됨과 동시에 Count UP이 되는 것을 확인할 수 있습니다. 1. e.preventDefault() - 이벤트의 기본 동작을 취소 e.preventDefault() 메서드는 이벤트의 기본 동작을 취소합니다. 예를 들어, 링크 클릭 시 페이지를 이동하는 것이나 버튼 클릭 시 폼 제출 같은 기본 동작을 막.. 프로젝트/섞어마셔(shake_drink) 2024. 4. 19.

• 

  [섞어마셔] 프로젝트 2일차 - 프로젝트 초기세팅, 기획, 디자인 정하기 오늘은 어제 다 못한 프로젝트 초기 세팅을 마무리하였습니다. 다른 팀원분들은 감사하게도 디자인과 기획을 맡아주셔서 많이 편하게 했습니다. github을 못 다루시는 분이 많아서 조마조마하지만 그래도 끝까지 잘 컨트롤해서 파이팅!! 오늘 한 일들 (많이도 했다.) 기획 확인 디자인 확인 기획, 디자인 확인되면 개발 대표색 선정 → theme 추가 예정 폰트 선정 → 폰트 세팅 css 초기화 세팅 install한 라이브러리 잘 설치되었나 테스트 브랜치 룰 설정 PR 템플릿 만들기 폰트 적용 css 초기화 Prettier 세팅 1. 기획, 디자인 다른 팀원분들이 기획과 디자인을 피그마에 만드셔서 설명을 듣고 그대로 적용을 하기로 하였습니다. React 프로젝트인데 디자인해 주시는 게 얼마나 감사한 일인지..... 프로젝트/섞어마셔(shake_drink) 2024. 4. 16.

• 

  [섞어마셔] 프로젝트 1일차 - 프로젝트 초기 세팅, 정신없이 바쁘다. 프로젝트 기간이 일주일밖에 없기 때문에 짧은 시간에 많은 것을 쳐내야 합니다. 오늘 한 일들 주제정하기 주제에 맞는 참고 사이트 정하기 기술스택 정하기 브랜치 네이밍 설명 페이지별로 역할분담 프로젝트 이름 github 리포지토리 만들기 git 초기세팅 브랜치 룰 설정 1. 주제 정하기 저번에 피그마에 포스트잇 형식으로 의견을 내고 주제를 선정하였지만 api를 활용하는 프로젝트를 원하셔서 다시 주제를 정하게 되었습니다. Free Cocktail API | TheCocktailDB.com www.thecocktaildb.com 여러 가지 api를 찾아보다가 칵테일 관련돼서 좋은 api가 존재하여서 이걸로 선택하게 되었습니다. 이렇게 글로 작성하니 간단해 보이지만 거의 3~4시간 동안 팀원분들과 함께 api를.. 프로젝트/섞어마셔(shake_drink) 2024. 4. 16.

• 

  [섞어마셔] 코딩알려주는 누나 스터디 팀 프로젝트 OT 취업준비를 하면서 코딩 관련 유튜브를 보다가 코딩 알려주는 누나(이하 "누님")의 React 스터디를 모집한다는 영상을 보았습니다. 저는 무언가 강제적으로 일을 줘야지 엄청나게 발전한다는 것을 알고 있으며 스터디는 React초보대상이었지만 마지막에 1주간 팀프로젝트를 진행한다고 하여 이 내용을 이력서에 추가해야겠다고 생각되어 신청하게 되었습니다. 그렇게 4주가 지나고 드디어 팀프로젝트 주간이 다가왔습니다. 처음에는 누님께서 프로젝트를 해야 하는 이유, 애자일 방법론 등등 프로젝트에 관한 설명을 해주시고 드디어 팀원을 만나는 시간이 왔습니다. 처음이라 어색했지만 지금 하는 프로젝트에서 프론트팀장을 맡아서 그런지 이런 상황에서 말을 꺼내야 할 것 같아서 저도 모르게 진행을 하게 되었습니다.ㅎㅎㅎㅎ 슬랙에서 .. 프로젝트/섞어마셔(shake_drink) 2024. 4. 16.

• 

  [Tars] 회고록 13일차 - 커밋메시지, 깃헙 대소문자 구분, 느린 코드리뷰 0. 개요 백엔드에서의 작업이 느려져서 느긋하게 개발을 하고 있는데 내 코드를 다시보니 느긋하게 하면 안 되는 상황이였습니다. 빠르게 코드리뷰를 해야지 진행이 될텐데 코드리뷰가 점점 느려져서 내가 해야할 일을 못 하게 되었습니다. 코드리뷰의 속도를 높일 방법에 대한 고민을 하였고 오랜만에 회의에서 유의미한 고민과 블로그에 적을 거리가 생겨서 블로그를 작성해보았습니다. 1. 커밋 메시지 팀원이 만든 공통 헤더 컴포넌트가 있습니다. 이것에 대한 사용법은 나와 팀원들은 익숙하긴 하지만 "새로운 사람이 봤을 때 바로 사용할 수 있나?" 라는 질문에 그렇지 않다고 생각되어서 아래와 같은 PR 메시지를 달았습니다. 요청을 받은 팀원분이 열심히 JSDoc기능을 사용해서 주석을 달았습니다. 여기서 JSDoc기능이 무엇.. 프로젝트/Tarss 2024. 4. 6.