전체 글

기술 스택 선정 이유React vs Next.js SEO를 챙길 필요가 없음사용자 인터랙션 중심의 서비스대시보드를 통한 컬럼 및 카드 생성, 수정, 조회, D&D 등 사용자 인터랙션 중심의 서비스이기 때문에 SEO를 챙기는 것이 중요하지 않았을 뿐더러, Next.js의 이점 중 하나인 검색 엔진 최적화를 활용할 수도 없었고 앱 라우터의 서버 컴포넌트 등도 필요하지 않아 React로 진행하기로 했다. Tailwind vs Styled-ComponentsTailwind의 장점인 빠른 개발 속도 및 작은 번들 크기가 큰 이점이기에 마지막까지 고민을 하였으나, prop으로 동적으로 스타일을 변경할 수 있고, 기존 CSS의 @Keyframes을 그대로 사용할 수 있는 Styled-Components를 사용하기로 ..

이번에 (어느덧 한 달이 지난 시점이지만) 프로젝트 목록을 불러오는 로직을 작성하게 되었다.Next.js의 App router을 이용하기로 해서, react-query를 쓸지 안쓸지 팀원분들과 이야기를 나누어보았다.토론의 결과는 react-query를 사용하자는 것으로 귀결되어 무한스크롤 역시 react-query를 사용해서 구현했다. 구현 계획은 프로젝트 리스트의 가장 아랫부분에 div를 넣어두고, 이 요소가 보이는 순간 새로운 데이터를 패칭하는 것이다.그럼 바로 로직을 작성해보자. Intersection Observer 이용하기사용하려는 컴포넌트에서 intersectioin observer 설정을 해도 되지만, ProjectList.tsx는 데이터를 받아서 UI로 보여주는 UI컴포넌트이자, 여러 곳에..

우선 3주차 수업 회고를 마지막으로 주차별 회고를 올리지 않았다.거기에는 크게 세 가지 이유가 있다.강사님께서 준비하신 수업 커리큘럼을 그대로 올리는 것에 대한 조심스러움글로 정리할 수 없는 수많은 예외 상황과제를 수행하며 받는 피드백이 수업의 개념을 몸으로 마주하며 깨닫는 과정을 전달하기 어려움이러한 이유로, 수업에서 다루는 이론 개념들의 내용을 정리하여 공유하지는 않기로 마음 먹었다.스스로 강의를 복기하는 시간은 가졌지만, 오늘의 포스팅에서는 6주간의 빔캠프 과정을 회고해보려고 한다.강의 수강 이전의 나나는 CSS에 대한 개념이 아예 없거나, 원하는 디자인 시안을 구현하지 못하는 수준은 아니었다.여러 프로젝트와 프론트엔드 멘토를 통해서 주어진 디자인 시안을 구현할 줄 알았고, 간간히 내가 의도하지 않..

