본문 바로가기

분류 전체보기233

[React & 브라우저] 브라우저의 동작 과정 (feat. 렌더링 실행) 프론트엔드(FE) 개발자가 브라우저(Br) 동작 원리를 알아야 하는 이유 FE에게 Br는 거의 모든 것. Br를 통해 개발, Br를 통해 테스트 및 배포 진행, 사용자들은 Br를 통해 웹에 접속 FE는 Br의 모든 것이 아닌 HTML, CSS, JS가 의도대로 동작하는지 확인해도 큰 문제x 하지만 기능이 많고 다양한 동작이 발생한다면 최적화가 필요해짐 Br의 최적화를 위해선 결국 Br의 동작 원리를 이해하는 것에서부터 시작 해당 포스트에서 알아볼 것 => Br의 렌더 과정 & 원리 ( 아래는 선 4줄 요약 ) HTML로부터 DOM 트리를, CSS로부터 CSSOM 트리를 빌드 DOM & CSSOM을 결합하여 렌더 트리를 형성 렌더 트리에서 레이아웃을 실행 => 각 노드의 기학학적 형태를 계산 개별 노드를 .. 2022. 12. 23.
[Next.js] Middleware에 대해 알아보자 Middleware란? 통용적으로 사용되는 의미로는 "서로 다른 애플리케이션이 서로 통신하는 데 사용되는 소프트웨어" 이다. 미들웨어를 통해 더욱 빠르게 혁신할 수 있도록 애플리케이션을 지능적이고 효율적으로 연결하는 기능을 제공한다. 미들웨어는 단일 시스템에서의 다양한 기술,도구, DB간에 다리 역할을 한다. 유저는 이 같은 서비스에 대해 인식하지 못한다. 개발자는 처음에 미들웨어를 사용하여 초기 코드를 다시 쓰지 않고도 새 프로그램을 초기 시스템과 통합하였습니다. 미들웨어는 분산 시스템의 중요한 통신 및 데이터 관리 도구가 되었습니다. 개발자는 미들웨어를 사용하여 애플리케이션 개발을 지원하고 디자인 프로세스를 단순화합니다. 이렇게 하면 서로 다른 소프트웨어 구성 요소 사이를 연결하지 않고 자유롭게 비즈.. 2022. 12. 22.
[Next.js] Image 컴포넌트에 대해 (feat. local & remote) 1. Next.js 가 제공하는 Image 컴포넌트(공식문서 링크) 특징과 장점 특징 lazy loading 이미지 사이즈 최적화 placeholder (Local Image일 경우) 장점 성능 향상 : 적절한 사이즈 이미지 서빙 & 작은 용량의 포맷 사용 가능 시각적인 안전성: placeholder를 통해 이미지 로드전 CLS(Cumulative Layout Shift) 방지 빠른 페이지 로딩: lazy loading & 이미지 사이즈 최적화, placeholder를 통한 2. lazy loading 이미지 로드 하는 시점을 필요할 때 까지 지연시키는 기술을 의미한다. ( 페이지 로드 속도 빨라지는 이점) 사용자가 이미지가 나올때까지 스크롤 하지 않으면 이미지는 로드 되지 않는다. Next.js는 사용.. 2022. 12. 22.
[Next.js] SWR을 통해 캐시 데이터 가져오기 SWR란? HTTP 캐시 무효 전략인 State-While-Revalidate 에서 유래됨. SWR은 캐시로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화 된 데이터를 가져오는 전략 SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트를 경험할 수 있음. Next.js 팀에서 만들었다. 설치 yarn add swr // npm install swr 사용법 import useSWR from "swr"; const fetcher = (url:string)=>{ fetch(url).then(res=>res.json()) } const useUser = () => { const { data, error } = useSWR("/api/users/me",fetcher); r.. 2022. 12. 12.
[Next.js] 환경변수 타입 지정 및 자동완성(.env) 참고: https://jforj.tistory.com/259 1. .env 파일에 사용할 변수 입력 COOKIE_NAME= carrot_market COOKIE_PASSWORD = carrot_password 2. next.config.js 파일에 변수들에 대해 입력 ( 자동완성 ) /** @type {import('next').NextConfig} */ module.exports = { reactStrictMode: true, env: { COOKIE_NAME: 'carrot_market', COOKIE_PASSWORD: 'carrot_password', }, }; 3. env 타입 지정 root 경로에 @types 폴더 생성 후 그 안에 import-env.d.ts 파일 생성 import-env.d... 2022. 12. 11.
[Web] 세션, 토큰, 쿠키, JWT 기본 개념 (feat. 노마드) 참고: https://devjem.tistory.com/13 JWT와 세션 기반 인증 방식의 차이점 참고(payload에 어떤 유저 정보가 담기나 설명해줌) : wally.velog 참고: https://www.youtube.com/@nomadcoders 쿠키 쿠키를 이용해서, 서버는 유저의 브라우저에 데이터를 넣을 수 있다. ( 유저에 대한것을 기억하기 위해) 사이트에 방문하면 브라우저는 서버에 요청을 보낸다 서버는 이에 응답 응답에는 요청한 모든 데이터와 유저가 찾던 페이지 정보가 들어있음. 또한 그 안에는 브라우저에 저장하고자 하는 정보가 담긴 쿠키가 있을수 있음 브라우저는 쿠키를 받게 되면 일단 저장을 한 후 이후에 요청이 있을때마다 쿠키도 요청과 함께 보낸다 쿠키는 도메인에 따라 제한이 됨(유튜.. 2022. 12. 11.
[JavaScript] this에 대해 (feat. bind) js에서의 this는?? 객체를 가리키는 키워드 상황에 따라 바뀜 this는 자신을 포함한 함수를 호출한 객체이다. 전역적인 객체에서 this를 가리키면 window 객체가 나옴(엄격모드 'use strict' 와 상관없이 항상 ) 브라우저 자체의 객체는 window니까 console.log(this)를 했을 때 console의 주체는 window니까 window가 나온겨. window.console.log(this) 라는 뜻 function main(){ console.log(this); } main() // 이렇게 호출하는 것은 사실 window.main() 과 같음. 즉 window 객체를 가리키게 됨 // 'use strict' 모드라면 main()을 호출했을때 undefined가 나옴 // 엄격.. 2022. 12. 11.
[TypeScript] 제네릭(Generics) 정리 제네릭이란? 제네릭은 C#,Java 등의 언에서 재사용성이 높은 컴포넌트를 만들때 자주 활용된다. 한가지 타입보다 여러 가집 타입에서 동작하는 컴포넌트를 생성하는데 사용됨. 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다. function getText(text) { return text; } JS로 이러한 코드가 있을 때 인자로 'hi', 10, true를 각각 넣어준다면 함수는 그 값을 그대로 리턴해준다. 이를 TS의 제네릭 문법을 적용해본다면 아래처럼 정의한 후 재활용이 가능해진다. // const getText = (text:T):T =>{} // const getText = (text:T):T =>{} // 위처럼 제네릭에 기본 타입도 줄 수 있다. function getTex.. 2022. 12. 9.
[TypeScript] TS에서의 함수 ( 파라미터, 리턴 타입 지정 ) 기본 틀 파라미터의 타입은 해당 파라미터 옆, 리턴 타입은 파라미터 선언 오른쪽 아래와 같이 선언해주면 타입 실드가 장착돼서 TS가 알아서 이후 논리 어긋난것들에 대해 알려줌 파라미터의 타입을 지정해주면 필수 파라미터가 됨 ( 선택적으로 줄려면 파라미터명 옆에 '?' 붙여주면 됨) function 함수이름(변수:타입):타입 { return 리턴할 값 } const 함수이름 = (변수:타입):리턴타입 =>{.../} 리턴 할 게 없을때는 void(공허한) 를 써준다. function fn():void { console.log('리턴값 없음') } 선택적인 파라미터라면 '?'를 붙여주는데 이것은 곧 그 파라미터는 type | undefined 를 의미함 function 함수이름(x?:number) { con.. 2022. 12. 9.

티스토리툴바