본문 바로가기

전체 글

 (159)
[Typescript] - 함수 표현식 전체에 타입 구문 지정하기 자바스크립트에서는 함수 문장과 표현식을 다르게 인식한다. 타입스크립트에서는 함수 표현식을 사용하는 것이 좋다 함수의 매개 변수부터 반환값까지 전체를 함수 타입으로 선언하여 함수 표현식에 재사용 할 수 있다는 장점이 있기 때문이다. 위 예제를 확인해보면 타입스크립트에서는 이미 sides의 타입을 number로 인식하고 있다 예시가 간단해서 함수 타입을 선언할 수 있다는 것이 장점으로 와닿지 않을 수 있다 함수 타입 선언의 장점을 좀 더 알아보자. 함수 타입의 선언은 불필요한 코드의 반복을 줄인다 사칙 연산을 하는 함수 네 개 예제를 보자 위와 같은 예제들을 반복되는 함수 시그니처를 하나의 함수 타입으로 통합할 수 있다. 확실히 타입 구문이 적어 졌다 또한 함수 구현부도 분리되어 있어 로직이 보다 분명해졌다..
[Javascript] - Promise Promise - 전통적인 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백함수를 사용한다 그런데 이런 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하여 ES6부터 비동기 처리를 위한 Promise가 도입되었다 - 프로미스 객체는 위와 같은 문법으로 만들 수 있다. - new Promise에 전달되는 함수는 executor 라고 부른다 executor는 new Promise가 만들어질때 자동으로 실행되는데 결과를 최종적으로 만들어내는 제작 코드를 포함한다. - executor의 인수 resolve와 reject 는 자바스크립트에서 자체 제공하는 콜백 함수이다 개발자는 resolve와 reject를 신경쓰지 않고 executor만 코드만 작성하면 된다 대신 e..
[React] - Outlet을 이용한 중첩 라우팅 react-router-dom v6부터 outlet을 이용한 중첩 라우팅을 통해 레이아웃을 쉽게 구현할 수 있다 이는 페이지마다 다른 레이아웃을 보여주기에도 굉장히 편리하게 적용할 수 있다. Layout.js 이전에는 children을 활용해서 라우트에 레이아웃을 연결해주는 방식으로 구현을 했는데 이제 Outlet이 children 역할을 해준다고 이해하면 된다. App.js Home과 View는 Layout이 적용되어 있지만 아래 Layout Route로 감싸지 않은 Test 페이지는 레이아웃이 적요되어 있지 않는다 그리고 여담으로 Not Fount 페이지를 구현할 때는 위와 같이 와일드 카드(*) 를 활용한다 와일드카드는 모든 텍스트를 매칭하는데 이때 상단에 위치하는 라우트들의 규칙을 모두 확인하고 ..
프로그래머스[LEVEL1]: 햄버거 만들기 https://school.programmers.co.kr/learn/courses/30/lessons/133502 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 ingredient 를 순회하면서 1231 인지 판단해야 되는데 이때 incgredient의 길이가 최대 1000.000이기 때문에 최대한 시간복잡도를 최적화 해야 한다. 간단히 살펴보면 계속 ingredient의 요소를 차근차근 stack에 쌓아두다가 뒤에서 4번째까지 요소를 문자열로 변환 후에 1231 인지 판단하고 만약 1231이라면 햄버거이기 때문에 acc 를 1 증가시키며 동..
프로그래머스[LEVEL1]: 옹알이 2 https://school.programmers.co.kr/learn/courses/30/lessons/133499 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 정규 표현식을 활용해 풀었다 [aye, ye, woo, ma]는 머쓱이가 발음할 수 있는 발음이지만 [ayaaya, yeye, woowoo, mama] 연속되는 발음은 머쓱이가 발음할 수 없기 때문에 해당 케이스를 replace할 때 x 문자로 ㄱ데ㅣㅁㅊㄷgownsek. 발음이 가능할 때만 카운트를 올려줘야 하기 때문에 x문자가 존재하지 않은데 [aya, ye, woo, ma]로 re..
프로그래머스[LEVEL1] - 귤고르기 https://school.programmers.co.kr/learn/courses/30/lessons/138476 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 그리디 알고리즘 문제이다 tangerine을 reduce로 순회하면서 각 사이즈의 귤의 개수를 배열로 구한다. 그리고 tangerineCountArr을 구해서 이를 내림차순으로 정렬한다 . tangerineCountArr을 순회하면서 sum에다 각 count를 누적시키는데 동시에 result도 증가시킨다 만약 이때 sum이 k보다 크거나 같아지면 result를 반환한다
백준1541 - 잃어버린 괄호 https://www.acmicpc.net/problem/1541 1541번: 잃어버린 괄호 첫째 줄에 식이 주어진다. 식은 ‘0’~‘9’, ‘+’, 그리고 ‘-’만으로 이루어져 있고, 가장 처음과 마지막 문자는 숫자이다. 그리고 연속해서 두 개 이상의 연산자가 나타나지 않고, 5자리보다 www.acmicpc.net 문제 풀이 그리디 알고리즘 문제이다 솔직히 말하면 문제를 보고 바로 방법을 생각하지는 못했다 풀이 방법은 쉽게 말하면 +연산자를 먼저 하고 첫번째 값을 기준으로 나머지 값들을 전부 빼주면 된다.
[Javascript] - 콜백 콜백 - 자바스크립트 호스트 환경이 제공하는 여러 함수를 사용하면 비동기 동작을 스케줄링 할 수 있다 즉 원하는 때에 동작이 시작하도록 할 수 있다는 것이다. - setTimeout 이 스케줄링에 사용되는 가장 대표적인 함수이다 - 실무에서 맞닥뜨리는 비동기 동작은 아주 다양하다 스크립트나 모듈을 로딩하는 것 또한 비동기 동작이다 - 위 예제는 src에 있는 스크립트를 읽어오는 loadScript(src) 함수를 만들었다. - 위 loadScript는 를 동적으로 만들고 이를 문서에 추가한다 브라우저는 자동으로 태그에 있는 스크립트를 불러오고 로딩이 완료되면 스크립트를 실행한다. - 이때 스크립트가 비동기적으로 실행된다 로딩은 지금 당작 시작되더라도 실행은 함수가 끝난 후에야 되기 때문이다 - - 따라서..

티스토리툴바