겨리의 개발일기

10월18일~10월 23일 6일이라는 기간 동안 진행했던 테오의 스프린트 프로젝트에 대해 회고를 해보려 한다. 참여계기 사실 테오의 스프린트에 대해 이미 전부터 알고 있었다. 그동안 테오의 프론트엔드 카톡방에서 스프린트에 대한 이야기를 종종 봤었기 때문이다. 언젠가 기회가 되면 나도 한 번쯤은 꼭 참여해 보고 싶다고 생각하고 있었고, 같이 스터디를 하고 있는 팀원 한 분이 이 스프린트가 너무 좋다고 강력한 추천을 해줘서 언제 열리나 때를 기다리고 있었다. 그러다 얼마 전 이번에 16기를 모집한다는 소식을 들었고 바로 신청 완료! 첫째 날 첫째 날은 각자 준비해 온 아이디어를 발표하고 팀을 구성하는 과정이 진행되었다. 45초 동안 아이디어에 대해 발표하고 마음에 드는 프로젝트에 투표해서 팀을 만드는 형식이..

회고 2023. 10. 25. 16:22

조금 늦은 월간회고..^^ 늦은 김에 8,9월 회고를 묶어서 정리해봤다. 😅 1. 공부 1) 개인프로젝트 이전에 시작했던 개인프로젝트는 잘 마무리 지었다! 사실 7~8월 내내 팀 프로젝트에 대부분의 시간을 투자했기 때문에 진행 속도가 많이 느렸다. 😅 8월 말부터 다시 제대로 시작해서 배포까지 잘 마친 상태! 개발 중반에 기획을 싹 바꾸긴 했지만 이번 프로젝트 진행하면서 리액트와 tailwindcss에 좀 더 익숙해진 것 같아 나름 만족스럽다. 특히 CSS는 자신이 없는 상태였는데 개인 프로젝트 진행하면서 계속 부딪혔더니 전보단 자신감이 생겼다ㅎㅎ 이것만으로도 값진 경험이라고 생각한다! https://find-my-cat.netlify.app/ 2) 면접스터디 면접스터디도 잘 진행되고 있다. 8월까진 자..

회고 2023. 10. 10. 21:56

며칠 전 개인 프로젝트 배포를 위해 Netlify를 사용했는데 이와 관련된 내용을 정리해보고자 한다! ✔ Netlify 선택 이유 내가 진행한 프로젝트는 정적인 웹 사이트이기 때문에 Netlify를 사용하여 배포를 하는 게 적당하다고 판단했다. ✔ 시작하기 로그인 후 Sites 쪽을 보면 이런 화면이 보일 것이다. ✅ 여기서 Import an existing project를 클릭 ✅ Github에 올린 프로젝트를 배포할 것이니 Deploy with Github 클릭 ✅ 프로젝트 목록 중 배포할 프로젝트를 클릭한다. ✅ 빌드 관련 세팅하기 그럼 설정 페이지가 나오는데 여기서는 빌드를 위한 기본적인 설정을 해주면된다. 1) Branch to deploy 배포할 브랜치를 선택할 수 있다. 2) Build co..

Programming/기타 2023. 10. 10. 00:59

👾 문제 개인 프로젝트 개발 중 콘솔창에 에러가 찍히는 걸 발견했다. Warning: Each child in a list should have a unique"key"prop 라는 에러 ! 오잉 난 key에 값을 지정해줬는데..?!?! 🤔🤔🤔 뭘까 하고 찾아보니 금방 원인을 찾을 수 있었다. 일단 코드를 보자! 코드를 보면 map 함수 바로 아래에 Fragment( ) 로 묶어줬는데 이 부분에 key를 지정해주지 않아서 에러가 발생한 거였다! 어찌보면 당연한 것...상단에 Fragment로 묶어줬으니 그 부분이 반복적으로 생길 거니까 key 지정은 그 부분에 해줬어야함 😵‍💫 🧐 참고 ✅ key에 index를 지정해주는 건 웬만하면 지양하는 것이 좋다. ✅ 리액트 공식문서에서도 유니크한 값을 지정하는 ..

Programming/React 2023. 8. 30. 00:59

