문제를 아예 알려줄 수는 없지만 나는 아래 내용을 공부하고 풀이했었다. getElementById HMTL 코드 Hello World **** id="블라블라" 를 통해 javascript 코드와 연결시킬 수 있다. javascript 코드 const name = 'HongGilDong'; //document.write(name); **document.getElementById**("result").innerHTML = name; alert(name); console.log(name); document.getElementById("블라블라") 코드를 통해 HTML 코드에 있는 id가 블라블라인 부분을 javascript를 통해 건드릴 수 있다. innerHTML을 통해 name을 HTML에 나타낼 수 있..
더 예쁘게 보시려면, www.notion.so/react-redux-Flow-9f2b46e192884bbe8120502f502e0c9a React랑 React+Redux의 결정적 차이 React는 React 컴포넌트 자신이 개별적으로 상태관리를 한다. React+Redux는 상태관리를 하는 전용 장소(store)에서 상태를 관리하고, React 컴포넌트는 그걸 보여주기만 하는 용도로 쓰인다. Redux의 전체적인 플로우 Store 2020/09/27 - [Node.js/react] - Redux - Store Reducer Action 2020/09/27 - [Node.js/react] - Redux - Reducer, Action connect 2020/09/28 - [Node.js/react] - R..
React의 Component자체는 Redux의 흐름에 타는 것이 불가능 하다. 흐름에 타기 위해서는 react-redux에서 제공하는 connect라고 불리는 함수를 이용한다. 먼저, Component가 Store로부터 무언가 정보를 받는 경우, 그걸 props를 통해 받는다. props는 immutable 하므로 상태가 변경될 때마다 새로운 Component가 다시 만들어진다 이것을 염두에 둔 후에, connect를 실행하고 있는 주변 코드를 보자. Store가 가진 state를 어떻게 props에 엮을 지 정한다. (이 동작을 정의하는 함수는 mapStateToProps라고 불린다.) Reducer에 action을 알리는 함수 dispatch를 어떻게 props에 엮을 지 정한다. (이 동작을 정의..
1️⃣ Reduce ❗ reducer는 Store의 문지기’라고 생각하면 된다. reducer는 이전 상태와 Action을 합쳐, 새로운 state를 만드는 조작을 말한다. 2️⃣ Action ❗ Store 및 Store에 존재하는 State에 직접 접근하기 위해 Action을 꼭 거쳐야 한다. Store에 대해 뭔가 하고 싶은 경우엔 Action을 발행한다. reducer가 Action의 발생을 감지하면, State가 경신된다. Action은 기본적으로 {type, payload} 포맷을 갖고 있는 오브젝트가 된다. 다음은 예시 코드이다. reducers/index.js import { combineReducers } from 'redux'; import alert from './alert'; // [..
Store.js import { createStore, applyMiddleware } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; import thunk from 'redux-thunk'; import rootReducer from './reducers'; const initalState = {}; const middleware = [thunk]; // [1]. const store = createStore( // [2] rootReducer, // [4] initalState, composeWithDevTools(applyMiddleware(...middleware)), // [3] ); export def..
redux를 사용 하면서 비동기 작업 (예: 네트워크 요청) 을 다룰 때에는 미들웨어가 있어야 더욱 손쉽게 상태를 관리 할 수 있다. 우선, 미들웨어가 어떤 역할을 하는지, 그리고 어떻게 작동하는지 이해를 해보자. 미들웨어(Middleware) 이해하기 ❗ Action이 dispatch 되어서 Reducer에서 이를 처리하기 전에 사전에 지정된 작업들을 설정한다. 미들웨어를 액션과 리듀서 사이의 중간자라고 이해하면 된다. Thunk ❗ Thunk는 Redux의 미들웨어로서, Action Create를 작성하면 Action 대신에 함수가 반환되게끔 할 수 있다. 또한, Action을 dispatch 할 때, delay를 줄 수 도 있고, 아니면 특정한 조건이 만족되면 디스패치 할 수 있는 기능도 있다. 그..
에러 내용❗ Typescript 에러. string이나 undefined은 string 타입을 할당할 수 없다는 오류였다. Kakao javascript key를 .env에 넣어서 사용하려고 하는데 오류가 발생하였다. exclamation mark(Nullable)를 사용하여 Error를 피할 수 있다. Nullable Nullable은 null과 undefind를 허용한다. references Typescript: Type 'string | undefined' is not assignable to type 'string'
created : 2020-06-06 Store Model // Models/storeModel.js module.exports = (sequelize, DataTypes) => { return sequelize.define('Store',{ id: { // PK type: DataTypes.INTEGER, primaryKey: true, autoIncrement: true }, name:{ // 가게 이름 type: DataTypes.STRING(50), }, latitude:{ // 가게 위도 type: DataTypes.DOUBLE, allowNull: false, }, longitude:{ // 가게 경도 type: DataTypes.DOUBLE, allowNull: false, }, distan..
- Total
- Today
- Yesterday
- C++
- programmers
- 클린 아키텍처
- Spring Boot
- 코테
- AWS
- BOJ
- node.js
- Olympiad
- JPA
- kkoon9
- BAEKJOON
- 프로그래머스
- Spring
- 디자인패턴
- 이팩티브 자바
- MSA
- 이펙티브 자바
- 정규표현식
- 테라폼
- Kotlin
- 알고리즘
- 클린 코드
- Java
- 객체지향
- kotest
- 백준
- Effective Java
- Algorithm
- 디자인 패턴
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |