분류 전체보기100 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. [WEEK15] 나만무 중간회고 정글 입소 이래 매주 썼던 회고글을 나만무 프로젝트 들어서는 쓰지 못하고 있었다. WEEK12는 초안으로 남아있었고, 일찍 퇴근한 날에도 오랜만에 찾아온 휴식에 집중하기 위해 미뤘었다. 하지만 오늘은 팀원들에게 그간의 고충을 위로받고, 그동안 갈망하던 챌린지적 요소를 발견한 것 같아 기쁜 마음으로 작성하려한다. 팀장 선발 과정은, 순조로웠다. 공지가 올라오자마자 처음으로 제출했고, 그게 좋은 모습으로 보인 것 같다. (3:3) 두 그룹으로 나뉘었는데 첫 조는 공지 당일에 지원했고 그 자체로 의지가 충만하게 전달되었다. 그에 반해 마지막 조는 거의 마감 직전에 낸 팀장도 있어서 '정말 자진해서 지원한게 맞냐?' 라는 질문을 받았다는 웃긴 에피소드가 있었다. 그리고 나와 사전 협의한 팀원을 납치할 계획까지 .. 2024. 11. 29. [EC2][nginx] port-forwarding, https 설정 필자는 다음 스펙으로 서버를 배포하고 싶었다.EC2 에서 run server서브 도메인에 배포하기 [예시] api.domain.comhttps 설정 (무료)port-forwarding: port 번호 없이 접속 FYI. 사전에 도메인을 구매하고 NS가 설정되어있다는 가정하에 가이드가 작성되어있습니다. 1. Route53 A 레코드 생성subdomain: (예시) api값: EC2 퍼블릭 IPv4 주소 2. EC2 생성 및 HTTPS 인바운드 규칙 추가 3. EC2 인스턴스 연결: (예시) ssh4. port-forwarding (with nginx)$ cd /etc/nginx/sites-availables$ sudo vi default default 파일 수정server { listen 80;.. 2024. 11. 4. [WEEK11] 내 방식으로 🤔회고알고리즘 기억하고 있어서 다행이다한달만에 푸는 알고리즘, 감을 잃은 것 있지만 남아있는 것도 있어서 다행이다. 문득 또 잘 하고 싶다는 욕심이 올라와서 다 난 안될거라는 생각이 스멀스멀 올라온다. 나는 여기 입성하기 전에 bfs도 queens 문제도 못 풀었다는 걸 기억하자. 너는 성장하고 있다! 선미 아가야! 내 방식으로핀토스가 끝나니, 미뤄둔 프로젝트 걱정이 스멀스멀 올라왔다. 언어 선택, 팀장/팀원, 프로젝트 주제 등 옵션이 많았다. [언어] js사실 처음에는 java 채용 공고가 많아서 kotlin 스터디도 조인하며, 팀원으로서 spring 프로젝트를 꿈꿨다. 새로운 언어와 프레임워크 적응에 급급할 것 같아서 보다 경력자인 동료에게 팀장 자리를 제안하고 싶었기 때문이다. 하지만, 회사에서.. 2024. 10. 29. 이전 1 2 3 4 ··· 12 다음
