0차0차 0차0차

prettier 사이트에서 설치한 후 echo {}> .prettierrc.json 이 코드를 터미널에 실행하면 .prettierrc.json 파일이 생성이 되고 파일 안에 {}가 적혀있어야하는데 자꾸 빈칸 처리만 되고 보이지 않았다. (아래 사진은 예시여서 빈칸이 아닌데 밑에 창보면 JSON.error라고 나온다.) 열심히 구글링해본 결과 한 사이트에서 해답을 얻을 수 있었다.하단에 UTF-16이면 UTF-8로 바꿔야한다. 그러면 오류는 사라지고 prettier가 제대로 작동하는 것을 볼 수 있다!

개발자 툴에 Warning: Invalid DOM property `class`. Did you mean `className` 오류가 떠버렸다. 찾아보니 말 그대로 너가 쓴 class, className 의미하는거니? 라는 뜻이었고 코드를 살펴보니 JSX에서 class로 써버렸다. JS에서는 class로 작성하지만 JSX에서는 className으로 작성해야한다. 의미는 같지만 표기하는 법이 다르기에 꼭 유의해야한다. 안 그러면 위처럼 오류가 뜨기 때문이다. 오류 해결법은 class —> className으로 바꾸면 된다. 근데 하나하나 바꾸면 시간도 걸리고 귀찮다. 한번에 바꾸는 법을 알아보자! ctrl + f 를 누르면 위 창이 나온다. 맨 왼쪽 화살표를 클릭하면 두개의 input창이 생긴다. 위에선 ..

Javascript map() 메서드에 대해서 map() 메서드는 무엇일까? Javascript map() 함수는 배열의 모든 요소에 대해 지정된 함수를 호출하고, 그 결과로 새로운 배열을 반환한다. 즉, 기존의 배열을 변경하지 않고 새로운 배열을 만들어내는 함수이다. array.map(function(currentValue,index,array){ //처리할 코드 },thisValue); array는 map()함수가map() 함수가 호출되는 배열이다. function(currentvalue, index, array)는 배열의 각 요소를 처리할 함수이다. currentValue는 현재 처리 중인 요소의 값이다. index는 현재 처리 중인 요소의 인덱스이며, array는 map() 함수가 호출된 배열 자..

React localStorage에 대해서 React localStorage란? React는 웹 브라우저의 localStorage를 이용하여 클라이언트 측에서 데이터를 저장하고 유지할 수 있다. localStorage는 브라우저에서 key-value 쌍으로 데이터를 저장하는 방식이다. 이는 브라우저를 닫았다가 다시 열어도 데이터가 유지되기 때문에 새로고침, 브라우저 재시작 등과 관계없이 계속해서 사용할 수 있다. React localStorage를 사용하기 위해서는 먼저 localStorage객체에 접근해야 한다. 이는 일반적으로 componentDidMount 또는 useEffect 훅에서 이루어진다. 예를 들어 아래 코드는 컴포넌트가 마운트된 후 localStorage에서 데이터를 가져오는 방법을 보..

useRef React에서 DOM 조작하기 일기 저장 버튼을 클릭했을 때 작성자와 일기가 정상적으로 입력되었는지 확인하고 아니라면 focus하기 import {useState} from "react"; const DiaryEditor = () => { const[state,setState]=useState({author:"",content:"",emotion:1,}) const handleChangeState = (e)=>{ setState({ ...state, [e.target.name]:e.target.value, }) }; const handleSubmit = () =>{ if(state.author.length{ setState({ ...state, [e.target.name]:e.target.v..

useState with npx react-create-app ‘제목’해서 react 실행시키기 그리고 npm start해서 브라우저 열기 input에 작성된 값을 직접 핸들링할 수 있도록 만들어야한다. 사용자의 입력을 처리하기 위해선 state를 이용할 수 있다. useState를 이용한다. import {useState} from "react"; const DiaryEditor = () => { const [author,setAuthor] = useState("내이름스"); return( 오늘의 일기 setAuthor(e.target.value)} /> ); }; export default DiaryEditor; input에 value={author}를 지정하고 상태가 변화할 때 onChange를 사..

PAGE ROUTING ROUTING이란 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정이다. 데이터들도 네트워크 장치들을 환승하듯이 이동한다. ROUTER - 데이터의 경로를 실시간으로 지정해주는 역할을 한다. ROUTE + ING - 경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는다. PAGE ROUTING이란? 요청에 따라 알맞은 페이지를 선택하고 반환해서 사용자가 그 페이지에 접속하는 행위이다. 예를 들어 /home 이라는 페이지를 요청하면 웹 서버에서는 이 요청에 맞는 Home.html 파일을 반환하고 사용자는 /home에 접속한다. React SPA & CSR 여러개의 페이지를 준비했다가 적절한 페이지를 보내는 행위 → MPA(Multipage Applica..