React를 배워보자!

React를 찍먹해보자.본 캠프가 시작되고나서 React를 접했을때, 혹시 멘탈이 나갈까봐한 번쯤은 접해보고 싶어서 공부를 시작한다.위와 같은 코드가 있다고 가정했을때,react는 이와 같은 과정을 최적화 시켜준다고 한다. 살펴보도록 하자.위 소스 코드는 react가

리액트를 예습해보자.JSX는 HTML과 JavaScript를 동시에 사용하고 있기 때문에,위와 같은 규칙을 지켜줘야한다.Props는 Properties의 줄임말이라고 한다.값을 전달하고 전달 받을 수 있는 리액트의 핵심개념이라고 한다.머릿속에서는 대충 감이 오는데 아직

리액트를 알아보자!버튼을 누르면 숫자가 증감되는 간단한 카운터 앱을 만들어보았다.state와 props를 넘겨 받으려면 App.jsx에서 로직을 작성해야 한다.리액트를 사용해서 처음 만들어본 앱이었다.자바스크립트와는 구현해 내는 방식이 많이 달라서 생소했지만상당히 생산

리액트를 활용하여 투두리스트를 만들어보자.구현한 기능1\. 추가하기2\. 렌더링하기3\. 수정하기4\. 삭제하기5\. 검색하기\[소스코드]완벽하게 이해하고 구현했다고 할 수는 없다.state와 props가 어떻게 이용되는지 정도는 알겠는데아무것도 없이 혼자 하라고 하면

\[감정일기장]을 리액트를 활용해 만들어 보았다.새 일기 쓰기수정하기삭제하기월 별로 출력하기로컬 스토리지를 활용하여 렌더링하기\[요기]사전캠프가 종료되기전에 리액트에 대해 접해보고 싶어서 시작했는데,생각보다 어려웠지만, 굉장히 직관적으로 편리하다고 느꼈다.모듈화가 무엇

주어진 강의를 통해 자바스크립트와 리액트를 복습하자!자바스크립트 핵심 개념 복습ㄴ 리액트에서 많이 다루는 내용위주React개발환경 셋팅법componentsJSXpropsuseState사실 한 번 다뤄봤던 내용이기에 복습이 그렇게 어렵지는 않았다.이전에 실습할때는 npm

리액트 입문주차 개인과제가 주어졌다.프로젝트 목표에 나와있듯이 리액트의 state와 props의 사용에 대해 알아가는 과제다.npm create vite@latestnpm으로 프로젝트를 만든 후언어는 React와 JavaScript를 선택했고패키지가 만들어진 후 npm

로드맵과 필수 및 선택 구현사항을 진행해보자.사실 어제는 여기서부터 어려웠다.state와 props를 사용해야하는것은 알겠는데...어떻게 해야하지? 막막했다.머릿속에만 있는 지식이 출력이 안되는것이었다.매우 당황했다.그렇지만 차근차근 해보기로 했다.우선 임시데이터를 만

국가추가시 국가명이 없을때는 추가되지 않게한다.국가추가시 국가명이 숫자를 포함할때도 추가되지 않게한다.국가추가시 국가명이 존재할때는 새로 추가하지않는다.업데이트시 존재하지 않는 국가는 알려준다.업데이트시 해당 국가만 업데이트가 되게 한다.국가 추가 및 업데이트시 금메달

조건부 렌더링은 컴포넌트가 특정 조건을 만족할 때만 화면에 표시되거나, 조건에 따라 다른 컴포넌트를 표시하는 방법을 의미합니다. 리액트에서는 사용자에게 보여줄 UI를 컴포넌트 단위로 관리하는데, 조건부 렌더링을 통해 동적으로 컴포넌트를 제어할 수 있습니다.이를 통해 사

useStateuseEffectuseRefuseContextReact.memouseCallbackuseMemo이전에 공부했던것들도 있지만 복습하는 차원에서 정리해보자.useState는 React에서 함수형 컴포넌트의 상태를 관리하기 위한 기본적인 Hook이다.useSt

Supabase는 PostgreSQL을 사용하여 관계형 데이터를 관리하면서도,실시간으로 데이터 변화를 감지하고 반응할 수 있는 기능을 제공합니다.npm i @supabase/supabase-jsvsCode에서 터미널을 켜고 해당 명령어를 입력하여 패키지를 설치한다.설치

React컴포넌트의 라이프사이클은 컴포넌트가 생성되고 화면에 렌더링된 후, 사용자의 상호작용이나 상태 변경에 따라 업데이트되며, 마지막으로 제거되는 일련의 과정입니다. 이를 이해하면 컴포넌트가 언제, 어떻게 작동하는지 예측 가능하며, 필요한 시점에 적절한 로직을 추가할

리액트 숙련주차인만큼 잘해내봅시다.첫 번째는 props-drilling방식 입니다.우선 패키지를 먼저 설치해준다.npm install react-router-dom 설치가 완료되면 폴더를 하나 만들고!Router.jsx까지 만들어준다.이제 라우터 설정을 해보자.초기설정

이어서 과제를 해보자 > 자아~ 시작! 1. Context API 리팩터링 🤔 근데 왜 Context API를 사용하려는걸까요? React에서 데이터를 전달하는 기본 방식은 Props입니다. 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방식이죠. 그러나

리덕스 툴킷으로 프로젝트 리팩토링디테일 페이지 구현Context API로도 전역상태관리가 되는데 왜 Redux Toolkit를 사용해야하는지 대한 의문이 들었다.아래의 그림을 살펴보자.그림으로 어느정도 유추 할 수 있지만,Context API는 데이터가 변경되면 해당

API(응용 프로그램 인터페이스)는 소프트웨어 응용 프로그램들이 서로 통신하고 데이터를 주고받을 수 있도록 하는 인터페이스,즉 규칙과 정의 집합입니다.API는 서로 다른 소프트웨어가 원활히 소통하게 해주는 "중간자" 역할을 합니다.소프트웨어가 데이터를 가져오거나 특정

CORS (Cross-Origin Resource Sharing) : CORS는 웹 브라우저가 다른 도메인에 위치한 리소스에 접근할 때 발생하는 제약을 제어하는 메커니즘입니다. 예를 들어, http://example.com에서 로드된 웹 페이지가 https&#

데이터베이스(Database)는 데이터를 체계적으로 저장하고, 효율적으로 검색, 수정, 삭제할 수 있도록 설계된 시스템입니다.현대의 모든 기술 환경에서 데이터베이스는 필수적인 요소로, 애플리케이션과 서비스의 핵심입니다.데이터 관리 효율성방대한 양의 데이터를 논리적으로

세션은 사용자가 웹 애플리케이션에 접속한 상태를 서버 측에서 유지하는 기술입니다.사용자가 로그인하거나 특정 작업을 수행하면 서버는 사용자를 식별하기 위해 세션 ID를 생성합니다.세션 ID는 클라이언트(브라우저)에 쿠키로 저장되거나 URL 매개변수로 전달됩니다.클라이언트