FrontEnd

    [JS] [카카오인턴] 보석 쇼핑

    투포인터와 MAP,SET자료형을 활용하여 해결해보았다. https://school.programmers.co.kr/learn/courses/30/lessons/67258 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 효율성 테스트가 있는 문제이기때문에 시간복잡도를 O(n)에 가깝게 풀어야 해결할 수 있을 것이라 생각했다. 문제를 접근&해결한 방식은 아래와 같다. 1. 배열을 순회하며 해당 인덱스의 보석은 무조건 포함된다고 생각 2. 그 보석이 포함된 기준으로 가장 짧은 길이를 계산 2.1 만약 모든 보석이 포함되지 않았다면 길이를 계산하지 않고 map에 ..

    [JS] 경주로 건설

    DP와 BFS를 적절히 활용해야 하는 재미있는 문제였다! https://school.programmers.co.kr/learn/courses/30/lessons/67259# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr dp[r][c] = r행 c열까지 도달하는데 드는 최소 비용 이라고 두자. BFS로 장애물을 피해가며 모든 경우의수를 탐색하는데, 만약 dp보다 큰 값으로 해당 칸에 도달했다면 그 경우의 수는 생각하지 않아도 괜찮다. 단 해당 문제에서는 조금 생각할만한 점이 몇가지 있다. 1. BFS에서 비용을 계산할때 직선이면 100 , 커브이면 600..

    [React] Deep Dive 모던 리액트(3)타입스크립트

    최근 대다수의 자바스크립트 프로젝트는 타입스크리트 기반으로 작성되는 경우가 많다. 코드 작성환경에서 타입을 체크할 수 있는 타입스크립트는 코드를 더욱 안전하게 짤 수 이쎅 도움을 주고 잠재적인 버그들 또한 줄여주기 때문이다. 타입스크립트 ? TypeScript is JavaScript with syntax for types. 기존 자바스크립트 문법에 타입을 가미한 것 JS는 기본적으로 동적 타입언어이다. 이는 편리하기도 하지만 대부분의 에러를 코드를 실행하는 단계에서 알 수 있다라는 단점이 있어 프로젝트 규모가 커질수록 발목을 잡게 된다는 단점이 존재한다. 아래 함수를 한번 보자. function test(a,b) { return a/b } test(5,2) // 2.5 test('안녕하세요','하이')..

    [JS] 풍선 터트리기

    풍선을 터트리는 문제였다 큰 알고리즘 기법이라기 보다는 문제에서 주어진 요구를 잘 읽으면 해결할 수 있는 문제였다. 굳이 말하면 dp라고도 할 수 있을 것 같다. https://school.programmers.co.kr/learn/courses/30/lessons/68646 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 유의있게 볼만한 조건은 a의 최대길이가 1,000,000으로 이중반복문을 사용하면 안될거란 것과 a의 모든 수는 다르단 것 정도이다. 결국 나보다 작은 풍선을 한번만 터트릴 수 있다는 표현은 , 본인을 제외하고 좌측과 우측의 풍선을 모두..

    [React] 리액트에서 tdd 개발하기 (with emotion)

    만약 CRA를 통해서 리액트 프로젝트를 만들었다면 손쉽게 Test코드를 작성하는 것이 가능하다. testing-libray/react 와 jest는 CRA를 통해 리액트 프로젝트를 만들었다면 이미 설치가 되어있을 것이고 emotion을 적용한 프로젝트에서 테스트 코드를 작성하기 위해서 @emotion/jest 라이브러리를 추가적으로 설치해준다. npm install --save-dev @emotion/jest 이후 테스트 코드를 만들때 아래 항목을 추가하면 된다 import { matchers } from "@emotion/jest"; expect.extend(matchers); @emotion/jest와 다른 테스팅 라이브러리를 비교할 때, @emotion/jest의 강점은 다음과 같다. 간편한 구성:..

    [React] DeepDive 모던리액트(2) 동등 비교

    자바스크립트의 데이터 타입 자바스크립트의 모든 값은 데이터 타입을 가지고 있으며 원시타입과 객체 타입으로 나누어져 있다. 원시타입 : boolean,nulll,undefined,number,string,symbol,bigint 객체타입 : object 이 데이터 타입 중에서 true,false이외에도 조건문에서 마치 true와 false처럼 동작하는 truthy,falsy값이 존재함을 알아두자. false,0,-0,0n,0x0n,NaN,"",'',``,null,undefined 위 값들이 JS에서 falsy로 동작되게 된다. Number 정수,실수를 구분하는 일반적인 언어와는 달리 자바스크립트는 모든 숫자를 하나의 타입에 저장했었다. 지금은 보다 큰 숫자를 다룰 수 있는 BigInt 자료형이 추가되었다...