JiSoo's Devlog

📍 리액트 훅useState리액트 함수 컴포넌트에서 상태를 관리하기 위해 useState 훅을 활용할 수 있다.function useState(initialstate： S ! (() => S))： [S, Dispatch = (value： A) => void;type SetStateAction = S ! ((prevState： S) => S);useState가 반환하는 튜플의 첫 번째 요소는 제네릭으로 지정한 S 타입이고 두 번째 요소는 상태를 업데이트할 수 있는 Dispatch 타입 함수 의존성 배열을 사용하는 훅useEffect와 useLayoutEffect렌더링 이후 리액트 함수 컴포넌트에 어떤 일을 수행해야 하는지 알려주기 위해 useEffect훅을 활용할 수 있다.function useEffec..

📍 리액트 컴포넌트의 타입클래스 컴포넌트 타입interface Component extends ComponentLifecycle {}class Component { /* ~~ */}class PureComponent extends Component {}React.Component와 React.PureComponent의 타입 정의는 위 코드와 같고 P와 S는 각각 props와 상태를 의미한다..상태가 있는 컴포넌트일 때는 제네릭의 두 번째 인자로 타입을 넘겨주면 상태에 대한 타입을 지정할 수 있다. 함수 컴포넌트 타입함수 표현식을 사용해 함수 컴포넌트 선언할 때 가장 많이 볼 수 있는 형태는 React.FC나 React.VFC로 타입을 지정하는 것이다.FC는 FunctionComponent의 약자로 R..

📍 API 요청fetch로 API 요청하기useEffect(() => {fetch ("https://api.baemin.corn/cart").then((response) => response.json()).then(({ cartltem }) => {setCartCount(cartitem.length);})；}, [])；위 코드처럼 구현한 상태에서 새로운 API 요청 정책이 추가되면 계속해서 비동기 호출 코드를 수정해야 하는 번거로움이 발생한다. 서비스 레이어로 분리하기여러 API 요청 정책이 추가되어 코드가 변경될 수 있다면 비동기 호출 코드는 컴포넌트 영역에서 분리되어 다른 영역(서비스 레이어)에서 처리되어야 한다.위 코드 기준 fetch 함수 호출 부분은 서비스 레이어로 이동하고 컴포넌트는 서비스 ..

📍 자바스크립트의 런타임과 타입스크립트의 컴파일런타임과 컴파일타임프로그래밍 언어는 고수준, 저수준 언어로 구분 가능하다.고수준 언어는 사람이 이해하기 휘운 형식으로 작성, 저수준 언어는 컴퓨터가 이해하기 쉬운 형식으로 작성된다.자바스크립트는 대표적인 고수준 언어에 속하며 컴파일러나 인터프리터에 의해 저수준 프로그래밍 언어로 번역되어 실행된다. 소스코드는 컴파일러에 의해 기계어 코드로 변환되어 실행 가능한 프로그램이 되는데 이 단계를 컴파일타임이라고 한다.컴파일타임은 소스코드가 컴파일 과정을 거쳐 기계어 코드로 변환되어 실행할 수 있는 프로그램이 되는 과정을 의미한다.소스코드의 컴파일이 완료되면 프로그램이 메모리에 적재되어 실행되는데 이 시간을 런타임이라고 한다.즉, 컴파일 과정을 마친 응용 프로그램이 ..

📍 조건부 타입타입스크립트에서 조건부 타입은 Condition ? A : B 형태를 가진다.조건부 타입을 활용하면 중복되는 타입 코드를 제거하고 상황에 따라 적절한 타입을 얻을 수 있기 때문에 정확한 타입 추론이 가능하다. extends와 제네릭을 활용한 조건부 타입extends 키워드는 타입을 확장할 때와 타입을 조건부로 설정할 때 사용되며 제네릭 타입에서는 한정자 역할로도 사용된다.T extends U ? X : Y조건부 타입에서 extends를 사용할 때는 자바스크립트 삼항 연산자와 함께 쓴다.위 표현은 타입 T를 U에 할당할 수 있으면 X 타입, 아니면 Y 타입으로 결정됨을 의미한다. infer를 활용해서 타입 추론하기extends를 사용할 때 infer 키워드를 사용할 수 있다.infer는 타..

📍 타입 확장하기타입 확장은 기존 타입을 사용해 새로운 타입을 정의하는 것을 말한다.기본적으로 interface와 type 키워드를 사용해서 타입을 정의하고 extends, 교차 타입, 유니온 타입을 사용해 타입을 확장한다. 타입 확장의 장점타입 확장의 큰 장점은 코드 중복을 줄일 수 있다는 것이다.중복되는 타입을 반복적으로 선언하는 것보다 기존에 작성한 타입을 바탕으로 타입 확장을 함으로써 불필요한 코드 중복을 줄일 수 있다.type BaseMenuItem = { itemName: string | nill; itemImageUrl: string | null; itemDiscountAmount: number; stock: number | null;};type BaseCartItem = { qu..

📍 타입스크립트만의 독자적 타입 시스템any 타입any 타입은 자바스크립트에 존재하는 모든 값을 오류 없이 받을 수 있다.any로 지정한 타입에 어떠한 값을 할당하더라도 오류가 발생하지 않는다. any타입을 어쩔 수 없이 사용해야 하는 경우- 개발 단계에서 임시로 값을 지정해야 할 때- 어떤 값을 받아올지 또는 넘겨줄지 정할 수 없을 때- 값을 예측할 수 없을 때 암묵적으로 사용 예외적으로 any 타입을 사용해야 하는 상황이 있음에도 되도록 any 타입은 지양하는 게 좋다! unknown 타입unknown 타입은 any 타입과 유사하게 모든 타입의 값이 할당될 수 있다.그러나 any를 제외한 다른 타입으로 선언된 변수에는 unknown 타입 값을 할당할 수 없다. void 타입타입스크립트에서 함수가 어..

📍 타입이란 자료형으로서의 타입변수란 값을 저장할 수 있는 공간이자 값을 가리키는 상징적인 이름으로 개발자는 변수 선언 후 특정 값을 할당한다.var name = 'ji';var year = 2025; 컴퓨터 메모리 공간은 한정적이기에 특정 메모리에 값을 효율적으로 저장하기 위해서는 해당 메모리 공간을 차지할 값의 크기를 알아야 한다. 자바스크립트의 7가지 데이터 타입(자료형)- undefined- null- Boolean- String- Symbol- Numeric- Object 집합으로서의 타입타입은 값이 가질 수 있는 유효한 범위의 집합을 말한다.타입 시스템은 코드에서 사용되는 유효한 값의 범위를 제한해 런타임에서 발생할 수 있는 유효하지 않은 값에 대한 에러를 방지해 준다.const num: ..

📍 1.1 웹 개발의 역사1995년 브랜든 아이크가 웹의 다양한 콘텐츠를 표현하지 위한 객체 지향 언어로 자바스크립트를 만들었다.초기 자바스크립트는 단지 새로운 기능이 추가되는 형태로 발전했기 때문에 자바스크립트와 브라우저의 발전 속도 간의 차이가 나기 시작했고 브라우저는 자바스크립트의 변화를 따라가지 못했다. 폴리필은 브라우저가 지원하지 않는 코드를 브라우저에서 사용할 수 있도록 변환한 코드 조각이나 플러그인트랜스파일은 최신 버전의 코드를 예전 버전의 코드로 변환하는 과정 모든 브라우저에서 동일하게 동작하도록 자바스크립트가 표준화되자 정적 웹사이트에서 동적 웹 애플리케이션으로의 전환이 가속화되었다. 웹사이트수집된 데이터, 정보를 특정 페이지에 표시하기 위한 정적인 웹단방향으로 정보를 제공하기 때문에 ..

양식 제출 처리 방법1. 분리된 독립형 백엔드 API양식 데이터를 포함한 요청을 받아들이고 그 데이터를 데이터베이스에 저장 2. 통합된 Next.js 애플리케이션 => 서버 액션양식을 직접 제출받고 데이터베이스에 데이터 저장  폼 액션 설정서버 액션 없이 그냥 formAction으로 제출 처리도 가능form에 action 프로퍼티를 사용해 함수 전달 가능action은 React를 쓰지 않고도 양식 요소에 설정 가능한 기본 속성양식 요소에서 React를 사용하지 않거나 formAction 기능을 지원하지 않는 React 버전을 사용할 경우에는 양식 요소에 설정되는 액션 속성이 URL을 정의한다NextJS를 사용하는 경우에 action 속성은 URL 대신 함수를 받아들이고 브라우저 기본 동작을 막아 URL로..