문제 상황분명히 react-query에서 client를 getQueryClient로 잘 가져오고 있는데 onSuccess가 제대로 동작하지 않는다...진짜 왜일까 진짜로...라고 생각하던 차!개발 일지를 작성하며 추측했던 몇 가지 요소대로 이유를 추려나가기로 마음 먹었다.이렇게 원인인 것 같은 부분을 점차 좁혀나가자, 결국엔 원인을 찾아냈다 하하 ! 아래는 문제 해결 전에 작성했던 코드이다.문제와 관련없는 부분은 생략했다'use client'function EditProfileModal({ openModal, handleModalClose, profileData }: EditProfileModalProps) { const queryClient = getQueryClient(); //이 부분이 올바르게 ..
🗂️ 개발 이모저모
어느덧 코드잇 스프린트의 마지막 프로젝트가 시작되었다.지금까지 마지막 프로젝트에 대한 이야기를 포스팅 한적이 없는 것 같은데, 중간 점검 느낌으로 한 번 정리하고 넘어가면 좋을 것 같아서 이번 포스팅의 주제로 들고 와보았다. FeedB 피드비웹 서비스의 이름은 '피드비(FeedB)', 배포된 토이 프로젝트를 게시하고 그에 대한 피드백을 사용자에게 받아볼 수 있는 사이트이다. 내가 만든 프로젝트가 실제 배포된 환경에서 문제가 있지는 않은지, 어느 지점에서 사용자 경험이 떨어지는지 제작자의 입장에서 알아보는 것은 한계가 있기 때문에, 이러한 프로젝트 주제를 잡게 되었다. 프로젝트를 홍보하고 게시하는 입장 뿐만 아니라, 다른 사람들이 어떤 주제로 토이 프로젝트를 진행하는지가 궁금한 사람 역시, 이 웹 서비스를..
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의 차이에 대해서 알아보려고 한다. 이 두 가지는 서로 다른 배치 방법, 가로 세로 길이, 줄 바꿈 등을 가지고 있기 때문에 차이점을 알고 사용하는 것이 좋다. ..
프로젝트를 진행하고 코드를 작성하다보면, 상태 관리 라이브러리의 필요성을 느낄 때가 있다.현재 로그인한 유저의 정보, 다크 모드 라이트 모드 설정 등 생각보다 많은 부분에서 상태 관리 라이브러리의 필요성을 느꼈다. 주된 이유는, 너무 깊이 이어지는 Prop drilling이 이유였지만, 현재 상태값에 대한 인과 관계를 보다 쉽게 찾기 위해 라이브러리를 쓰고자 할 때도 있었다.(여러 컴포넌트에서 하나의 state를 핸들링하면, 현재의 state가 왜 그 값을 갖게 되었는지 찾기 어렵기 때문) 유명한 상태 관리 라이브러리들은 많았지만, 나는 라이브러리들 간의 차이를 알고 필요에 따라 적절한 것을 선택해서 사용하는 개발자가 되고 싶었다.그래서 상태 관리 라이브러리들의 공식문서를 읽고 사용해보면서, 그 구조들을..
- Next.js에서 SSR을 실행하는 과정과 hydration에 대해 설명해 주세요. Pre-rendering 이란?: Next.js에서는 Client-side로 페이지를 로드하기 전, 각 페이지에서 Pre-rendering을 한다. 이를 통해 얻을 수 있는 이점초기 로딩이 빨라짐 (성능 향상)검색 엔진에 최적화가 됨 React의 렌더링 방식텅 빈 HTML을 받아와서 추후에 javascript로 페이지 컴포넌트를 생성 Next.js의 렌더링 방식사전에 각 페이지를 만들어놓음 -> 이때 각 HTML은 해당 페이지에 최소한으로 필요한 자바스크립트 코드와 결합되어 있음정적 페이지에서 hydration이라는 프로세스를 거치며 인터렉티브한 페이지가 됨 프리렌더링의 방식- 정적 생성 (Static Generat..
- TypeScript의 동작 원리에 대해 설명해 주세요.- 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요. TypeScript의 동작 원리타입 스크립트의 동작 원리를 설명하기 위해서는 다른 언어의 동작 원리와 다르다는 이야기를 해야하기 때문에 다른 프로그래밍 언어는 어떻게 동작하는지 먼저 알아보자.다른 프로그래밍 언어의 동작 원리프로그래밍 언어는 컴퓨터가 사용하는 기계어를 사람이 작성할 수 있게 만들어주는 것이다.이때, 대다수의 프로그래밍 언어는 컴퓨터가 이해할 수 있도록 기계어로 변환해주는 과정을 거치는데 이를 컴파일(Compile)이라고 한다. 컴파일은 컴파일러(Compiler)이 수행하게 되는데, 자바스크립트나 자바 같은 프로그래밍 언어는 바이트 코드라는 (통칭)..
**이미 지난 주차의 위클리 페이퍼이지만 블로그 이사로 인해서 새롭게 올리게 되었습니다.**내용은 유사하지만, 조금 더 보완해서 게시했습니다! - Git에서 branch merge 방법들과 각 방법의 특징을 설명해 주세요.- Git Flow 브랜치 전략에 대해 설명해 주세요. Branch Merge란?: merge, 병합하다 합병하다라는 뜻으로, git에서 branch를 나누어 작업을 한 후 나누었던 브랜치들을 다시 합치는 것을 의미합니다. 1. Merge commit: 합치는 것과 합쳐지는 것의 데이터를 모두 남기면서 새로운 커밋을 형성하는 방법 # 장점히스토리를 보존할 수 있음 -> 프로젝트 진행상황 파악이 용이하다.커밋 아이디가 바뀌지 않아서 squash나 rebase를 사용하기 쉽다.# 단점커밋이..
**이미 지난 주차의 위클리 페이퍼이지만 블로그 이사로 인해서 새롭게 올리게 되었습니다.**내용은 유사하지만, 조금 더 보완해서 게시했습니다! - 시맨틱 태그를 사용하면 좋은 점을 설명해 주세요.- position의 속성들과 각각의 특징을 설명해 주세요. Semantic tag란?: 의미론적(semantic) 태그라는 뜻으로,이를 이용하면 HTML에서 각각의 태그 안에 있는 내용이 어떤 목적으로 구현되었는지를 나타낼 수 있고,사용할 때는 콘텐츠의 의미와 기능에 따라 적합한 태그를 선택해야한다. 시맨틱 태그의 종류1) header로고 및 제목이 포함된 페이지의 최상단 콘텐츠 2) main메인 콘텐츠의 전체를 감싸는 태그 3) footer저작권, 연락처, 사업자 정보, 소셜 미디어 계정 정보 등이 포함된 하..
**지난 주차의 위클리 페이퍼이지만 블로그 이사로 인해서 새롭게 올리게 되었습니다.**내용은 유사하지만, 조금 더 보완해서 게시했습니다! - CSS의 Cascading에 대해 설명해주세요 Cascading이란?: 계단식으로 내려오는 형태의 폭포를 의미CSS에서는 여러 CSS규칙이 적용될 때 '순서'에 따라 합쳐지는 것을 의미한다.상위 요소의 스타일이 하위 요소로 내려오며 상속되는 특징을 계단식으로 내려오는 폭포에 빗대어 사용하는 것 같다. 상위 요소(우선 순위)를 결정 짓는 기준 3가지1. 스타일 시트의 종류어떤 스타일 시트의 스타일이냐에 따라 더 높은 우선순위를 가진다. [ 프로그래머가 작성한 stylesheet ] > [ user agent stylesheet (웹에서 제공하는 기본 스타일) ] 2..
