[React] useContext 활용하기

useContext를 활용해서 다크모드와 카드 플립 구현하기!UMC 스터디를 통해 학습한 React useContext 개념과 실제 구현 과정에서 겪은 에러, 그리고 해결 방법을 정리해보자! 전역 상태 관리전역 상태 관리란 특정 컴포넌트에서의 state 변화를 전역에 두고, 필요한 컴포넌트에서 사용할 수 있는 것이다.React에서는 이를 위해서 Context API를 사용할 수 있다! useContext란?React의 useContext는 Context API와 함께 전역 상태를 쉽게 공유할 수 있도록 도와주는 Hook이다. > Props drilling 방지 리액트의 일반적인 데이터 흐름은 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 단방향으로 흐른다.컴포넌트 트리가 있다고 가정했을 때 공통적..

• format_list_bulleted React
• · 2025. 9. 26.

[React] React + Vite + TypeScript 프로젝트 생성하기

자주 사용하는 프로젝트 셋팅을 공유하고 각 정의와 역할, 그리고 사용하는 의미에 대해 정리해보고자 한다! Vite는 무엇인가?Vite는 프랑스어로 "빠르다(Quick)"라는 뜻을 가진 단어로, 프론트엔드 개발 도구이다.이름처험 빌드와 개발 서버 구동 시간이 빠르다는 장점이 있다.내부적으로 사용하는 ESBuild는 Go라는 네이티브 언어로 만들어진 도구를 이용해 빌드하기 때문에 속도가 빠르다고 한다! 기존 webpack과 같은 모듈 번들러를 이용할 때는 애플리케이션 내 모든 소스 코드에 대해 크롤링 및 빌드 작업을 마쳐야지만이 실제 페이지를 제공할 수 있었다. 즉 프로젝트에 있는 모든 JavaScript, CSS, 이미지 파일 등을 한 번에 묶어서(번들링) 개발 서버에 올렸다. 개발 서버를 실행할 때 전..

• format_list_bulleted React
• · 2025. 9. 9.

[AWS] CLF-C02 자격증 합격 후기

AWS CLF-C02 합격까지의 과정을 공유합니다! 클라우드에 대해 전혀 알지 못하던 저는 기초부터 차근차근 공부해보자는 생각으로 AWS Cloud Practitioner 자격증을 준비하기로 했습니다.이 과정은 클라우드의 기본 개념부터 AWS 서비스 전반까지 다루기 때문에 입문자에게 적합합니다!특히, 시험에 합격하면 다음 시험 응시 시 50% 할인 쿠폰을 받을 수 있다는 장점이 있습니다 :) AWS 자격증 종류AWS 자격증은 다음과 같은 것들이 있습니다. 저는 기초 레벨인 AWS Cloud Practitioner을 준비했습니다. Q. 프론트엔드 개발자가 왜 클라우드 자격증을 준비해?클라우드 컴퓨팅은 현대 웹 개발에서 필수적인 요소입니다!클라우드 서비스를 통해 개발자는 인프라 관리의 복잡성을 줄이고, 더 ..

• format_list_bulleted AWS
• · 2025. 9. 8.

[React] React가 무엇일까?

리액트(React)란 무엇인가?React는 Meta에서 만든 사용자 인터페이스(UI)를 렌더링하기 위한 JavaScript 라이브러리이다!React를 통해 작은 요소들을 재사용 가능하고 중첩할 수 있는 컴포넌트로 조합할 수 있다. 이런 React 컴포넌트는 React가 브라우저에 렌더링하는 마크업을 포함할 수 있는 JavaScript 함수로 그 마크업을 표현하기 위해 JSX라는 확장된 문법을 사용한다. (JSX는 HTML과 유사하다.) 리액트를 왜 사용할까? : 리액트의 핵심 철학 리액트는 다음과 같은 핵심 철학을 바탕으로 설계되었다.이러한 철학은 복잡한 화면도 구조적으로 관리 가능하며 성능 최적화에 알맞다. 1. 컴포넌트 기반(Component-based)화면을 작은 컴포넌트로 나누고, 이를 조합해서..

• format_list_bulleted React
• · 2025. 9. 8.