틈틈히 메모중

eslint와 prettier는 각각 다른 기능을 제공한다. eslint는 정적 코드 분석 툴로 문법적 문제 식별 등을 할 수 있고, prettier는 코드 포맷터로 스페이스 설정, 들여쓰기 설정 등 코드 작성 양식을 동일하게 유지시켜준다. 이 두가지는 협업시 꼭 함께 사용하게되는데, .eslintrc.js랑 .prettierrc를 작성했음에도 VScode에서 이 두가지 익스텐션이 작동하지 않기도 한다. 그럴 때 vscode의 setting을 열고, setting의 json을 열어서 아래 두가지를 추가하면 eslint와 prettier를 함께 사용할 수 있게 된다. { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vsc..

//App.js /* 문제 ) PostPage가 보이지 않는 현상 발생! path="/@:username"이라고 적으면 안됨 ... 아래와 같이 적어야 연결됨 */ (...중략...)

// 1. import { withRouter } from 'react-router-dom'; history 기능은 없어짐 // 2. import { useHistory } from 'react-router-dom'; useHistory라는 훅도 없어짐 import { useNavigate } from 'react-router-dom'; //history대신 useNavigate써야함 (...중략...) const RegisterForm = () => { const dispatch = useDispatch(); const navigate = useNavigate(); const { form, auth, authError, user } = useSelector(({ auth, user }) => ({ fo..

immer를 설치하고 나서 produce라는 키워드를 입력하니 자동으로 아래와 같이 불러와졌다. import { produce } from '../../node_modules/immer/dist/immer'; 뭔가 이상해서 from "immer"로 고쳤는데 계속 에러 경고창 뜨는거임...ㅂㄷㅂㄷ 그래서 우선은 ~~ 동작만 하면 우선 ^&^ 이라고 생각했는데^*^ submit할 때 서버로 데이터 넘기는 과정에서 계속 오류가 났다...ㅠ 잘 못적은 부분 없는지 엄청 해메다가. . . (없음왜없어!!!!ㅠㅠ) 혹시 ? 하고 immer불러오기 주소가 저렇게 뜨는 사람들이 있나 해서 구글링 해보니까... Cannot find module 'immer' from 'node_modules/use-immer/dist/..

//Button.js 여기서 쓴 ${(prop)=>...} 것 import styled, { css } from 'styled-components'; import palette from '../../lib/styles/palette.js'; const StyledButton = styled.button` ... ${(props) => props.fullWidth && css` padding: 0.75rem 0 0.75rem 0; width: 100%; font-size: 1.125rem; `} ${(props) => props.cyan && css` background: ${palette.cyan[5]}; &:hover { background: ${palette.cyan[4]}; } `} `; const..

npm install styled-components@latest 최신버전을 도전해보자

이렇게 입력 했는데 오류남 벨로퍼트님 책엔 Route element안써있고 다 component였는데 눈치껏 바꾸긴했었음 //App.js function App() { return ( ); Route안에 component 쓰는건 사라져서 위처럼 쓰면 안 됨 그리고 path={['/@:username','/']}이 잘 안되었다는 블로그 글발견하고 아래와 같이 수정 function App() { return ( ); 오류없이 말끔해진 콘솔창...ㅎㅎ...ㅠㅠㅠ

문자열 my_str과 n이 매개변수로 주어질 때, my_str을 길이 n씩 잘라서 저장한 배열을 return하도록 solution 함수를 완성해주세요. 1 ≤ my_str의 길이 ≤ 100 1 ≤ n ≤ my_str의 길이 my_str은 알파벳 소문자, 대문자, 숫자로 이루어져 있습니다. function solution(my_str, n) { return my_str.match(new RegExp(`.{1,${n}}`,'g')); } //문자열을 정규표현식으로 걸러서 반환 //정규표현식 뜻 . 모든문자를 {1,${n}} 1부터 n까지 자를 것 function solution(my_str, n) { let cuttingArr = []; for(let i = 0 ; i < my_str.length ; i +..

문자열 s가 매개변수로 주어집니다. s에서 한 번만 등장하는 문자를 사전 순으로 정렬한 문자열을 return 하도록 solution 함수를 완성해보세요. 한 번만 등장하는 문자가 없을 경우 빈 문자열을 return 합니다. 0 s.match(new RegExp(x, 'g')).length == 1).sort().join(''); } //x문자 기준으로 s안에서 찾아서 갯수가 1개인것을 filter로 줍줍 => 정렬, 문자열로 function solution(s) { return [...s].filter(x => s.split(x).length == 2).sort().join(''); } //s문자열을 배열로 전개, 필터로 배열안 문자를 하나뽑아서 기준으로 새로 배열만듦 //그 배열안에 한번 등장하는 문자..

정수 배열 array와 정수 n이 매개변수로 주어질 때, array에 들어있는 정수 중 n과 가장 가까운 수를 return 하도록 solution 함수를 완성해주세요. 1 ≤ array의 길이 ≤ 100 1 ≤ array의 원소 ≤ 100 1 ≤ n ≤ 100 가장 가까운 수가 여러 개일 경우 더 작은 수를 return 합니다. array에 있는 수중에 n과 가장 가까운 수를 출력하도록 하는 함수 function solution(array, n) { //[3, 10, 28], 20 array.sort((x,y) => x - y) //배열을 오름차순 정렬함 [3, 10, 28] let differ = Infinity; let num = 0; for(let i of array){ if (Math.abs(n-..

createStore썼더니 redux-toolkit에 그런 애 없다고 한다.자동 찾아주는걸로 찾아보니 const store = legacy_createStore();이제 레거시라니...ㅠㅠ 과거의 문법이 되어있었다.  https://redux-toolkit.js.org/tutorials/quick-start#create-a-redux-store 대신 이렇게 쓰라는건가 ... 우선은 레거시로 해서 쓰더라도앞으로는 configureStore로 써야한다... import { configureStore } from '@reduxjs/toolkit'export const store = configureStore({  reducer: {},})   리덕스 개발자 도구를 쓰기 위해 ( 크롬브라우저에 익스텐션설치 하고..

하...🔥 집와서 평화롭게 Macbook으로 작업하려했는데 커멘드 + s 했는데 권한이 없어서 저장 못하니까 sudo로 시도해볼래? 이러는거다... 근데 sudo해도 안해줌ㅋ 결과적으로는 이렇다 . . . 맥의 vscode에서 파일 수정하고 저장 눌렀는데 "저장 못하니까 다른이름으로 저장할래? sudo시도할래? 폐기?할래"뜨면 (저 3가지 다해도 저장이 안된다.) 원인은 권한부족🤔 그럴 땐 아래와 같이 하면 된다. 1. 터미널을 새로 열어서 2. sudo chmod -R 777 // 입력할 때 해당 폴더 드래그 해서 터미널 위에 올리기 3. 엔터 (4. 비밀번호 요구하면 ? 맥북 사용자 로그인할때 쓰는 비밀번호입력) 하면 vscode 에서 파일 수정 및 저장이 된다!😮‍💨 "chmod 777 "의 의미는..