공부기록용

🔴useState 🔴일반적인 방식과 함수형 업데이트의 비교 🔻무엇이 다른가 🔻왜 다른 방식을 취하는가 useState useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해줍니다. const [state, setState] = useState(initialState_초기값); useState 라는 함수가 배열을 반환하고, 이것을 구조 분해 문법으로 꺼내놓은 모습이며, 우리는 state를 변수로 사용했고, setState를 이용해서 state 값을 수정할 수 있다. state가 원시 데이터타입이 아닌 객체 데이터 타입인 경우에는 불변성을 유지해줘야 한다. 함수형 업데이트 setState를 사용하는 방식에는 우리가 알고 있는 방식이 아닌 또 다른 방식이 있습니다. 함수형 ..

🔴GlobalStyles(전역 스타일링) 🔴Sass 소개, Nesting 🔴css reset 📌styled components는 컴포넌트 내에서만 활용 GlobalStyles(전역 스타일링) 프로젝트를 아우르는, 공통적으로 들어가야 할 스타일을 적용하는 것으로 전역적으로(globally)’ 스타일을 지정한다고 표현한다. 그럴 때 적용하는 방법이 바로 전역 스타일링이다. import React from "react"; import styled from "styled-components"; function TestPage(props) { return ( {props.title} {props.contents} ); } const Title = styled.h1` /* 전역으로 뺌_GolobalStyle fon..

🔴CSS-in-Js 🔴styled-components CSS-in-Js CSS-in-JS방식이란, 단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식입니다. 순수한 CSS코드를 우리가 아니라, 자바스크립트를 이용해서 CSS코드를 만들어내는 것 styled-components styled-components는 우리가 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지 패키지란, React에는 없는 기능이지만 우리가 추가로 가져와서 사용할 수 있는 써드파티 프로그램. 패키지들은 누군가에 의해 만들어진 것으로 npm에 모여있다. yarn 에서 styled-components 설치하기 vscode 터미널에서 아래 명령을 입력해서 패키지를 설치 yarn add ..

https://nomadcoders.co/javascript-for-beginners/lobby 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co 🔴Math 🔴createElement() 🔴.appendChild() Math Math.random()_0보다 크거나 같고 1보다 작은 무작위 숫자(random number)를 반환합니다. 임의의 부동 소수점을 반환한다. 반환된 부동 소수점은 0부터 1 미만이다. 즉, 0은 포함되지만 1은 포함되지 않는다. Math.round()_인수로 전달받은 값을 소수점 첫 번째 자리에서 반올림하여 그 결괏값을 반환합니다. 인수의 소수점 이하를 반올림한 정수를 반환한다. Math.r..

https://nomadcoders.co/javascript-for-beginners/lobby 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co 🔴setTimeout / setInterval 🔴Date 🔴padStart() 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링(scheduling a call)'이라고 합니다. 호출 스케줄링을 구현하는 방법은 두 가지가 있습니다. setTimeout() 을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법 setInterval() 을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법 setTimeout let timerId..

https://nomadcoders.co/javascript-for-beginners/lobby 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co 🔴로컬스토리지를 활용해서 유저의 정보 유무로 페이지 바꾸기 local storage Window.localStorage - Web API | MDN localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. localStorage는 sessionStorage와 비슷하지만, localStorage의 데이 developer.mozilla.org setItem() loca..