開發時習之

앞서 만든 TodoList를 styled-components를 활용하여 꾸며보자. 테마 설정하기 컬러 팔레트를 하나 선택하여(https://colorhunt.co/) 해당 색상으로 palatte에 등록한다. (theme provider 사용) /styles/theme.js const palette = { yellow: '#F9F9C5', green: '#D9F8C4', orange: '#FAD9A1', red: '#F37878', } const common = { flexCenter: ` display: flex; align-items: center; justify-content: center; `, flexAround: ` display: flex; align-items: center; justify-..

컴포넌트 구성 구성은 components아래 3개 폴더와 각 폴더별 index.jsx, style.js 파일을 생성한다. TodoItem은 각각의 할 일 요소가 담기고, TodoList는 할 일 리스트, TodoAdd는 새로운 할 일을 등록한다. /TodoAdd/index.jsx - onChange를 통해 userInput을 받을 수 있도록 한다. import React, { useState } from 'react'; function TodoAdd() { const [userInput, setUserInput] = useState({ date: '', content: '' }); const userInputHandler = (e) => { const { name, value } = e.target; s..

React에 스타일 적용하기 전체 컴포넌트에 공통으로 적용하기 위한 css와 특정 컴포넌트에만 적용하기 위한 별도의 css로 작성할 필요가 있고 또 컴포넌트 내부의 값 (props)에 따라 스타일을 다르게 하기 위해서 css module 혹은 styled components가 필요하다. 1. SCSS를 사용한 다양한 사이즈 버튼 만들기 Button 이름의 scss파일을 만든다.(large, mediun, small 사이즈의 스타일을 가진다.) 컴포넌트에서 Button.scss를 사용하도록 불러오고 버튼의 사이즈를 받을 수 있도록 props를 사용한다. App.jsx에서 3가지 사이즈를 넘겨준다. /styles/Button.scss $main-color: #3d3dff; // 자주 사용되는 스타일은 그룹으..

useRef란? - 특정한 요소의 id처럼 활용 할 수 있고 변수를 만드는 것에도 사용할 수 있는 리액트 훅이다. 사용방법 1. 변수선언시 useRef(초기값)를 이용한다. const 변수명 = useRef(초기값) 2. 특정 jsx요소에 ref={변수명} 형태로 할당해준다. 3. 변수에 접근은 변수명.current를 통해서만 가능하다. 사용예제 1. 로그인 화면예제 import React, { useRef } from 'react'; function UseRef() { const userId = useRef(''); const userPw = useRef(''); const login = () => { console.log(userId.current.value); console.log(userPw.cu..

이벤트 처리 브라우저 이벤트(이벤트 핸들러) 리액트에서 이벤트 함수를 만들 때 아래와 같은 규칙이 있다. 1. jsx 형태로 {} 안에 이벤트 핸들러를 명시한다. 2. 이벤트 핸들러는 () 없이 함수명만 (즉, 함수 그 자체를) 명시한다. 3. 카멜 케이스를 사용하여 이벤트 속성을 명시한다. 4. 함수를 실행할 때, 인자를 전달하면서 실행하고 싶다면 화살표 함수 형태로 작성한다. (화살표 함수를 작성하는 것은 함수를 실행하는 것이 아니라 정의하는 것이기 때문이다.) 클릭하면 alert 이벤트 활용 아래 코드는 이벤트 핸들러를 활용해서, button 을 클릭하면 메뉴가 표시되고 다시 클릭하면 닫히는 컴포넌트이다. 1. 클릭여부를 저장하는 state를 만든다. 2. 해당 state 값을 토대로 요소를 표시한..

React의 작동원리 Single Page Application - 하나의 html 파일만 보여주고, 내부의 요소는 모두 자바스크립트를 활용해서 변경시키는 것 - 페이지가 변경될 때마다 무조건 새롭게 html, css 파일을 표시해야했던 예전 방식보다 훨씬 효율적! Virtual Dom with Diff Algorithm - React 는 가상으로 html 요소들을 생성하고 (가짜 DOM), 현재 화면에 표시되는 html 요소들 (진짜 DOM) 과 비교해서, 달라진 부분만 다시 그리는 방식으로 렌더를 진행 요소가 달라질 때마다 새롭게 화면을 다시 그리는 것이 아니라, 달라진 부분만 알아서 React 가 다시 그려줌 Component - React 는 component 라는 것을 작성해서, 조합하는 방식으..

메가바이트 스쿨 FE4기 2차 과제 수행 기록 🎬 영화검색 OPEN MOVIE DATABASE (OMDB) API를 활용한 검색기능 구현 참고: https://omdbapi.com/ 기본 10건씩 검색결과만 조회되는 API이기 때문에 저장, 삭제기능은 없음 ❗ 필수 영화 제목으로 검색 가능하고 검색된 결과의 영화 목록이 출력돼야 합니다. jQuery, React, Vue 등 JS 라이브러리와 프레임워크는 사용하지 않아야 합니다. 스타일(CSS) 라이브러리나 프레임워크 사용은 자유입니다. ❔ 선택 한 번의 검색으로 영화 목록이 20개 이상 검색되도록 만들어보세요. 영화 개봉연도로 검색할 수 있도록 만들어보세요. 영화 목록을 검색하는 동안 로딩 애니메이션이 보이도록 만들어보세요. 무한 스크롤 기능을 추가해서..

Date 개요 new Date()를 통해 반환되는 인스턴스를 '타임스탬프'(Timestamp)라고 합니다. 날짜,시간까지 표시함 const date = new Date() console.log(date) // 'Sat Jan 14 2023 22:49:02 GMT+0900 (Korean Standard Time)' console.log(typeof date) // 'object' 문자데이터처럼 생겼지만 오브젝트타입임 console.log(typeof 'Sat Jan 14 2023 22:49:02 GMT+0900 (Korean Standard Time)') // 'string' Date() 생성시 타임스탬프 형식으로 값을 넣어 타임스탬프를 초기화할 수 있음 const d1 = new Date(2022, 11..

Math Math.abs() 절대값(absolute)를 의미 주어진 숫자의 절댓값을 반환합니다. console.log(Math.abs(2)) // 2 console.log(Math.abs(-2)) // 2 Math.ceil() 주어진 숫자를 올림해 정수를 반환합니다. console.log(Math.ceil(3.1415926535)) // 4 const lastPageNum = Math.ceil(totalPage/10) Math.floor() 주어진 숫자를 내림해 정수를 반환합니다. console.log(Math.floor(3.1415926535)) // 3 Math.round() 주어진 숫자를 반올림해 정수를 반환합니다. const num1 = 3.141 const num2 = 3.768 console...

Number .toFixed() 숫자를 지정된 고정 소수점 표기(자릿수)까지만 표현하는 문자로 반환합니다. 문자타입으로 반환하기에 숫자타입으로 변경시 parseFloat() 사용해야 함 const num = 3.1415926535 console.log(num.toFixed(2)) // '3.14' console.log(parseFloat(num.toFixed(2))) // 3.14 .toLocaleString() 숫자를 현지 언어 형식의 문자로 반환합니다. 숫자데이터에 붙여서 사용한다 const num = 1000000 console.log(num.toLocaleString()) // '1,000,000' console.log(`${num.toLocaleString()}원`) // '1,000,000원'..