오늘도 맑음

하나의 SVG 파일로 색상, 사이즈를 변경하여 사용하기 위하여 공통 컴포넌트를 생성하였습니다.우선 vite-plugin-svgr을 설치해야합니다. [설치하는 법]https://hazzuu.tistory.com/entry/vite-plugin-svgr%EB%A1%9C-%EC%95%84%EC%9D%B4%EC%BD%98-%ED%99%94%EB%A9%B4%EC%97%90-%EB%B3%B4%EC%97%AC%EC%A3%BC%EA%B8%B0 vite-plugin-svgr은 svg 파일을 컴포넌트로 만들어주는 플러그인입니다.따라서 사용할 때도 컴포넌트 파일 임포트하는 것처럼 가져오면 되는데 주의할 점은 ?react를 붙여서 가져와야됨!  svg 파일을 하나 저장합니다.변경하고자 하는 속성을 current로 변경합니다...

프로세스란 프로그램이 실행중인 상태를 의미합니다. 더 정확히 얘기하면 프로그램이 메모리에 적재되어 CPU를 할당받아 자신의 작업을 수행하는 것를 의미합니다. cf) 디스크 Vs 메모리사실 메모리도 종류가 여러가지입니다.- HDD (Hard Disk Drive)  - 비휘발성 저장 장치로, 시스템이 꺼져도 데이터가 유지될 수 있는 디스크 (보조 기억 장치)- RAM (Random Access Memory)  - 프로그램 실행에 필요한 데이터와 명령어를 CPU로 빠르게 전달할 수 있는 메모리 (주 기억 장치)  - 이 메모리가 클수록 동시에 많은 일을 처리할 수 있습니다. 메모리에 적재프로그램은 보조 기억장치(ex. HDD)에 저장되어 있습니다. 이것을 "실행"하면 주 기억 장치(RAM) 메모리에 적재됩니다..

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