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 매개변수로 전달됩니다.클라이언트

1. Fetch와 Axios란? 1-1. Fetch란? fetch는 브라우저 내장 함수로, 네트워크 요청을 보내는 데 사용됩니다. Promise 기반으로 동작하며, 브라우저가 제공하는 표준 API입니다. 하지만 실무에서는 Fetch의 몇 가지 단점 때문에 보완 라이브러리를 사용하는 경우가 많습니다. > 📌그런데 또 웃기게.. 요즘 Nextjs에서는 ...

리액트 심화주차 과제로 MBTI테스트 만들기가 주어졌다.스크롤 압박으로 자세한 설명은 생략한다.이번 프로젝트의 목표는 Intro에 자세히 나와있다.npm i -D tailwindcss postcss autoprefixernpx tailwindcss init -p패키지

MBTI 테스트소스코드예상보다 빨리 끝냈다.과제를 하며 가장 어려웠던 부분을 기록해볼까한다.json-server를 설치한 뒤, db.json과 연동하여로컬환경에서 테스트했고 어려움없이 잘됐다.가이드를 따라서 json-server를 따로 배포했다.여담이지만 가이드를 따라

원래 이런 사람이 아닌데 이번 프로젝트때는 왜 이렇게 놓친게 많은것인지...안그래도 공통 컴포넌트인 Header를 만들고 사용해야하는 페이지마다 계속해서 넣어주는것이 너무 불편했는데 이미 이런 가이드가 존재하고 있었다...매우 반성한다.반성은 반성이고 할건하자!comp

HTTP (HyperText Transfer Protocol)는 월드 와이드 웹(WWW)에서 클라이언트(주로 웹 브라우저)와 서버 간에 정보를 주고받기 위한 프로토콜입니다.HTML 문서, 이미지, 동영상, API 데이터 등 다양한 형태의 리소스를 전송할 수 있습니다.H

마감기한은 12/5일...수단과 방법을 가리지말고 또 해내보자!이번 프로젝트에서는 감사하게도 팀장을 맡았다.발제 후, 식사시간과 수준별 수업시간을 제외한 모든 시간에 회의를 하며 많은것들을 정하고 셋팅했다.1\. 주제 및 컨셉 정하기 (완료)2\. 사용할 API 정하기

주말 푹 쉬었고, 이제 달려봅시다. 1. API 친절하게도 이런 사이트들이 존재하고 있었다. > 사용법1, 사용법2 팀원들의 도움으로 지도API 사용법에 대해 나와있는 사이트를 알게됐다. 대략 이런식으로 나와있는데, 눌러보면 각 기능에 대한 로직이 나와있다. 로직에 따라 KakaoMap컴포넌트를 만들고 Home컴포넌트에 끼워준다. *

진짜 군수골고개에 살고 있는거 아닙니다...생전 처음 들어보는곳입니다...1\. UI 구성2\. 코드분리3\. 키워드검색 ➡️ 카테고리 검색퍼블리싱이 끝났고 해당 스타일을 가지고 리팩토링을 진행했다.gif에 나와있듯이 이전과는 다르게 깔끔하고 보기 좋은 디자인이다.스타

프로젝트가 완성됐다.최선을 다해준 팀원들에게 감사인사를 전한다.배포 : 반려로드소스코드 : 깃허브지도 API의 사용법과 iframe에 대해 알 수 있어서 좋았다.tanstack-query와 zustand를 어떻게 사용해야 하는지 알 수 있어서 많은 도움이 됐다.팀 분위

🤔 이전 프로젝트까지는 뿌듯했는데 이번에는 왜 아쉬움이 더 많이 남을까?1\. 절대적인 시간이 부족해서 충분히 고민할 시간이 부족했다.이번 프로젝트도 그랬지만 앞으로도 그럴것이고나아가서는 실제로 일을 할때도 시간은 당연히 부족할것이다.마감기한이 널널하게 주어지는 경우