Vite + Firebase 로 만든 프로젝트를 Github 배포하면서 생긴 일.

1. 글을 쓰는 이유 미래의 내가 혹시나 같은 에러나 유사한 에러를 만났을 때를 대처하기 위함과 혹여나 다른 분들에게 도움이 될까해서 글을 써놓는다. 프로젝트에서 사용한 기술 스택은 Vite, React, Firebase 이다. Vite로 Github 에 배포하는 건 처음이라 많이 삽질한 내용을 적어놓으려고 한다. Firebase에서 사용할 환경 변수는 Github secrets를 이용했다. 이거 설정하는 건 아래 주소에 남겨두겠다. 2. Github Actions와 Auto Deploy 시작. Github Actions로 내가 git으로 push 작업이 일어나게 되면 자동으로 Build 부터 Deploy까지 자동으로 실행시켜주는 actions를 만드는 작업이었다. 처음 해보는 작업이었기에 구글링을 통해..

2023.10.17

플로이드 와샬 알고리즘

백준 문제를 풀면서 플로이드 와샬 알고리즘에 대해 궁금증이 생겨서 적어둔다! 플로이드 와샬 알고리즘이란? 그래프에서 모든 정점 간의 최단 경로를 찾는 알고리즘. 음의 가중치를 가지는 그래프에서도 동작하며, 그래프의 모든 정점 쌍 간의 최단 경로를 구하는데 사용된다. 다이나믹 프로그래밍 기법(DP)를 활용하여 문제를 효율적으로 해결한다. 기본 아이디어는 "거쳐가는 정점"을 기준으로 최단경로를 구하는 것이다. 동작 방식 초기화 : 그래프의 인접 행렬을 사용하여 최단 거리를 나타내는 2차원 배열을 초기화한다. 만약 두 정점 사이에 간선이 없으면 무한대(Infinity)로 설정. 중첩 반복문 : 모든 정점을 순회하여 해당 정점을 거쳐가는 경우를 고려한다. 최단 거리 갱신 : 현재 선택된 노드를 거쳐가는 경우와 ..

2023.07.26

Next.js로 마크다운 블로그 만들기

이번에는 Next.js 로 마크다운 블로그 만들기 과제이다. 1. 마크다운이란? - 일반 텍스트 기반의 경량 마크업 언어로, 문서의 구조와 서식을 간단하게 표현하는 데 사용된다. 주로 웹 기반 문서 작성, README 파일 작성, 블로그 게시물 작성 등에 널리 사용되는 형식이다. 마크다운은 간편하고 가독성이 좋으며, HTML로 변환이 용이하여 다양한 플랫폼에서 쉽게 사용될 수 있다. - github의 README.md 파일을 생각하면 된다. 2. 과제와 비슷한 예시 과제와 비슷한 예시자료를 Next.js 에서 찾을 수 있었다. 바로 blog-stater!! 아래는 주소다. https://next-blog-starter.vercel.app/ 오늘도 github로 열어서 까보도록 하자. 3. 진행 순서 1)..

2023.07.11

React와 History API 사용하여 SPA Router 구현하기.

이번 과제를 해결하기 위해 고민했던 흔적들을 남겨보려고 한다. 1. react-router-dom 뜯어보기 react-router-dom 이라는 라이브러리는 많이 사용했었다. 다만 어떻게 돌아가는지 구조에 대해서는 단 한번도 생각해본 적이 없었는데 이번 과제를 통해서 처음으로 뜯어봤다. https://github.com/remix-run/react-router 위의 사이트가 바로 react-router의 코드를 볼 수 있는 github 주소이다. 일단 packages로 들어갔다. 여기서 react-router - lib 까지 들어갔다. 일단은 Router, Route에 대해 살펴보기 위해 component.tsx 로 들어갔다. 먼저 Router 검색 export function Router({ basen..

2023.07.07

[원티드 프리온보딩 프론트엔드 챌린지] 사전과제

1. CSR(Client-Side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. 1) CSR이란, - 클라이언트 측에서 렌더링을 진행한다는 의미이다. 브라우저 측에서 JavaScript를 다운받고 실행시킨다. 이 실행이 완전히 끝나면 그때 사용자는 화면을 볼 수 있고 페이지를 작동시킬 수 있다. - SPA(Single Page Application)에서 쓰이는 기법이다. 2) CSR의 단계 (1) User가 Website 요청을 보냄. (2) CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 클라이언트에 보낸다. (3) 클라이언트는 HTML과 JS를 다운로드 받는다. (4) 다운이 완료된 JS가 실행된다. 데이터를 위한 API가 호출된다. (이때 유저들은 placeholer..

2023.06.14