본문 바로가기

전체 글205

코딩테스트 문제 복습 (Valid Parentheses) 스택과 시간복잡도를 사용하는 문제문제:Given a string s containing just the characters '(', ')', '{', '}', '[' and ']', determine if the input string is valid.An input string is valid if:Open brackets must be closed by the same type of brackets.Open brackets must be closed in the correct order.Every close bracket has a corresponding open bracket of the same type.(출처: https://leetcode.com/problems/valid-parenthese.. 2025. 4. 29.
DNS 서버 DNS 서버가 하는 일DNS 서버는 사용자가 URL을 입력하면 해당 도메인 이름에 해당하는 IP주소로 변환하는 역할을 한다. 사용자가 웹사이트에 접속할 때마다 발생하는 일이기 때문에 DNS 서버가 없으면 인터넷 사용이 불가능에 가까울 정도로 중요하다고 볼 수 있다. DNS는 Domain Name System의 약자로, 사용자가 입력한 도메인을 IP주소로 변환하기 때문에, 만약 이러한 기능을 수행하지 않는다면 사용자가 직접 IP주소를 찾고 입력해야 해서 불편할 것이다. DNS 서버의 구조와 작동원리DNS 서버는 계층적 구조를 가지고 있다. 그 구조는 일반적으로 다음과 같다.로컬 DNS 서버: 사용자의 요청을 처리하는 서버루트 DNS 서버: 최상위 DNS 서버TLD DNS 서버: 최상위 도메인에 대한 정보를.. 2025. 2. 12.
렌더링 과정에서의 Reflow와 Repaint Reflow와 Repaint 개념웹개발에서 Reflow와 Repaint는 브라우저가 웹페이지를 렌더링할 때 발생하는 과정으로, 성능에 큰 영향을 미칠 수 있는 과정이다.  Reflow는 웹페이지의 레이아웃을 다시 계산하는 과정을 말하는데, 예를 들어 DOM 요소의 크기나 위치가 변경되면 브라우저는 해당 요소와 그 자식 요소들의 레이아웃을 다시 계산해야 한다. 반면, Repaint는 요소의 시각적 스타일이 변경될 때 발생한다. 예를 들면, 색상이나 배경 이미지가 바뀌면 Repaint가 발생하지만, 레이아웃은 변경되지 않는다. 이 두 과정은 서로 연결되어 있으며, Reflow가 발생하면 반드시 Repaint가 발생하지만, 거꾸로 Repaint는 Reflow 없이도 발생할 수 있다. Reflow가 발생하는 상.. 2025. 1. 30.
CRP 프로세스 CRP 프로세스 정의웹개발에서 CRP(Critical Rendering Path)는 브라우저가 HTML, CSS, 자바스크립트를 화면에 픽셀로 변환하는 일련의 단계를 의미한다. 이 과정은 웹페이지가 사용자에게 어떻게 보여지는지를 결정짓는 중요한 요소로, 웹 성능 최적화에 있어서도 매우 중요한 역할을 한다. CRP를 이해하면 웹페이지의 로딩속도를 개선하고 사용자 경험을 향상시킬 수 있다. 브라우저 렌더링의 기본 원리브라우저는 사용자가 웹페이지를 요청할 때, 서버로부터 HTML, CSS, 자바스크립트 파일을 받아온다. 이 파일들은 브라우저의 렌더링 엔진에 의해 처리되어 최종적으로 화면에 표시된다. 이 과정에서 브라우저는 HTML을 DOM으로 변환하고, CSS를 CSSOM으로 변환한다. 이 두 가지 모델은 렌.. 2025. 1. 25.
refine 메서드로 검증하는 zod 스키마와 extend 동시 사용 불가 이슈 zod의 refine 메서드 zod의 refine 메서드는 특정 input 요소의 단순한 검증(ex. 문자열, 숫자, 정규식)이 아닌 커스텀 검증을 사용할 때 사용한다. 따라서, 회원가입에서의 비밀번호와 비밀번호 확인 두 가지의 값이 서로 같은지 다른지, 사용자가 입력한 값이 특정 로직을 거쳐서 해당되는 값이 나와야하는지 등의 상황에서 자주 쓰이게 된다.// 예시 1const myString = z.string().refine((val) => val.length data.password === data.passwordConfirm, { message: "비밀번호가 일치하지 않습니다.", path: ["userPassword2"], }) 스키마 확장(extend) 사용 extend 메서드.. 2024. 12. 2.
UND_ERR_REQ_CONTENT_LENGTH_MISMATCH 에러 UND_ERR_REQ_CONTENT_LENGTH_MISMATCH 에러 이번 심화프로젝트를 시작하면서 회원가입 로직을 만들고 있는데, 처음 보는 에러가 계속 발생해서 당황했다. 우선 현재 회원가입 로직이 하나의 로직으로 두 개의 분기를 나눠서 처리해야 해서 zod 스키마를 base 스키마를 바탕으로 하는 A 스키마, B 스키마로 나누었다. 두 개의 분기는 URL params로 경로를 분산했고, 분기처리는 성공했는데 문제는 그 다음이었다. 서버에는 하나의 스키마로 된 api로 요청하도록 되어있는데, 각 분기별 필수값이 달라서 요청할 때 계속 특정 값들이 zod safeParse 검증을 통과하여 전달될 때 제외되는 현상이 있었다. 그래서 UND_ERR_REQ_CONTENT_LENGTH_MISMATCH 에러로 .. 2024. 11. 24.