React

href ='' 안에 아래 예시처럼 작성 시 노란색 밑줄과 동시에 오류가 발생한다오류 발생 내용 The href attribute requires a valid value to be accessible. Provide a valid, navigable address a

meta(facebook)이 개발한 오픈소스 JavaScript라이브러리이고, 대규모 웹서비스의 UI를 더 편하게 개발하기 위해서 만들어진 기술이다React 로 만들어진 서비스로는 instagram facebook notion 등이 있다component 의 기반으로 U

확장된 JavaScript 문법이다JavaScript, HTML 혼용이 가능하다변수를 만들고, HTML에 {변수명} 이런식으로 렌도링도 가능하다여기서의 {변수명}은 숫자, 문자열, 값으로 평가되는 식 다 가능하다예를 들어서 조건문또는 반복문 등은 사용이 불가하다Bool

📌props란 ? properties의 줄임말이고, 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용하는 속성이다 📌naver 메인을 react로 구현한다고 가정했을 때 아이콘만 각자 다르고 UI는 똑같기 때문에 아래 예시처럼 표현해줄 수 있다 이렇게 쓰게

이벤트 발생 시 그것을 처리하다라는 의미이고, 예시로는 버튼 클릭시 경고창 노출 등이 있다React 에서는 camelCase를 사용해서 이벤트를 사용하는데 onClick, onChange 등이 있다{} 중괄호 안에 함수명을 적어주면 된다⚠️ 제일 많이하는 실수로는 함수

상태라고 한다. 즉 어떠한 사물이 현재 가지고 있는 모양이나 또는 형편을 뜻한다리액트에서는 각각의 컴포넌트에 상태를 의미하는 값이자 변경할 수 있는 값인 state를 만들 수 있다하나의 컴포넌트에 여러 개의 state를 만드는 것도 가능하다< React에서 제공하

component들은 자신이 가지고 있는 state가 변경되지 않아도 부모로 부터 받는 프롭스의 값이 변경되면 다시 리렌더링이 된다. 여기서 리렌더링이란 ? 사용자가 화면에 view를 다시 새롭게 보여주는 것을 의미한다 📌 component 리렌더링 되는 조건 자신

💚 클릭 시 숫자 1씩 증가글 수정 버튼 클릭 시 남자코트 추천 일 때 여자코트 추천으로, 여자코트 추천 일 때는 남자코트 추천으로 글 수정모달창 버튼 클릭 시 모달화면 show/hide 전체코드✔️ Array Object 를 다룰 때는 원본을 보존하는 게 좋다✔️

📌 버튼 클릭 시 색상 변경 예제 > 기능설명 각각의 버튼 클릭 시 버튼 색상에 맞게 색이 변경된다 전체코드 * app.jsx* app.jsx 파일에서 useState로 초기값을 빨간색으로 넣었다. ColorBox에는 프롭스로 colors를 전달하고, BtnB

📌 프롭스를 문자열에 더할 때 📌 map 돌릴 때 인자 i ? i + 1인 이유는 map 인자 i가 0부터 시작하는 정수여서 이미지1,2,3 이 보여지게 하려면 +1을 해주면 된다 ➕ map안에 작성하는 것 보다는 아래처럼 작성해주는 것이 가독성에 좋다 📌

페이지 새로고침 했을 때 state 초기값으로 돌아가는데 그것을 방지하기 위해 state를 서버로 보내서 DB에 영구저장 하는 것key/valut 형태로 저장가능최대 5MB까지 문자 저장이 가능하다사이트 재접속해도 남아있으나 브라우저 청소하게 되면 삭제된다LocalSt

리액트는 Single Page Application 사용한다. 줄여서 SPA라고 한다.SPA란 페이지 전체가 바뀌는 것이 아니라 필요한 부분만 업데이트를 하는 방식으로 페이지 새로고침이 되지 않는다 .SPA는 빠르게 페이지 전환이 되는 장점이 있지만 단점도 있다. 첫

동물 리스트에서 검색어와 맞는 동물만 화면에 필터링 되게 하기기능을 구현할 때는 코드를 바로 작성하는 것보다 구현 할 순서나 내용을 글로 먼저 작성해보고, 흐름을 파악한 다음에 코드를 작성해서 만드는 게 더 편하게 구현할 수 있다 💡 검색기능 내용 정리리스트 만들기검

Detail(상품정보 페이지)에서 주문하기 버튼 클릭 시 Cart(장바구니 페이지)에 해당 상품이 추가되는 기능 Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리이다기존 state와 action.payload.id 값을 비교해서 같은 값을 반

서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 브라우저 기능을 AJAX라고 한다. 서버란? 데이터를 요청하면 데이터를 보내주는 것을 말한다.GET, POST 중 어떤 방법으로 보낼 지 선택URL 형식으로 데이터를 요청해서 받아

폰트어썸을 사용해서 아이콘을 사용했는데 설치할 게 조금 많다고 느껴졌다. 터미널에 입력해서 설치를 다 해야지만 위에있는 코드에 아이콘이 잘 렌더링 되는 것을 확인 할 수 있다.<폰트어썸 설치>npm i @fortawesome/fontawesome-svg-coren

