프로젝트

백엔드 팀원 분이 api 엔드포인트를 만들어 주셨다. 데이터 형식이 application/json형식으로 보내라고 해서 그렇게 했다. 만약 그렇게 하지 않을 시 415 에러를 마주하게 된다. 어제는 글 작성, 글 불러오기를 했고 오늘은 수정 및 삭제를 할 예정이다.

나는 깃허브 잔디밭 처럼 내가 학습한 것을 heatmap의 형태로 보여줄 수 있는 웹서비스 (개인 토이프로젝트)를 만드는 중이다. 사실, 멘토님께서 내가 생각했던 기능들을 대폭 줄이자고 제안하셔서 조금의 기능을 구현하고 있는데 생각보다 고려할게 많았다. dummy data를 넣고 ui를 구성했을 때와 파이어베이스를 붙였을 때도 코드가 달라지고 예상치 못했던 warning(타입스크립트 props관련.. 일단 any로 땜질 해놨는데 빨리 바꿔야 한다. asap...)을 만나기도 했다. 그리고 파이어베이스 스토어만 사용하고 백엔드 로직을 아예 못쓰다보니 구현이 좀 어려워 졌다. 나는 단지 목표추가와 할일 추가만 한다면 백엔드에서 필요한 것 계산 후 각자의 json파일로 내려다 주면 매우 편하게 개발할 수 있겠..

1차 작업 회고 2주차 멘토링을 반영하여 위와같이 메인페이지를 이틀만에 완성할 수 있었다. 이전과 다르게 훨씬 코드가 깔끔해졌다. 역시 TopDown 방식으로 생각하니 코드의 구성이 더 완벽해지고 완벽해지니 코딩하는 것도 재밌다. 이전에 bottom up 방식으로 했을 때는 코드가 너무 엉망이고 네이밍도 아무런 규칙없이 난잡했었다... (반성) recoil을 쓰며.. recoil을 사용했다. 왜냐하면 나는 처음부터 개발할때 컴포넌트를 나눠 놓았다. 서로 부모 자식 관계도 아닌 컴포넌트에서 같은 데이터를 공유해야 하는 일이 생겼다. 좀 더 자세하게 말하자면 잔디를 클릭할 때 달성 과정의 월 일이 바뀌어야 했다. 이 텍스트는 index.tsx에 있으므로 이를 기존의 react 방식으로 구현하기란 어렵다. 물..

오늘 해피하게 코딩을 하다가 next.js로 인해 당황을 좀 하였다. 분명 예쁘게 잘 정리가 되어 있던 것이 새로고침만 하면 스타일이 적용이 안 되는 문제이다. 또한 오류메세지는 위와 같다. 이는 명백한 next.js 이슈다. 내 코드를 다시 살펴 봤다. 위 코드에서 shift는 state이다. next.js 서버에서 styled-components의 shift를 인식 못했기 때문일 것이다. 저 부분을 어떻게 고치면 좋을까 나의 로직을 유지 하면서 바꿀 수 있는 방법이 있을까? state문제가 아니었다. 이는 서버에서와 브라우저 각각에서 styled-components의 해시값이 달라서 생기는 문제였다. babel-plugin-styled-components를 설치하고 babelrc를 만들어 위와 같이 ..

드디어..! LeafyLog 메인 페이지 코딩을 시작했다. 위는 최종 디자인 시안이다. 주요 기술은 next.js와 typescript이다. 문제점1 프로젝트를 진행하면서 어려웠던 점은 next.js와 typescript였다. 나는 TopDown방식으로 공부하는 것을 좋아해서 이것들의 강의를 먼저 학습한 후 프로젝트를 만들기 보다 일단 이 둘로 프로젝트를 만드는 것을 시작했다. 초반부터 styled-components가 새로고침하면 동작하지 않는 등의 자잘한 문제가 있었다. 또한 타입스크립트를 쓰니 props을 넘길 때마다 무슨 타입인지 지정해줘야 하니 여간 번거로운게 아니었다. Typescript에 장점을 어느정도 알고 있음에도 불구하고 당장 프로젝트를 할 때 시간이 2배로 걸리니 이걸 왜 써야 하는가..

충남대 sw아카데미의 교육생으로서 팀프로젝트를 진행하게 되었다. 처음부터 nextjs를 쓰는 데 어려움 중 하나는 url에 직접 https://localhost:3000과 같이 입력하면 전체 페이지에 스타일이 적용되지 않는 문제가 있었다. 글을 쓰는 와중에 2가지 오류 중 한가지 오류는 찾을 수 있었다. 위와 같이 해결했고, 나머지 오류는 아래와 같다. 아니다.. 위에 것도 다시 오류가 뜬다. 해결책을 찾음 이는 nextjs에서 ssr을 할 때 styled component가 반영이 안 되어서 라고 한다. https://tesseractjh.tistory.com/164 [Next.js] Next.js에서 Prop `className` did not match 경고가 뜨는 이유 이 글은 Prop `prop..

드디어 완성도 있는 개인 프로젝트를 만들 기회가 생겼다. 사실, 멘토님의 도움이 없었으면 시작하지도 않았을 프로젝트이다. 이번 기회에 많이 배워야지! 처음부터 내겐 도전적인 과제를 주셨다. 한 번도 피그마를 사용한 경험이 없는데 피그마로 와이어 프레임을 제작하라는 숙제였다. 막막했지만 바로 시작하고 어느정도 만족한 결과물이 나왔다. 깃허브 잔디밭을 보며 뿌듯했던 경험 다들 있을 것이다. 커밋 뿐만이 아니라 여러 학습들을 기록하고 이를 잔디밭으로 볼 수 있다면 동기부여에도 도움이 될 것고 무엇보다 자신이 학습한 내용과 목표를 비교할 수 있어 메타인지에도 도움이 될 것이다. (정직하게 성실히 기록한다는 가정하에) 목표 설정 기능과 진척도 기록 기능 그리고 목표에 대한 진척도의 퍼센테이지를 알려주는 기능. 그..