문제점 : 배포를 했는데 다크모드가 자동으로 적용 되어 CSS 가 깨져서 나온다. ex) 하얀색 배경 폼 -> 검정색 배경 폼으로 변경 , 폰트 컬러를 지정해주지 않은 글 -> 하얀색으로 변경 등 저번 프로젝트와 이번 프로젝트를 진행하면서 로컬 환경에서는 문제가 없었지만 배포를 하고 테스트를 하는 과정에서 웹 이용자가 다크모드를 사용할 때 자동적으로 글씨 색상이나 폼 배경 색깔이 변경되는 문제점을 겪었다. 해결은 간단하게 할 수 있었다. index.css 파일 :root 에서 color-scheme 부분이 light dark 로 설정되어 있는데 light only 로 바꿔주면 된다. :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, san..
전체 글
🐾 사람 좋아, 개발 좋아 🐾 궁금한 건 끝까지 파고들고, 배운 건 즐겁게 나누는 개발자의 놀이터
처음 리액트 공부를 시작했을 땐 CRA (Create React App) 으로 리액트 개발 환경을 구성했었다 ! 나름 사용하기도 편리하고 가장 먼저 접하게 된 방법이었기에 줄곳 CRA 로 리액트를 시작하였지만 처음 초기 셋팅 때 생각보다 시간이 좀 많이 걸리기도 하고 배포하는 과정에서 CRA 보다 다른 방법을 사용하는 것이 좋다는 말을 듣게 되어 다른 방법이 없을까 모색하던 중 Vite 로 리액트 환경을 구성할 수 있다는 것을 알게 되었다 !! 그래서 오늘은 Vite로 리액트 환경을 구성하는 방법에 대해 적어보고자한다. Vite 란 ? Vue.js 및 React 프로젝트를 위한 빠르고 간단한 빌드 도구. Vite는 모던 브라우저에서 웹 애플리케이션을 더 빠르게 실행하기 위해 개발됨. Vite의 특징 빠른..

한 배 탄거다 프로젝트 이름 : 구르미 월드 프로젝트 기간 : 12/19 ~ 1/31 팀원 : 프론트 1 , 백엔드 1 (총 2명) 팀명 : 한 배 탄거다 프로젝트 소개 : (친구의 성과 내 성을 붙여 팀명을 지었다.. 너무 마음에 든다 .. 한 배 탄거다 .. ! ) 오래간만에 프로젝트를 하나 시작하게 되었다. 졸업을 앞 둔 백엔드 친구와 통화를 하던 중 방학 때 할 것도 없는데 프로젝트 하나 해보자 ! 제안을 받았고 나도 현재 코딩테스트 준비 말고는 딱히 공부 중인 것이 없어서 흔쾌히 제안을 승낙했다. 요즘 날씨가 부쩍 추워져서 매트와 함께 살던 나는 새로운 프로젝트를 할 생각에 들뜬 마음으로 이불을 걷어내고 즉시 카페로 달려나와 아이디어 회의를 하게 되었다. 아이디어 회의에서는 첫 번째로 유용한 기..

너비 우선 탐색 문제인 토마토를 풀고 제출을 했는데 시간초과가 떠버렸다 ... ! 그래서 오늘 포스팅은 시간초과를 해결한 방법에 대해 작성하고자한다 토마토 (골드 5) 1 초 256 MB 173851 67333 42811 36.338% 문제 철수의 토마토 농장에서는 토마토를 보관하는 큰 창고를 가지고 있다. 토마토는 아래의 그림과 같이 격자 모양 상자의 칸에 하나씩 넣어서 창고에 보관한다. 창고에 보관되는 토마토들 중에는 잘 익은 것도 있지만, 아직 익지 않은 토마토들도 있을 수 있다. 보관 후 하루가 지나면, 익은 토마토들의 인접한 곳에 있는 익지 않은 토마토들은 익은 토마토의 영향을 받아 익게 된다. 하나의 토마토의 인접한 곳은 왼쪽, 오른쪽, 앞, 뒤 네 방향에 있는 토마토를 의미한다. 대각선 방향..
백준은 javascript 를 따로 지원하고 있지 않아서 node.js로 풀어주었다. 사실 그래서 백준보다는 프로그래머스를 많이 풀었는데 BFS 문제를 더 연습해보고 싶어 백준문제를 풀게 되었다. 백준에서는 node.js 를 사용하면 되고 input 값만 잘 받아주면 문제 없이 문제를 풀 수 있었다 ! 유기농 배추 (실2) 시간 제한메모리 제한제출정답맞힌 사람정답 비율 1 초 512 MB 170400 68405 45827 37.997% 문제 차세대 영농인 한나는 강원도 고랭지에서 유기농 배추를 재배하기로 하였다. 농약을 쓰지 않고 배추를 재배하려면 배추를 해충으로부터 보호하는 것이 중요하기 때문에, 한나는 해충 방지에 효과적인 배추흰지렁이를 구입하기로 결심한다. 이 지렁이는 배추근처에 서식하며 해충을 잡..
문제 설명 두 개의 단어 begin, target과 단어의 집합 words가 있습니다. 아래와 같은 규칙을 이용하여 begin에서 target으로 변환하는 가장 짧은 변환 과정을 찾으려고 합니다. 1. 한 번에 한 개의 알파벳만 바꿀 수 있습니다. 2. words에 있는 단어로만 변환할 수 있습니다. 예를 들어 begin이 "hit", target가 "cog", words가 ["hot","dot","dog","lot","log","cog"]라면 "hit" -> "hot" -> "dot" -> "dog" -> "cog"와 같이 4단계를 거쳐 변환할 수 있습니다. 두 개의 단어 begin, target과 단어의 집합 words가 매개변수로 주어질 때, 최소 몇 단계의 과정을 거쳐 begin을 target으로..

