profile
주니어 프론트엔드 개발자!

Next.js 블로그 만들기 (5) - 마크다운 에디터

Velog처럼 예쁘게 마크다운 에디터를 도입할 수는 없어도 최소한 온라인 마크다운 에디터는 있어야겠다고 생각을 해왔지만, 이렇게 빨리 도입하게 될 줄은 몰랐다. 그렇지만 사실 이전에 HTML 에디터를 사용해본 적이 있어서 귀찮았을 뿐 어렵지 않게 구현할 수 있었다. 이

2022년 6월 23일
·
0개의 댓글
·
post-thumbnail

Next.js 블로그 만들기 (4) - 페이지네이션

이전 포스트에서 OAuth를 통한 인증을 구현하고, back-end와 front-end 레포지토리를 분리했다. 이번에는 페이지네이션과 함께 마크다운 에디터를 도입한 것과 관련해 글을 쓰려고 한다. 페이지네이션 위 이미지와 같이 페이지를 선택할 수 있고, 각 페이지마

2022년 6월 23일
·
0개의 댓글
·
post-thumbnail

Next.js 블로그 만들기 - (3) 레포 분리, Webpack, OAuth2, JWT

이번에는 인증 기능을 추가하면서 기존 Next API를 express 서버로 이전하고 레포지토리 분리를 하게 되었다. 쿠키를 만들고 싶은데 Next API에서는 Set-Cookie 헤더를 직접 넣어줘야하는 부분이 마음에 들지 않았고, 생각보다 Next API가 expr

2022년 6월 19일
·
0개의 댓글
·
post-thumbnail

Next.js 블로그 만들기 - (2) Next API, Sqlite

지난 번에는 마크다운을 보여주는 페이지를 빌드하고 보여줄 수 있도록 개발을 진행했다. 그런데 마크다운에 대한 메타데이터를 저장하는 DB가 없어서 파일 시스템을 직접 검사하고 마크다운 파일이 있을 경우 렌더링하도록 했다. 오늘은 이 부분을 개선하여 글을 작성할 것이다.지

2022년 6월 15일
·
0개의 댓글
·
post-thumbnail

Next.js 블로그 만들기 - (1) React-Markdown

처음부터 블로그를 전부 만드려는 계획은 있었는데 카카오 인턴에 합격하고 비는 시간 동안 내친김에 만들어보기로 했다. 이전하려는 이유는 velog가 불편하다거나 한 것이 아니라 내가 세세하게 조절할 수 있는 블로그를 만들고 싶었기 때문이다. 그리고 블로그를 제작에 대한

2022년 6월 14일
·
0개의 댓글
·
post-thumbnail

React의 Reconciliation과 최적화 - (2)

지난 글에서 Diffing 알고리즘과 React.memo()를 사용한 최적화 방법에 대해서 알아봤다. 이번에는 Diffing에 대해서 조금 더 자세히 알아보려고 한다.지난 글에서 엘리먼트가 update 되어야 할 때, 같은 타입의 엘리먼트에 대해서 어떻게 처리하는지를

2022년 6월 12일
·
0개의 댓글
·

React의 Reconciliation과 최적화 - (1)

우리가 React에서 상태를 변경하면 Reconciliation이 일어나게 된다. 이 때 React는 변화 전, 후의 DOM과 컴포넌트를 비교해서 어떤 부분이 변경되었는지를 검사한다. 이 과정을 Diffing이라고 한다. 오늘은 React 내부적으로 Diffing이 어

2022년 6월 10일
·
0개의 댓글
·
post-thumbnail

Why React?

StackOverflow StatisticsReact는 javascript 라이브러리로 2014년 첫 등장 이후로 지금까지 엄청나게 많은 사랑을 받아오고 있다. 이런 이유로 많은 사람들이 React를 통해 웹을 접하는 경우가 늘어나는 것 같다. 하지만 왜 React를

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

첫 포스트

velog로 블로그를 시작하려고 합니다.최근 프론트엔드 채용 프로세스를 경험하면서 기록이 중요하다는 것을 깨달았습니다.그래서 프로젝트들을 진행하면서 어려웠던 점이나 잘 몰랐던 점에 대해서 공부하고 적을 예정입니다.

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