1️⃣ 개발 지식 A+/FE7 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. 브라우저 렌더링에서 메인 쓰레드 역할 들어가기 전해당 포스트는 브라우저 렌더링 과정 중 네트워크 리소스 로딩은 생략하고, 서술되었습니다. (궁금한 분은 MDN 참고)웹개발을 처음 배울 당시 html, css, js 3대장을 알게되고 '이렇게 마크업을하고 DOM API를 조작하는군' 하고 바로 프레임워크 학습으로 넘어간 기억이 난다. 이제는 React VirtualDom 목적, 웹 성능 최적화 방법이 궁금해졌고 그 전에 '브라우저 렌더링'을 점검할 필요성을 느껴 이 글을 작성했다. 자바스크립트는 싱글 스레드, 브라우저는?브라우저 렌더링하는데 필요한 스레드와 각 역할을 짚고갈 필요가 있다. 우선 자바스크립트가 싱글스레드라는 것은 자바스크립트 엔진이 단일 Call Stack을 가졌다는 의미이고, 비동기 처리가 가능한 이유는 런타임 환경에서 Web.. 2024. 12. 23. Web 3D rendering 회사 신규 기획에서 gamification 도입이 확정되며, 웹 3D 렌더링 리서치를 담당하게 되었다. 이는 어떤 툴과 언어로 구현할지 의사결정을 위한 자료가 되겠다. 3D Object 와 인터랙션 구현은 어디서? (3D 모델링 프로그램 vs 자체 구현) Creating an Object with Three.js If you are comfortable with 3D modeling software, you can crreate your objects there and simply import them into your Thee.js project. This solution won't be converted in this tutorial but we will instead create our object.. 2023. 9. 28. [JS] 비동기 동작 스케줄링 방법 3가지 웹서비스 개발을 하면서 비동기 작업은 불가피하다. 파일 로딩 (Input/ Output), 네트워크 요청(유튜브 스트리밍 로딩), 시간의 흐름에 따른 애니메이션 등 상황은 다양하며 fs.readFile, requestAnimationFrame, setTimeout, fetch(browser), http(node.js) 등의 메소드들로 구현이 가능하다. 이 포스팅을 통해 비동기 스케줄링을 이해하는 시간이 되었으면 한다. Asynchronous 비동기란? sync[씽크]를 맞춰! 우리는 sync라는 단어가 익숙하다. "영화를 다운 받고, 자막과 영상의 씽크를 맞춘다", "나랑 부모님은 싱크로율 100%" 라는 표현을 자주 사용하기 때문이다. 그 어원에서 출발한 Synchronous는 동기식, Asynchro.. 2020. 12. 22. [JS] 객체 지향 프로그램 컴퓨터 프로그램을 여러개의 독립된 단위, "객체"들의 모임으로 파악하고자 하는 프로그래밍 패러다임 by 위키백과 프로그래밍 패러다임 프로그래밍 스타일에 대한 이론적 개념으로 그 중 3가지를 소개하겠다. 절차 지향 프로그래밍(Procedural) 순차적 처리에 초점 객체 지향 프로그래밍 (Object-Oriented) 기능별로 필요한 데이터(=속성)와 행위(=메소드)를 하나의 덩어리(=객체)로 묶어서 진행한다. 함수형 프로그래밍 함수를 수행해도 함수 외부 값이 변경되는 것을 지양. 단순히 출력되는 what에 초점. JavaScript는 Prototype 기반의 객체 지향 언어인데, OOP 디자인으로 구현 가능하도록 많은 발전이 있었다. OOP (Object-Oriented Programming) 기본 구성.. 2020. 12. 10. 이전 1 다음
