profile
새로운 언어 새로운 행간 읽기
post-thumbnail

[developic] 페이지 나가기 확인창 띄우기 - next.js routeChangeStart

포스트 작성 페이지같은 곳에서 페이지를 벗어날 때 작성 중인 내용을 잃지 않도록 페이지를 나가시겠습니까? 와 같은 내용의 확인창을 띄우는 방식의 1차 안전장치가 필요할 때가 있다. 그리고 나아가 페이지를 나가게 되더라도 특정 상황(제출 버튼을 누를 때라든지)에서는

2021년 8월 24일
·
0개의 댓글
post-thumbnail

[developic] react radio button custom hook 만들기

프로젝트 내에서 중복적으로 사용되고 있는 라디오버튼 요소가 있었다. 라이브러리를 이용해 쉽게 다루는 방법도 있지만, 커스텀 훅 연습용으로 라디오버튼 커스텀 훅을 직접 만들어보기로 했다. 먼저 공통으로 요구되는 props는 다음과 같았다.

2021년 8월 20일
·
0개의 댓글

'value' prop on 'input' should not be null 에러 해결

Warning: 'value' prop on 'input' should not be null. Consider using the empty string to clear the component or 'undefined' for uncontrolled components

2021년 8월 12일
·
0개의 댓글
post-thumbnail

[developic] useLayoutEffect 훅으로 화면 깜박임 해결

useEffect를 이용해 블로그 구독 버튼 스타일을 출력하는 과정에서 화면 깜박임이 발생했다.탭을 이동할 때마다 발생하는 보기 싫은 깜박임을 해결하기 위해 찾아본 결과, 사용자에게 보여지는 DOM의 변경이 있을 때 사용 가능한 useLayoutEffect 훅을 알게

2021년 8월 5일
·
0개의 댓글
post-thumbnail

[developic] `undefined` cannot be serialized as JSON 에러 해결

정말 간단한 부분에서 발생했는데 한참을 헤맸던 에러였다. 먼저 내용을 읽어보면 `getServerSideProps`에서 `.initialState.user.auth.error`를 직렬화하는 과정에서 에러가 발생했고, undefined은 JSON으로 직렬화할 수 없으니

2021년 7월 21일
·
0개의 댓글
post-thumbnail

[developic] 사소하지만 한번 더 생각하기: 말줄임 표시

글 목록에서 제목이나 내용이 필요 이상으로 길어질 경우, 화면에 알맞게 보여지기 위해 내용의 일부만 보여주고 말 줄임 표시(…)를 해야 한다. 제목과 요약을 출력하고 있는 페이지가 많았기 때문에 이를 적용하기로 했다.

2021년 7월 19일
·
0개의 댓글

[developic] 이미지 대체 텍스트 alt 속성

alt 특성은 이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가 alt의 값을 읽어 사용자에게 이미지를 설명하므로, 접근성 차원에서 매우 유용하다. 또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여준다

2021년 7월 6일
·
0개의 댓글

[developic] React.memo, useMemo, useCallback? 리액트 최적화의 바다

드디어 최적화의 바다에 들어왔다. 강의를 듣고 공식문서를 읽으면서 사용해봐도 어쩐지 익숙해지지 않던 리액트 최적화 삼총사 React.memo, useMemo, useCallback를 이번 기회에 제대로 이해한 뒤 실행시켜 보고 싶었다.

2021년 6월 8일
·
0개의 댓글
post-thumbnail

[developic] 드롭다운, 외부 클릭 감지 기능 custom hook 구현

드롭다운(Dropdown)에 필요한 기능은 다음과 같다. - 드롭다운 형식으로 목록 출력하기 - 배경이나, 해당 요소 외 다른 요소를 클릭하면 닫히게 만들기 먼저 목록을 출력하는 드롭다운 컴포넌트의 경우 일단 검색 정렬, 기간 필터링 기능에서부터 중복 사용

2021년 6월 2일
·
0개의 댓글
post-thumbnail

[developic] 검색 페이지 - 검색 필터링 기능 업데이트

디벨로픽의 기존 검색 기능은 검색 결과에 대해 인기순, 최신순 두 가지의 정렬 옵션을 선택할 수 있었다. 그런데 인기순 정렬의 경우, 어쩔 수 없이 오래전에 작성한 게시글일 수록 인기도(누적 좋아요+조회수)가 높을 수 밖에 없는 상황이 발생한다면, 최신 글은 인기순

2021년 6월 2일
·
0개의 댓글

