스타일트 컴포넌트(styled-component)는 JS안의 CSS라 불리는 라이브러리이며, 이름 그대로 자바스크립트에서 CSS를 효율적으로 작성하기 위한 것입니다. 컴포넌트에 스타일을 적용하기 위해 사용합니다.스타일드 컴포넌트에서는 컴포넌트와 동일한 파일로 스타일을

리액트를 사용한 웹 애플리케이션은 다양한 UI 부품으로 구성 됩니다.브라우저에 표시하는 화면을 만들 때, 이 부품들은 페이지의 다양한 위치에 독립적으로 또는 다른 UI 부품을 구성하는 요소로 사용 됩니다.이런 각 부품을 컴포넌트라 부릅니다.컴포넌트를 적절하게 추출하면

페이지 이외의 Next.js의 기본적인 기능이나 사용 방법에 관해 설명합니다.Next.js에서는 next/link나 next/image등 내장 컴포넌트나 기능을 제공합니다. 이것들은 TSX안에서 import해서 사용할 수 있습니다.Next.js에서는 애플리케이션 안의

산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능한 경우, NaN을 반환한다.산술 연산자는 피연산자의 개수에 따라 이항 산술 연산자와 단항 산술 연산자로 구분할 수 있다.이항 산술 연산자는 2개의 피연산를 산술 연산하

데이터 타입(data type , 줄여서 '타입'이라고도 한다.)은 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 갖는다 자바스크립트(ES6)는 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시타입(primitive type)과 객체타입(obje

"값" 이라는 용어를 알고 있다고 생각하겠지만 막상 설명하려 하면 난감할 수 있다. 개념을 이해한다는 것은 바로 용어를 정확히 이해하고 설명할 수 있다는 것이다. 만약 용어의 의미릴 정확히 설명할 수 없다면 개념을 제대로 이해하지 못한 경우가 많다.값을 비롯해 이 책(

Next.js 입문 Next.js를 사용함으로써 리액트를 기반으로 보다 뛰어난 UX의 웹 애플리케이션을 개발할 수 있습니다. 예를 들어, 리액트의 페이지 이동의 쾌적함 등을 유지하면서, 페이지 단위로 서버 사이드 랜더링과 정적 사이트 생성을 쉽게 활용할 수 있습니다.

useEffect와 useLayuotEffect - 부가 작용 훅 부가 작용은 컴포넌트의 그리기와는 직접적인 관계가 없는 처리를 말합니다. 리액트에서는 이 부가 작용 훅을 적절하게 관리하는 것이 중요합니다. useEffect useEffect는 부가 작용을 실행하기

props에서는 부모로부터 자식의 컴포넌트로 임의의 데이터를 전달할수 있다. 데이터를 전달하는 또 다른 한 가지 방법으로 Context가 있습니다.Context를 사용하면 데이터를 부모로부터 직접 전달하지 않아도 컴포넌트가 필요한 데이터를 참조할 수 있습니다.예를 들어

리액트 기본 실제로 컴포넌트 구현을 해보기! src아래에 conpoents 디렉토리를 만들고, 그 안에 Hello.tsx라는 파일을 추가한 뒤 다음 코드를 구현해보자 리액트 요소 리액트 요소는 div나 span등 HTML 요소에 대응하는 것으로, 리액트에서 UI를 구

옵셔널 체이닝(Optional Chaining)을 사용하면 중첩된 객체의 속성이 존재하는가에 관한 조건 분기를 간단하게 기술할 수 있습니다. 이제까지는 안전한 코드를 작성하려면 null 또는 undefined를 체크하는 if 조건 분기를 작성하거나 obj, prop1

Enum을 사용하면 이름이 붙은 상수 셋을 정의할 수 있습니다. Enum은 자바스크립트에는 없는 기능으로, 타입스크립트에서 확장한 기능 중 하나입니다.Enum을 사용하면 열거한 값 이외에는 대입할 수 없는 타입을 정의할 수 있습니다. 예시와 같이 상하좌우 방향등, 특정

함수 타입 Type Script는 인수에도 함수를 사용할 수 있습니다. 함수 그 자체의 타입을 기입하는 방법입니다. 다음과 같은 표기법으로 함수 타입을 나타냅니다 인수명은 실제 함수의 인수명과 대응할 필요는 없습니다. 다음 코드는 예시입니다. singBirds는 인

Set-Cookie : 서버에서 클라이언트로 쿠키 전달(응답)Cookie : 클라이언트가 서버에서 받은 쿠키를 저장하고, HTTP 요청시 서버로 전달ex) set-cookie: sessionId=abconde 1234; expires=Sat, 26-Dec-2023 01

HTTP 전송에 필요한 모든 부가정보ex) 메세지 바디의 내용, 메세지 바디의 크기, 압축, 인증, 요청 클라이언트, 서버 정보, 캐시 관리 정보...표준 헤더가 너무 많음https://en.wikipedia.org/wiki/List_of_HTTP_header

변수 선언에는 var, let, const를 사용합니다. 변수명 뒤에 : 타입을 추가해 타입 애너테이션을 합니다.let을 사용해 변수를 선ㄴ언한 경우, var로 선언된 변수의 스코프가 해당 변수를 포함하는 함수에서까지 사용할 수 있는 반면, 블록 스코프로 선언된 변수는

타입스크립트의 가장 큰 기능이라고 할 수 있는 타입의 기능에 관해 공부해봅시다. 타입스크립트는 자바스크립트 문법을 기본으로 하지만, 타입이나 클래스 등 일부 코드 작성법이 다릅니다.타입스크립트에서는 변수나 인수명 뒤에 : 타입과 같이 타입 애너테이션(Type Annot

타입스크립트는 자바스크립트를 확장한 상위 호환 언어입니다. 즉, 전혀 다른언어가 아니라 자바스크립트의 코드를 그대로 타입스크립트 코드로 읽을 수 있습니다.예들 들어이 자바스크립트 코드는 타입스크립트 코드로서 작동합니다.그리고 위 자바스크립트 코드의 변수와 인수에 타입

1xx (Infrimational) : 요청이 수신되어 처리중2xx (Successful) : 요청 정상 처리3xx (Redirection) : 요청을 완료하려면 추가 행동이 필요4xx (Client Error) : 클라이언트 오류, 잘못된 문법등으로 서버가 요청을 수

컴포넌트 설계 모던 프론트엔드에 요구되는 스킬은, 간단히 React와 같은 라이브러리를 JavaScript나 TypeScript로 작성할 수 있다는 것뿐만 아니라, 컴포넌트 설계를 확실하게 수행할 수 있는 것도 중요하다. 복잡한 UI를 가진 애플리케이션도 재사용 가