js
-
리액트/스토리북 설치 관련 에러 react-refresh/runtime.js which falls outside of the project src/ directory.Error 2023. 11. 8. 00:20
에러 사진 react-refresh/runtime.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/. 라는 오류가 여러번 나온다. 아무리 구글링을 해도 정보가 마땅치 않고, 스택오버플로우에서 하라는대로 해봐도 무용지물이었다. 그러던 중, react-refresh가 여러번 설치된 것 같다고 알려주셔서, 터미널에 npm ls react-refresh 명령어를 입력하고 확인해보니, 지금은 해결을 완료해서 'dedupe..
-
리액트에서 .env 사용하기 (카카오 로그인)React 2023. 11. 6. 19:30
팀 프로젝트 중 카카오 로그인 기능을 구현하려고 하던 중, env파일에 대해서 처음 알게되어서 어떻게 쓰는 것인지 등 공유하려고 한다. 먼저 env란 뭘까? 쉽게 얘기하면 깃허브에 올리면 안되는 것들을 환경변수를 정의하여 변수로 받아오는 것으로 생각하면 되겠다. 이 env파일은 항상 최상위 루트에 있어야 한다. 또한 리액트(CRA환경) 에서는 REACT_APP을 변수명 맨 처음에 꼭 넣어주어야 한다. 그리고 process.env로 전역에서 접근가능하다. const CLIENT_ID = process.env.REACT_APP_REST_API_KEY; const REDIRECT_URI = process.env.REACT_APP_REDIRECT_URL; 주의할 점은 절대 쌍따옴표나 따옴표를 붙이지 말 것!! ..
-
프로그래머스 lv2 기능 개발 -js알고리즘(코딩테스트) 2023. 9. 1. 15:30
문제 : 기능개발 문제 설명 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요. 제한 사항 작업의 개수(progresses, speeds배열의 길이)는 100개 이하입니다. 작업 진도는 100 미만의 자연수입니다. 작업 속도는..
-
[구름톤 챌린지] Day2 프로젝트 매니징알고리즘(코딩테스트) 2023. 8. 17. 10:36
문제 https://level.goorm.io/exam/195684/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%A7%A4%EB%8B%88%EC%A7%95/quiz/1 구름LEVEL 난이도별 다양한 문제를 해결함으로써 SW 역량을 향상시킬 수 있습니다. level.goorm.io 1일차보다는 아주 조금 난이도가 올라갔다. 23시 59분에서 1분이 지난 시각은 00시 00 분이라는 것 때문에 생각을 너무 복잡하게 하였으나, 쉽게 생각하니 단순히 풀린 문제였다. while문을 굉장히 오랜만에 써보는듯?
-
[구름톤 챌린지] Day1 운동 중독 플레이어알고리즘(코딩테스트) 2023. 8. 17. 10:31
문제 https://level.goorm.io/exam/195683/%EC%9A%B4%EB%8F%99-%EC%A4%91%EB%8F%85-%ED%94%8C%EB%A0%88%EC%9D%B4%EC%96%B4/quiz/1 구름LEVEL 난이도별 다양한 문제를 해결함으로써 SW 역량을 향상시킬 수 있습니다. level.goorm.io 처음에는 입력받는 법도 몰랐었다. 프로그래머스와는 조금 달라서 당황.. 우선적으로, Node.js 내장 모듈인 readline을 불러오고, readline 모듈의 createInterface 함수를 사용하여 입력과 출력을 설정. process.stdin은 표준 입력(키보드 입력)을 나타내고, process.stdout는 표준 출력(화면 출력)을 나타낸다. rl.on('close', ..
-
프로그래머스 lv1 문자열 다루기 기본 -js알고리즘(코딩테스트) 2023. 8. 4. 04:02
문제 간단한 문제라고 생각했다. 처음 접근했던 방식을 보자. 문자열 s를 배열로 변경하고, map(Number)로 모든 원소를 숫자화시킨다. 그럼 문자열은 null로 표시가 되기때문에 마지막 3항 연산자로 null이 있으면 false, 없으면 true를 반환했다. 결과적으로는 틀렸다. null을 인식을 못하는 것 같았다. 따라서 NaN으로 변경해주었다. 이렇게 했더니 모든 케이스는 통과를 하긴 하지만, 3-4개의 테스트케이스를 통과를 하지 못했다. 생각을 해보니, 문제를 다시 보면, 문자열 s의 길이가 4 또는 6이라는 말이 중의적으로 들렸다. 문자열 s의 길이가 4 또는 6이라고 확정적으로 알려주는 문장인지, 혹은 s의 문자열 길이가 4 또는 6 인지도 검사하고, 또한 숫자로만 구성되어있는지 검사하는 ..
-
프로그래머스 lv1 k번째수(정렬) - js알고리즘(코딩테스트) 2023. 7. 28. 01:21
문제 K번째수 문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요. 제한사항 array의 길이는 1 이상 100 ..
-
프로그래머스 lv1 폰캣몬(해시) - js알고리즘(코딩테스트) 2023. 7. 28. 00:05
문제 폰켓몬 문제 설명 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다. 첫 번째(3번), 두 번째(1번) 폰켓몬을 선택 첫 번째(3번), 세 번째(2번) 폰켓..