초보 개발자의 프로그래밍 공부방

1. useState ⇨ 자바스크립트의 변수 + setter 함수

✅ JS 예시:

let count = 0;

function increaseCount() {
  count++;
  console.log(count); // 값은 바뀌지만 화면은 안 바뀜
}

✅ React 예시:

const [count, setCount] = useState(0);

function increaseCount() {
  setCount(count + 1); // 값 바꾸면 화면도 자동으로 업데이트됨
}


2. useEffect ⇨ 자바스크립트의 이벤트 리스너 또는 관찰자 패턴

✅ JS 예시:

document.addEventListener("click", () => {
  console.log("클릭됨!");
});

✅ React 예시:

useEffect(() => {
  const handleClick = () => console.log("클릭됨!");
  document.addEventListener("click", handleClick);

  return () => {
    document.removeEventListener("click", handleClick); // 정리
  };
}, []); // 최초 1회만 실행


3. useRef ⇨ 자바스크립트의 객체 또는 DOM 요소 참조

✅ JS 예시 (DOM 접근):

const input = document.getElementById("myInput");
input.focus();


✅ React 예시:

const inputRef = useRef(null);

useEffect(() => {
  inputRef.current.focus();
}, []);

return <input ref={inputRef} />;

🎯 최종 요약
React 훅 JS에서 비슷한 개념 주 용도 비유
useState let, const + setter 값 저장 + 화면 갱신 메모장
useEffect addEventListener, 자동 실행 로직
useRef 참조형 변수, DOM 선택자 DOM 접근, 상태 추적 (비렌더링) 

1. React 프로젝트있는 경로에서 아래 npm 명령어로 차트 관련 라이브러리 설치

npm install chart.js react-chartjs-2

2. 차트를 생성하기 위해서, 아래 코드처럼 예시 작성

==> 해결방법

Netlify 사이트 설정에서, 아래 처럼 환경변수 CI 값을 false로 설정해 주면, 자잘한 경고성 메시지는 무시한채로 빌드 가능

아래와 같은 에러가 간혹 발생하신분들이 계실겁니다.

이 에러는 javascript와 타 프로그램이 충돌했기때문에 발생하는 에러이구요.

해결방법은 간단합니다.

1. 작업관리자 창 열기 (ctrl + alt + del) 키를 눌러서 프로세스쪽에 실행되고 있는 디스코드 종료 

2.  컴퓨터 부팅시 자동으로 디스코드가 실행되게 되어있으면 이것도 off로 바꿉니다.

3. 윈도우 + R 키를 누르고 "%AppData%" 를 검색 한 후에 디스코드 폴더를 찾아서 삭제

4. 다시 윈도우 + R 키를 누르고 이번에는 "%LocalAppData%" 를 검색 한 후에 디스코드 폴더를 찾아서 삭제

5. 마지막으로 재부팅까지 하시면 됩니다.

출처

http://blog.naver.com/ppclub86/221770321763

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

• C드라이브에 React Project Tutorial이라는 폴더 생성

• cmd창에서 React Project Tutorial폴더 경로로 이동

ㄴcd C:\React Project Tutorial

• create-react-app패키지를 설치

ㄴnpm install -g create-react-app 

(-g옵션은 글로벌패키지라는 의미로, 이 프로젝트 뿐만아니라 다른 프로젝트에도 해당 패키지를 적용할 수 있다는 특징이 있습니다.)

• react 프로젝트를 생성 (각종 라이브러를 포함한 프로젝트를 만들어줍니다.)

ㄴcreate-react-app-management (프로젝트 이름)

• 생성한 react 프로젝트인 management 폴더로 이동

• yarn start를 입력하면 react 프로젝트가 실행됩니다.

서버를 종료시킬때는 Ctrl + c 버튼으로 종료시킬 수 있습니다.

출처

https://www.youtube.com/watch?v=_yEH9mczm3g&list=PLRx0vPvlEmdCED62ZIWCbI-6G_jcwmuFB&index=8

1. 프로젝트 생성

cmd 창에서 명령어 입력

create-react-app hello-react (hello-react란 이름의 React 프로젝트를 생성)

아래와 같이 메시지가 출력되면 프로젝트가 생성된 것

2. 프로젝트 실행

cd hello-react (만든 프로젝트로 이동)

yarn start (yarn 자바스크립트 패키지 매니저 실행)

아래처럼 프로젝트가 실행되서 서버가 돌아가면 된다.

출처

https://velopert.com/3621

1. cmd창 실행

2. npm 설치 되어있는지 확인

아래와 같이 npm -v라고 명령어를 입력해서 숫자가 나온다면 npm이 설치되어 있는것.

3. react app를 설치하기 위해 명령어를 입력

npm install -g create-react-app@2.1.8 (@뒤에 있는 숫자는 버전명임, 입력하지 않을시에는 최신버전으로 설치됨)

아래와 같은 메시지가 출력된다면 설치가 된 것.

또한 create-react-app 명령어를 입력해서 설치가 되었는지 확인할 수 있다.