현재 프로젝트의 스타일을 styled-components로 하거나 CSS로 하였는데, CSS를 모두 SCSS로 수정하였다. SCSS로 바꾼 이유는 SCSS의 특징인 셀렉터의 중첩 기능 때문이었다. 중첩 기능 덕분에 편하고 가독성 좋은 코드를 작성할 수 있었다. 일반적인

타입스크립트의 중요성을 뒤늦게 알고, 유튜브 강의로 기본적인 학습을 마치고 프로젝트에 적용해보기로 나섰다.먼저 타입스크립트를 적용하기 위해 설치해보도록 하자.npm i typescript설치가 되는 건가 싶더니 에러가 발생하였다.나는 리액트 프로젝트를 이미 생성한 뒤에

10월 중순부터는 어쩌다 한번 운동을 한 거 같다. 요새 신경 쓸 게 많다 보니 운동은 보류했다. 도서관에서 빌렸던 리액트 책을 타파하기 위해 10월 중순까진 도서관에 거의 매일 가서 공부했다. 중순 이후로는 공부한 리액트 개념을 가지고 본격적으로 개발에 힘을 쓰느라

로딩 화면 | 이미지 관련 데이터 처리 성공 | 이미지 관련 데이터 처리 실패 | 서버 Off일때 | 서버 On일 때 | useEffect에서 then 메서드와 catch 메서드 안을 보면 setLoading(false)을 볼 수 있다. then부터 말하자면,

👀 에러: JSON.parse()⭐️ 에러 원인 💖 해결 방안 Album 전체 코드 지난 이미지 데이터를 위한 서버 구현하기(7)에서 이미지 데이터를 DB에 저장하고, 이미지 데이터를 검색하는 API를 작성했다. 이번에는 프론트에서 이미지 데이터를 검색하는 API

1. 데이터베이스 생성하기 2. 이미지 관련 데이터를 데이터베이스에 저장 2.1. PHP로 data.json 파일 읽어오기 2.2. PHP로 테이블 생성하기 2.3. 테이블에 이미지 관련 데이터 넣기 2.4. 이미지 관련 데이터 삽입 전체 코드 3. 이미지 관련 데이터

Carousel 설치 및 적용 1. 포토북 형태로 디자인 1.1. 왼쪽 페이지와 오른쪽 페이지로 나누자. 1.2. CSS로 스타일을 입힌다. 2. 이미지 관련 데이터 불러오기 3. Carousel 이미지 적용 4. 다크 모드와 로그아웃 기 4.1. 다크 모드 구현 4.

HTML과 내부 CSS와 jQuery로 구현했던 코드이다. 우선 HTML 틀과 jQuery 기능을 리액트 형식으로 바꿔보겠다. Hint 컴포넌트에 스타일을 선언하기 위해 먼저 아래의 명령어를 터미널에 입력하여 설치하도록 하자. npm i styled-componets

현재 로그인 버튼의 기능은 id와 password를 둘 다 입력했을 때 버튼 색상이 활성화 되는 것이다.이 기능에 더해 버튼을 클릭했을 때의 페이지 전환을 해줘야 된다.페이지 전환을 위해서 useNavigate를 사용할 줄 알아야 한다.react-router-dom은

지난 시간에 마무리 지었던 전체 코드를 다시 한번 살펴보자.이 코드에서 button 밑의 hint 부분부터 먼저 수정해줄 것이다."Click to get a hint"를 누르면 특정 주소의 컴포넌트로 연결되도록 하기 위해서 리액트 라우팅 라이브러리가 필요하다. 리액트

이번 프로젝트에서는 newsapi에서 제공하는 API를 사용하여 최신 뉴스를 불러온 후 보여 줄 것이다. 이를 수행하기 앞서 newsapi에서 API 키를 발급받아야 한다. API 키는 https://newsapi.org 에 가입하면 발급받을 수 있다. 발급받은 AP

웹 애플리케이션을 만들다 보면 처리할 때 시간이 걸리는 작업이 있다. 예를 들어 웹 애플리케이션에서 서버 쪽에서 데이터가 필요할 때는 Ajax 기법을 사용하여 서버의 API를 호출함으로써 데이터를 수신한다. 이렇게 서버의 API를 사용할 때는 네트워크 송수신 과정에서

1. useState를 이용한 onChange 이벤트 핸들링 1. 각 상태값마다 useState 함수 호출하기 ✔️ 2. 상태값을 객체로 묶어서 useState 함수 호출하기 2. 버튼 활성화를 위한 useState 3. 버튼 스타일링 상태 변화가 동기적으로 반

📗목차 SPA란? SPA 단점 프로젝트 생성 후 라우터 적용 페이지 만들기 Route 컴포넌트로 특정 주소에 컴포넌트 연결 Link 컴포넌트를 사용하여 다른 주소로 이동하기 URL 파라미터와 쿼리 URL 파라미터 (useParams Hook)

가위는 2 바위는 0 보는 5로 표현합니다. 가위 바위 보를 내는 순서대로 나타낸 문자열 rsp가 매개변수로 주어질 때, rsp에 저장된 가위 바위 보를 모두 이기는 경우를 순서대로 나타낸 문자열을 return하도록 solution 함수를 완성해보세요.0 < rs

머쓱이는 친구에게 모스부호를 이용한 편지를 받았습니다. 그냥은 읽을 수 없어 이를 해독하는 프로그램을 만들려고 합니다. 문자열 letter가 매개변수로 주어질 때, letter를 영어 소문자로 바꾼 문자열을 return 하도록 solution 함수를 완성해보세요.모스부

개미 군단이 사냥을 나가려고 합니다. 개미군단은 사냥감의 체력에 딱 맞는 병력을 데리고 나가려고 합니다. 장군개미는 5의 공격력을, 병정개미는 3의 공격력을 일개미는 1의 공격력을 가지고 있습니다. 예를 들어 체력 23의 여치를 사냥하려고 할 때, 일개미 23마리를 데

immer를 설치하고 사용법 알아보기 이전 글에서 컴포넌트 업데이트 성능을 어떻게 최적화해야 하는지, 불변성을 유지하면서 상태를 업데이트 하는 것이 왜 중요한지 배웠다. 전개 연산자와 배열의 내장 함수를 사용하면 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓸

졸업한지도 벌써 한 달이 넘었다. 취업 일지를 하나 작성해놓고 한 달이 지난 두 번째 작성 글이다.그 동안 난 아침 8시 기상을 지킨 적은 없다...!!물론 조깅도 실패...첫 번째 일지를 작성하고 나서 일주일 정도는 노력해보려 했다. 하지만 아침 운동을 위해 바깥에

📗목차 많은 데이터 렌더링하기 크롬 개발자 도구를 통한 성능 모니터링 느려지는 원인 분석 React.memo를 사용하여 컴포넌트 성능 최적화 onToggle, onRemove 함수가 바뀌지 않게 하기 useState의 함수형 업데이트 useReducer 사용