본문 바로가기

전체 글

 (159)
[React] - useReducer * useReducer - useReducer 훅을 사용하면 컴포넌트의 상탯값을 리덕스의 리듀서처럼 관리할 수 있다. - 위 예제에서 reducer는 리덕스와 같은 방식으로 작성하였다. - useReducer 훅의 매개변수로 앞에서 작성한 리듀서와 초기 상탯값을 입력한다 useReducer 훅은 상탯값과 dispatch 함수를 차례대로 반환다. - 여기서 dispatch는 리덕스의 dispatch와 같은 방법으로 사용한다. - 보통 상위 컴포넌트에서 다수의 상탯값을 관리한다 이때 자식 컴포넌트로부터 발생한 이벤트에서 상위 컴포넌트의 상탯값을 변경해야 하는 경우가 많다 이를 위해 상위 컴포넌트에서 트리와 깊은 곳 까지 이벤트 처리 함수를 전달한다 이러한 작업은 상당히 손이 많이 가고 코드의 가독성도 떨어진..
[Javascript] - 네이티브 프로토타입 Object.prototype - obj는 빈 객체인데 [object Object] 문자열을 생성하는 toString()은 어디에 있는 걸까 - obj = new Object()를 줄이면 obj = {} 가 된다 여기서 Object는 내장 객체 생성자 함수인데 이 생성자 함수의 prototype은 toString을 비롯한 다양한 메서드가 구현되어 있는 거대한 객체를 참조한다. - new Object()를 호출하거나 리터럴 문법 {}을 사용해서 객체를 만들때 새롭게 생성된 객체의 [[Prototype]] 은 이전 챕터에서 언급한 규칙에 따라 Object.prototype을 참조한다. - 따라서 obj.toStirng()를 호출하면 Object.prototype에서 해당 메서드를 가져오게 된다. - 위 예제..
프로그래머스[LEVEL2] - 행렬의 곱셈 https://school.programmers.co.kr/learn/courses/30/lessons/12949 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr * 문제 풀이 - 행렬의 곱셈을 고등학교 이후 처음 보는 것 같다 행렬의 곱셈을 어떻게 하는 지는 아래 이미지를 보면 이해가 될것 같다 행렬의 곱셉을 할 때는 첫번째 행렬의 열과 두번째 행렬의 행이 같아야만 곱셈이 가능하다 만약 두개가 같다면 첫번째 행렬의 행 X 두번째 행렬의 열의 행렬이 만들어진다 즉 2X3 행렬 * 3X2 행렬 = 2X2 행렬이 된다 이를 토대로 3중 for문을 통해 해결했다
[TypeScript] - 화살표 함수에서 제네릭 사용 방법 타입스크립트에서 일반적으로 제네릭 타입을 사용하는 예시다 하지만 보다시피 화살표 함수에서는 위와 같이 제네릭 타입을 사용하면 에러가 발생한다. 해결책은 제네릭 매개변수에서 extends를 사용하여 컴파일러에게 제네릭임을 알려주면 된다.
프로그래머스[LEVEL2] - 오픈채팅방(2018 카카오 블라인드 코딩테스트) https://school.programmers.co.kr/learn/courses/30/lessons/42888 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 전역으로 객체를 만들어서 record를 forEach메서드로 순회하면서 값이 Enter 혹은 Change면 user의 동작을 객체에 저장하였다 그리고 마지막으로 map 함수를 돌려서 배열로 결과를 출력하는 방식으로 해결했다
[Javascript] - 함수의 prototype 프로퍼티 함수의 prototype 프로퍼티 - new F()와 같은 생성자 함수를 이용하면 새로운 객체를 만들 수 있다 그런데 F.prototype이 객체면 new 연산자는 F.prototype을 사용해 새롭게 생성된 객체의 [[Prototype]]을 설정한다. - F.prototype에서 prototype은 F에 정의된 일반 프로퍼티라는 것을 주의해야 한다. 위 예제에서 Rabbit.prototype = animal은 new Rabbit을 호출해 만든 새로운 객체의 [[Prototype]]을 animal로 설정하란느 것을 의미한다. - 위 그림에서 가로 화살표는 일반 프로퍼티인 prototype을 세로 화살표는 [[Prototype]]을 나타낸다 세로 화살표는 rabbit의 animal을 상속받았다는 것을 의미..
[React] - useMemo, useCallback 메모이제이션 훅(useMemo, useCallback) - useMemo와 useCallback은 이전 값을 기억해서 성능을 최적화하는 용도로 사용된다. useMemo useMemo 훅은 계산량이 많은 함수의 반환값을 재활용하는 용도로 사용한다. - useMemo 훅의 첫번째 매개변수로 함수를 입력한다, - useMemo 훅은 이 함수가 반환한 값을 기억한다 useMemo 훅의 두번째 매개변수는 의존성 배열이다. - 의존성 배열이 변경되지 않으면 이전에 반환된 값을 재사용한다 만약 배열의 값이 변경됐으면 첫번째 매개변수로 입력된 함수를 실행하고 그 반환값을 기억한다. useCallback - useMemo 훅은 lodash 같은 라이브러리에서 제공해주는 메모이제이션과 비슷하다 반면에 useCallback..
프로그래머스[LEVEL2] - 점프와 순간이동 https://school.programmers.co.kr/learn/courses/30/lessons/12980 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 이 문제는 코드는 간단하지만 알고리즘을 생각하는데 시간이 많이 걸렸다 이동할 총 거리를 기준으로 순간이동할 수 있는 거리는 현재 까지 온 거리 +2이다 따라서 이동할 총 거리 /2 를 한 지점이 순간이동 할 수 있는 지점이다 만약 총 이동할 거리가 60이라면 30이 되는 지점에서 순간이동할 경우 60으로 이동할 수 있다 이때 이동할 경우가 짝수라면 순간이동으로 모두 이동할 수 있지만 홀..

티스토리툴바