실습은 주피터로 하였고, kpc의 DSAC Module1 DATA Programming을 참고했습니다. [matplotlib] 파이썬의 시각화 라이브러리이다. 예시로 랜덤 숫자 50개를 생성하고 선으로 연결한다. 우선 numpy와 matplotlib.pyplot을 불러와준다. 그리고 각각 np와 plt로 부르겠다고 약속! %matplotlib inline는 주피터 노트북 화면에 직접 나타나게 그리라는 뜻이다. np.random.randn(n) : numpy에서 랜덤값을 생성하는 함수이다. numpy를 np로 부르기로 약속했으니 np로 접근하였다. [randn vs rand vs randint] randn 함수는 평균이 0이고 표준편차가 1인 정규분포를 생성해준다. np.random.rand(n) : ra..

useReducer는 useState보다 다양한 상태를 다른 값으로 업데이트할 때 사용하는 Hook이다. useReducer의 가장 큰 장점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 뺄 수 있다는 것이다!! - useReducer를 알아보기 전에 reducer(리듀서)에 대해 알아보자. 리듀서는 현재 상태와 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아서 새로운 상태를 반환하는 함수이다. [예시] function reducer(상태, 액션) { switch (액션.type) { case "증가": return { value: 상태.value + 1 }; case "감소": return { value: 상태.value - 1 }; default: return 상태; } } reducer라는 함..

리액트로 프로젝트를 하다가 API 키를 가져와야 할 일이 생겼다. API 키는 아주 소중한 녀석이기 때문에 .gitignore에 추가해주어야 한다!! 마치 내 개인정보와 같다고 보면 된다. 어떻게 숨겨주어야 하는지 알아봅시다~! 401 에러가 발생할 때, .env를 추가했는데 undefined가 뜬다면 맨 밑을 참고 부탁드립니다. 1) dotenv를 설치해준다. yarn, npm 중 편한 걸로 선택해서 설치하면 된다. yarn add dotenv npm install --save dotenv 2) 프로젝트 루트 경로에. env 파일을 생성해준다. (src폴더 안 아님!!) 3) .env 파일 안에 변수를 작성하고 API key를 넣어준다. 리액트 프로젝트에서는 환경변수 이름 앞에 REACT_APP_을 꼭..

변화가 없는 컴포넌트가 렌더링 된다면 낭비가 발생하게 된다. 그래서 렌더링이 언제 발생하는지를 알아두고 최대한 낭비를 막는 게 중요하다. 참고) 렌더링이 일어나는 시점은 - state나 props가 변경될 때 - 부모 컴포넌트가 변경될 때 - forceUpdate()가 호출될 때이다. 렌더링을 우리 눈으로 직접 확인하기 위해서는 크롬 익스텐션인 react developer tool이 필요하다 Chrome 웹 스토어 Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요. chrome.google.com 설치했다면, 다음 과정을 따라해주면 된다. (아주 간단!!) 개발자 도구를 열어보면 Components 탭이 새로 생겼다!! 탭에 들어가서 톱니바퀴를 클릭해준다. General에 있는..

오늘 해볼 실습은 버튼을 클릭하면 요소(컴포넌트)가 보이고, 다시 버튼을 클릭하면 숨겨지게 하기!! 여기서 '보이기' 버튼을 클릭하면, 버튼은 '숨기기'로 바뀌고, Input창에 입력한 이름, 나이, 전화번호가 출력된다. [Myinfo.jsx] 컴포넌트의 이름은 Myinfo이며 코드는 다음과 같다. useState로 3개의 속성(이름, 나이, 전화번호)을 만든다음 onChange 이벤트 세 가지를 만들어주었다. 하지만, 이글의 핵심은!! 버튼 클릭시 어떻게 요소를 표시하고 숨기는 것이다!!! App.jsx에 다음과 같이 코드를 적어준다. [App.jsx] 코드를 위에서 아래로 설명하기보다 핵심만 설명하겠음!! 우선 15번째 줄을 보면, AND 논리연산자가 나온다. (만약 논리 연산자를 모르겠다면 밑 링크..

[예시 - 결과, 코드] 버튼을 클릭하면 숫자를 1 더하고 빼는 간단한 컴포넌트를 만들었다. alertNumber()라는 함수를 만들어 현재 숫자가 무엇인지 알려주는 창을 띄어준다. import React, { Component } from "react"; class Counter extends Component { state = { number: 0, }; alertNumber() { alert(this.state.number); } render() { const { number } = this.state; return ( {number} { this.setState({ number: number + 1 }); console.log(this.state); this.alertNumber(); }} > +..

리액트를 공부하며 필요한 익스텐션을 정리해보았다. - Auto Import - ES6, TS, JSX, TSX Auto Import - ES6, TS, JSX, TSX - Visual Studio Marketplace Extension for Visual Studio Code - Automatically finds, parses and provides code actions and code completion for all available imports. Works with JavaScript and TypeScript. [Forked] marketplace.visualstudio.com 파일명을 입력하면 자동으로 import가 된다. [예시] 만약 SearchHeader라는 컴포넌트가 있고, 다른 파..

나의 경우엔 컴퓨터A에서 예전에 작업한 파일이 있고, push를 안 한 상태였다. 그리고 컴퓨터B에서 최신에 작업을 하고 master에 올려두었다. (컴퓨터A의 작업물은 필요 없어졌고 B의 작업물을 master에 덮어쓰기만 하면 됐다.) 시간이 지나 컴퓨터A에 B에서 한 작업을 불러오려고 하니 다음과 같은 오류가 발생했다. 합병이 안된 파일이 있기에 합병이 불가능합니다..?! git merge를 입력했을 때 다음과 같은 오류가 발생한다. 아직 해결이 되지않은 충돌 문제가 있어서 그렇다는데,,, 그럼 어떻게 해결하나요?? [해결] 로컬 변경사항을 삭제하고 master의 변경사항이 덮어쓰기 git fetch origin git reset --hard origin/master 주의 사항: 현재 로컬에 있는 변..

useEffect() = 어떤 effect를 발생시키는 Hook - 컴포넌트가 등장할 때, 그리고 컴포넌트가 업데이트가 되고 나서 항상 실행된다. - useEffect를 통해 클래스형 컴포넌트에서 사용 가능했던 생명주기 메서드를 함수형에서도 사용 가능해졌다. [참고] 리액트 훅에 대한 글 [리액트] React hook 간단하게 알아보기 참고) 한국어 버전 공식 문서이다. Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org 이는 단순히 리액트 hook을 공부한 지 얼마 안 된 나의 생각을 정리하고자 쓴 글이.. breathtaking-life.tistory.com useEffect에 대한 설명은 짧게 하도록하고,..

state는 직접 수정하면 안된다. Why? 예기치 못한 버그 발생 가능 (무슨 버그인지는 구글링을 해보자!) 그럼 state 수정 어떻게 하나요? 배열을 복사하면 됩니다!🤗 배열 복사는 []와 spread operator를 기억하자 => 예를 들어, [...상품] ...(spread operator)으로 원래 있던 데이터의 대괄호를 벗기고, []로 다시 감싸준다. 아니면 map이나 filter를 사용해도 된다. 이 아이들도 새로운 배열을 반환해주기 때문에! 예를 들어 data.js 파일에서 채소 데이터 3개를 가져오고, 더보기 버튼을 눌렸을 때 ajax로 다른 채소 3개를 가져온다고 하자! import Product from "./Product"; import Data from "./data.js"; ..