ougi FE

오늘은 블로그를 살펴보다가 JWT라는 인증 방식을 알게 되어 글을 쓰게 되었습니다그동안 제가 알고 있던 인증 방식은 주로 세션과 쿠키 정도였는데또 다른 방식이 있다는 사실이 흥미로워서 글을 쓰게 되었습니다❓ JWT(Json Web Token)가 무엇일까?JWT는 클라이언트와 서버, 서비스와 서비스 사이 통신 시 권한 인가(Authorization)를 위해 사용하는 토큰이라고 합니다 장점데이터 위조나 변조를 방지할 수 있습니다JWT에는 모든 정보를 담고 있기 때문에 별도의 저장소가 없어도 됩니다확장성이 좋습니다모바일에서도 잘 동작합니다 (세션은 모바일 X)단점토큰의 길이가 너무 깁니다Payload 자체는 암호화가 되지 않아 위험합니다토큰을 탈취당하면 대처하기 어렵습니다세션이나 쿠키와의 차이점은구분세션/쿠키..

오늘은 개발을 하다가 지저분한 제 아키텍처를 보고 좋은 아키텍처에 대해서 많은 관심이 생겨 찾아 보다가가장 많이 보이던 FSD에 대해서 이렇게 글을 써보게 되었습니다❓FSD란?FSD는 기능 분할 설계(Feature-Sliced Design) 아키텍처 입니다크게 나누어서 3가지 개념으로 나누어집니다 Layer, Slice, Segment로 나눌 수 있습니다 장점코드의 배치가 명확하여 코드들의 위치를 쉽게 예측 가능하고 배치하기가 편리 어떤 코드가 내 프로젝트의 맥락과 상관이 있는지가 매우 명확 단점복잡하여서 러닝 커브가 꽤 있는 편코드가 분리되어 있어서 수정 작업이 번거로울 수 있음 (작은 프로젝트일수록 치명적)Layer최대 7가지로 제한 되며 최상위 디렉토리 입니다일부는 선택이지만 일부는 표준화 되어 있..

오늘은 Next.js를 생각도 없이 사용하다 문득 이유를 알고 사용해야 하는데나는 이유를 모르고 또 사용을 하고 있었구나...라는 생각이 들어 자세히 알아보려고 합니다❓ Next.js 그게 뭘까?Next.js는 React 기반의 프레임워크입니다vercel에서 개발 했습니다 React는 라이브러리, Next는 프레임워크라고 합니다둘의 가장 큰 차이점은 응용 프로그램의 흐름 주도권을 누가 가지고 있느냐입니다Next.js는 특정 스타일과 규칙을 따르지 않으면 에러가 발생할 수 있습니다그래서 Next.js의 규칙과 스타일을 준수하는 것이 중요합니다  그리고 Next는 SSR을 쉽게 구현할 수 있게 해 준다고 합니다밑에 글에서 SSR에 대해 자세히 설명하고 있습니다!!https://baeougi.tistory.c..

오늘 제가 소개할 것은 Shadow DOM인데 어쩌다 Shadow DOM을 소개하게 되었냐면 공부할 것을 찾으면서 FrontEnd 로드맵을 보다가 잘 모르는 Shadow DOM이라는 것이 있길래 찾아보게 되었습니다❓ Shadow DOM이란? Shadow DOM은 웹 컴포넌트(Web Components)의 핵심 기술 중 하나로 DOM 요소에 캡슐화된 DOM 트리를 제공하여 외부의 CSS나 JavaScript의 영향을 받지 않도록 하는 기능입니다웹 컴포넌트 spa 프레임워크에서 제공하는 html코드 조각들을 컴포넌트화 하여 관리하는 것과 같은 기술들을 칭합니다 캡슐화 Shadow DOM에서의 캡슐화는 DOM 트리, 스타일, 그리고 동작을 외부로부터 격리시켜, 컴포넌트의 내부 상태를 보호하는 것을 뜻합니다 다..

오늘은 얼마 전에 스터디에서 선배님이 오늘 주제에 대해서 질문을 해주셨는데 좀 더 유연하게 대답하지 못한 것 같아 이 둘에 대해서 좀 더 자세히 알아보려고 합니다❓ 제어 비제어? 그게 뭘까?먼저 제어 컴포넌트는 사용자의 입력을 state로 관리하고 업데이트합니다React에서 state 값이며 setState로 업데이트 됩니다import { useState } from "react";export function Example() { const [value, setValue] = useState(""); return ( setValue(e.target.value)} /> );} 비제어 컴포넌트는 DOM을 직접 조작하여 데이터를 관리합니다상태를 가지지 않으며 입력에 대한 DOM ..

