199.91.42.6

이번주에 내가 준비한 아티클은 바로 "FE 개발자가 알아야 할 '캐싱' 개념 정리"이다. 아무래도 프론트엔드 개발을 하다보면 이 '캐싱'이라는 개념을 언젠가 한번쯤은 마주하게 되고,또 나의 고급 프로젝트에서도 이 '캐싱' 개념을 활용하여 페이지의 로딩 속도를 빠르게 향상시킨 경험이 있어서,이 '캐싱'이라는 개념에 대해 관심이 생겨서 더 깊게 알고 싶어 해당 아티클을 선정하게 되었다.  원문 아티클 내용의 핵심을 요약하면서, 프론트엔드 개발자가 알아야 할 웹 캐싱의 여러 종류와 각각의 개념에 대해 살펴보려 한다. 아티클의 주요 내용을 요약하면 다음과 같다:  캐싱의 기본 개념웹사이트 성능을 최적화하기 위해 캐싱은 매우 중요한 개념이다.캐싱은 데이터를 한 번 받아온 후 필요한 경우 빠르게 불러와 사용할 수 ..

최근에 프론트엔드 부트캠프를 수료한 사람들끼리IT/기술 아티클을 소개하는 'Paper Coding'이라는 스터디에 새로 가입했다!유익한 인사이트를 얻을 수 있으리라 기대하며 이 스터디에 들어온 만큼, 앞으로 열심히 해보려한다! 이번주에 내가 준비한 아티클은 바로 "2024 프론트엔드 기술 스택 트렌드 이야기"이다.스터디원들 모두 프론트엔드 개발에 흥미가 있고, 또 프론트엔드 개발 특성상 프론트엔드 기술의 트렌드에 밝으면 경쟁력을 갖출 수 있을 뿐만 아니라, 요즘 프론트엔드 개발의 동향도 잘 파악할 수 있어서 프론트엔드 개발의 미래를 예측하고 또 그 미래를 대비할 수 있기 떄문에 이 아티클을 선정하게 되었다!   원문 아티클의 길이가 꽤나 긴데, 원문 아티클 내용의 핵심을 요약하면서, 프론트엔드 개발자가 ..

이번에 우리 프로젝트에서 페이지의 UI 작업을 마치고 이제 본격적으로 API 연동 작업을 시작하기에 앞서,우리 팀은 Tanstack query와 Next.js의 App router를 모두 처음 써보기 때문에 고민의 시간을 가졌다.어떤 고민이었냐면, 바로 Next.js를 Next.js답게 써보고 싶은 마음과 Tanstack query(=리액트 쿼리)를 그냥 Fetch로 사용하는것과 다르게 Tanstack query만의 이점을 살리고 싶었다. Next.js로는 RSC 즉 리액트 서버 컴포넌트를 잘 활용하고 싶었고, Tanstack query로는 캐싱, 무한 스크롤, Optimistic Updates를 잘 사용하고 싶었다. 암튼 요약하자면 우리 프로젝트는 Next.js의 App Router 환경에서, 서버 상..

이번에 하는 고급 프로젝트에서 상태 관리를 Zustand를 이용해서 하기로 했어서, Zustand가 어떤 넘인지 감을 잡기 위해 간단히 글을 써본다. Zustand는 React 상태 관리를 위한 경량 라이브러리로, 사용하기 쉽고 빠르며, 최소한의 보일러플레이트로 설계되었다. Redux와 같은 상태 관리 라이브러리에 비해 간단하면서도 강력한 기능을 제공한다! 이제 Zustand의 주요 개념과 사용 방법을 살펴보려한다. Zustand의 주요 개념 스토어(store): Zustand의 핵심은 스토어다. 스토어는 전역 상태를 보관하고 관리한다. 모든 상태와 액션은 스토어를 통해 이루어진다.미들웨어(Middleware): 미들웨어를 통해 상태 변경을 가로채고 추가 로직을 삽입할 수 있다. 예를 들어, 로깅이나 상..

최근에 참여하고 있는 코드잇 스프린트 부트캠프에서 고급 프로젝트가 시작되었다!아무래도 그동안 진행했던 약 2주간의 짧은 기초 프로젝트나 중급 프로젝트보다약 2.5배 정도 긴 5~6주의 프로젝트 기간이 주어져서, 우리팀은 그동안 써보고 싶었던 기술 스택을 마음껏 써보기로 하였다! 예를 들면 Next.js의 app router나, React Query, Zustand, StoryBook, yarn, Suspense, react-hook-form, Tailwindcss, 등등...그 중에서 이번 글에서는 React Query의 Suspense와 Error Boundary를 사용하는 것과, 이를 Next.js의 App router에 적용하는 것에 대해 알아보려 한다.   React Query에서 suspense..

