전체 글

배열에 항목 수정하기 User 컴포넌트에 계정명을 클릭했을 때 색상이 바뀌고, 다시 누르면 검정색으로 바뀌도록 구현하기   users 배열 안의 객체 안에 active라는 속성을 추가해준다. App.js const [users, setUsers] = useState([ { id : 1, username : 'silver', email: 'public.les0498@gmail.com' , active: true }, { id : 2, username : 'tester', email: 'tester@example.com', active: false }, { ..

화살표함수const add = (a, b) => { return a + b;};console.log(add(1, 2)); function 키워드 대신 => 문자를 사용해서 함수를 구현한다. 화살표의 좌측에는 함수의 파라미터, 화살표의 우측에는 코드 블록이 들어온다.  객체 객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해준다.const dog = { name: '멍멍이', age: 2};console.log(dog.name);console.log(dog.age); 객체를 선언 할 때에는 이렇게 { } 문자 안에 원하는 값들을 넣어주면 된다. 값을 집어 넣을 때에는키: 원하는 값 형태로 넣고, 키에 해당하는 부분은 공백이 없어야한다. 만약에 공백이 있어야..

변수 변수는, 바뀔  수 있는 값을 말한다.한번 값을 선언하고 나서 바꿀 수 있다.  let value = 1;console.log(value);  상수상수는, 한번 선언하고 값이 바뀌지 않는 값을 말한다. 즉 , 값이 고정적이다.  const a = 1; 데이터 타입 숫자 (number)그냥 값을 대입해주면된다. let value = 1;  문자열 (string) 텍스트 형태의 값은 작은 따옴표 혹은 큰 따옴표로 감싸 선언한다. let text = 'hello';let name = '자바스크립트';  참/ 거짓 (Boolean)let good = true;let loading = false;  null 과 undefined null은 이 값이 없다! 라고 선언할 때 사용한다. undefined는 아직 ..

배열 항목 제거하기 UserList.js import React from 'react';function User({ user, onRemove }) { return ( {user.username} ({user.email}) onRemove(user.id)}>삭제 );}function UserList({ users, onRemove }) { return ( {users.map(user => ( ))} );}export default UserList; App.jsimport React, { useRef, useState } from "react";import UserList from "./UserList";import C..

useRef로 컴포넌트 안의 변수 만들기 & 배열에 항목 추가하기    컴포넌트에서 특정 DOM을 선택해야할 때 -> ref 사용함수형 컴포넌트에서 이를 설정할 때 -> useRef 사용  useRef Hook은 DOM을 선택하는 용도 외에도, 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리함.  App 컴포넌트에서 userRef를 사용해 변수를 관리하려 한다.  사용하려는 목적은 배열에 새 항목을 추가하려 할 때, 새 항목에서 사용 할 고유 id를 관리하는 용도이다.  useRef를 사용하여 변수를 관리하기 전에 배열을 App에서 선언하고 UserList에게 props로 전달해주는 방식으로 만들 것이다.   1. useRef로 컴포넌트 안의 변수 만들기App.jsimport React, { use..

배열 렌더링하기 ● 배열const users = [ { id : 1, username : 'silver', email: 'public.les0498@gmail.com' }, { id : 2, username : 'tester', email: 'public.tester@example.com' }, { id : 3, username : 'gold', email: 'public.gold@example.com' }, ]; 이 내용을 컴포넌트로 렌더링한다면 아래와 같은 코드로 나타낼 수 있다.   ● UserList.jsimport React from 'react';function UserLis..

useRef로 특정 DOM 선택하기     특정 DOM 을 선택해야하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해 DOM을 선택한다.  리액트를 사용하는 프로젝트에서도 가끔씩 DOM을 직접 선택해야하는 상황이 발생하는데, 예를 들어 특정 엘리먼트의 크기를 가져온다던지, 스크롤바 위치를 가져오거나 설정해야한다던지, 포커스를 설정해줘야하는 상황들..., 외부 라이브러리 등을 사용해야 할 때에도 특정 DOM에 적용하기 때문에 DOM을 선택해야하는 상황이 발생한다.  이럴땐 리액트에서 ref 를 사용해준다. 함수형 컴포넌트에서 ref를 사용할 때에는 useRef라는 HOOK함수를 사용한다.  다음 코드는 초기화 버튼을 클릭했을 때 이름input에 포커..

회고 첫 배포이기도 하고 내가 마친 프로젝트를 배포하는게 간단한 일이라 생각했지만 왜 인지 모르게 오류의 연속이였다 분명 배포하기 전에는 실행도 잘됐는데 배포하고 나니까 github를 통해 빌드하고 배포했던 주소까지 생기고 나서 경로 문제때문에 배포해도 빈화면만 뜬다거나 오류코드가 떠버리고 말았다..   분명 로컬에서는 http://localhost:3000 이렇게 했을 때 문제 없이 잘 작동하는데 github 주소까지 더해져서 http://localhost:3000 /react-disneyplus-app 이렇게 실행할 때는 이상하게 오류가 뜨는 것이다. 알고보니까 React Router를 사용하는 경우, BrowserRouter의 basename 속성을 설정하여 앱의 기본 경로를 지정해주니까 바로 해결..

API KEY 숨기기 후 다시 빌드 및 배포    ● api key 숨기기 배포를 하게 되면 여러 사용자들이 볼 수 있기 때문에 API KEY를 숨김 처리 해주는 것이 좋다. API KEY가 노출되면 다른 사람이 나만의 API KEY를 무한 사용해 요금이 나갈 수 있는 경우도 있으니 숨김 처리를 해주도록 하자. 1. .env 파일을 생성해준다.  2. .env 파일안에 api key를 넣어준다 REACT_APP_API_KEY= apikey입력  3. axios.js 파일 안의 코드를 수정해준다.   import axios from 'axios';const instance = axios.create({ baseURL: "https://api.themoviedb.org/3", params: { a..

Github에 배포하기  1. 터미널 창에 입력해준다. npm install gh-pages --save-dev  2. package.json에 들어가보면 "gh-pages" 버전이 적혀있는 것을 확인해주면 된다.  3. package.json 안에 "homepage": "https://깃허브 사용자이름.github.io/{깃허브 파일이름}/", 을 적어주면 된다.   4.  이 과정들을 거쳤다면, 이제 빌드를 해보자 npm run build  5. 빌드 후 배포하기 npm run deploy Published 문자가 뜨면 배포가 완료 된 것이다.   ● 빌드 후 오류 다 완성 시켜줬었는데 경로 때문인지 이미지 파일들이 전부 안보이는 것이다   문제를 해결하기 위해 살펴보고 나니 빌드 후에 경로문제 때문..