일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
- 솔리디티
- TypeScript
- 가상화
- kubernetes
- BFS
- 블록체인
- 이슈
- 쿠버네티스
- AWS
- 컴퓨터공학
- react
- HTML
- next.js
- JavaScript
- 백엔드
- node.js
- k8s
- 파이썬
- 이더리움
- 클라우드
- docker
- 타입스크립트
- CSS
- 자바스크립트
- 백준
- es6
- 웹
- 리액트
- 알고리즘
- 프론트엔드
- Today
- Total
목록프론트엔드 (23)
즐겁게, 코드
TL;DR 절대 경로 import를 활용하기 import 정렬 기준을 적용하기 사용하지 않는 패키지를 제거하기 프론트엔드 개발을 경험해보신 분이라면, 분명 한번쯤은 정돈되지 않은 import 코드 영역을 보며 아쉬움을 느꼈던 경험이 있을 거에요. import React, { createContext, useEffect, useState } from "react"; //Global Style import GlobalStyle from "./components/GlobalStyle"; //Import Pages import About from "./pages/About"; import Group from "./pages/Group"; import Nav from "./components/Nav/Nav"; i..
TL;DR esbuild는 정말 빠른 도구지만, 실제 환경에서 웹팩을 대체하기에는 아직은 시간이 더 필요할 것 같다. 웹 프론트엔드 분야를 학습해보신 분들이라면 한번쯤은 "이제 웹팩이 뭔지 공부해볼까?" 했다가, 복잡한 웹팩 설정과 플러그인들로 인해 좌절된 적이 있을 것입니다. 이번 글에서는 웹팩을 언젠가는 대체할 가능성이 있는 차세대 번들러, esbuild를 알아보며 느낀 점을 가볍게 적어보려 합니다. 이게 가능하다고? : esbuild의 번들링 속도 esbuild는 go로 만들어진 차세대 번들러로, 공식 홈페이지 의 대문에서부터 기존의 도구들과는 차원이 다른 번들링 속도를 어필합니다. esbuild의 큰 장점은 기존의 주류 번들러인 Webpack 5와 비교했을 때 압도적인 퍼포먼스를 보여준다는 점과,..
어플리케이션의 규모가 커지면 인증 정보, 장바구니 목록, 어플리케이션 설정 등 전역으로 관리해야 할 요소의 성격이 완전히 다른 경우가 종종 생기는데요, React와 redux를 사용할 때는 이처럼 둘 이상의 관심사가 있을 때 여러 스토어를 만들고 combineReducers 함수를 사용해 스토어를 하나로 묶어 사용했습니다. 오늘은 Vue의 Vuex를 사용해 스토어를 구성할 때, 관심사별로 유사한 상태를 묶어 관리할 수 있도록 해주는 네임스페이스(namespace) 에 대해 소개해보도록 하겠습니다. 🙂 네임스페이스의 등장 배경 어플리케이션이 하나의 스토어를 가질 때는 store 라는 폴더 안에 index.js, mutations.js, actions.js, getters.js 라는 이름을 가진 각 파일(v..
TL;DR "인터섹션" 이란 요소가 화면(뷰포트) 상에 위치하고 있는지를 의미합니다. 인터섹션 옵저버를 사용하면 이 인터섹션을 감지하고 수행할 콜백을 지정할 수 있습니다. threshold 옵션을 사용하면 감지 비율을 설정할 수 있습니다. 인스타그램과 페이스북은 어떻게 스크롤을 할 때마다 새로운 피드를 불러올까요? 흔히 “무한 스크롤” 이라고 부르는 이 기법은 자바스크립트의 intersection observer(인터섹션 옵저버) 라는 API를 사용해 간단히 구현할 수 있는데요, 오늘은 AOS(Animate-On-Scroll) 효과와 무한 스크롤을 구현해보며 인터섹션 옵저버를 간단히 알아보도록 하겠습니다! 실습을 위해, 먼저 아래 마크업을 복사해 주세요! /* styles.css */ .container..
TL;DR 1. 리액트에서는 중복되는 상태 업데이트를 배칭으로 처리하고 있다. 2. 기존에는 비동기 프로세스 안에서 발생하는 중복된 상태 업데이트에는 배칭을 적용하지 않았지만, 버전 18부터는 항상 배칭을 적용한다. 2013년 처음 세상에 등장한 리액트는 현재 최고의 전성기를 누리고 있고, 이제는 버전 18의 출시를 눈앞에 두고 있습니다. 버전 17에서는 내부적인 최적화 및 안정화에 초점을 맞춰 별다른 변화를 체감하지 못했지만, 현재 베타로 출시된 리액트 버전 18에서는 몇 가지 눈에 띄는 변경사항이 있는데요, 오늘은 그 중 automatic-batching 이라는 새로 추가된 성질을 소개해보려 합니다. 시작하기 전에 시작하기 전, 리액트 버전 18의 설정방법을 간단히 소개하고자 합니다. 1. 최신 버전..
어플리케이션에 로그인을 비롯한 인증이 필요한 이유는 무엇일까요? 당연하겠지만, 누구나 접근할 수 없는 정보를 보호하기 위해 사용자를 인증하는 작업이 필요하기 때문입니다. 인증을 구현하는 방법은 크게 서버 사이드 세션을 사용하는 방법과 JWT라는 인증 토큰을 사용하는 방법으로 나뉘는데요, 이번 글에서는 인증이 어떻게 이루어지는지에 대한 이론을 간략하게 소개하도록 하겠습니다. 세션 기반 인증 방식 세션 - 쿠키 방식이라고도 부르는 세션 기반 인증(편의상 "세션 인증 방식" 과 혼용하겠습니다.) 방식은 대략 다음과 같이 동작합니다. 인증 과정 클라이언트가 로그인을 시도합니다. 로그인에 성공하면, 서버는 해당 클라이언트를 식별하기 위한 세션값을 생성하고 응답에 실어 전송합니다. 클라이언트는 세션값을 수신하고 쿠..
목업 테스팅 지난 글에서는 비동기 동작을 테스트하는 방법을 살펴봤는데요, 테스트 코드에서 실제 DB나 API에 접근하면 테스트 코드에서 DB를 잘못 수정할 수도 있는 등 예측할 수 없는 결과를 초래할 수 있다는 문제가 있습니다. // getData.js function getData() { fetch('fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(data => data) } 예를 들어 테스트 코드에서 위와 같이 데이터를 페칭해오는 코드를 실제로 호출한다면 테스트 단계에서 API 호출 횟수를 소모하게 될 뿐만 아니라, 네트워크 사정이 좋지 않을 때는 타임아웃이 발생해 테스트를 통과하..