분류 전체보기
-
Vanilla Javascript로 SPA 만들어보기Javascript 2023. 6. 23. 00:47
🔔 서론 어느덧 프로그래머스 데브코스 교육 4주차가 지나가고 있다. 생각했던것보다 깊은 내용과 어렵고 생소한 내용에 허덕이고 있지만, 잘 헤쳐나가는 것이 중요하다. 이번 포스팅은 데브코스의 내용중 history api의 사용 방법과 이를 활용해 프레임워크 없이 Vanilla Javascript로만 SPA(Single Page Application)를 만들어 보는 것에 대한 포스팅이다. 과거 어느 한 블로그의 글에서 "신입 개발자나 인턴에게 프레임워크 없이 Vanilla Js로만 SPA를 만들어 보라고 과제를 주면 어떻게 해야하는지 모르는 사람들이 간혹 있어 아쉬웠다" 라는 포스팅을 본 적이 있다. 그 글에는 왜 Vanilla Js로 SPA를 만들어 볼 줄 알아야 하는지에 대한 이유는 서술되어 있지 않았고..
-
프로그래머스 데브코스 - 2주차 과제 회고Javascript 2023. 6. 21. 23:19
이번 포스팅은 프로그래머스 데브코스 2주차 과제를 수행한 뒤 받았던 코드 리뷰에 대한 회고 포스팅이다. 과제 자체는 그리 어렵지 않은 과제였다. 어찌저찌 과제는 잘 수행했고 팀원들과 멘토님께 코드 리뷰를 받게 되었는데, 코드 리뷰중에서 멘토님께 유독 중복적으로 피드백을 받은 부분이 변수명을 짓는 방식에 대한 것이었다. 나는 평소에 변수명이나 함수명을 지을 때 이 변수나 함수가 어떤 동작으로 돌아가는지를 위주로 짓는 경향이 있었다. 예를 들어 위의 코드에서 wordFinished는 현재 노드가 완성된 단어인지 확인하기 위한 플래그의 역할을 하는 변수다. 급하게 과제를 수행하느라 대충 지은 감이 있는데, 아마 지금 다시 지으라고 해도 isWordFinished 정도로 지을 것 같다. 멘토님께서 처음 이 부분..
-
이 글을 쓰는 지금도 this를 완벽하게 이해하지 못했다는 이야기Javascript 2023. 6. 19. 22:05
🔔 서론 프로그래머스 데브코스 Javascript 강의를 수강하면서 과제를 진행하던 중 나를 미치게 만드는 요소가 크게 두 가지 있었는데 첫 번째가 장시간 앉아서 강의를 듣다보니 생긴 허리통증 이었다면, 두 번째는 this 였다. 그런의미로 오늘은 this를 공부해보자. 🔔 this란? 먼저 mdn 공식문서에서 this를 뭐라고 설명하는지 알아보자 🤔 흠... 그렇구만.. 흐음.. 이라는 생각만 들게 만드는 문장들이다. this의 특징들을 살펴보면서 위의 문장을 제대로 이해해보도록 하자. 📌 this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 혹은 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 일반적..
-
프로그래머스 데브코스 - [3단계] 입국심사Algorithm 2023. 6. 14. 17:35
문제 설명 n명이 입국심사를 위해 줄을 서서 기다리고 있습니다. 각 입국심사대에 있는 심사관마다 심사하는데 걸리는 시간은 다릅니다. 처음에 모든 심사대는 비어있습니다. 한 심사대에서는 동시에 한 명만 심사를 할 수 있습니다. 가장 앞에 서 있는 사람은 비어 있는 심사대로 가서 심사를 받을 수 있습니다. 하지만 더 빨리 끝나는 심사대가 있으면 기다렸다가 그곳으로 가서 심사를 받을 수도 있습니다. 모든 사람이 심사를 받는데 걸리는 시간을 최소로 하고 싶습니다. 입국심사를 기다리는 사람 수 n, 각 심사관이 한 명을 심사하는데 걸리는 시간이 담긴 배열 times가 매개변수로 주어질 때, 모든 사람이 심사를 받는데 걸리는 시간의 최솟값을 return 하도록 solution 함수를 작성해주세요. 제한사항 입국심사..
-
프로그래머스 데브코스 - 알고리즘 문제를 접근하는 방식Algorithm 2023. 6. 14. 16:58
문제를 읽기전에 먼저 입출력 제한을 보자 문제를 자세히 읽기전에 입출력 제한을 보는것이 중요하다. 특히 입력 제한을 보면 어떤 시간복잡도 내에 풀어야 하는지 알 수 있다. 예를 들어, 입력이 100 이하인 경우 높은 확률로 완전 탐색 문제이다. 시간복잡도 O(n^3) 까지도 감당이 가능하기 때문에 플로이드 워셜과 같이 시간복잡도가 높은 알고리즘도 사용이 가능하다. 입력이 100 이하인 경우 완전 탐색 백트래킹 입력이 10,000 이하인 경우 최대 O(n^2) 이내로 끝내야하는 문제 문제에 따라 O(n^2 log n)까지는 허용 n*n 2차원 리스트를 모두 순회해야하는 문제가 많음 입력이 1,000,000 이하인 경우 최대 O(n log n)으로 끝내야하는 문제 힙, 우선순위 큐 정렬 동적 계획법 위상 정..
-
프로그래머스 데브코스 - [3단계] 여행경로Algorithm 2023. 6. 13. 17:34
문제 설명 주어진 항공권을 모두 이용하여 여행경로를 짜려고 합니다. 항상 "ICN" 공항에서 출발합니다. 항공권 정보가 담긴 2차원 배열 tickets가 매개변수로 주어질 때, 방문하는 공항 경로를 배열에 담아 return 하도록 solution 함수를 작성해주세요. 제한사항 모든 공항은 알파벳 대문자 3글자로 이루어집니다. 주어진 공항 수는 3개 이상 10,000개 이하입니다. tickets의 각 행 [a, b]는 a 공항에서 b 공항으로 가는 항공권이 있다는 의미입니다. 주어진 항공권은 모두 사용해야 합니다. 만일 가능한 경로가 2개 이상일 경우 알파벳 순서가 앞서는 경로를 return 합니다. 모든 도시를 방문할 수 없는 경우는 주어지지 않습니다. 입출력 예 tickets return [["ICN"..
-
프로그래머스 데브코스 - [3단계] 가장 먼 노드Algorithm 2023. 6. 12. 19:21
문제 설명 n개의 노드가 있는 그래프가 있습니다. 각 노드는 1부터 n까지 번호가 적혀있습니다. 1번 노드에서 가장 멀리 떨어진 노드의 갯수를 구하려고 합니다. 가장 멀리 떨어진 노드란 최단경로로 이동했을 때 간선의 개수가 가장 많은 노드들을 의미합니다. 노드의 개수 n, 간선에 대한 정보가 담긴 2차원 배열 vertex가 매개변수로 주어질 때, 1번 노드로부터 가장 멀리 떨어진 노드가 몇 개인지를 return 하도록 solution 함수를 작성해주세요. 제한사항 노드의 개수 n은 2 이상 20,000 이하입니다. 간선은 양방향이며 총 1개 이상 50,000개 이하의 간선이 있습니다. vertex 배열 각 행 [a, b]는 a번 노드와 b번 노드 사이에 간선이 있다는 의미입니다. 입출력 예 ㄹㅇㄴㅁ n ..
-
프로그래머스 - 하노이 탑Algorithm 2023. 6. 7. 18:46
문제 풀이 하노이 탑은 원판의 수 n, 시작하는 기둥 start, 중간의 거치는 기둥 mid, 도착할 기둥 end 총 4개의 요소가 필요하다 원판의 수가 1일 경우에는 start에서 바로 end로 넘기면 된다 아닐 경우에는 n-1개의 원판을 start에서 mid로 옮겨준다 n번째 원판을 start에서 end로 옮겨준다 mid에 있던 n-1개의 원판을 end로 옮겨준다 이 과정을 재귀함수를 통해 구현해준다 function solution(n) { let answer = []; let hanoi = (n, start, mid, end) => { if(n === 1) answer.push([start, end]); else { // n-1개의 원판을 start에서 mid로 옮김 hanoi(n-1, start,..