A : DFS/BFS 가 뭔지 알아 ? Me : 그럼 ! DFS 는 그래프를 깊이 우선 탐색하는 것이고 , BFS는 그래프를 너비 우선 탐색하는거잖아 ! A: 자세히 설명해봐 뭔소린지 모르겠어 ! Me : DFS 는 특정 노드에서 시작해서 특정 노드와 연결된 모든 노드를 탐색한 후 다음 노드를 탐색하는거고 BFS는 특정 노드에서 시작해서 특정 노드와 인접한 노드들을 탐색한 후 그 다음 인접한 노드를 탐색하는거야 !! 그래프를 머리에 떠올려보면 DFS는 수직방향으로 BFS는 수평방향으로 진행한다고 생각해 나는 ! A: 오 ! 그럼 DFS/BFS 관련 문제는 다 풀수있겠네 ? Me: .... 아니 현재 나는 DFS 와 BFS의 개념은 알고 있지만 이를 이용한 문제는 잘 풀지 못한다. 문제를 읽고 어떤걸 사용..

현재 나는 티스토리를 이용하여 개발 블로그를 작성중이다. 요즘 코딩테스트를 준비하면서 프로그래머스 문제를 풀고 있는데 문제를 복사하는 과정에서 배경까지 복사되어 항상 불편함을 겪었었다. 집에서는 맥북을 사용하고 있어서 맥에서는 문제를 복사한 후 메모장에 다시 붙여놓고 다시 옮기는 과정을 겪으면 되긴 했지만 ,, 윈도우 환경에서는 이상하게 표가 깨진다던가 하는 문제가 있었다. 따라서 이번 포스팅은 프로그래머스 문제를 복붙했을 때 배경만 깔끔하게 없애는 방법에 대해 포스팅해보고자 한다 !! 흔한 문제 문제 설명 n개의 송전탑이 전선을 통해 하나의 트리 형태로 연결되어 있습니다. 당신은 이 전선들 중 하나를 끊어서 현재의 전력망 네트워크를 2개로 분할하려고 합니다. 이때, 두 전력망이 갖게 되는 송전탑의 개수..

문제 설명 n개의 송전탑이 전선을 통해 하나의 트리 형태로 연결되어 있습니다. 당신은 이 전선들 중 하나를 끊어서 현재의 전력망 네트워크를 2개로 분할하려고 합니다. 이때, 두 전력망이 갖게 되는 송전탑의 개수를 최대한 비슷하게 맞추고자 합니다. 송전탑의 개수 n, 그리고 전선 정보 wires가 매개변수로 주어집니다. 전선들 중 하나를 끊어서 송전탑 개수가 가능한 비슷하도록 두 전력망으로 나누었을 때, 두 전력망이 가지고 있는 송전탑 개수의 차이(절대값)를 return 하도록 solution 함수를 완성해주세요. 제한사항 n은 2 이상 100 이하인 자연수입니다. wires는 길이가 n-1인 정수형 2차원 배열입니다. wires의 각 원소는 [v1, v2] 2개의 자연수로 이루어져 있으며, 이는 전력망의..