전체 글

프로젝트를 진행하고 코드를 작성하다보면, 상태 관리 라이브러리의 필요성을 느낄 때가 있다.현재 로그인한 유저의 정보, 다크 모드 라이트 모드 설정 등 생각보다 많은 부분에서 상태 관리 라이브러리의 필요성을 느꼈다. 주된 이유는, 너무 깊이 이어지는 Prop drilling이 이유였지만, 현재 상태값에 대한 인과 관계를 보다 쉽게 찾기 위해 라이브러리를 쓰고자 할 때도 있었다.(여러 컴포넌트에서 하나의 state를 핸들링하면, 현재의 state가 왜 그 값을 갖게 되었는지 찾기 어렵기 때문) 유명한 상태 관리 라이브러리들은 많았지만, 나는 라이브러리들 간의 차이를 알고 필요에 따라 적절한 것을 선택해서 사용하는 개발자가 되고 싶었다.그래서 상태 관리 라이브러리들의 공식문서를 읽고 사용해보면서, 그 구조들을..

이번에 프로젝트에서 페이지네이션을 버튼을 구현해봤다.다 구현해보고 나니 UI와 로직을 잘 분리한 것 같다는 생각이 들어서, 코드를 한 번 가지고 와봤다. 더보기- Next JS app router- tailwind- typescript [ 버튼 UI ] PageNationButtonexport default const PageNationButton = ({ currentPage, totalPage, handleCurrentPage, hiddenCount = false, // 두 번째 유형처럼 사용하기 위한 prop}: PageNationButtonProps) => { return ( {!hiddenCount && ( {totalPage} 페이지 중 ..

프로젝트 환경 - Next JS _app router - TypeScript - Style : TailWind 중급 프로젝트에서 모달 UI를 맡아서 작업을 하고 있다. 다른 모달들은 단순한 UI이기도 하고, 크게 고민할 요소조차 없었다. 그냥 하면 되는 것들. 그런데도, 생각보다 시간이 꽤나 걸렸다. 이유가 뭘까, 왜이렇게 속도가 안날까 곰곰히 생각을 해봤다. 그 이유는 절대적인 경험 부족이다. 다양한 input type을 이용해 구현을 해본적이 없었고, 막연하게 쉽게 할 수 있을 것이라고 자만하고 있었다. 재사용을 고민하다보니, 공통 input으로 빼기도 애매했고 생각보다 고민에 오랜 시간이 걸렸다. 그 중에서도 내가 턱! 하고 막히게 된 input은 바로 file 타입을 가진 input이다. 내가 원..

사실 오늘 쓸 내용은 지금까지처럼 개발과 관련된 내용이 아니다.유익한 내용을 기대하고 들어왔다면, 조용히 나가도 좋다.푸념을 주저리주저리 적은 글이라 재미도 없다 (아마?) 중급 프로젝트가 시작되었다.기존 4명이었던 인원이 (취뽀 하셔서) 3명으로 줄어들었고, 프로젝트가 시작되기 전부터 걱정이 많이 되었다.나의 실력에 대한 자신은 없지만서도, 구현해보지 않은 기능들을 구현해보고 싶었다. (욕심쟁이 우후훗) 사실 중급 프로젝트 직전인 16주차 위클리 미션에서부터 코드를 짜는게 조금 무서웠었다.내가 생각하지 못한 곳에서 문제를 만나고, 그 원인을 찾는데 어려움을 느꼈다.물론, API 명세를 조금만 더 꼼꼼히 읽었다면 파악할 수 있었던 크지 않은 문제였지만 며칠을 원인도 모른채 삽질을 하느라 에너지를 너무 많..

위클리 미션에서 리팩토링을 하고 싶은 부분이 아주 많다. 그 중에서 한 두가지 정도를 뽑아서 매주 리팩토링을 해보자는 다짐을 했었는데, 이번주에는 모달을 리팩토링 해보기로 했다. 그래서, 멘토링 시간 때 모달 리팩토링에 대해서 이야기를 해봤고 context API만으로도 구현이 가능해보인다는 결론이 나서 이번 주차에 해보기로 마음을 먹었다..! 이전부터 상태관리를 위한 다양한 방법들을 공부하고 싶었기 때문에 바로 리팩토링에 들어갔다. 그럼 바로, ContextAPI를 이용해서 어떻게 모달 리팩토링을 진행했는지 확인해보자~ ! 😊 Modal 컴포넌트 리팩토링이 필요하다고 생각한 이유 우선, 왜 모달 컴포넌트를 리팩토링 하고 싶었는지에 대해 짚고 넘어가야할 것 같다. 현재 모달 컴포넌트 구현을 위한 로직은 ..

이번 주차의 요구사항은, 저번 주차에 만들었던 Input Component를 이용해서 로그인 및 회원가입 기능을 완성하는 것이다. 하지만, react-hook-form을 적용하는 것이 심화 요구사항이기 때문에 이를 적용해서 구현해보았다. 요구사항의 세부사항이 많은 관계로 간략하게 정리했다! - input에서 focus out될 때 빈 값이거나 유효한 값이 아니면 에러메시지를 출력한다. - 모두 유효한 값이 입력되었을 때 로그인 및 회원가입 시도가 가능하고, api에 POST 요청을 보내 로그인 및 회워가입이 가능하면 folder 페이지로 이동한다. react-hook-form는 처음 써보는 라이브러리였기 때문에 적용하는 과정과 함께 공식 문서의 내용을 정리해보려고 한다 아직 난 아무것도 모르는 응애입니다..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Suite Landing Page FOCUS ON This small-ish HTML and CSS only landing page includes some interesting layout decisions. Perfect if you want to put your layout and responsive skills to the test! 반응형과 시안 안의 몇 가지 요소를 CSS로 구현하는게 재미있을 거라고 하네요! WHAT TO DO? - 두 번째 섹션과 footer 부분을 완성했다. - z-index에 대해서 생각한..

week13의 심화 요구사항을 이번 주차에 구현하기로 마음먹고, next.js로의 마이그레이션과 심화 요구사항을 구현했다. 심화 요구사항 - 상단에 있던 링크 추가하기 영역이 가려져 보이지 않을 때 최하단에 링크 추가하기 영역을 고정하도록 만들었나요? - 푸터가 시작되는 지점에서는 최하단에 고정된 링크 추가하기 영역이 보이지 않도록 했나요? 이 요구사항과 함께, Intersection Observer를 이용해 구현해보라는 코멘트도 함께 달려있어서 사용해보았다 Intersection Observer 사용법 위 요구사항에서 나는 folder 페이지 컴포넌트의 header와 footer을 주시 대상으로 지정해야 했다. // folder 페이지 구성 기본 HTML 태그를 사용했을 땐 바로 useRef()를 쓰면..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Suite Landing Page FOCUS ON This small-ish HTML and CSS only landing page includes some interesting layout decisions. Perfect if you want to put your layout and responsive skills to the test! 반응형과 시안 안의 몇 가지 요소를 CSS로 구현하는게 재미있을 거라고 하네요! WHAT TO DO? - 기본적인 레이아웃 구조 작업을 했다! text-transform : 태그 안에 ..

- Next.js에서 SSR을 실행하는 과정과 hydration에 대해 설명해 주세요. Pre-rendering 이란?: Next.js에서는 Client-side로 페이지를 로드하기 전, 각 페이지에서 Pre-rendering을 한다. 이를 통해 얻을 수 있는 이점초기 로딩이 빨라짐 (성능 향상)검색 엔진에 최적화가 됨 React의 렌더링 방식텅 빈 HTML을 받아와서 추후에 javascript로 페이지 컴포넌트를 생성  Next.js의 렌더링 방식사전에 각 페이지를 만들어놓음 -> 이때 각 HTML은 해당 페이지에 최소한으로 필요한 자바스크립트 코드와 결합되어 있음정적 페이지에서 hydration이라는 프로세스를 거치며 인터렉티브한 페이지가 됨 프리렌더링의 방식- 정적 생성 (Static Generat..