developic project

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

데스크 리서치 벤치마킹 & 서비스 포지셔닝 데스크 리서치를 통해 벤치마킹 대상을 분석하고 서비스 포지셔닝 전략을 세웠다. 중점적으로 분석한 사이트는 Flickr, 그라폴리오, Behance, Velog 4곳이었다.

Next.js는 리액트 개발 성능을 향상시키는 다양한 기능을 지닌 프레임 워크이다. 그 중에서도 서버 사이드 렌더링(SSR)을 쉽게 할 수 있게 도와주는 프레임 워크로 널리 알려져 있다. 그렇다면 우리의 Developic 프로젝트에 서버 사이드 렌더링이 필요한 걸까?

Vercel의 Next.js에 대한 목표는 개발자 경험, 유저 경험 이 두 가지에 대한 개선이라고 말한다. 그리고 실제로 그 목표에 따른 여러가지 유용한 기능들을 제공하고 있다. 그 중에서 몇 가지를 이야기해보고자 한다.

CSS-in-JS의 대표적인 라이브러리인 styled-components와 emotion 둘 중 어떤 것을 선택할 지에 앞서, 일반적인 CSS가 아닌 CSS-in-JS를 선택한 배경에 대해 이야기해보고자 한다.

리덕스의 핵심은 중앙 저장소인 store에서 상태를 효율적으로 관리하여 각 컴포넌트로 바로 전달하는 것이다. 우리가 만드는 컴포넌트에는 공통적으로 사용되는 데이터가 존재한다. 만약 이런 공통 데이터를 한곳에서 관리하지 않는다면, 부모 컴포넌트에서 자식 컴포넌트로 데이터

debounce와 throttle은 일정 시간 동안 반복적으로 실행되는 코드의 성능을 향상시키기 위해 널리 사용되는 두 가지 기술이다. 두 기능 모두 자주 사용되는 이벤트나 함수의 실행 빈도를 제한하여, 성능 상의 유리함을 가져오기 위한 개념이라 할 수 있다.

next.js의 useRouter 훅을 사용하면 router 객체에 접근해 query를 이용할 수 있다. 그런데 검색 페이지에서 이것을 이용하는 과정에서 예상치 못한 문제가 발생했다. 왜 정보를 가지고 이동을 못하니 🤷‍♀️ 내가 만들고 있는 검색 페이지에서

Masonry는 JavaScript 그리드 레이아웃 라이브러리이다. 석공들이 벽에 돌을 맞추는 것처럼 사용 가능한 수직 공간에 기반하여 요소를 최적의 위치에 배치함으로써 작동한다. 사진 공유 서비스로 유명한 핀터레스트에서 대표적으로 사용하고 있다.

Next.js의 장점을 SEO 초점에 맞춰 생각하다 보니 대부분 놓치게 되는 유용한 기능이 있다. 바로 Next.js에서 자체적으로 제공하는 Image Component를 통한 이미지 최적화 기능이다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

이전에 같은 문제가 발생했을 때 구글 메일의 보안정책과 관련이 있음을 확인하고 "보안 수준이 낮은 앱의 액세스"를 허용으로 바꾼 뒤 해결한 적이 있다. 그런데 최근 회원가입 시 또 해당 에러가 발생해 확인해보니 구글이 관련 정책을 바꾼 것을 알 수 있었다.야속하게 느껴