홍준혁

프로그래머스 스택&큐에 있는 문제인 기능 개발이다. 소스코드.js function solution(progresses, speeds) { const completeDay = []; const numberOfProgresses = progresses.length; const getCompleteDay = (progress, speed) => { const result = (100 - progress) / speed; return Math.ceil(result); }; const distribute = () => { let distributeDay = completeDay[0]; let resultIndex = 0; let result = [1]; for (let index = 1; index < numbe..

리덕스에서는 절대로 배열을 직접 바꿔서는 안 된다. 이는 리덕스에서 가장 중요한 개념 중 하나이다. 그럼 배열 수정을 어떻게 하느냐? 기존의 배열을 복사를 한 뒤, 새로운 값을 넣어 기존의 배열을 본떠 만든 새로운 형태의 배열을 리턴해주어야 한다. 기존의 배열을 복사하는 문법인 (...)을 사용해서 코드를 작성해보았다. import { createStore } from "redux"; const input = document.querySelector("input"); const submit = document.querySelector("button"); const ADD = "ADD"; const REMOVE = "REMOVE"; const todoReducer = (state = [], action) ..

오늘은 리덕스를 사용해서 Counter예제를 한번 배워 볼 것이다. 리액트로 Redux를 사용하기 전에 바닐라 JS로 리덕스를 이해하는 코드를 작성해 보자. 먼저 Store라는 개념을 이해해 볼 것인데, 말 그대로 스토어는 스토어이다. 애플 앱스토어에서 자신이 원하는 앱을 다운로드하여서 쓸 수 있는데, 사실 앱스토어와 크게 다를 게 없다. 스토어에서는 state을 저장시키는 곳이다. 위 그림을 보면 쉽게 이해할 수 있을 것이다. 각 컴포넌트에 state를 주고받는 모습을 볼 수 있다. 그래서 리덕스에서 스토어를 어떨게 만드냐? 바로 createStore이라는 함수를 사용하면 된다. 리덕스에서 createStore라는 것을 추출해와서 요런 식으로 사용해주면 된다. 여기서 countModifier는 redu..

reducer 코드를 보면서 이해해 보는 시간을 가져보도록 하자 import React, { useReducer } from "react"; type Color = "red" | "orange" | "yellow"; type State = { count: number; text: string; color: Color; isGood: boolean; }; type Action = | { type: "SET_COUNT"; count: number } | { type: "SET_TEXT"; text: string } | { type: "SET_COLOR"; color: Color } | { type: "TOGGLE_GOOD" }; function reducer(state: State, action: Actio..

먼저 각 컴포넌트를 만들어서 App.vue에 넣어서 만들었다. 이렇게 하면 components에서 만든 Vue 컴포넌트들을 App이라는 곳에 다 넣어줬다. 이렇게 구현을 하고 F12를 눌러 개발자 모드를 들어가 보면 성공적으로 만들어진 것을 볼 수 있다. 이제 각 기능들을 정의하고 구현할 것이다. TodoHeader : 애플리케이션 이름 표시 TodoInput : 할 일 입력 및 추가 TodoList : 할 일 표시 및 특정 할 일 삭제 TodoFooter : 할 일 모두 삭제 대충 이런식으로 구현을 할 것이다. 이제 하나하나 스타일 및 기능 구현을 해보도록 해보겠다. App.vue의 style을 조금 꾸며주도록 하자 그다음 TodoHeader를 꾸며보자 여기서 style에 scoped속성은 해당 컴포넌..

뷰의 템플릿(template)은 HTML,CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성이다. 우리가 컴포넌트를 만들때 작성한 template이 그 예시이다. new Vue({ template: "Hello This is Template", }).$mount("#app"); 여기서 템플릿 속성에 대해 한가지 알아둬야 할 특징이 있는데 사용자는 볼 수 없지만 라이브러리 내부적으로 template속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render()함수로 변환한다. render()함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역활을 한다.