🔗 웹 게임을 만들며 배우는 React 1. Context API 소개와 지뢰찾기 리덕스는 동기적 / useReducer는 비동기적 Context API를 사용하면 dispatch를 부모를 모두 거쳐서 전달하지 않고 한번에 전달 가능 2. createContext와 Provider createContext로 기본값 세팅 Provider를 통해 자식...

🔗 웹 게임을 만들며 배우는 React 1. 틱택토와 useReducer 소개 리덕스를 쓸 필요가 없을 정도로 규모가 작은 앱에서는 useReducer와 컨텍스트 API로 대체 가능 > 비동기 처리를 위해 결국 리덕스를 써야 하긴 함 useReducer: state가 많아지면 관리를 위해 사용 2. reducer, action, dispatch의 관...

🔗 웹 게임을 만들며 배우는 React 1. 로또 추첨기 컴포넌트 - 가장 하위의 자식 컴포넌트이고 state를 사용하지 않는 컴포넌트는 PureComponent나 함수 컴포넌트(+ memo)로 만드는 것이 좋음 Lotto.jsx...

🔗 웹 게임을 만들며 배우는 React > 💡 vscode에 리액트 플러그인을 이제 설치했다..^^ 매우 편리 (ES7 React/Redux/GraphQL/React-Native snippets) 1. 리액트 라이프사이클 소개 클래스의 경우 constructor render ==> ref ==> componentDidMount ( ==> s...

🔗 웹 게임을 만들며 배우는 React 1. React 조건문 -

🔗 웹 게임을 만들며 배우는 React 1. import와 require 비교 - 서로 전환 가능 image.png 🤦‍♀️ 갑자기 너무 몰아쳤다. 정리할 수도 없다... 나머지는 내일 하는 걸로...

🔗 웹 게임을 만들며 배우는 React 1. React Hooks 사용하기 리액트는 클래스를 사용하지 않도록 권고 👉 Hooks 사용 (함수형) state를 하나씩 분리하고 함수와 초기값 선언 setState 대신 함수를 사용하여 state 변경 구조 분해 할당(Destructuring): 변수에 배열이나 객체를 선언하는 것 2. Class와 Ho...

🔗 웹 게임을 만들며 배우는 React 1. 리액트를 왜 쓰는가 - 사용자 경험 (UX) 개선 - 데이터 - 화면 일치 - 재사용 컴포넌트 2. 첫 리액트 컴포넌트 - react, react-dom 설치 필요 (🔗 링크) - 배포할 때는 development.js를 production.min.js로 대체 필요...

🔗 생활코딩 React immutable 불변성 immutable-js 배열과 객체의 대체재 모든 연산이 원본이 복제된 결과 리턴 router 페이지 전환을 할 때마다 네트워크 로딩을 하지 않는 장점이 있지만, url로 페이지를 찾아올 수 없다는 단점 react router url에 따라 컴포넌트가 실행될 수 있도록 도와줌 create-re...

🔗 생활코딩 React 1. update 구현 CreateContent.js를 복사해서 UpdateContent.js 생성 Content 생성하는 부분을 getContent() 함수로 분리 제목, 내용 가져오는 부분을 getReadContent() 함수로 분리 1) form 🔗 forms 2) state 변경 UpdateContent.js에 id ...

🔗 생활코딩 React 1. 베이스 캠프 props read-only 컴포넌트 안에서 변경 불가 이벤트를 통해 변경 가능 state 비동기식 setState()로 변경 가능 2. create 구현 1) 소개 CRUD(Create Read Update Delete) 동적으로 요소를 추가하는 기능 구현 2) mode 변경 기능 ...

🔗 생활코딩 React 1. 이벤트, state, props 그리고 render 함수 이벤트, state, props가 상호작용하면서 애플리케이션에 역동성 부여 props나 state가 수정되면 해당되는 컴포넌트의 render 함수가 재호출됨 👉 화면이 다시 그려짐 2. 이벤트 설치 preventDefault(): 이벤트가 가진 기본 동작을 하지 못...

🔗 생활코딩 React 1. State 소개 - props - 사용자가 컴포넌트를 사용하는 입장에서 중요 - 컴포넌트의 동작을 바꾸고 싶을 때 제공하는 문법적인 정보 - state - props의 값에 따라 내부 구현에 필요한 값 👉 state는 다양한 동작을 하는 컴포넌트 제작에 필수 2. State 사용 - 외부에서 ...

😥 데벨업 정말 좋은 기회를 얻게 돼서 열심히 하고 싶었는데... 이렇게나 현실에 치여서 소홀해질 줄이야. 할 수 있는 데까지라도 해봐야겠다. 수업을 제대로 듣지도 못해서 퀘스트에 참가도 못 하고 있는 게 너무 아쉽다. 🔗 바로 실행해보면서 배우는 Node.js 1. npm 소개 및 설치 npm Node Package Modules의 약자 ...

🔗생활코딩 React

🔗 생활코딩 React 1. 공부 전략 Coding : 개발 환경 설정 및 코드 작성 Run : 작성된 코드를 실행하여 결과 확인 Deploy : 소비자에게 전달 2. 개발환경의 종류 🔗 React 공식 홈페이지 1) 온라인 플레이그라운드 웹에서 바로 코딩하여 결과를 확인할 수 있는 사이트 예) CodeSandbox 2) 웹사이트에 Reac...

🔗 생활코딩 React 1. 선수 개념 JavaScript 객체 지향 개념 2. React를 사용하는 이유 가독성 재사용성 유지보수