오늘도 맑음

AWS EC2는 물리적인 서버를 대신 하는 가상화 서버라고 생각하면 됩니다.시간과 비용이 많이 드는 물리적인 서버 대신 AWS의 힘을 빌려 Node.js 프로젝트를 배포해봅시다!목차1. EC2 인스턴스 생성하기2. EC2 인스턴스에 접속하기3. EC2 인스턴스에 Node.js 설치하기 (feat. nvm 설치)4. Node.js 프로젝트 실행하기5. PM2로 Node.js 애플리케이션 백그라운드 실행하기1. EC2 인스턴스 생성하기웹 서버의 이름을 작성합니다.웹 서버의 근간이 될 운영체제를 선택하는 데, 프리 티어 사용가능한 Ubuntu를 선택했습니다.키 페어 생성을 누르면 이름.pem 이라는 파일이 하나 다운로드 받아집니다. 이후에 인스턴스를 안전하게 접속하기 위해 꼭 필요하니 잘 보관해둡니다.네트 워..

서버 배포란?서버 배포란 우리가 만든 프로젝트( = 프로그램)을 실제 서버 컴퓨터에서 실행하고, 이를 인터넷을 통해 사용자가 사용할 수 있는 상태를 만드는 과정이다.서버 배포 과정1. 서버 컴퓨터 준비사용자가 언제든 우리의 프로그램(ex. 웹 앱 서비스, 소프트웨어)을 사용할 수 있도록 24시간 내내 돌아갈 수 있는 고성능의 컴퓨터가 필요하다. 따라서 고성능 컴퓨터를 준비하거나 편하게 가상 서버(AWS EC2)를 사용한다. 2. 프로그램 준비로컬에서 만든 우리의 프로젝트를 말한다. 예를 들어 Node.js 기반의 백엔드 프로그램일 수도 있고 React 기반의 프론트엔드 프로그램일 수도 있다. 3. 서버 컴퓨터에서 프로그램 실행이제 서버 컴퓨터에서 프로그램을 실행해야 한다. 일반 컴퓨터처럼 "실행" 명령을..

"서버" 컴퓨터란 물리적인 컴퓨터 장비를 의미합니다. 일반 컴퓨터와 마찬가지로 여러 개의 CPU, 메모리, 디스크 등으로 구성되어 있습니다. 보통 데이터센터라는 큰 공간에 위치하여, 어두운 곳에서 여러 대의 큰 컴퓨터가 24시간 계속해서 돌아가는 모습을 상상할 수 있습니다.서버 컴퓨터"서버"는 대규모의 데이터 처리나 웹 호스팅, 데이터 베이스 관리를 합니다. 개인용 컴퓨터와는 다르게 항상 켜져 있어야 하고, 냉각과 보안이 중요한 데이터 센터와 같은 환경에서 운영됩니다.cf ) 클라이언트-서버 모델에서의 서버클라이언트 - 서버 모델에서의 "서버"는 물리적인 장비가 아닌 역할을 의미합니다. 클라이언트는 요청을 하고 서버는 클라이언트의 요청에 응답하여 서비스나 데이터를 제공합니다. 예를 들어 집에서 개인용 P..

문제모든 도시를 방문하고 다시 현재로 돌아오는 데 걸리는 최소 비용을 구해라[입력]첫 줄에는 방문해야할 도시의 수를 입력받는다.그 다음에 도시 사이를 이동하는 비용을 배열로 받는데, cities[i][j]란 i -> j 도시로 이동하는 데 드는 비용을 의미한다.[정리]모든 도시를 거쳐야 한다.한번 거쳤던 도시는 재방문할 수 없다.마지막 도시를 거친 후 처음 도시로 돌아가야하는 데, 걸리는 최소 비용을 구한다.문제 풀이도시의 수(N)가 10개 이하이다. 모든 도시를 방문했을 때도 10! 이기 때문에 1초안에 실행이 가능하다.따라서 백트래킹을 구현하였다. ⭐ key point!if value > ans 로 만약 모든 도시를 방문하지 않더라도 이미 결과 저장 값(ans) 보다 크다면 즉시 리턴을 통해 시간을 ..

