콛 다이어리

자바스크립트에서는 배열 변경이 가능하지만state로 저장할 때는 변경할 수 없도록 해야한다.객체와 마찬가지로,state에 저장된 배열을 업데이트하고 싶을 때는새 배열을 생성하거나기존 배열의 복사본을 생성한 뒤,이 배열을 state로 두어 업데이트 해야함 변경하지 않고 배열 업데이트하기arr[1] = 'maltese' 처럼 재할당하면 안 됨push( ), pop( ) 같은 함수 사용하면 안 됨filter( ), map( ) 같은 함수로 새 배열 만들고새 배열들을 state에 설정  비선호(배열 변경)선호(새 배열 반환)추가push, unshiftconcat, [...arr] 전개 연산자제거pop, shift, splicefilter, slice교체splice, arr[i] = ... 할당map정렬rever..

문자const [herName, setHerName] = useState('미소'); function MyDogNameChanged( ) {setHerName('은동이');}// herName은 '미소'  숫자const [herAge, setHerAge] = useState(0); function MyDogAgeChanging( ) {setHerAge(6);}// herAge는 0

상위 컴포넌트에서 쓰는거   하위 컴포넌트에서 쓰는거{props.상위컴포넌트의props명},{props.children} boolProp= {true} //boolean arrProp= {['a','b','c']} //배열 objProp= {{name:'코딩젤리', title:'헬로리액트!'}} //객체 funcProp= {() => { alert('알림창'); }}  //함수  />

리액트 라우터 돔(react-router-dom)React로 생성된 SPA 내부에서 페이지 이동이 가능하도록 만들어주는 라이브러리  a태그를 사용하지 않는 이유:a태그를 사용하면, 화면이 새로 로딩이 된다. 이 때 필수적으로 발생하는 화면 깜박임이 사용자의 경험을 떨어뜨리는 요인이 되기 때문에 라우팅으로 부드러운 화면 전환을 꾀하는 것이다.결론:1. a태그쓰면 화면 깜박여서 bad2. 라우팅을 사용하면 화면이 부드러워져서 good   설치하는 방법import {BrowserRouter, Routes, Route } from "react-router-dom"   BrowserRouterhistory API를 활용해 history 객체를 생성history API는 내부적으로 stack 자료구조의 형태를 띄기..

import해서 데이터를 던졌고export해서 데이터를 잡았다.'코딩은 절대 거짓말을 하지 않는다' 라고 하지만나는 정말 틀린게 없었다.. 억울할 정도였다.. 브라우저는 왜 계속 에러를 띄우는지 모르겠고개발자 도구도 왜 자꾸 에러를 띄우는지이해를 할 수가 없었다. 에러나는 부분이 당연히 작성해야 하는'import react from "React" 와"import styled from "styled-component" 였다.안 쓰면 안 썼다고 작동 안 시켜 줄거면서.. 마침 화면 공유로 내 코드를 보고있던 분이 도와주셨다.결론은 내가 styled-components 패키지 설치를 하지 않아서였다;; 터미널 → new Terminal에 가서yarn add styled-components 를 입력해서패키지 설..

사용하는 방법프로젝트 디렉터리에 'node-sass' 설치 scss는 자체로는 웹에서 작동하지 않음(css의 전처리기라서)node-sass패키지로 css로 컴파일 후 css가 웹에서 동작변수, 연산자, 함수, extend, import등을 사용할 수 있어(css에서)코드의 재사용성 및 가독성이 높아지고, 유지보수가 용이 명령어:npm인 경우npm install -g node-sass yarn인 경우$ yarn add node-sass

GlobalStyle- 모든 컴포넌트에 적용해야 할 속성이 존재한다면,전역적으로 지정해주는 스타일  사용법변수 선언→ 백틱(`) 안에 적용받고 싶은 곳 입력ex)const GlobalStyle = createBlobalStyle `          body {       // 모든 컴포넌트에 적용할 속성          }`; export default GlobalStyle   css reset- *크로스 브라우징 이슈를 해결하기 위한 기법(사람마다 쓰는 브라우저가 다르다.누구는 크롬, 누구는 사파리, 누구는 엣지, 파이어폭스...그래서 같은 태그여도 크기가 다르기 때문에그 크기를 맞춰주기 위해 default style을 제공한다.     (*크로스 브라우징 :여러 종류의 웹 브라우저에서 동일한 사용자 ..

태그에 스타일 주는 방법html파일에서 클래스나 아이디를 부여계속 import 해야함유지보수하기 힘듬 style을 사용하여 객체 형태로 부여가독성이 떨어짐 3. css in js모든 파일을 import 해줄 수 있음조건문, 변수 등 다양한 로직을 작성할 수 있음 기본 사용법최상단에 import styled from 'styled-components' 입력→ const 변수 = styled. 표준태그 `      속성: 값;      속성: 값;      속성: 값;    `→ 변수를 표준태그처럼 사용      + 표준태그 말고 함수도 입력할 수도 있다.const 변수 = styled. ('함수')`      속성: 값;      속성: 값;      속성: 값;`

문제 설명철호는 수열을 가지고 놀기 좋아합니다.어느 날 철호는 어떤 자연수로 이루어진 원형 수열의연속하는 부분 수열의 합으로 만들 수 있는 수가 모두 몇가지인지 알아보고 싶어졌습니다.원형 수열이랑 일반적인 수열에서 처음과 끝이 연결된 형태의 수열을 말합니다.예를 들어 수열 [7, 9, 1, 1, 4]로 원형 수열을 만들면 다음과 같습니다.         원형 수열은 처음과 끝이 연결되어 끊기는 부분이 없기 때문에연속하는 부분도 일반적인 수열보다 많아집니다.원형 수열의 모든 원소 elements가 순서대로 주어질 때,원형 수열의 연속 부분 수열 합으로 만들 수 있는 수의 개수를return 하도록 solution 함수를 완성해주세요.  제한사항3 1  입출력 예elementsresults[7, 9, 1, 1..

벌써 질문이 이렇게 많아도 괜찮은 걸까ㅠㅠ  Q1) 리액트에서는 화살표 함수만 써야하는지.Ans) '꼭 그래야한다' 는 아닌데, 화살표 함수가 편하다.        협업할 때는 (화살표 함수를 쓸건지 아닌지) 맞춰야 한다. Q2) index.css 파일 내용을 지우고 시작해도 되는건지.Ans) 본인 마음이다. Q3) 강의에서는 태그를 사용했고 나는 아니고       태그를 사용하지 않으면 출력이 안 될 때도 있는데       맞다고 쳐야하는지.Ans) 맞다고 틀리고 하기 보다는 시멘틱 태그를 따르는 것이 좋다.