ALL 썸네일형 리스트형 FE/React React Diffing Algorithm - 상태변화를 감지할 수 있도록 하는 React의 비교 알고리즘 React의 가상 DOM 비교 알고리즘 React가 기존 가상 DOM과 변경된 새로운 가상 DOM을 비교할 때, React 입장에서는 변경된 새로운 가상 DOM 트리에 부합하도록 기존의 UI를 효율적으로 갱신하는 방법을 알아낼 필요가 있었다. 즉 하나의 트리를 다른 트리로 변형을 시키는 가장 작은 조작 방식을 알아내야만 했다. 알아낸 조작 방식 알고리즘은 O(n^3)의 복잡도를 가지고 있었다. O(n^3) 복잡도는 입력 크기에 대해 세제곱 비례로 증가하는 복잡도를 의미한다. 알고리즘의 성능을 분석하기 위해 복잡도를 계산하는 것은 중요한 과정이다. 이를 통해 알고리즘의 효율성을 평가하고, 큰 입력에 대해 얼마나 잘 처리할 수 있는지 예측할 수 있다. 일반적으로 좋은 알고리즘은 작은 복잡도를 가지며, 큰 입.. FE/React [React] Virtual DOM * Virtual DOM이 나오게 된 배경 * Virtual DOM의 개념 * React가 DOM 트리를 탐색하는 방법 * DOM 엘리먼트의 타입이 같을 때와 다를 때의 React 동작 방식 Virtual DOM이 나오게 된 배경 Virtual DOM은 Real DOM의 가벼운 사본과 같다. Real DOM은 Browser에서 생성되는 Document Object Model을 가리키는 용어이며, Virtual DOM과 구분하기 위해 이 용어를 사용한다. Real DOM (DOM) DOM은 Document Object Model의 약자로, 뜻을 그대로 풀자면 문서 객체 모델을 의미한다. 여기서 문서 객체란 브라우저가 JavaScript와 같은 스크립팅 언어가 , , 와 같은 태그들에 접근하고 조작할 수 있.. 📌 TOY-PROJECT/2305 쇼핑몰 웹앱 (북마크 기능) redux/toolkit(RTK) / 토스트 애니메이션 자연스럽게 구현하기 Next.js 13과 redux/toolkit, styled-components 등으로 북마크 기능이 들어있는 쇼핑몰 앱을 구현한 프로젝트이며, 설명에 필요한 코드만 최소한으로 서술되었습니다. : (1) gitHub - README 및 전체 코드 보러 가기 (2) 프로젝트 요구 명세서 보기 (해당 프로젝트 첫 포스팅) GitHub - Doyu-Lee/COZ-shopping: This project consists of a main page, a product list page, and a bookmark page, offering respons This project consists of a main page, a product list page, and a bookmark page, offering r.. 📌 TOY-PROJECT/2305 쇼핑몰 웹앱 (북마크 기능) RTK Query Next.js 13과 redux/toolkit, styled-components 등으로 북마크 기능이 들어있는 쇼핑몰 앱을 구현한 프로젝트이며, 설명에 필요한 코드만 최소한으로 서술되었습니다. : (1) gitHub - README 및 전체 코드 보러 가기 (2) 프로젝트 요구 명세서 보기 (해당 프로젝트 첫 포스팅) GitHub - Doyu-Lee/COZ-shopping: This project consists of a main page, a product list page, and a bookmark page, offering respons This project consists of a main page, a product list page, and a bookmark page, offering r.. 📌 TOY-PROJECT/2305 쇼핑몰 웹앱 (북마크 기능) 헤더 컴포넌트의 DropDown 메뉴 만들기 Next.js 13과 redux/toolkit, styled-components 등으로 북마크 기능이 들어있는 쇼핑몰 앱을 구현한 프로젝트이며, 설명에 필요한 코드만 최소한으로 서술되었습니다. : (1) gitHub - README 및 전체 코드 보러 가기 (2) 프로젝트 요구 명세서 보기 (해당 프로젝트 첫 포스팅) GitHub - Doyu-Lee/COZ-shopping: This project consists of a main page, a product list page, and a bookmark page, offering respons This project consists of a main page, a product list page, and a bookmark page, offering r.. 📌 TOY-PROJECT/2305 쇼핑몰 웹앱 (북마크 기능) Next.js 13 - StackoverFlow에 질문글을 올리다. Next.js 13과 redux/toolkit, styled-components 등으로 북마크 기능이 들어있는 쇼핑몰 앱을 구현한 프로젝트이며, 설명에 필요한 코드만 최소한으로 서술되었습니다. : (1) gitHub - README 및 전체 코드 보러 가기 (2) 프로젝트 요구 명세서 보기 (해당 프로젝트 첫 포스팅) GitHub - Doyu-Lee/COZ-shopping: This project consists of a main page, a product list page, and a bookmark page, offering respons This project consists of a main page, a product list page, and a bookmark page, offering r.. 📌 TOY-PROJECT/2305 쇼핑몰 웹앱 (북마크 기능) git 전략 : 작업 브랜치 생성 이번 프로젝트는 실제 프로젝트를 진행하는 것처럼 작업 브랜치를 분기하여 진행하였다. 즉, main 브랜치에 직접 코드를 작성하거나 push하는 행위는 절대 금지 git 전략 개념 다양한 git 전략이 있지만 아래와 같은 그림에서의 "Gitflow" 전략을 간단히 정리해보았다. 브랜치를 특정 목적에 맞게 구성하고, 병합 과정을 통해 개발과 배포를 관리하는 방식으로 운영한다. 각각의 브랜치는 특정 작업 단계나 기능 구현, 버그 수정 등을 담당한다. 팀 단위의 협업이나 지속적인 배포에 유용하며, 프로젝트의 안정성과 효율성을 높일 수 있다. 어떠한 제품의 요구 발생시 하나의 레포지터리가 생성되며 그와 동시에 master(이하 main) branch 생성 Main branch가 생성되면 바로 개발을 위한 deve.. 📌 TOY-PROJECT/2305 쇼핑몰 웹앱 (북마크 기능) 솔로 프로젝트 시작 : 스크럼을 통한 프로젝트 계획 오늘부터 5일 동안 진행되는 솔로 프로젝트는 프로젝트 요구사항 분석, 업무 단위 분할, 애자일(Agile) 방법론 적용을 통한 프로젝트 가시화, 그리고 코드 작성을 통한 구현 등 프로젝트 관리 및 개발의 전반적인 흐름을 경험할 수 있는 시간이다. 실제로 페어와 함께 요구사항 명세서를 함께 분석하여 업무 단위를 쪼개는 것부터 figma 파일을 받아 코드를 통한 구현과 페어와 담당 멘토 분의 코드리뷰까지 A부터 Z까지 배운 것을 총동원하여 하나의 결과물을 만드는 스프린트이다. 프로젝트를 진행하면서 기록할 만한 것들을 정리하여 블로그에 적어보았다. 1. 프로젝트 요구사항 분석 소프트웨어가 해결해야 할 문제와 고객의 요구사항을 파악하고 정의하는 단계 개발할 소프트웨어의 기능과 제약 조건, 목표 등을 소프트웨어 .. 📌 PROJECT/2305 Next.js Documentation : 번역 [Next.js 번역 프로젝트] pull을 통한 브랜치 최신화 번역 프로젝트 첫 포스팅의 브랜치 최신화에 대한 내용 중에서 이번 포스팅은 브랜치 최신화 방법 중 pull을 사용한 내용에 대한 기록이다. 해당 포스팅 발췌 내용 브랜치 최신화 시키기 ... (생략) 📌 간단한 버전 : Pull git pull 명령어는 git fetch와 git merge를 합친 것이 다. git fetch는 원격 저장소의 최신 변경 사항을 가져오고, git merge는 가져온 변경 사항을 현재 브랜치에 병합한다. a. 'git pull upstream main'을 통해 원본 레포지토리의 업데이트 내용을 Pull한다. b. 충돌한 게 있다면 해결한다. c. 'git push origin [내가 작업 중인 브랜치명]'을 통해 pull 해온 commit들을 push해준다. a. 원본 레포지.. 📌 PROJECT/2305 Next.js Documentation : 번역 [Next.js 번역 프로젝트] 최적화 > 스크립트 (Scripts) 아래는 Next.js 번역 프로젝트에 참여하게 되면서 제가 맡게 된 Optimizing / Script를 번역한 내용입니다. * 마크다운은 블로그로 글을 옮기면서 티스토리에서 호환되지 않는 요소가 있습니다. * 내용이나 마크다운 등은 보다 나은 가독성과 UI를 위해 최소한으로 변경되었습니다. * 해당 포스팅은 기록을 위한 것으로 일부 링크는 현재 페이지에서 작동하지 않습니다. 스크립트 최적화 레이아웃 스크립트 여러 라우트에서 써드파티 스크립트를 로드하려면 next/script를 가져와서 스크립트를 레이아웃 컴포넌트에 직접 포함시키면 됩니다. // app/dashboard/layout.tsx import Script from 'next/script'; export default function Dashbo.. 📌 PROJECT/2305 Next.js Documentation : 번역 [Next.js 번역 프로젝트] 최적화 > 메타데이터 (Metadata) 아래는 Next.js 번역 프로젝트에 참여하게 되면서 제가 맡게 된 Optimizing / Metadata를 번역한 내용입니다. * 마크다운은 블로그로 글을 옮기면서 티스토리에서 호환되지 않는 요소가 있습니다. * 내용이나 마크다운 등은 보다 나은 가독성과 UI를 위해 최소한으로 변경되었습니다. * 해당 포스팅은 기록을 위한 것으로 일부 링크는 현재 페이지에서 작동하지 않습니다. 메타데이터 동적 이미지 생성 요구 사항 : Next.js v12.2.3 이상. ImageResponse 생성자를 사용하면 JSX 및 CSS를 사용하여 동적 이미지를 생성할 수 있습니다. 이것은 오픈 그래프 이미지, Twitter 카드 등과 같은 소셜 미디어 이미지를 만드는 데 유용합니다. ImageResponse는 Edge Ru.. 📌 PROJECT/2305 Next.js Documentation : 번역 [Next.js 번역 프로젝트] 최적화 > 이미지 (Images) 아래는 Next.js 번역 프로젝트에 참여하게 되면서 제가 맡게 된 Optimizing / Images를 번역한 내용입니다. * 마크다운은 블로그로 글을 옮기면서 티스토리에서 호환되지 않는 요소가 있습니다. * 내용이나 마크다운 등은 보다 나은 가독성과 UI를 위해 최소한으로 변경되었습니다. * 해당 포스팅은 기록을 위한 것으로 일부 링크는 현재 페이지에서 작동하지 않습니다. 이미지 최적화 예시 이미지 컴포넌트 Next.js 이미지 컴포넌트는 HTML의 엘리먼트를 확장하여 다음과 같은 기능을 제공합니다 : 향상된 성능: 최신 이미지 형식을 사용하여 각 디바이스에 대한 적절한 크기의 이미지 제공 시각적 안정성: 자동으로 누적 레이아웃 이동(CLS) 방지 더 빠른 페이지 로드: 이미지가 뷰포트에 들어갈 때만.. 📌 PROJECT/2305 Next.js Documentation : 번역 [Next.js 번역 프로젝트] 최적화 > 글꼴 (Fonts) 아래는 Next.js 번역 프로젝트에 참여하게 되면서 제가 맡게 된 Optimizing / Fonts를 번역한 내용입니다. * 마크다운은 블로그로 글을 옮기면서 티스토리에서 호환되지 않는 요소가 있습니다. * 내용이나 마크다운 등은 보다 나은 가독성과 UI를 위해 최소한으로 변경되었습니다. * 해당 포스팅은 기록을 위한 것으로 일부 링크는 현재 페이지에서 작동하지 않습니다. 글꼴 최적화 next/font는 개인 정보 보호 및 성능 향상을 위해 자동으로 글꼴(사용자 정의 글꼴 포함)을 최적화하고 외부 네트워크 요청을 제거합니다. 🎥 : next/font 자세한 사용법 알아보기 → 유튜브(6분) next/font에는 모든 글꼴 파일에 대한 자동 자체 호스팅이 내장되어 있습니다. 다시 말해서, 기본 CSS s.. 📌 PROJECT/2305 Next.js Documentation : 번역 [Next.js 번역 프로젝트] 최적화 > 메인 화면 아래는 Next.js 번역 프로젝트에 참여하게 되면서 내가 맡게 된 Optimizing 챕터의 메인 화면을 번역한 내용입니다. * 마크다운은 블로그로 글을 옮기면서 티스토리에서 호환되지 않는 요소가 있습니다. * 내용이나 마크다운 등은 보다 나은 가독성과 UI를 위해 최소한으로 변경되었습니다. * 해당 포스팅은 기록을 위한 것으로 일부 링크는 현재 페이지에서 작동하지 않습니다. 최적화 Next.js는 애플리케이션의 속도와 Core Web Vitals를 개선할 수 있도록 설계된 다양한 내장 최적화 기능을 제공합니다. 이 가이드는 사용자 경험을 향상시키기 위해 활용할 수 있는 최적화 기능을 다룹니다. 내장 컴포넌트 내장 컴포넌트는 일반적인 UI 최적화 구현의 복잡성을 추상화합니다. 다음과 같은 컴포넌트가 있.. FE/개발 관련 뉴스, 서적, 자료 [유튜브] NPM 패키지를 설치할 때 주의하자! 최근 NPM (Node Package Manager) 패키지 레포지토리에서 일부 패키지가 해킹되는 사건이 생겼다고 한다. 관련하여 부트캠프 동기 분이 공유해주신 유튜브 자료를 공유하며, 조심하려는 차원에서 블로그에 포스팅해보려고 한다. 0:00 - 1:26: Intro 1:27 - 2:30: "left-pad" 이슈 2:30 - 3:19: Supply Chain Attack 이란? 3:19 - 4:35: NPM Account 공격 사례 4:35 - 5:54: MathJS 공격 사례 5:54 - 6:33: Installation Scripts 공격 사례 6:33 - 7:50: Typosquatting Attack 공격 사례 7:50 - 9:54: 공격 예방 & 보호 방법 (아래에 요약) 9:54 - 10:.. FE/Server OAuth OAuth란 웹이나 앱에서 흔히 찾아볼 수 있는 소셜 로그인 인증 방식은 OAuth 2.0라는 기술을 바탕으로 구현된다. OAuth : Open standard for Authorization; Open Authorization 전통적으로 직접 작성한 서버에서 인증을 처리해 주는 것과는 달리, OAuth는 인증을 중개해 주는 메커니즘이다. 직접 서버에서 인증과 관련된 로직을 처리할 필요 없이 인증을 중개하는 외부 서버를 이용한다. 토큰을 기반으로 내 서버가 아닌 외부 인증 중개서버로 사용자 인증 처리를 맡길 수 있다. 보안된 리소스에 액세스하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화하는 프로토콜 즉, 이미 사용자 정보를 가지고 있는 웹 서비스(Naver, Kakao, Google 등)에서 .. FE/React [JS] useEffect 용례 * 레퍼런스 - 리액트 공식문서 : useEffect - React Hooks에 취한다 - 유튜브 미리 알고 있어야 하는 개념 useEffect(setup, [dependencies]) 컴포넌트의 최상위 수준에서 useEffect를 호출하여 Effect를 선언한다. useEffect는 undefined 값을 반환한다. Mount & Unmount useEffect의 setup & cleanup useEffect가 작동하는 과정은 다음과 같다. (예: 채팅 외부시스템을 가져와서 웹 화면에 구현) 컴포넌트가 마운팅되면, (페이지에 추가) setup 코드가 작동한다. (예: '과일' 주제의 채팅창 열기) 종속성 배열 인자의 값이 변할 때마다 컴포넌트는 리렌더링 된다. (예: 종속성 배열 인자는 채팅창의 주제(.. 📌 PROJECT/2305 Next.js Documentation : 번역 [Next.js 베타 번역 프로젝트] 이미지 생성 (Image Generation) -> 정식 버전에서 챕터 삭제됨 아래는 Next.js 번역 프로젝트에 참여하게 되면서 제가 맡게 된 Optimizing / Image Generation을 번역한 내용입니다. * 마크다운은 블로그로 글을 옮기면서 티스토리에서 호환되지 않는 요소가 있습니다. * 내용이나 마크다운 등은 보다 나은 가독성과 UI를 위해 최소한으로 변경되었습니다. * 해당 포스팅은 기록을 위한 것으로 일부 링크는 현재 페이지에서 작동하지 않습니다. 23.05.06. 정식 문서에서 해당 챕터의 내용는 Metadata 챕터의 일부로 이동되었습니다. 이미지 생성 요구 사항 : Next.js v12.2.3 이상. 생성자 ImageResponse를 사용하면 JSX 및 CSS를 사용하여 동적 이미지를 생성할 수 있습니다. 이것은 Open Graph 이미지, Twitte.. 📌 PROJECT/2305 Next.js Documentation : 번역 [Next.js 번역 프로젝트] 오픈소스 기여한 과정 (단계) 관심은 있었지만 쉽게 진입할 수 없었던 Next.js 프레임워크와 관련하여 좋은 기회로 현재 나온 betadocs을 (23.5.5.자로 정식 docs로 편입되었다. ㅎㅎ) 번역해보자는 스터디가 만들어져서 잽싸게 신청을 했다. 설레쟈나~~ Next.js란? Next.js는 React 기반의 서버 사이드 렌더링 및 정적 사이트 생성을 위한 프레임워크이다. 사용자가 빠르게 React 애플리케이션을 구축하고 최신 웹 개발 표준을 준수하는 것이 가능하다. 기본적으로 서버 사이드 렌더링을 지원하며, 필요한 경우 정적 사이트 생성 기능을 사용할 수도 있다. 파일 시스템 기반의 라우팅과 코드 스플리팅을 지원한다. Next.js의 가장 큰 장점 중 하나는 이미지와 CSS 파일과 같은 정적 에셋을 자동으로 최적화하여 더 .. FE/Server 해싱(Hashing)과 토큰(Token) 인증 방식 * 세션 인증 방식을 보완한 토큰 인증 방식 * 대표적인 토큰 인증 방식 JWT - JWT가 사용자의 정보를 암호화하여 토큰을 저장하는 방법 해싱 (Hashing) 해싱은 가장 많이 쓰이는 암호화 방식 중에 하나이다. 복호화가 가능한 다른 암호화 방식들과 달리, 해싱은 암호화만 가능하다. 해싱은 해시 함수(Hash Function)를 사용하여 암호화를 진행하는데, 해시 함수는 다음과 같은 특징을 가진다. 항상 같은 길이의 문자열을 리턴한다. 서로 다른 문자열에 동일한 해시 함수를 사용하면 반드시 다른 결과값이 나온다. 동일한 문자열에 동일한 해시 함수를 사용하면 항상 같은 결과값이 나온다. 아래 표는 대표적인 해시 함수중 하나인 SHA1에 특정 입력 값을 넣었을 때 어떤 결과가 리턴되는지 보여주는 예시이.. ⬆︎ 이전 1 2 3 4 5 6 7 ··· 12 다음