문제 상황분명히 react-query에서 client를 getQueryClient로 잘 가져오고 있는데 onSuccess가 제대로 동작하지 않는다...진짜 왜일까 진짜로...라고 생각하던 차!개발 일지를 작성하며 추측했던 몇 가지 요소대로 이유를 추려나가기로 마음 먹었다.이렇게 원인인 것 같은 부분을 점차 좁혀나가자, 결국엔 원인을 찾아냈다 하하 ! 아래는 문제 해결 전에 작성했던 코드이다.문제와 관련없는 부분은 생략했다'use client'function EditProfileModal({ openModal, handleModalClose, profileData }: EditProfileModalProps) { const queryClient = getQueryClient(); //이 부분이 올바르게 ..

어느덧 코드잇 스프린트의 마지막 프로젝트가 시작되었다.지금까지 마지막 프로젝트에 대한 이야기를 포스팅 한적이 없는 것 같은데, 중간 점검 느낌으로 한 번 정리하고 넘어가면 좋을 것 같아서 이번 포스팅의 주제로 들고 와보았다. FeedB 피드비웹 서비스의 이름은 '피드비(FeedB)', 배포된 토이 프로젝트를 게시하고 그에 대한 피드백을 사용자에게 받아볼 수 있는 사이트이다. 내가 만든 프로젝트가 실제 배포된 환경에서 문제가 있지는 않은지, 어느 지점에서 사용자 경험이 떨어지는지 제작자의 입장에서 알아보는 것은 한계가 있기 때문에, 이러한 프로젝트 주제를 잡게 되었다. 프로젝트를 홍보하고 게시하는 입장 뿐만 아니라, 다른 사람들이 어떤 주제로 토이 프로젝트를 진행하는지가 궁금한 사람 역시, 이 웹 서비스를..

이번 주차에서는 크게 Flex-box에 대한 내용을 다뤘다.수업을 시작하기에 앞서, 과제에 대한 피드백을 받았고 그 내용은 다음과 같다. 과제 피드백전반적으로 디자인에 대한 해석(임의 판단)이 과하게 진행된 것 같다.브라우저 환경에 대한 유동성이 너무 커서, 주어진 디자인 시안과 크게 달라지는 문제가 있다.학습하는 과정에서, 다양한 관점으로 디자인을 바라보고 구현해보는 것은 매우 바람직해보인다.이번 과제는 내가 코드를 구현하면서 고민했던 부분과 콘텐츠 확장 시 어떤 방향으로 구현을 하려 했는 등을 정리해서 함께 제출했다.물론 그 과정을 기록하고 문서화하는 과정에서 조금 매끄럽지 못한 부분도 있었지만, 이런 과정들을 기록하고 전달하는 습관을 유지했으면 좋겠다는 의견을 들었다. 동일한 시안에 대해서, 몇 가..

빔 캠프의 수업 내용을 간단하게 정리해보려고 한다.수업이 끝나고 스스로 복기하는 시간이 굉장히 중요하다는 생각이 들었기 때문이다. 강사님께서는 특히 용어에 대한 중요성을 강조하셨는데 내가 너무 대답을 못해서 많이 부끄러웠다.질문을 굉장히 많이 해주시는데, 그 중에서 한 두 개밖에 대답을 못했던 것 같다...ㅠㅅㅠ 매 주차별로 회고 해봐도 좋겠지만, 1주차에는 정신이 없어서 제대로 수업 내용 정리를 못한 탓에 2주차부터 정리해보려고 한다. 유지보수가 용이한 CSS 코드 작성하기  빔 캠프의 수업 목표이자, 나의 목표이기도 하다.물론, pixel perfection (정확한 디자인_가로 세로 길이 및 간격 등)을 맞추는 것도 중요하지만 실제 서비스는 끊임없이 변화하기 때문에 그에 대응하는 것이 더 중요하다고..

React 공식문서 - 리스트와 Key 리액트로 컴포넌트를 구현하다보면, 배열 데이터에 map으로 반복해서 컴포넌트를 만들어줄 때가 있다.key값을 넣어주지 않으면 아래와 같은 오류를 만날 수 있다.key 값으로는 중복되지 않는 고유한 값을 넣는 것이 권장된다.그렇다면 key값은 왜 사용해야하는 걸까? 리액트에서 배열을 렌더링할 때 key값을 넣어줘야 하는 이유React에서 key값은 DOM 요소를 식별하기 위해 사용하는 유일한 값이다.그래서 React는 이 key값을 가지고 기존 트리와 이후의 트리가 일치하는지 확인하기 때문에 배열을 이용하여 렌더링을 할 때 key값은 반드시 적어주어야 한다. 만약, key값이 없다면 변경이 없는 트리 전체를 리렌더링해야 하기 때문에 비효율적일 것이다. 배열을 렌더링할..

Box Model출처 : MDN 박스 모델CSS box Model은 Block 박스에 적용되며, Inline 박스는 Box Model에 정의된 일부 동작만 사용한다. 이 개념은 박스를 생성하기 위해 박스의 서로 다른 부분인 여백, 테두리, 패딩 및 콘텐츠 등이 어떻게 작동할 것인지에 대한 것을 결정짓기 때문에 정확히 이해하고 활용하는 것이 중요하다.  MDN에 있는 한국어 번역이 읽기 나빠서 천천히 정리해나가며 이해해보려고 한다. 본격적으로 Box Model에 대해서 알아보기 전에, 이와 관련된 display의 속성 중 block과  inline의 차이에 대해서 알아보려고 한다. 이 두 가지는 서로 다른 배치 방법, 가로 세로 길이, 줄 바꿈 등을 가지고 있기 때문에 차이점을 알고 사용하는 것이 좋다. ..

바닐라 JS를 이용해서 간단한 ToDo를 입력 받을 수 있는 캘린더를 만들어보자 다짐했었다.지난 포스팅에서는 내가 직접 디자인 한 UI를 구현했고, 오늘은 그 안의 내용을 채워줄 JavaScript 로직을 뜯어볼 것이다. 크게 캘린더 부분의 날짜를 불러오고 내가 원하는 날짜로 이동하는 로직과 지정한 날짜에 ToDo List를 입력하고 저장하는 로직으로 나뉠 것이다. UI를 어떻게 구현했는지 궁금하다면이전 포스팅 보러가기 [Vanila JS] Calender Todo - UI캘린더와 함께 간단한 할 일을 메모할 수 있는 사이트를 만들어보자 생각한 지 언....(기억 안남)그래서 이번에 프로젝트도 끝났겠다, 프론트엔드 멘토에서 얻은 의욕을 여기에 써보자는 생각이codingaring.tistory.com  이..