profile
반갑습니다

[Node] Cookie

웹 서버가 브라우저에게 지시하여 사용자 로컬 컴퓨터에 저장하는 4k 이하의 작은 데이터입니다. 쿠키는 HTTP가 무상태 프로토콜이라는 약점을 보완하기 위해 도입했으며, name=value 형태로 저장됩니다.

2일 전
·
0개의 댓글
·

[Node] CORS와 SOP의 개념 및 구현 방법 이해하기

Cross-Origin Resource Sharing(CORS) 는 웹 애플리케이션이 다른 도메인에서 리소스를 요청할 때, 서버가 해당 요청을 허용할지 여부를 결정하는 방식입니다.

3일 전
·
0개의 댓글
·

[Node] 네트워크의 기본 구조와 개념 이해하기

네트워크는 크기, 범위, 구성 방식에 따라 여러 가지로 분류됩니다.

4일 전
·
0개의 댓글
·
post-thumbnail

[Node] HTTP와 HTTPS의 차이: 보안 통신 프로토콜의 필요성과 암호화 방식

HTTPS는 Hypertext Transfer Protocol Secure의 약자로, HTTP에 보안 프로토콜 SSL/TLS를 추가하여 데이터를 암호화하는 통신 프로토콜입니다.

4일 전
·
0개의 댓글
·

[React] 검색 입력에 Debounce 적용하기

Debounce: 이벤트를 그룹화하여 특정 시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술입니다. 검색 기능에 Debounce 기능을 추가하여, 사용자가 입력을 멈춘 후에만 API를 호출하도록 만들어 성능을 향상시킬 수 있습니다.

6일 전
·
0개의 댓글
·

tmdb API와 Postman 실습: 인기 영화 데이터를 손쉽게 받아오는 방법

tmdb API로부터 영화 정보를 받아오는 미니 프로젝트를 진행하기에 앞서, Postman을 활용하여 데이터를 미리 확인해 보았습니다. 이번 글에서는 Postman을 이용해 API 데이터를 받아오는 방법을 알아보겠습니다.

2024년 11월 7일
·
0개의 댓글
·

Vite 프로젝트 Vercel 배포 시 404 에러 해결법: vercel.json 설정

Vite를 사용하여 프로젝트를 Vercel에 배포하는 중 404 에러가 발생했습니다. 처음에는 원인을 파악하지 못해 커밋을 되돌리고, 클론을 다시 해보는 등의 시도를 했지만, 결국 프론트엔드 라우팅 설정이 누락된 것이 원인이었습니다.

2024년 11월 6일
·
0개의 댓글
·

[Next] Nextjs에 대해 알아보기

Next.js는 React를 기반으로 한 웹 개발 프레임워크로, 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 기본적으로 지원합니다. 성능 향상과 검색 엔진 최적화(SEO)를 극대화하며, 개발자가 쉽게 React 애플리케이션을 구축하고 배포할 수 있습니다.

2024년 11월 4일
·
0개의 댓글
·

[React] Zod, React Hook Form으로 유효성 처리

프론트엔드에서 유효성 검사는 사용자의 잘못된 입력을 방지하고, 데이터의 무결성을 보장하는 중요한 과정입니다. 여러 유효성 검사 라이브러리 중 Zod는 가벼우면서도 TypeScript와의 완벽한 호환성을 자랑하는 대표적인 라이브러리입니다.

2024년 11월 4일
·
0개의 댓글
·

[React] Axios로 API 호출하기

리액트에는 HTTP Client 내장 클래스가 존재하지 않습니다. 서버와 데이터를 주고받기 위한 HTTP 통신을 하는 방법 중 Axios에 대해 알아보겠습니다.Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다.

2024년 11월 2일
·
0개의 댓글
·

[TypeScript] type과 interface의 차이를 알아보자

타입스크립트에서 타입을 선언하는 방법은 type과 interface가 있습니다. 두 가지 방법은 유사하지만 일부 차이점이 있습니다.

2024년 10월 31일
·
0개의 댓글
·

[React] 코드 스플리팅과 번들링으로 성능 최적화하기

웹사이트의 규모가 커질수록 그만큼 리소스도 많이 필요하게 됩니다. 특히 리액트와 같은 라이브러리를 사용해 애플리케이션을 개발하는 경우, 여러 모듈과 컴포넌트로 구성된 파일이 많아져 로딩 속도와 성능이 저하될 수 있습니다.

2024년 10월 31일
·
0개의 댓글
·

[Redux] Redux Toolkit

Redux는 리액트 애플리케이션에서 복잡한 상태 관리를 보다 체계적이고 예측 가능하게 해주는 전역 상태 관리 라이브러리입니다. Action, Reducer, Store를 통해 상태를 업데이트하며 상태 변화를 트래킹할 수 있는 구조를 가지고 있습니다.

2024년 10월 30일
·
0개의 댓글
·

[React] useMemo, useCallback, React.memo로 최적화 하기

리액트 최적화가 필요한 이유는 자바스크립트의 특성상 함수나 컴포넌트가 재생성될 때 메모리를 소모하고, 크고 복잡한 앱일수록 이러한 소모가 성능 저하로 이어질 수 있기 때문입니다.

2024년 10월 29일
·
0개의 댓글
·
post-thumbnail

[Redux] 리액트 상태관리를 효율적으로 관리하기

Redux는 자바스크립트 애플리케이션에서 상태를 관리하는 라이브러리로, 주로 리액트와 함께 사용됩니다. Redux는 애플리케이션의 전역 상태를 관리하여, Props drilling 문제를 해결하고 예측 가능한 상태 흐름을 유지하도록 돕습니다.

2024년 10월 29일
·
0개의 댓글
·

[Programmers] PCCP 기출문제 석유 시추 JS

PCCP 기출문제 석유 시추 JS

2024년 10월 28일
·
0개의 댓글
·

[React] Context API로 전역 상태 관리하기

리액트에서 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 데이터를 전달하는 과정에서 Props drilling이 발생하는데 이를 해결하기 위한 방법 중 Context를 사용하여 해결하는 방법을 알아보겠습니다.리액트에서 전역 상태를 관리하기 위한 내장 기능입니다.

2024년 10월 26일
·
0개의 댓글
·
post-thumbnail

[React] Props drilling이 무엇인가

리액트에서 props drilling은 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 데이터를 전달하는 과정에서, 그 데이터를 실제로 필요로 하지 않는 중간 컴포넌트들이 해당 props를 단순히 전달하기 위해 포함되는 패턴을 말합니다.

2024년 10월 25일
·
0개의 댓글
·

[React] Styled-Components를 사용해보자

Styled-Components는 자바스크립트에서 CSS를 작성할 수 있게 해주는 라이브러리입니다. React와 같은 프레임워크에서 많이 사용되며, 컴포넌트 기반으로 스타일을 관리함으로써 스타일링과 로직을 한 곳에 통합할 수 있습니다.

2024년 10월 23일
·
0개의 댓글
·

[React] sass/scss를 알아보자

우리는 HTML에 스타일을 부여하기 위해 CSS를 사용하지만, 수많은 id, class, 선택자 등을 사용하다 보면 CSS 파일이 매우 복잡해져 가독성이 떨어질 수 있습니다. 이때 CSS 전처리기인 SASS를 사용하면 CSS 코드를 더 구조적으로 작성할 수 있습니다.

2024년 10월 22일
·
0개의 댓글
·