[developic] react list key error, uuid를 써도 될까?

블로그 페이지를 최종 점검하는데 픽스토리 페이지 접근 시 콘솔창에서 다음과 같은 경고를 만났다. Warning: Each child in a list should have a unique "key" prop 리스트에 각각의 child는 고유한 'key'를 가지고

2021년 5월 20일
·
0개의 댓글
post-thumbnail

[developic] 내 디벨로픽 페이지 - 팔로우 기능

각 블로그에서 구독/구독해지 버튼을 눌러 유저를 구독하거나 구독을 해지할 수 있다. 로그인한 유저 데이터의 subscribers 배열의 객체 id가 해당 블로그 유저의 아이디(blogUserData.id)가 있다면(일치하면) 구독을 해지하고, 유저 아이디가 없다면

2021년 5월 13일
·
0개의 댓글

[developic] 디벨로픽(DEVELOPIC) 프로젝트📸 시작

What is DEVELOPIC 🚀 사진 작가들을 위한 블로그 플랫폼 사진과 이야기를 기록하고 공유할 수 있는 공간을 제공하고, 같은 분야의 경험·지식을 나눔으로써 작가들의 커뮤니티 구축을 돕는 서비스를 목표로 한다.

2021년 5월 13일
·
0개의 댓글

[developic] 페이징 처리 방식 Offset vs Cursor pagination

무한 스크롤을 구현하면서 관련 정보를 찾아보다가 페이징 처리시 오프셋 방식을 사용하면 성능저하 이슈가 생길 수 있다는 정보를 접하게 됐다. 그래서 두 가지의 다른 페이지네이션 방식인 오프셋 기반 페이지네이션과 커서 기반 페이지네이션에 대해 알아보기로 했다.

2021년 5월 13일
·
0개의 댓글
post-thumbnail

[developic] 프론트/백 성능과 소통에 관한 고민

디벨로픽 프로젝트를 하면서 실전처럼 느끼고 있는 것 중 하나가 백엔드와 프론트 간 충분한 소통의 중요성이다. 이와 관련해 가장 최근 경험한 일은 백엔드에서 프론트로 전달받는 데이터 구조에 관한 이슈였다. 프론트에서 블로그의 픽스토리 목록과 해당 픽스토리에 포함된 포함된

2021년 5월 13일
·
0개의 댓글

[developic] 페이지네이션 vs 무한스크롤

사실 처음에는 페이징 처리를 큰 고민 없이 우리와 비슷한 사이트를 따라 무한 스크롤 방식으로 처리하고자 했다. 그런데 무한 스크롤 기능을 구현하기 위해 여러 정보들을 찾아보다가 의문이 들었다. 왜 이 사이트들은 무한 스크롤로 페이징 처리를 하고자 했지?

2021년 5월 13일
·
0개의 댓글

[developic] Intersection Observer로 무한 스크롤 구현

Intersection Observer API타겟 요소와 상위 요소 또는 최상위 document의 viewport의 교차점에서 일어나는 변화를 비동기적으로 관찰하는 방법 제공 window.addEventListener를 이용하는 스크롤 이벤트는 다음과 같은 방식으로 사

2021년 5월 12일
·
0개의 댓글

[developic] router.query값이 undefined을 반환하는 문제

각 블로그의 userId를 router의 query를 이용하여 저장한 뒤 넘겨주고자 했다. 그러나 최초 실행 시 router.query.userId가 undefined으로 정의된다. 이는 정적으로 최적화 된 페이지는 제공되는 route 매개 변수가 없이 수화되기 때문이

2021년 5월 7일
·
0개의 댓글

[react] Redux Toolkit 사용 가이드(TypeScript)

Redux Toolkit 공식문서 개인 학습용 글입니다. 배울 것TypeScript와 함께 각 Redux Toolkit API를 사용하는 방법에 대한 세부 정보Redux Toolkit은 TypeScript로 작성되었으며 API는 TypeScript 애플리케이션과의 뛰어

2021년 4월 29일
·
0개의 댓글

[react] Redux Toolkit 사용 가이드

redux-toolkit 공식 문서 사용 가이드 개인 학습용으로 작성한 글입니다. Redux Toolkit의 목표는 일반적인 Redux 사용 사례를 단순화하는 것입니다. Redux Toolkit이 Redux 관련 코드를 개선하는데 도움이 되는 몇 가지 방법을 살펴 보겠

2021년 4월 28일
·
0개의 댓글