살짝 늦은 월간회고...💦 주간회고는 그래도 꾸준히 기록하는데 이상하게 월간회고는 좀 미루게 된다 😅😅 (반성중) 1. 공부 1) 면접스터디 면접스터디 생각 했던 것보다 훨씬x100 더 많은 도움이 된다. 그동안 알고 있다고 착각하고 있었던 개념들에 대해 한번 더 확인할 수 있는 기회가 생겨서 정말 좋다..! 개인적으로 공부를 할 때 암기를 하기보단 이해를 해야 넘어갈 수 있는 타입인데 사실 이 '이해'를 위해 투자해야하는 시간이 꽤 길다. 하지만 그 만큼 제대로 공부를 하고 넘어가서 만족하고 있다. 또 팀원들과 내용을 공유하다보니 놓치고 있던 부분도 얻어갈 수 있고..동기부여도되고 여러모로 좋은 시간이라고 느끼고 있다 👍 스터디 터가 좋은 건지 중간중간 좋은 소식을 전해주시는 분들이 계셔서(취업) 어쩌..

회고 2023. 8. 21. 18:39

월간회고 써야지 써야지 하다가 어느덧 7월 중순이 되었다. 두 달이나 미룬 내 자신...정말 대단 😅 지난 5월과 6월은 나에게 자잘자잘한 변화가 생긴 달이었다. (긍적적으로!) 1. 퇴사 약 2년 반 정도 근무했던 첫 회사에서 퇴사를 했다! 깔끔하게 잘 마무리됐고 대표님께 덕담도 듣고 나왔으니 나름 잘 이별했다고 할 수 있다! 2. 여행 1) 일본 여행 퇴사 일정 조율 실패로(ㅠㅠ) 퇴사 전에 후쿠오카로 짧게 여행을 갔다왔다. 그동안 여행했던 나라 중 가장 가까운 나라는 필리핀이었는데 이젠 그 기록이 갱신됐다ㅋㅋ 일본 정말..가깝고도 먼 나라..^^ 여행 기간인 3박 4일동안 정~~말 열심히 먹고왔다. 관광보단...식도락 여행에 가까웠다. 가장 기억에 남는 건 생맥주와 라멘! 🍺🍜 2) 태국 여행 6월..

회고 2023. 7. 18. 13:23

React와 TypeScript 기반의 프로젝트에 Tailwind CSS 를 설치하는 과정에서 에러를 발견했다. 나중에 비슷한 일이 생기면 참고하기위해 기록해둔다. 일단 Tailwind CSS 설치하는 방법부터 시작! Tailwind CSS 설치하기 ✅ 터미널을 열어 설치 명령어를 입력해준다. npm install -D tailwindcss ✅ 설치가 완료되면 init 명령어를 입력한다. → tailwind.config.js 파일을 생성하기 위함 npx tailwindcss init tailwind.config.js 파일이 생겨서 확인해보니... 에러가 났다! 'module' is not defined' 검색을 해보니 ESlint 설정시 env 쪽에 node를 설정해주지 않아서 나타나는 현상이라고 한다...

Programming/기타 2023. 7. 14. 15:43

브라우저의 렌더링 과정 브라우저는 크게 네가지 단계를 거쳐 렌더링을 수행한다. 1. 요청 ✅ 브라우저가 서버에게 필요한 리소스를 요청하는 단계 2. 렌더트리 생성 ✅ HTML을 파싱하여 DOM Tree를, CSS를 파싱하여 CSSOM(CSS Object Model) Tree를 만든 후 두 트리를 조합하여 렌더트리를 구성한다. ✅ 렌더 트리는 화면에 나타나는 요소들을 결정하는 트리이다. → 어떤 요소들이 보여야하는지, 어떤 스타일이 적용되어야 하는지, 어떤 순서로 나타낼 것인지를 명세하는 트리이다. 3. 레이아웃(리플로우) ✅ 렌더 트리 구성이 끝나면 레이아웃 단계가 이어지는데, 이 단계에서는 렌더 트리에서 계산되지 않았던 노드들의 크기와 위치, 레이어 간 순서와 같은 정보를 계산하여 좌표에 나타낸다. ✅..

Programming/기타 2023. 7. 5. 21:11