자바스크립트
-
[React] useRef는 왜 써야하는가?React 2024. 2. 25. 21:57
useState 장점과 변수의 장점을 합친 것. useRef란 레퍼런스를 사용하기 위한 훅. 그렇다면 레퍼런스란? 리액트에서 레퍼런스란 특정 컴포넌트에 접근할 수 있는 객체. 레퍼런스 객체에 current 객체가 있음. 이는 현재 참조하고 있는 element. useRef는 그 값이 변하더라도 렌더링을 발생시키지 않는다. 1. 사용법 const exampleRef = useRef(초기값); 2. useRef를 왜 사용해야 하는가? a. 저장공간으로서의 장점 값을 저장할 필요가 있는 변수가 있을 때 사용하면 좋음. 단, UI에 보일 필요가 없는 친구들을. 예시로, import { useState } from "react"; export default function Example1() { const [..
-
리액트/스토리북 설치 관련 에러 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; 주의할 점은 절대 쌍따옴표나 따옴표를 붙이지 말 것!! ..
-
프로그래머스 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번) 폰켓..
-
프로그래머스 lv1 행렬의 덧셈 - js알고리즘(코딩테스트) 2023. 7. 21. 12:33
문제 행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요. 내 풀이 이중반복문이 어떤식으로 굴러가는지 알게되었다. arr [ i ][ j ] : arr의 i번째 j번째로 접근 바깥쪽 for문의 초기 값(i=0)부터 시작하고, 안쪽 for문이 끝나면 다시 바깥쪽 for문의 i=1이 진행되는 순서다. 분명 더 좋은 풀이법이 있다고 생각했으나, 내 머리로는 이 방법 외에는 떠오르지 않았다. 다른 사람의 풀이 function solution2(arr1, arr2) { return arr1.map((e,i) => arr2[i].map((v,j) => ar..
-
[js] mvc 패턴을 연습해보자 -4 최근 검색어(3) mvc패턴 연습 순수js 마지막Javascript 2023. 7. 21. 12:14
mvc패턴 순수 자바스크립트 부분 마지막 요구사항 ● 검색시마다 최근 검색어 목록에 추가된다 모델 역할을 하는 Store.js 파일에 removeHistory(keyword) { this.storage.historyData = this.storage.historyData.filter( history => history.keyword !== keyword) } addHistory(keyword) { keyword = keyword.trim(); if(!keyword) { return; } const hasHistory = this.storage.historyData.some(history => history.keyword === keyword) if(hasHistory) { this.removeHistor..