최상단 컴포넌트의 state를 말단 컴포넌트까지 전달하고 싶으면 이렇게 반복적인 작업을 해야함. → 이러한 불편함을 해소하기 위해 Redux 사용!! ★ Redux가 없는 컴포넌트들은 그냥 props로 유선 연결되어있는 거라고 생각하면 됨. Redux는 블루투스 느낌! ★ Redux는 독립적인 도구!! 이 독립적인 Redux와, 또 하나의 독립적인 도구인 React를 서로 연결해주는 게 ‘React Redux’라는 도구! ★ 로컬 컴퓨터에서 설치하려면 : npm install redux react-redux ★ redux를 사용하려면 : import { createStore } from ‘redux’; ※ store를 생성할 때 반드시 주입해줘야 하는 게 reducer!! reducer의 역할은, sto..

1. Typescript이란? ▶ Typescript : Javascript에 type을 부여한 언어! Javascript의 확장판! ※ Typescipt를 브라우저에서 실행하려면 파일을 한번 변환(=Compile)해주어야 한다! 2. Typescript를 써야하는 이유 ▶ 자바스크립트 코드의 품질과 개발 생산성을 높일 수 있기 때문!! ① 에러의 사전 방지 10+20 = 30의 결과를 내고 싶은데, ‘10’+‘20’이 돌아가면 안되잖아! ts는 그걸 막아줌! ② 코드 가이드 및 자동 완성(개발 생산성 ↑) 코드 작성 시, 개발 툴의 기능을 최대로 활용 가능! 3. Typescript의 기본 타입 ※ 타입 표기(Type Annotation)란? :을 이용하여 js 코드에 타입을 정의하는 방식 ① Bool..

💥5주차 & 6주차 통합본! 0. React란? React의 장점과 단점? ▶ React란? → A JavaScript library for building user interfaces. → 사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위한, 즉, 화면을 만들기 위한 기능들을 모아놓은 자바스크립트 *라이브러리! → Meta(前 facebook)에서 만든 오픈소스 자바스크립트 UI 라이브러리. 현재 가장 많이 사용되는 라이브러리! 복잡한 사이트를 쉽고 빠르게 만들고 관리하기 위해 만들어짐! (*라이브러리 : 자주 사용되는 기능들을 정리해 모아놓은 것) ★ 사용자 인터페이스(User Interface, UI) : 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로간의 입력과 출력을..

역시나 완강은 했으나 정리의 속도는 그에 미치지 못하는...^_ㅠ 실습과 함께하는 강의여서 실습에 더 집중하였다. 어차피 이번 주가 프로젝트 기간이니까, 프로젝트하면서 다시 반복해서 보고 기억하고 싶은 것만 기록해야겠다! ✨ 1. create-react-app으로 React 프로젝트 만들기 ① Windows Powershell을 열어준 뒤, npx create-react-app voca(=프로젝트 폴더) ② 예전에 react 프로젝트를 조금 해본 적이 있어서 그런지, 최신 버전이 아니라고 뭐시기뭐시기 군더더기가 뜨고 프로젝트가 안 만들어짐. 그래서 하라는 대로 함. npm uninstall –g create-react-app ③ 위의 명령을 실행시켜준 뒤, 다시 npx create-react-app vo..

✨ 1. DOM이란? ▶ DOM : Document Object Model의 약자! 즉, 문서 객체 모델! DOM은 HTML 문서의 각 요소들을 트리 형식으로 표현! Javascript를 이용해서 이를 생성/수정/삭제할 수 있다! 2. Node에 접근하기 ★ 하나의 객체(Object)를 노드(Node)라고 한다. Node에는 다양한 타입들이 있음! 개발할때는 주로 html element에 접근함 ★ document를 제외하고, 최상단의 이 root 노드. ★ 모든 html 태그는 객체!! 객체는 js로 접근하고 제어 가능 ★ id로 접근 : const el = document.getElementById(‘id 이름’); / el; ※ id는 한 페이지에 딱 한번만 사용가능 ★ 특정 tag에 접근 : co..