분류 전체보기124

• 

  [섞어마셔] 프로젝트 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.

• 

  [github] 쌩 초보자를 위한 팀 프로젝트 github 사용법 이 글에서는 완전한 초보 개발자를 대상으로 Git과 GitHub이 왜 중요한지, 사용하는 주된 이유들을 쉽게 설명하고자 합니다. 0. Git과 GitHub을 사용하는 이유 버전 관리: Git을 사용하면 코드의 이전 버전으로 쉽게 돌아갈 수 있으며, 어떤 변경사항이 언제, 누구에 의해 만들어졌는지 정확하게 알 수 있습니다. 협업: 여러 개발자가 동시에 하나의 프로젝트에 참여할 수 있습니다. 각 개발자는 자신의 로컬에서 작업을 하고, 완료된 작업을 공유하여 다른 사람들과 통합할 수 있습니다. 백업과 보안: GitHub은 클라우드에 코드를 저장하기 때문에 컴퓨터의 문제로 데이터가 손실되는 일이 없습니다. 또한, 중요한 프로젝트를 비공개로 설정하여 보안을 유지할 수 있습니다. 오픈 소스 프로젝트: GitHub은.. 개발/github 2024. 4. 18.

• 

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

• 

  [github] 브랜치 룰 설정하기 개발 프로젝트에서 협업을 할 때 룰이 정해지지 않으면 아주 개판이 됩니다. 여러가지 룰 중에서 브랜치 룰이라는 것이 있는데 repository의 브랜치 룰을 설정하는 겁니다. 1. 브랜치 룰 설정하기 repository의 탭에서 Settings -> Branches -> Add rule을 눌러서 브랜치 룰을 추가합니다. 그러면 아래와 같은 화면이 나오는데 Branch name pattern에 자신이 설정하고 싶은 브랜치명을 넣어주면됩니다. 특정경로의 모든 브랜치에 적용하고 싶다면 *를붙이면 됩니다. ex) Feat* : Feat 로 시작하는 모든 브랜치에 적용됩니다. 그 후에 아래에서 설정하고 싶은 룰을 선택하면 됩니다. 2.  브랜치 룰 설명 1) Require a pull request before.. 개발/github 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.