본문 바로가기

전체 글57

[error log] firebase Page Not Found error 해결(feat. location.reload()로 새로고침하기) firebase로 프로젝트를 배포한 이후, 로그아웃 기능을 실행한 다음과 같은 페이지가 나타나면서 에러를 뱉어냈다. 이에 대해 구글링해보니 생각보다 쉽게 에러를 해결할 수 있었다. firebase.json 파일에 hosting 키워드 하위에 rewrites 설정 코드를 추가해주면 된다. { ...... "hosting": { "rewrites": [{ "source": "**", "destination": "/index.html" }] } } 몇가지 설정만 추가하면 쉽게 문제를 해결할 수 있다. 하지만 결과적으로 나는 이 방법을 이용하지 않았다! 앞선 방법으로 설정을 변경한 이후에 메인페이지 이동을 하면 빈 화면이 나타나는 현상이 발생했기 때문이다. 페이지 이동 후 새로고침을 해줘야겠다. 그래서 다른 방.. 2023. 4. 1.
개발자가 코딩테스트를 준비해야 하는 이유 (feat. 자바스크립트 코테 강의 추천) 왜 기업은 코딩테스트를 볼까? 코테푸는 게 개발에 도움이 될까? 실제 내가 코테에 발을 들이기 전에 들었던 생각이다. 이 글은 내가 코테 문제를 풀면서 배우고 느꼈던 것을 정리하는 글이다. 우선 나는 코테 고수가 아님을 밝힌다! (이 세상엔 고수가 너무 많다...) 프로그래머스 level 2를 기준으로 정답률이 60% 정도 되는 것 같다. 5문제 풀면 3문제는 맞추는 정도다. 처음 문제를 풀기 시작했을 때는 level 2 문제는 평생 풀 일이 없겠다고 생각했을 정도로 자신이 없었다. 그때는 단지 취업을 목적으로 문제를 풀기 시작했다면 지금은 심심할 때 프로그래머스 홈페이지를 들락날락할 정도로 문제 푸는 것 자체를 좋아하게 되었다. 이제는 매일 시간을 들여 코테 문제를 푸는 것이 하나의 습관으로 자리잡았다.. 2023. 3. 30.
[Next.js] 톺아보기 - 1.Pre-rendering ❐ Pre-rendering 기본적으로 Next.js는 모든 페이지를 pre-render한다. pre-rendering이란 각 페이지에 대한 HTML을 사전에 생성한다는 것을 의미한다. 이 작업은 성능과 SEO(검색 엔진 최적화)에 효과적이라고 Next.js는 소개한다. 페이지가 브라우저에 로드된 후에 자바스크립트가 동작하면서 페이지는 반응하기 시작한다. 이러한 과정을 hydration이라고 한다. ❐ Client Side Rendering vs. Pre-rendering 일반적인 React application에서 브라우저는 서버로부터 빈 HTML 껍데기(shell)을 전달받는다. 이때 UI를 구성할 JavaScript 코드도 함께 전달받는다. client-side rendering은 이처럼 최초의 렌.. 2023. 3. 23.
[수강후기] 인프런「하루만에 Cypress로 작성하는 자바스크립트 E2E 테스트 코드」 ▶︎ 도대체 테스트가 뭐길래? - 최근에 본 기술면접에서 테스트 코드 작성 경험 유무에 대한 질문을 받았다. 프론트엔드에서 점점 더 빈번하게 사용되는 기술이라는 것은 인지했지만 그것을 어떻게, 왜 사용해야 하는지에 대해서는 항상 의문이었던 것 같다. 테스트 관련 강의를 수강하기 위해 여러 플랫폼를 알아보던 중에 인프런에 메이커준님이 만드신 강의가 있는 것을 발견했다. 유데미에서 들었던 「문벅스 카페 메뉴 앱 만들기」 강의가 정말 유익하기도 했고 메이커준님이 활동하시는 우아한테크코스에서 사전과제를 통해서도 많은 도움을 받았기 때문에 별 고민없이 강의를 결제했다. (믿고 듣는 메이커준...) ▷ 뭘 배웠나? - 간단한 동작을 수행하는 웹사이트에 대해 E2E(End-to-End) 테스트를 직접 실습해보았다. .. 2022. 11. 17.
[Algorithm] 두 배열 합치기(Two Pointers) ❐ 두 배열 합치기 ▶︎ 문제 오름차순으로 정렬이 된 두 배열이 주어지면 두 배열을 오름차순으로 합쳐 출력하는 프로그램을 작성하세요. ▷ 입력 예제 [1, 3, 5], [2, 3, 6, 7, 9] ▶︎ 출력 예제 [1, 2, 3, 3, 5, 6, 7, 9] ▷ 문제설명 시간복잡도나 효율성을 고려하지 않고 문제를 풀 수 있는 가장 간단한 방법을 생각해보자. 두 개의 배열을 하나로 합친 뒤 자바스크립트의 sort( ) 메서드를 활용해서 배열을 정렬하는 방법을 떠올릴 수 있다. 이 방법은 간단하지만 최선이라고는 할 수 없다. 자바스크립트에서 사용되는 v8 엔진은 'Tim Sort'의 정렬 알고리즘을 사용하는데, 이것은 Merge Sort를 기반으로 최적화한 알고리즘이고 O(n log n)의 시간복잡도를 가진다.. 2022. 11. 4.
[Algorithm] 이진트리 너비우선탐색(BFS) ❐ 이진트리 너비우선탐색 ▶︎ 문제 아래 그림과 같은 이진트리를 너비우선탐색해 보세요. ▷ 출력 예제 1 2 3 4 5 6 7 ▶︎ 문제설명 너비우선탐색(BFS, Breadth First Search)은 시작 정점(vertex, 노드)에서 출발해 인접한 모든 정점들을 우선 방문 하는 방법이다. 시작 정점으로부터 멀리 떨어져 있는 정점은 나중에 순회하게 된다. 이런 점에서 앞서 포스팅했던 깊이우선탐색(DFS)과는 양상을 보인다. 혹자는 DFS와 BFS를 드라마를 보는 방식의 차이로 예를 들기도 한다. DFS는 하나의 드라마를 골라서 그것을 정주행해서 시청하며 하나의 시리즈를 다 볼 때까지 다른 드라마는 보지 않는 방식이라고 한다면, BFS는 여러 드라마를 하나씩 보는 방법이라고 할 수 있다. 이러한 차이는.. 2022. 10. 26.
[Algorithm] 경로 탐색(그래프-인접리스트) ❐ 경로 탐색(인접리스트) ▶︎ 문제 방향그래프가 주어지면 1번 정점에서 N번 정점으로 가는 모든 경로의 가지 수를 출력하는 프로그램을 작성하세요. 아래 그래프에서 1번 정점에서 5번 정점으로 가는 가지 수는 총 6가지 입니다. ▷ 입력 예제 5, [ [1, 2], [1, 3], [1, 4], [2, 1], [2, 3], [2, 5], [3, 4], [4, 2], [4, 5] ] ▶︎ 출력 예제 6 ▷ 문제설명 인접행렬은 그래프의 연결 관계를 이차원 배열로 나타내는 방법이다. 인접 행렬은 정점이 연결되어 있는지 확인하기 위해서 graph[a][b]의 요소만 확인할 수 있기 때문에 직관적이고 구현하기 쉽다는 장점이 있다. 하지만 구현해야 하는 그래프의 정점(vertex, 노드)의 개수가 10억개라면 어떨까.. 2022. 10. 23.
[Algorithm] 경로 탐색(그래프-인접행렬) ❐ 경로 탐색(인접행렬) ▶︎ 문제 방향그래프가 주어지면 1번 정점에서 N번 정점으로 가는 모든 경로의 가지 수를 출력하는 프로그램을 작성하세요. 아래 그래프에서 1번 정점에서 5번 정점으로 가는 가지 수는 총 6가지 입니다. ▷ 입력 예제 5, [ [1, 2], [1, 3], [1, 4], [2, 1], [2, 3], [2, 5], [3, 4], [4, 2], [4, 5] ] ▶︎ 출력 예제 6 ▷ 문제설명 그래프를 그려 문제를 해결해 보자. 인접 행렬은 그래프의 연결 관계를 이차원 배열로 나타내는 방식이다. 문제의 그래프는 정점이 단순히 연결되어 있을 뿐 아니라 방향을 가리키고 있다. 예를 들어 1번 정점(vertex, 노드)은 2, 3, 4번 정점을 가리키고 있고, 1번과 2번 정점은 서로를 가리키.. 2022. 10. 22.
[Algorithm] 조합 구하기(DFS) ❐ 조합 구하기 ▶︎ 문제 1부터 N까지 번호가 적힌 구슬이 있습니다. 이 중 M개를 뽑는 방법의 수를 출력하는 프로그램을 작성하세요. 자연수 N과 M이 입력됩니다. ▷ 입력 예제 4 2 ▶︎ 출력 예제 1 2 1 3 1 4 2 3 2 4 3 4 ▷ 문제설명 조합은 서로 다른 n개의 원소를 가진 집합에서 순서에 상관없이 r개의 원소를 선택하는 것을 말한다. 쉽게 말해 1부터 n까지 적혀있는 구슬 주머니에서 r개의 원소를 한번에 뽑는 경우의 수를 세는 것과 같다. 구슬을 뽑는 순서도 고려하는 순열과는 다르다. 문제처럼 자연수 4까지의 수에서 2개를 뽑는 경우의 수를 그림으로 도식화하면 다음과 같다. 총 2개를 뽑는데 숫자 1은 무조건 포함되어 있는 경우의 수는 3개, 숫자 2는 무조건 포함되어있고 앞선 조.. 2022. 10. 19.
[Algorithm] 팩토리얼 ❐ 팩토리얼 ▶︎ 문제 자연수 N을 입력하면 N!값을 구하세요. N! = n*(n-1)*(n-2)*....*2*1 입니다. 자연수 N이 입력됩니다. ▷ 입력 예제 5 ▶︎ 출력 예제 120 ▷ 문제설명 팩토리얼을 구현하는 방법은 다양할 것이다. 이번 포스팅에서는 두 가지 방법을 소개하겠다. - 첫번째 방법 function solution(n) { let answer = 1; function DFS(N) { if (N === 1) { return; } else { answer = answer * N; DFS(N - 1); } } DFS(n); return answer; } console.log(solution(5)); D(5)부터 시작해 D(4), D(3) ..... D(1)이 될때까지 호출을 계속한다. .. 2022. 10. 14.