문제(1,1)부터 (N, M) 까지 가는 최소 칸의 수를 출력하는 문제이다.- 미로 바깥으로는 나갈 수 없다.- 0은 지뢰이므로 갈 수 없다.  문제 풀이기존 코드 - 미로를 탐색하기 위해 bfs를 사용했으며 visited라는 배열을 선언하여 visited[x][y] 까지 가는 데 지나친 칸 수를 저장했다.- 조건  1. 미로를 넘어간 경우  2. 지뢰인 경우 (map[x][y]가 0) - 여기서 방문 여부에 따라 다른 로직을 작성하였다.  - 방문 안한 경우 : 작업 큐(q)에 추가하고, visited[next_x][next_y]에  이전의 칸 수 +1 저장  - 방문한 경우 : 새로운 길이 visited에 저장된 수보다 적은 경우, visited[next_x][next_y]에  이전의 칸 수 +1 로..

리액트에서 개발할 때 반복문(map) 을 통해 요소들을 보여줄 경우에 "key" 속성을 지정하라 이런 말을 자주 봤을 것이다.그렇다면 왜 "key" 속성을 지정해야할까? 리액트 재 렌더링리액트에서 새로운 요소가 추가될 때 render() 함수를 호출하여 새로운 리액트 가상 돔 트리를 생성한다. 이를 기존 리액트 가상 돔 트리와 비교한 후 변경된 부분만 재 렌더링을 수행한다.+ 차이를 비교하는 과정을 diffing 이라고 한다. 차이를 비교(diffing)요소를 비교하기 전에 key 값을 우선 비교한다.- 새로운 key 값인 경우, 새로운 DOM 요소를 생성하여 트리를 재구성한다.- 기존 key 값이면서 새로운 요소인 경우도 새로운 DOM 요소를 생성하여 트리를 재구성한다.- 기존 key 값이면서 기존 요..

목표시작(start) 기둥에 있던 정렬된 원판을 목표(end) 기둥에 정렬한다.문제 풀이종료 조건- n이 1일 때, start => end 기둥에 꽂는다. => answer 배열에 저장 기본 재귀 형식1. n -1 까지의 원판을 other 기둥에 꽂는다.2. n번 째의 원판을 start 기둥에서 end 기둥에 꽂는다. => answer 배열에 저장3. other 기둥에 있는 n -1 개의 원판을 end기둥에 꽂는다.  https://school.programmers.co.kr/learn/courses/30/lessons/12946

reviewdog

⭐ 문제화면의 첫번째 렌더링 후에 클릭 이벤트를 주어 state를 변경할 때 새로고침 된 것처럼 순간적인 깜빡임 현상이 있었다.개발자 도구의 네트워크 탭으로 확인했을 때 state가 변경될 때 폰트 파일을 다시 가져오는 것을 확인할 수 있었다. 빨간 밑줄 아래부분을 보면 첫번째 state 변경 시 폰트를 다시 불러와서 순간적으로 깜빡이는 것을 확인했다. ⭐ 해결기존에는 font.ts 파일을 만들어 style-components를 활용하여 폰트를 불러왔었다. -> 문제 발생!// font.tsimport { createGlobalStyle } from "styled-components";const GlobalFont = createGlobalStyle` @font-face { font-fam..

img 태그로 svg 아이콘을 화면에 보여준다면 여러 제약사항이 많다.1. 색상이나 크기를 동적으로 변경이 어렵다.2. 너비, 높이 외에는 속성을 변경할 수 없다. 따라서 다른 방법을 찾아야 했는데 지금 사용하는 vite의 vite-plugin-svgr를 사용하기로 결정했다. svgr의 장점은 다음과 같다.1. 색상, 크기를 동적으로 변경하기 쉽다.2. react-icons 처럼 으로 가져올 수 있어 가독성이 향상된다. 우선 설치한다.npm install --save-dev vite-plugin-svgr 초기 설정해야하는 부분이 있는데우선 vite 환경설정 파일인 vite.config.js에 svgr를 추가해준다.// vite.config.jsimport svgr from "vite-plugin-svg..