Dev

브라우저의 동작원리와 렌더링 과정에 대해 정리해보고자 한다. 브라우저 동작 방식 브라우저(클라이언트)의 주소창에서 URL을 입력 URL 호스트명(도메인)이 DNS를 통해 IP 주소로 변환 브라우저(클라이언트)는 IP주소를 갖는 서버에게 요청을 전송 브라우저 렌더링 과정 렌더링 엔진이 HTML(index.html) 을 파싱하는 도중에 외부 리소스를 로드하는 태그, 즉 CSS파일을 로드하는 link 태그, 이미지파일을 로드하는 img 태그, 자바스크립트를 로드하는 script태그 등을 만나면 HTML파싱을 일시 중단하고 해당 리소스 파일을 서버로 요청 이때 link 태그의 href 어트리뷰트를 통해 로드한 CSS 파일이나 style태그 내 CSS를 HTML과 동일한 파싱과정을 거치며 해석하여 CSSOM(CS..

https://www.acmicpc.net/problem/2217 2217번: 로프 N(1 ≤ N ≤ 100,000)개의 로프가 있다. 이 로프를 이용하여 이런 저런 물체를 들어올릴 수 있다. 각각의 로프는 그 굵기나 길이가 다르기 때문에 들 수 있는 물체의 중량이 서로 다를 수도 있다. 하 www.acmicpc.net 문제 N(1 ≤ N ≤ 100,000)개의 로프가 있다. 이 로프를 이용하여 이런 저런 물체를 들어올릴 수 있다. 각각의 로프는 그 굵기나 길이가 다르기 때문에 들 수 있는 물체의 중량이 서로 다를 수도 있다. 하지만 여러 개의 로프를 병렬로 연결하면 각각의 로프에 걸리는 중량을 나눌 수 있다. k개의 로프를 사용하여 중량이 w인 물체를 들어올릴 때, 각각의 로프에는 모두 고르게 w/k ..

https://www.acmicpc.net/problem/1449 1449번: 수리공 항승 첫째 줄에 물이 새는 곳의 개수 N과 테이프의 길이 L이 주어진다. 둘째 줄에는 물이 새는 곳의 위치가 주어진다. N과 L은 1,000보다 작거나 같은 자연수이고, 물이 새는 곳의 위치는 1,000보다 작거나 www.acmicpc.net 문제 항승이는 품질이 심각하게 나쁜 수도 파이프 회사의 수리공이다. 항승이는 세준 지하철 공사에서 물이 샌다는 소식을 듣고 수리를 하러 갔다. 파이프에서 물이 새는 곳은 신기하게도 가장 왼쪽에서 정수만큼 떨어진 거리만 물이 샌다. 항승이는 길이가 L인 테이프를 무한개 가지고 있다. 항승이는 테이프를 이용해서 물을 막으려고 한다. 항승이는 항상 물을 막을 때, 적어도 그 위치의 좌우..

이번 포스팅에서는 진행중인 개인프로젝트에 nodemailer를 사용하여 이메일 인증기능과 비밀번호 초기화 기능을 구현했던 과정을 정리해보려 한다. • 개요 사용자가 계정 비밀번호를 분실하였을 때 회원가입시 입력한 이메일주소를 통해 비밀번호를 변경할 수 있는 링크를 보내서 비밀번호를 변경할 수 있게 해주고 싶었다. 하지만 이 기능은 회원가입시에 사용자의 메일주소가 유효한지 인증이 우선적으로 필요하기 때문에 회원가입시 사용자가 입력한 이메일주소로 인증번호를 보내고 입력한 인증번호가 일치할 시에만 회원가입이 되도록 이메일 인증 기능도 구현이 필요한 상황이였다. 두 기능 모두 메일발송이 우선적으로 되어야 구현할 수 있기 때문에 혹시 npm 에 메일발송을 할 수 있는 모듈이 없을까 찾아보다가 nodemailer를..

이번 포스팅에서는 next.js 로 개인프로젝트를 진행하며 next-auth를 적용하여 로그인 기능을 구현했던 과정에 대해 공유해보려 한다. 왜 Next-Auth 였나 ? 무엇보다 Next Auth 를 사용한 가장 큰 이유는 쉽고 간단하게 구현할 수 있기 때문이였다. DB 통신을 하여 로그인을 직접 구현하는 것 이외에도 Oauth, Email 를 사용하여서도 쉽게 구현할 수 있도록 가이드가 잘 되어있고 발급받은 jwt 를 crsf 토큰을 활용해 매 사용자 요청을 검증하도록 안전하게 설계되어 있다.(자세한 정보는 next-auth 공식 레퍼런스(https://next-auth.js.org)를 참고) Oauth 소셜로그인 기능도 구현해보고 싶었지만 일단 제일 기본적인 로그인 부터 구현해보고 싶어서 이번 포스..

이번 포스팅에서는 리덕스 사가를 개인 프로젝트에 적용하면서 알게된 것들을 정리해보려 한다. 개인프로젝트로 next.js로 블로그를 만들고 있는데 특정 사용자의 블로그로 접속했을때 해당 블로그의 사용자 정보(계정, 블로그명 등)와 최근 게시글, 인기게시글, 최근 댓글등 과 같은 정보를 왼쪽 영역에서 공통 layout으로 표출해주고 있었다. 이 데이터들은 _app.tsx 파일에서 getInitialProps로 서버사이드에서 데이터를 가져와서 layout 파일에 props로 내려주고 있었는데 해당 레이아웃을 사용하는 파일이 여기저기 있다보니 같은 props 가 무분별하게 사용되는게 보기 좋지 않았다. 이번기회에 리덕스를 프로젝트에 적용해보고 싶기도 해서 리덕스를 사용하여 해당 데이터를 상태로 관리하되 서버사이..

이번 포스팅에서는 Redux Toolkit을 사용하여 보다 효율적으로 Redux를 사용하는 방법을 정리해보고자 한다. 목차 Redux Toolkit 이란? Redux Toolkit 설치 Redux Toolkit 기능과 사용 예시 1. Redux Toolkit 이란? Redux Toolkit은 리덕스의 복잡한 부분을 간소화하여 리덕스를 보다 쉽고 간편하게 사용할 수 있도록 만들어진 라이브러리이다. Redux Toolkit은 기존 Redux를 사용했을때 대비 아래와 같은 이점이 있다. - 초기 저장소를 설정을 기존 Redux 저장소 설정에 비해 간편하게 할 수 있음. - 기존 Redux 코드의 불필요한 반복을 줄이고 보다 간편한 코드로 작성할 수 있는 이점이 있음 - Redux 사용에 용이한 패키지(DevT..

이전포스팅에서 이어서 이번 포스팅에서는 리덕스에서 미들웨어의 기본 개념과 Redux Thunk에 대해서 정리해보려 한다. 목차 미들웨어(Middleware) 란? 미들웨어 함수 생성 비동기처리를 위한 미들웨어 : Redux Thunk 1. 미들웨어(Middleware) 란? Redux 미들웨어를 간단하게 요약하면 action을 dispatch로 전달하고 reducer에 도달하기 이전에 지정된 작업을 실행할 수 있게 해주는 중간자이다. reducer가 dispatch 받은 액션을 처리하기 전에 할 수 있는 작업들은 다양한데 예를 들면 로깅, API 비동기 작업, 라우팅 등이 있다. 2. 미들웨어 함수 생성 미들웨어의 사용 예시를 위해 리덕스 사용시 console 로그를 찍는 간단한 미들웨어 함수를 작성하였..