📌 이미지 불러오는 방법 3가지 (1) src폴더에 이미지 폴더를 만들어서 불러오기 (2) public 폴더에 이미지를 URL로 불러오기 (3) Module로 분리해서 불러오기 ⭐ (1) src폴더에 이미지 폴더를 만들어서 불러오기 > assets는 임의로 지정한

다이닝 코드 미니프로젝트의 기능은 좋아요 버튼을 클릭했을 때 좋아요 목록 페이지에 들어가 보면 클릭했던 장소를 모두 확인 할 수 있다. 그렇지만 setState로 변경했을 때만 발생하는 에러가 있었다. 그것에 대해서 기록을 하자면 ..App.js 파일에서 data저장되

리액트에서는 불변성을 지켜야 한다 !불변성 유지란 ? 초기에 할당한 값 자체를 변경하면 안된다는 것 state의 값 즉 아래 예시를 봤을 때 number의 값에 4를 추가하고 싶은데 그럴 때 push를 사용하면 절대 안 된다. 물론 추가는 잘 되지만 push의 특징

Modal open 버튼 클릭시 모달창이 열리고, Close버튼과 외부에 있는 검정배경 클릭 시 모달창이 사라지는 기능useState의 초기값을 false로 주었다. onClick을 이용해서 클릭할 때 true로 변하게 되면 모달창이 열리는 방법으로 기능을 구현 해봤다

\[React] 🔄️무한 렌더링 원인 찾기 이전 게시글에서 무한루프에 대한 글을 썼다. 이번에는 다이닝 코드 프로젝트를 만들면서 헷갈렸던 부분과 recoil 그리고 state 다른점에 대해서 써보려고 한다.좋아요 버튼을 조금 수정했다. 채원진 하트가 되었을 때 좋아요

Swiper React 공식 문서 📍 Swiper 설치 📍 Swiper 사용 기본구조 📍 Swiper 사용해서 슬라이드 만들기 > 슬라이드 부분을 swiper로 사용해봤다. 사용할 swiper기능은 pagination버튼을 클릭하면 넘어가는 것과 3초마다 자동으로 넘어가는 기능이다. 배너광고이기 때문에 slidesPerView={1} 로 설정하...

FontAwesome 공식문서기본패키지 설치 및 solid, regular, brands만 설치했고, 추가적으로 light 등 다른 아이콘 형식을 적용하고 싶다면 설치를 따로 해줘야 함npm i @fortawesome/fontawesome-svg-corenpm i @f

기능을 설명하자면 메뉴에 MouseOver를 했을 때 슬라이드 메뉴가 나타나고 MouseOut 했을 때에는 슬라이드 메뉴가 없어지는 기능이다.state를 true/false로 만들어서 ismouse가 true 일 때에는 메뉴 슬라이드가 보여지게, false 일 때에는

항상 같은 방법으로 컴포넌트에 props를 전달 했었는데 EsLint에서 경고가 생기지 않았어서 프롭스로 전달 하는 속성에 타입을 지정해주지 않아도 된다고 생각했다. 경고가 생기지 않았던 이유는 eslint.config.js파일에서 "react/prop-types":

jsonplaceholder 받아오는 데이터 jsonplaceholder 사용했다. 내가 사용했던 데이터는 photos이고, map으로 반복생성해서 하나하나 받아오는 건 기능이 정상적으로 됐지만 특정 데이터를 가지고 오고 싶을 때는 계속 url 값이 undefined라

Swiper 사용해서 슬라이드 만들기 swiper를 사용해서 슬라이드를 만든 적이 있는데 정확하게 다루는 방법에 대한 게시글은 아직 작성하지 못한 것 같아서 블로그를 써보려고 한다. Swiper 공식 사이트 🔹Swiper 설치 🔹import 하기 navig

📌 한 입 크기로 잘라먹는 리액트 강의를 보고 감정일기장 프로젝트를 진행했다. 이 프로젝트에서 기능을 구현할 때, 어떤 이유로 특정 기술을 선택했는지 분석해봤다.(1) useState 가 아닌 useReducer 로 상태를 관리한 이유(2) 외부 라이브러리가 아닌 C

처음에 했던 데이터 요청 연습은 for문으로 반복해서 불러왔다. api 문서를 읽어봐도 포켓몬 id에 각각 접근을 어떻게 해야할 지 모르겠어서 블로그를 참고하여 데이터를 요청했지만 이것마저도.. 많이 어려웠다. 그리고 초기 로딩 속도가 느린 것 같아서 새롭게 오늘 GE

DetailPage.jsx:33 Uncaught TypeError: Cannot read properties of undefined (reading 'find')DetailPage.jsx:33 Uncatched TypeError: 정의되지 않은 속성을 읽을 수 없습니다

detailRes는 포켓몬 url을 get 요청해서 포켓몬마다 각각의 데이터 확인이 가능하다. 내가 포켓몬 도감을 만들면서 필요한 데이터는 abilities, id, species, sprites, types 속성들이다. 그 중에서도 타입 추출하기 위해서 사용했던 ty