본문 바로가기

전체 글

 (351)
자바스크립트 동작과정에 대한 좋은 설명 들어가기 이 글은 “How JavaScript works: an overview of the engine, the runtime, and the call stack” 를 번역한 글입니다. 잘 번역된 글을 스크랩에서 썻고, 아래 출처를 적었습니다. 머릿말 자바스크립트의 인기가 날이 갈수록 높아짐에 따라 많은 팀들이 프론트엔드, 백엔드, 하이브리드 앱, 임베디드 장치 등 많은 분야에서 자바스크립트 지원 범위를 확대하고 있습니다. 이 글은 자바스크립트의 동작원리 등 자바스크립트를 깊게 파보는 시리즈 물의 첫 번째 글입니다: 자바스크립트를 블락 단위로 구성하는 방법과 그리고 그 블락이 어떻게 동작하는지 알면 더 나은 코드와 앱을 제작할 수 있다고 생각합니다. 아래의 GitHut stats 에서 보실 수 있듯이,..
리덕스 툴킷 사용 복습! 리덕스 툴킷을 이용하는 코드를 정리하는 글을 시작해보련다. # 1. slice함수를 만든다. [cart-slice 코드] import { createSlice } from "@reduxjs/toolkit"; // createSlice를 이용하여 초기값 초기화 const cartSlice = createSlice({ name: "cart", initialState: { items: [], totalQuantity: 0, totalAmount: 0, }, // 리듀서 함수 생성 reducers: { // 리듀서 함수를 내가 쓸려도는 의도에 맞게 코드 addItemToCart(state, action) { // 넘겨받는 매개변수에는 action.payload로 접근할 수 있다. // dispatch에서 전달해..
같은 속성끼리 무언가 계산 하는 법 - group by -- 해당 예제는 brach_id가 같은 것 끼리 합함 SELECT branch_id, sum(salary) from employees group by branch_id order by branch_id
자바스크립트 2차원 배열내 최대값 찾기 const a = [[2, 3], [1, 6, 7], [5, 4, 3, 2]]; console.log( Math.max(...a.flat()) );
자바스크립트 2차원 배열 선언의 여러가지 방법 # 기초 var arr = [] for (var i = 0; i new Array(2) // arr[5][2] (null로 초기화하여 생성) const arr2 = Array.from(Array(5), () => Array(2..
useReducer에 대한 좋은 설명 useReducer 란? useReducer 함수는 간단히 말해 리액트에서 상태변화를 업데이트 해주는 함수이다. const [state, dispatch] = useReducer(reducer, 초기값, 초기 함수) useReducer 함수를 사용하려면 + state 와 + dispatch() 함수 + reducer() 함수가 필요하다. reducer() 함수를 사용하려면 + state 와 action 이 필요하다. ** dispatch({ 는 action 오브젝트 내용 }) 을 넣는다. 그러면 reducer 가 동작하여 action 을 받아 상태(state)를 변경해준다. ** reducer(는 현재 state와, action) 을 인자로 받아 => 새로운 상태(state) 를 반환 하는 함수이다. *..
Redux에 대한 좋은 설명 React(31) Redux 패턴 action-reducer-store-view 1. 모듈 설치 npm i redux react-redux npm i --save-dev redux-devtools-extension Redux 의 동작 방식 변화가 일어나면 Action(type에 대한 정보를 가진 객체)을 만들고, → (각 액션에 맞게 미리 정의해 둔) Reducer가 새로운 상태를 만들어 → store를 업데이트 한다. store를 (connect()로) 구독하고 있는 → 컴포넌트(View)에 상태변화가 적용된다. Action action은 { type과 데이터 } 를 담고 있는 json object다. (type 을 뺀 나머지 원소는 state값 수정을 위해 사용되는 데이터들이다) >> loginSuc..
Summer/Winter Coding`19 - # 1. 멀쩡한 사각형 코딩테스트 연습 - 멀쩡한 사각형 | 프로그래머스 스쿨 (programmers.co.kr) 1. 멀쩡한 사각형 문제 설명 가로 길이가 Wcm, 세로 길이가 Hcm인 직사각형 종이가 있습니다. 종이에는 가로, 세로 방향과 평행하게 격자 형태로 선이 그어져 있으며, 모든 격자칸은 1cm x 1cm 크기입니다. 이 종이를 격자 선을 따라 1cm × 1cm의 정사각형으로 잘라 사용할 예정이었는데, 누군가가 이 종이를 대각선 꼭지점 2개를 잇는 방향으로 잘라 놓았습니다. 그러므로 현재 직사각형 종이는 크기가 같은 직각삼각형 2개로 나누어진 상태입니다. 새로운 종이를 구할 수 없는 상태이기 때문에, 이 종이에서 원래 종이의 가로, 세로 방향과 평행하게 1cm × 1cm로 잘라 사용할 수 있는 만큼만 사용하기로 하였..
728x90

티스토리툴바