오늘은 여러 블로그에서 여러 글에서 봤었는데 공부하기가 귀찮아 미루던 Closure에 대해서 소개드리겠습니다!❓ Closure? 그게 뭘까?내부함수와 그 함수가 선언될 때의 렉시컬 환경(Lexical Environment)의 조합입니다.사전적 의미로 Closure은 폐쇄라는 의미인데 Closure의 핵심은 스코프를 이용해 변수의 접근 범위를 폐쇄하는 것입니다.Closure의 특징들을 말해보자면 외부에서 내부는 불가능하지만 내부에서 외부로 스코프 접근이 가능합니다.외부 함수가 반환된 후에도 이 접근이 유지됩니다.내부함수란?다른 함수 내부에 정의된 함수렉시컬 환경함수가 선언될 때 생성되는 환경으로 해당 함수의 스코프에 있는 모든 변수와 함수를 포함❓ 왜 Closure 함수로 작성할까?function exte..

개발하다가 보면 이 아마 두가지 파일을 본 적이 있을 것입니다 이름도 비슷한 두가지 대체 무슨 차이가 있을까요?오늘은 package.json과 package-lock.json의 차이를 알아보겠습니다❓ 그 파일들이 뭔데?먼저 package.json은 npm 패키지 설치를 위해서 존재하는 파일로 일반적으로 프로젝트의 이름, 버전, 설명, 프로젝트 실행에 필요한 의존성 목록들을 포함하고 있습니다가끔 정확히 명시하지 않아서 팀원과 버전 문제가 발생할 수 있습니다..package-lock.json은 패키지들의 정확한 버전 정보를 명시하고 있는 파일입니다  ❓그래서 둘이 무슨 차이?package.json는 version range를 사용합니다쉽게 말하자면 18.2.0버전을 사용합니다 라고 명시하는 것이 아닌  ^1..

오늘은 개발을 할 때 사용하는 개발자 도구를 효율적으로 잘 사용하기 위해개발자 도구의 여러 기능들과 꿀팁들에 대해서 알아봅시다저는 크롬을 자주 사용하여서 크롬 개발자 도구를 기준으로 설명했습니다❓ 개발자 도구 여러 기능들과 꿀팁들은?먼저 F12를 눌러서 개발자 도구를 열어봅시다!그리고 말해드릴 순서를 말씀드리겠습니다개발자 도구 설정요소 (Element)소스 (Source)네트워크 (Network)애플리케이션 (Application)Lighthouse개발자 도구 설정개발자 도구 오른쪽 상단에 있는 톱니바퀴를 누르면 이렇게 여러 설정들을 할 수 있습니다 제가 추천하는 몇 가지 설정들을 말하자면  1. 언어 ( setting(톱니바퀴) > 환경 설정 > 디자인 )저기 위에 보이는 언어를 자신에게 맞게 변경하고..

오늘은 제가 React에서 배열에 map() 함수로 자식을 처리할 때각 요소마다 key 값을 넣어야 하는 것에 대해서 설명드리겠습니다최근에 저는 친구가 개발하는 것을 도와주다 친구가 key 값을 왜 주어야 하는지 질문을 하였는데좋은 답변을 해주지 못한 것 같아서 이렇게 글로 정리하게 되었습니다!❓ 왜 그럴까?" Warning: Each child in a list should have a unique "key" prop "( 경고: 리스트의 각 자식은 고유한 "key" prop을 가져야 합니다. ) React에서 자식 요소에 key 값을 주지 않으면 이러한 오류가 뜨는 것을 볼 수 있습니다왜 키 값이 필요할까요? 공식 문서를 보면 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것에 도움을 ..

저는 Tailwind를 이용해 웹페이지를 구현할 때동적인 스타일링을 구현하기 위해서 종종 삼항 연산자를 사용해왔습니다.하지만 이 방법은 코드가 너무 지저분해진다는 문제가 있었습니다. 오늘은 그 문제를 해결해 줄 수 있는 classnames 라이브러리를 소개해 드리겠습니다.❓ classnames란?classnames 라이브러리는 조건부로 CSS 클래스를 적용할 수 있게 해주는 JavaScript 라이브러리입니다.여러 개의 CSS 클래스를 간편하게 결합하거나 특정 조건에 따라 클래스 이름을 동적으로 추가할 수 있습니다.Tailwind 또는 CSS Modules와 많이 쓰인다고 합니다.장점코드 가독성이 높아집니다.동적 스타일 적용이 쉬워집니다.라이브러리 크기 작아집니다.단점기본적으로 타입이 정해져 있지 않아서..