jyoon dev log

Cmarket (Hooks 버전) Hooks를 이용해 상태를 다루는 것이 목적입니다. 또한 컴포넌트끼리 상태를 주고받는 과정을 연습할 수 있습니다. TODO: 장바구니에 추가 및 상품 개수 업데이트 다음과 같이 작동해야 합니다. 메인 화면에서 [장바구니 담기] 버튼을 누른 후, 장바구니 페이지로 이동하면 상품이 담겨있어야 합니다. 내비게이션 바에 상품 개수가 즉시 표시되어야 합니다. App.js import React, { useState } from "react"; import Nav from "./components/Nav"; import ItemListContainer from "./pages/ItemListContainer"; import "./App.css"; import { BrowserRou..

🔖 Props 활용하기 Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를 내려줄 수 있다. 내려준 props 값에 따라서 컴포넌트를 렌더링하는 것도 가능하다. 1) Props로 조건부 렌더링하기 //삼항연산자를 활용해 컴포넌트에 skyblue 라는 props가 있는지 확인하고, //있으면 배경색으로 skyblue를, 없을 경우 white를 지정해주는 코드. const Button = styled.button` background: ${ (props) => props.skyblue? "skyblue" : "white"} `; import styled from "styled-components"; import GlobalStyle from "./GlobalStyle"; //..

🔖 CSS in JS 라이브러리란? CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있다. 현재 CSS in JS 라이브러리 중 가장 인기 있는 라이브러리는 Styled Components 이다. 🔖 Styled Components 설치하기 // 1. 터미널에 아래의 명령어 한 줄을 입력한다. # with npm $ npm install --save styled-components # with yarn $ yarn add styled-components // 2. package.json에 다음 코드를 추가(권장하는 편) // 아래의 코드를 추가하면 여러 버전의 St..

📌 Component Driven Development (CDD) : 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 CDD 방법을 활용하여 UI 를 구축하는 사이트 1) UN 2) BBC Storybook latest--5d28eb5ee163f6002046d6fb.chromatic.com 📌 CSS 전처리기(CSS Preprocessor) : CSS가 구조적으로 작성될 수 있게 도움을 주는 도구 SASS (Syntactically Awesome Style Sheet) CSS를 확장해 주는 스크립팅 언어 자바스크립트처럼 특정 속성(ex. color, margin, width 등)의 값(ex. #ffffff, 25rem, 100px 등)을 변수로 선언하여 필요한 곳에 선언된 변수를 적용 복되는 코드를 한 ..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 event.target.value로 사용자가 어떤것을 사용했는지 알 수 있다.

[노마드코더] React JS로 영화 웹 서비스 만들기 HTML 삽입 미리보기할 수 없는 소스 https://codepen.io/mellomello-made/pen/yLKLdLM [React] State Practice ... codepen.io 1) input 옆에 쓰는 label의 for 속성을 react에서 htmlFor로 표시한다. 2) input 값은 controlled component로 만들자. controlled component : Input 태그 나오면 value, onChange 속성을 붙여서 상태를 관리하자. 3) Input의 disabled 속성은 input을 비활성화 시킨다. 4) class는 className으로 바꿔쓴다 5) setState() 에 함수를 할당하는 것은 잘 활..

function App() { const [counter, setCounter] = React.useState(0); const onClick = () => { //setCounter(5); setCounter((current) => current + 1); {/*state를 세팅하는 데는 2가지 방법이 있다. 1) 직접 할당 :setState(state +1) 2)함수를 할당:setState(state => state +1) (함수의 첫번째 인자는 현재 state 이다) 현재 state랑 관련이 없는 값을 새로운 state로 하고싶은 경우에는 (1), 현재 state에 조금의 변화를 주어서 새로운 state를 주고 싶은 경우에는 (2)*/} }; return ( Total clicks: {counter..

#2.6 JSX part Two //JSX를 브라우저가 온전히 이해하지 못하므로 이해할 수 있게 설치하기. https://unpkg.com/@babel/standalone/babel.min.js //바벨을 가져온 뒤 script type="text/babel"로 적어줘야 인식한다. 가 JSX 코드를 감싸고 있는 기존의 script 태그이다. //JSX는 자바스크립트를 확장한 문법 보통의 HTML과 비슷. 그러나 property를 HTML 태그의 속성처럼 적으면 됨(props == propertys) const Title = ( console.log("mouse enter")}> Hello I'm a span ); #3.0 Understanding State 리액트가 아닌 경우, 일반 자바스크립트를 쓴 브..

순수함수란? 동일한 input에 동일한 output이 나와야한다. 즉 Side Effect가 없는 함수로 외부 상태를 바꿀 수 없는 함수이다. [❗️]Math.sqrt(x)는 전달 인자 x의 제곱근 값을 구하는 메서드입니다. 주어진 인자에 대해 항상 동일한 결과값을 리턴하므로 순수 함수입니다. [❗️] Ajax 요청은 외부 상태를 바꾸기 때문에 해당 기능을 가진 함수는 순수 함수가 아닙니다. A. sum 함수가 외부의 변수인 c를 사용하였습니다. 이 경우 인자로 받아오지 않은 변수 c가 변함에 따라 함수의 결괏값이 달라지므로 순수 함수가 아닙니다. B. sum 함수가 내부에서 외부의 변수인 c를 변경하였습니다. 외부 상태에 영향을 미치는 Side Effect를 가지므로 순수 함수가 아닙니다. C. 외부 ..

cc: nomad coders ReactJS로 영화 웹 서비스 만들기 #2.3 Events in React vanilla.html에 적은 버튼 이벤트리스너를 index.html에서 React로 4줄의 코드를 한번에 대체했다. React JS import React JS는 반드시 필요하다. React JS가 element를 생성하고 event listener를 더하는 것을 도와준다. React JS가 Interactive power를 가지고 있기 때문이다. 어플리케이션이 아주 인터랙티브하도록 만들어주는 library 엔진과 같다. ReactDom import React element들을 가져다가 HTML로 바꾸기 위해 ReactDom import library 또는 package. 모든 react elem..