1️⃣ 개발 지식 A+17 Next.js 13.4+ App Router 도입 고민 (feat. styled-component) (25.01.10 기준) Next.js latest version 은 15.1.4 이다.마지막으로 사용한게 12 버전이었고, 현재 재직하고 있는 곳에서 13 버전을 사용하고 있어 그 사이 주요 변화를 알아보려한다. 주요하게 볼 점은 공식문서에서 13.4를 기준으로 App Router 방식을 Stable로 지정했듯이, app 단위로 컴포넌트와 page를 함께 관리할 수 있다는 것이다. (여전히 구 Pages Router 방식도 제공) 그리고 페이지 단위가 아닌 컴포넌트별로 렌더링 방식을 최적화할 수 있다. 하지만, 레포에 적용하려고 보니 다음과 같은 에러를 만났다. 스타일 라이브러리로 styled-component를 사용하고 있는데, 내부적으로 createContext 를 사용하고 있어 추가 작업이 필.. 2025. 1. 10. JWT 기반 클라이언트 인증 서버가 유저 A, B를 구분하는 방법에는 무엇이 있을까?서비스 진입 맨 처음 ID/PW 를 입력한다. 이는 유저를 식별할 수 있는 핵심 데이터이다. 하지만, 매번 페이지를 이동할 때마다 로그인을 유도할 수 없다. 이때 필요한 것은 로그인을 대체할 '인증 수단' 이다. 그 중 하나가 바로 JWT (Json Web Token) 이다. JWT 인증 플로우 (심플)JWT 토큰 인증 플로우는 다음과 같다. 로그인에 성공하면 서버는 AccessToken 을 발급하고 앞으로 이를 토대로 유저를 식별한다. 클라는 Token 정보를 저장하고 있다가 인가가 필요한 요청 헤더 혹은 쿠키에 설정 후* 정상 플로우를 탈 수 있다. * 헤더 혹은 쿠키에 설정하는 기준은 추가 공부 필요 여기서 의문이 들 수 있다.- 어떻게 유저.. 2025. 1. 8. 브라우저 캐시 개발자 도구 네트워크탭을 애용하는 개발자는 리프레시 한 뒤 일부 리소스가 [디스크 캐시] 되는 것을 발견했을 것이다. 필자는 어렴풋이 캐싱되어서 컨텐츠 로드가 더 빨라지겠거니 추측했지만, 오늘은 궁금증을 갖고 면밀하게 조사해보려고 한다. 그래서 오늘 풀어볼 궁금증은?브라우저 캐시는 어디에 저장되는 것일까? 메모리 캐시와 디스크 캐시의 차이점은 무엇일까? (왜 메모리 캐시는 0ms, 디스크 캐시는 시간이 소요될까?)캐시 처리 단계는?React 에서는 Caching 정책을 어떻게 설정하고 최적화 할 수 있을까? 그 전에 각 리소스에 어떻게 캐시 정책을 적용하지?간혹 PHP 배포 후 이전 리소스를 불러와서 에러가 난 적이 있는데, 이를 어떻게 피할 수 있을까? [chrome for developers Ligh.. 2025. 1. 7. HTTP 완벽가이드 - 1부 HTTP: 웹의 기초 TODO: 빨간색은 추가로 넣을 예정인 컨텐츠 입니다. 1장 HTTP 개관페이지 레이아웃을 서술하는 HTML 뼈대를 한번의 트랜잭션으로 가져온 뒤, 이미지 등 추가 리소스를 가져오기 위해 추가 트랜잭션 수행 (트랜잭션이란, 요청 & 응답으로 구성됨)HTTP 메시지는 단순한 줄 단위의 문자열이다.TCP/IP 연결 통로가 만들어지고 나서는 단순히 read, write 하는 파일 시스템과 같다.그렇기 때문에 메시지 템플릿 (시작줄 / 헤더 / 본문) 구분이 중요함TODO: nodeJS listen API 가 내부적으로 숨기고 있는 기능 추가하기웹 브라우저 (곧 클라이언트)는 서버의 URL에서 호스트명을 추출해 IP로 변환한다. 그리고 포트번호도 있다면 추출한다. 이 두 정보를 토대로 TCP 커넥션을 맺는다... 2025. 1. 6. 이펙티브 개발자 책 리뷰에 들어가기 앞서,정글 수료하자마자 멘토링을 찾아나섰다. 정글에서는 개발자에게 요구되는 기본 지식을 학습했다면, 이제는 높은 곳으로 도약하기 위한 방법을 알아내야했다. 아직은 전 회사와 비슷하거나 그보다 작은 규모의 회사로 가게 될텐데, 그렇게 되면 과거의 학습법을 답습할 것 같아서 우선 인프런 멘토링을 리서치했다. 대기업 재직자, 미들급 이상인 분으로 찾았고 그렇게 3회 멘토링을 받고 얻게된 점.스타트업과 대기업 취준 전략은 다르다 너무 벙쪘다. 사실 멘토링 받기 전에는 정글에서 배운 지식 기반으로 3년 경력 살려서 이력서만 조금 손보면 되지 않을까 했다. 하지만 그와 배운 것들은 스타트업에서 단 한번도 고민해보지 못한 '성능', '기초', 그리고 '한가지를 파본 진득함' 이었다. 즉, 내가 어.. 2025. 1. 1. 브라우저 렌더링에서 메인 쓰레드 역할 들어가기 전해당 포스트는 브라우저 렌더링 과정 중 네트워크 리소스 로딩은 생략하고, 서술되었습니다. (궁금한 분은 MDN 참고)웹개발을 처음 배울 당시 html, css, js 3대장을 알게되고 '이렇게 마크업을하고 DOM API를 조작하는군' 하고 바로 프레임워크 학습으로 넘어간 기억이 난다. 이제는 React VirtualDom 목적, 웹 성능 최적화 방법이 궁금해졌고 그 전에 '브라우저 렌더링'을 점검할 필요성을 느껴 이 글을 작성했다. 자바스크립트는 싱글 스레드, 브라우저는?브라우저 렌더링하는데 필요한 스레드와 각 역할을 짚고갈 필요가 있다. 우선 자바스크립트가 싱글스레드라는 것은 자바스크립트 엔진이 단일 Call Stack을 가졌다는 의미이고, 비동기 처리가 가능한 이유는 런타임 환경에서 Web.. 2024. 12. 23. [Introduction To Algorithms] CH1. 알고리즘의 역할 요약 혹은 연습문제를 기록합니다. 1.1 알고리즘 알고리즘이란, 입출력 문제를 해결하기 위한 잘 정의된 계산 절차 1. "정렬" 또는 "두 점 사이의 최단 경로" 문제 중 이런 문제가 발생하는 현실의 예- 정렬 : 도서관 책이 저자순으로 정렬됨.- 두 점 사이의 최단 경로 : 카카오 네비를 켜서 목적지까지 최단 경로를 확인함. 2. 현실에서 속도 외에 효율성을 평가할 만한 다른 척도로 무엇이 있는지이때 속도라 함은, 최적의 해를 구하기까지의 기간일텐데문제 측면에서 정말 적절한 문제 추상화가 이루어졌는지, 쓸모있는 문제인지?(좀 더 고민 필요) 3. 예전에 본 적있는 자료구조 중 하나를 골라 그것의 장점과 한계를 각각 논하라.스택 - 자체적으로 순서의 의미를 갖고 있음 / 찾고자하는 데이터가 맨 처음에 .. 2024. 7. 24. [41장] 모던딥 자바스크립트 Deep Dive 스터디 날짜 : 2023. 12. 17 (일) 41-1장. 타이머 (기본) 호출 스케줄링 함수는 호출 즉시 실행된다. 하지만, 함수 호출을 예약하고 싶을때가 있다. 이때 "타이머 함수"를 사용하게된다. 이를 호출 스케줄링 이라고 한다. 타이머 함수 - setTimeout : n초 후 한번만 호출 (제거 시 clearTimeout) - setInterval : n초 마다 반복 호출 (제거 시 clearInterval) 위 함수들은 호스트 객체이며, 비동기처리 방식으로 동작한다. Q. 호스트 객체란? A. EMSAScript 에서 정의되지 않고, 실행되는 환경(브라우저 및 NodeJS) 에서 제공하는 함수 setTimeout - 인자 넘길 수 있는 것 처음 알았다.. 매번 클로저함수로 만들어서 인자 넘겨주었.. 2023. 12. 17. [37장] 모던딥 자바스크립트 Deep Dive 스터디 날짜 : 2023. 12. 10 (일) 37-1장. Set 정의 - 수학적 집합 특성과 일치, 수학적 집합을 구현하기 위한 자료구조 - 인자로는 이터러블 인수를 받음. - Set 객체 또한 이터러블 메소드 (CRUD) 메소드 (번외) Q. Set 의 요소는 무엇이든 올 수 있다. 이때, Object 요소는 내용물이 같으면 같다고 인식할까? A. 역시나, 참조타입의 객체는 다르다고 인식한다. 주소값이 같을때만, 같다고 인식함. - 주의사항 : Set 내부에서는 NaN 와 +0, -0 를 같게 인식한다. 집합 연산 (책 예제 기반, 직접 구현하기) - 교집합 (intersection) - 합집합 (union) - 차집합 (difference) - 부분집합 (isSuperset) 37-2장. Map 정.. 2023. 12. 10. 이전 1 2 다음
