바쁜 연말과 연초를 보내고 드디어 한 해를 돌아볼 여유가 생겼다. 2023년은 여러가지 변화가 많았다. 새해에 맞추어 한국에 돌아왔고 2월부터 시작한 부트캠프를 8월에 수료했다. 6개월 동안 흘러내리던 지식을 막느라 하반기를 당장의 취업보다는 모두 학습에 쏟아부었다. 메인 프로젝트 리팩토링과 최적화를 진행했고 우테코 프리코스에 4주간 매달려도 봤으며 원티드 프리온보딩 챌린지에 참가하여 캡슐단(ㅎㅎ)에 들기도 했다. 최적화 작업을 하면서 내가 작성한 코드가 웹에 어떻게 그려지는지 어떻게 하면 더 가볍고 빠르게 그릴 수 있는지 학습하는 계기가 되었다. 메인 프로젝트에서 만난 팀원들과 종종 연락하면서 지내고 있고 언젠간 토이프로젝트도 같이 진행해보고 싶다. 우테코 프리코스에서는 메인 코드를 고치면서 여기저기 ..
https://letsmomo.netlify.app/ MOMO letsmomo.netlify.app https://github.com/codestates-seb/seb44_main_001 GitHub - codestates-seb/seb44_main_001 Contribute to codestates-seb/seb44_main_001 development by creating an account on GitHub. github.com 디자인과 기능이 정해져 있던 프리프로젝트와 달리 기획부터 디자인, 배포까지 만들어나가는 메인프로젝트가 끝이 났습니다. 아쉬운 점이 많지만 그래도 구현한 기능들은 큰 에러 없이 제대로 동작하며 백엔드와의 데이터연결과 배포에 성공했다는 점에서 스스로 박수를 쳐주고 싶네요. 제가..
프리프로젝트 일지를 매일 작성하고 싶었지만 티스토리 400 에러 이슈 때문에 무려 2주일 만에 블로그에 접속을 했습니다. 아무래도 쿠키가 많이 쌓인 탓에 일어난 에러인 것 같아 크롬 설정에 들어가 티스토리 쿠키를 싹 삭제 해준 후 정상 접속이 되었습니다. 불과 몇 주전에도 이런 일이 있었는데 또 일어나다니 내 탓? 니탓? 모르겠네요. 아무튼 다사다난했던 프리프로젝트가 이번주 화요일에 끝이 났습니다. 결과부터 말하면 서버와의 연결은 실패했습니다. 자세한 이야기들을 앞으로 써내려가 보겠습니다. 팀장이 되었다. 팀 프로젝트라곤 토이플젝이 전부인 제가 팀장이 되었습니다. 3초의 정적을 못참고 마이크를 킨 결과로요. 랜덤으로 배정된 프론트엔드 두 분 백엔드 세 분도 모두 팀 프로젝트 경험이 없었기에 있는 경험 없..
✅ 오늘 한 일 ✔️ 폴더구조 정리 원래는 컴포넌트폴더에 컴포넌트 줄세우려고 했는데 막상 코드를 짜다보니까 어느정도 길어지면 쪼개는 버릇때문에 파일이 점점 많아지기 시작했습니다.. 나중에 쓸 공용 컴포넌트들도 폴더링을 시켜놔야 나중에 쉽게 찾아 쓰겠죠? 처음 회의때는 이렇게까지 할 필요 없지 않을까 했는데 결국엔 이렇게 되어버렸습니다. 혼자 할땐 몰라도 다른사람들과 프로젝트할때는 폴더링을 꼭 해야하겠습니다. ✔️ 글로벌 스타일 스타일 컴포넌트로 설정 style/GlobalStyle.jsx import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` :root{ --color-black : rgb(3..
✅ 오늘 한 일 ✔️ 이슈 탭 관리 원래 작업 진행사항은 노션에 기록하기로 했었습니다. 대체크인 상담을 하면서도 깃허브 이슈 탭 사용은 선택사항이라고 하셨어서 유어클래스로 실습해본게 다인 이 낯선 기능은 최대한 지양(피하고..) 싶었는데요 회의를 거치면서 이슈 탭 만큼 명시적인 작업내용을 효율적으로 확인 할 수 있는 툴을 찾지 못했고 팀원들도 사용에 모두 동의해서 한번 사용해 보기로 했습니다! 막상 만들어보니 탬플릿 만들어두기만하면 사용하기 쉬워서 만족하며 사용중입니다. 역시 무섭다고 냅다 피하기보다는 일단 한번 도전해보는게 좋습니다. 이슈 템플릿 1. 버그 report 2. 기능 request → 지금 개발단계에서는 아무래도 2를 많이 사용할것 같고 나중에 테스트를 거치며 1이 많이 쓰일것 같습니다. ..
✅ 오늘 한 일 1. 백엔드분들과 함께 사용자 요구사항 정의서 작성 - 각 페이지에 있는 기능들을 나열해보고 기능 설명과 프론트, 백엔드의 요구사항, 구현 우선 순위를 작성했습니다. - 회의 전 생각보다 각자 전날 회의 하고 나서 정한 기능 구현 범위가 거의 비슷했습니다. 물론 이견이 있기도 했는데 그 때마다 상태 팀을 충분히 설득해야할 근거를 가지고 있어야 할 것 같습니다. 의견차를 좁히지 못하면 구현 우선순위를 아래로두어 두 팀 모두 만족할 만한 결과를 내었습니다. - 사실 저는 서버, 데이터에 거의 문외한이었습니다. Pre-project 직전까지 Next.js로 SSR를 하는 게시판 프로젝트를 하면서 데이터의 요청과 응답하는 코드를 직접 작성해보고 Mongodb로 데이터 베이스까지 관리해본 경험이 ..
✅ 오늘 한 것 1. 프론트엔드팀 회의 - 피그마로 스택오버플로우 기능과 컴포넌트를 뜯어보면서 구조 파악 - 기능구현 가능 범위 파악 - 라이브러리 채택 2. 대체크인 - 팀장으로써 백엔드와 어떻게 소통해야하는지 걱정이 되는데 추상적으로만 와닿아서 상담 신청. - 프리플젝의 의미 백엔드랑 api 얼마나 잘 주고 받는지, 필요한거 잘 요청하고 잘 전달받고 그런거 많이 깨지고 왜 깨졌는지 이해하면서 기록 잘 해두기 - 프로젝트는 최대한 클린코드로 작성하고 하나라도 완벽하게 만드는것이 중요 - 라이브러리사용은 이유가 있는게 좋다 ✅ 해야할 것 - 백엔드와 내일 사용자 요구 정의서 작성하면서 절충안 만들기 - 상태관리 툴정하기
데이터 만들기(토이플젝) 지금 하고 있는 토이프로젝트에서 각 유형별로 이미지경로, 이미지 사이즈 정보를 이미지 태그의 속성을 주고 유형 이름 데이터를 텍스트로 넘겨주어야 했다. 처음 아이디어는 1. 이미지+유형 이름을 가진 컴포넌트를 만들어줘서 2. 상위 컴포넌트에서 각 정보를 props로 넘겨준다. 였다. 이렇게 되면 상위 컴포넌트에서 이미지+유형 컴포넌트를 3000개 만들어야 하는데 그렇게 되면 코드도 3000줄이 되지만 각각의 속성이 다르기 때문에 어쩔 수 없다고 판단했었다.(사실 데이터화 시키는 것도 생각했지만 어떻게 만드는지 찾아보는 게 귀찮았었다ㅎㅎㅎ) 그런데 프로젝트를 같이 하는 동기분이 데이터를 만들어서 map을 돌리자고 하셨고 data 폴더에 배열로 각 유형별 속성을 넣어 데이터를 만들어..
오늘 만난 오류들 Next.js에서 fetch를 사용해서 delete 요청할때.... method:'DELETE'로 하면 자꾸 400에러가 떴다. 그런데 POST로 바꿨더니 정상 실행이 되었다. 이걸로 오늘 2시간 날림. 왜그런지 살펴봤더니 delete요청 메세지에 body가 포함되어있으면 민감한 정보가 요청 응답 되면서 저장될 수 있기 때문에 보안상 요청을 거절해버리는 서버가 많다고 한다. Only plain objects can be passed to Client Components from Server Components. Objects with toJSON methods are not supported. Convert it manually to a simple value before passing..
next.js에서는 폴더구조를 유의하자 next.js에서는 서버에게 api요청을 간단하게 할 수 있다. pages/api 폴더안에 js 파일로 만들어주는 방법을 사용했는데 처음에 pages 폴더를 app 폴더 안에 생성해서 아무리 get요청을 보내도 404에러가 뜨는 것이다! 공식문서에 구글링에 아무리 찾아봤는데도 안되어서 결국 다시 강의를 보는데 pages폴더가 최상단에 있었다. ㅎㅎ ㅎㅎ ㅎㅎ 이걸로 한 40분을 날림. 멘토님의 폴더구조 조언 /msgs export const EMPTY_SEARCH_ALERT: string = '검색어를 입력해 주세요.'; export const ADD_BOOKMARK_MSG: string = ‘북마크에 상품이 추가되었습니다’; 자주쓰는 메세지도 저렇게 따로 저장을 ..
