본문 바로가기

반응형

분류 전체보기

(36)
[알고리즘] 숫자 변환하기(자바스크립트) x부터 더하기, 2곱하기, 3곱하기의 조합을 섞어서 최소 몇 번의 연산으로 y까지 이동할 수 있는지 구하는 문제다. 완전 탐색을 적용하면 DFS의 경우 x = 1, y = 1,000,000, n = 1과 같은 최악의 상황에서 call stack 초과가 발생해 문제를 풀 수 없다. 따라서 동적계획법(Dynamic Programming)을 적용해서 x부터 y까지의 모든 경로에 대해 최단 연산 횟수를 구하면 된다. 아래의 글은 x = 10, y = 40, n = 5의 경우를 예시로 들어서 작성했다. 가장 먼저 1부터 y까지의 연산 횟수를 저장할 수 있는 배열을 생성한다. x부터 y + 1까지만 구하면 되는데 머리가 안돌아 가서 그냥 1부터 y까지로 정했다. 그리고 1부터 x까지의 거리를 0으로 초기화하고, 나..
[알고리즘] n^2 배열 자르기(자바스크립트) 숫자를 일정한 규칙으로 가지고 있는 2차원 배열을 1차원 배열로 바꿔서 해결하는 문제처럼 보인다. 그러나 n의 최대값이 10,000,000이기 때문에 2차원 배열을 사용하는 것이 불가능하고, 심지어는 1차원 배열에 1부터 10,000,000까지를 10,000,000번 넣는 것조차도 불가능하다. 따라서 이 문제는 배열을 아얘 사용하지 않고, 문제에서 주어진 규칙에 따라 2차원 배열을 1차원 배열로 바꿨을 때 1차원 배열의 인덱스 값으로 2차원 배열의 행 값과 열 값을 구할 수 있다는 점을 활용해서 해결해야 한다. 우선, 2차원 배열에서 숫자가 어떤 규칙으로 나열되어 있는지 파악해야 한다. 0열은 1이고, 1열은 2이고, 2열은 3이고, ... , n열은 n + 1이다. 그러나 각 열의 값은 최소 (행 + ..
[자바스크립트] webpack으로 코드스플리팅 적용하기 내배캠 두번째 프로젝트에 모달(Modal)을 만들어 각 이미지 카드 클릭 시 세부 정보를 보여주는 기능을 만들었다. 사실 실제로 보여주는 정보는 별거 없으나 모달을 만들어보고 코드 스플리팅(Code Splitting)을 연습해 볼 수 있었다. 웹팩(Webpack)을 사용해 번들링(Bundling)하는 경우 코드 스플리팅을 매우 쉽게 할 수 있다. 공홈에서는 여러 방법을 제시하고 있는데 오늘은 Dynamic import 방식을 적용했다. Dynamic Import // modal.js const InfoModal = (movie, $body) => { //... //... //... return $wrapper; }; export default InfoModal; 우선, 모달 코드를 작성해 ES6 방식으로..
Github Pages와 secrets로 dotenv 적용해서 배포하기 바닐라 js 프로젝트에 웹팩과 바벨 설정하기 오늘 아침에 일어나보니 GitGuardian에서 내배캠 두번째 프로젝트의 js 파일에 외부 api 토큰이 포함되어 있다는 경고가 날라왔다. 당연히 별로 중요하지 않다고 판단해서 깃에 올린 것이어서 GitGuard picolozzman.tistory.com 어제 프로젝트에 웹팩과 바벨을 적용하고 dotenv를 사용할 수 있게 만들었다. 이를 통해 외부 API의 토큰을 환경변수로 빼서 사용했고 깃허브에 민감한 코드가 올라가지 않게 만들었다. 당연히 환경 변수나 번들 파일을 깃허브에 올리지 않았기 때문에 Github Pages에서 정상적으로 배포를 할 수 없다. 그래서 오늘은 로컬에서 프로젝트에 dotenv를 적용하고, Github Pages와 secrets를 활용..
[자바스크립트] 바닐라 js 프로젝트에 웹팩과 바벨 설정하기 오늘 아침에 일어나보니 GitGuardian에서 내배캠 두번째 프로젝트의 js 파일에 외부 api 토큰이 포함되어 있다는 경고가 날라왔다. 당연히 별로 중요하지 않다고 판단해서 깃에 올린 것이어서 GitGuardian에서 해당 경고를 무시하기로 처리했다. 그러나 이렇게 경고를 받으니까 맘이 찝찝하기도 하고 앞으로 프로젝트를 진행하며 웹팩과 바벨도 계속 쓸테니까 시간적인 여유가 있을 때 사용법을 연습해보고 dotenv를 적용해 해당 토큰을 환경 변수로 빼기로 했다. 웹팩(Webpack) 웹팩은 자바스크립트 어플리케이션을 위한 정적 모듈 번들러로서, entry point와 dependency graph를 통해 프로젝트에 있는 여러 개의 자바스크립트 파일을 합쳐주는 것이다.(css나 사진 등등도 합쳐준다.) ..
[css] 텍스트에 슬라이드 효과 적용하기 위 그림에서 영화 제목의 글자 수가 길어지면 해당 요소가 두 줄이 되는 것을 볼 수 있다. 그냥 냅둬도 되고 다양한 해결 방법이 있겠지만, 이번에는 텍스트에 슬라이드 효과를 적용해봤다. 아래 글에서 자식 요소는 글자가 넘치는 영화 제목의 태그을 말하고, 부모 요소는 영화 제목의 태그의 부모 요소이다. 첫번째, 자식 요소의 css에 white-space를 nowrap으로 설정하여 글자를 가로로 정렬한다. MDN에 따르면 white-space 속성은 요소가 공백 문자를 처리하는 법을 지정하며, nowrap은 연속 공백을 합치는 옵션이다. 두번째, 부모 요소의 css에 overflow를 hidden으로 설정한다. MDN에 따르면 overflow는 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없..
[알고리즘] 다리 만들기 2(자바스크립트) 모든 섬을 최소한의 비용으로 연결하는 문제이기 때문에 최소 신장 트리 알고리즘을 적용해서 해결할 수 있다. 최소 신장 트리 알고리즘은 모든 노드를 최소 비용으로 연결하는 알고리즘이다. 여기서는 섬을 노드로 다리를 에지로 취급하면 되나, 일반적인 문제와 다르게 에지 리스트를 직접 구해야 한다. 우선, 일반적인 최소 신장 트리 알고리즘은 유니온 파인드 알고리즘을 적용해 구현할 수 있다. 에지 리스트를 거리를 기준으로 정렬한다. 최소 비용의 에지를 먼저 사용하기 위함이다. 에지 리스트를 순환하며 유니온 파인드 알고리즘으로 출발 노드와 도착 노드를 연결한다. 각 노드를 같은 그룹으로 묶기 위함이다. 두 노드가 이미 같은 그룹이면 해당 에지는 사용하지 않는다. 그래프의 사이클을 방지하고, 고비용의 에지를 사용하지..
[자바스크립트] 실행 컨텍스트와 호이스팅 실행 컨텍스트 자바스크립트 코드의 동작은 소스코드의 평가 단계와 실행 단계로 나뉜다. 소스코드가 실행되기 이전에 미리 소스 코드가 평가되어 실행 컨텍스트(Execution context)를 생성하고 실행에 필요한 환경 정보(변수, 함수 등)을 저장하는 것이다. 즉, 실행 컨텍스트는 소스코드를 실행하는데 필요한 환경 정보를 제공하고, 실행 결과에 따라 환경 정보를 지속적으로 관리하는 영역이라고 볼 수 있다. 호이스팅 따라서 변수 선언문과 함수 선언문은 소스코드의 평가 단계에서 미리 실행되어 실행 컨텍스트(정확히는 렉시컬 환경)에 등록된다. 이로 인해 실제 실행 단계에서 선언문에 도달하기 이전에 접근할 수 있는 것이다. 이것이 마치 선언문이 상단에 끌어 올려진 것과 같다고 해서 호이스팅(Hoisting)이라..

반응형