開發時習之

해석과 풀이는 개인적인 부분이기 때문에 참고만 하시길 바랍니다. 다른 접근 및 풀이는 언제나 환영합니다. 댓글로 남겨주세요. 1. 문제 Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M. Symbol Value I 1 V 5 X 10 L 50 C 100 D 500 M 1000 For example, 2 is written as II in Roman numeral, just two ones added together. 12 is written as XII, which is simply X + II. The number 27 is written as XXVII, which is XX + V + II. Roman ..

해석과 풀이는 개인적인 부분이기 때문에 참고만 하시길 바랍니다. 다른 접근 및 풀이는 언제나 환영합니다. 댓글로 남겨주세요. 1. 문제 Given an integer x, return true if x is a palindrome, and false otherwise. * palindrome [pælɪndroʊm]: 회문(回文: madam이나 nurses run처럼 앞에서부터 읽으나 뒤에서부터 읽으나 동일한 단어나 구) Example 1: Input: x = 121 Output: true Explanation: 121 reads as 121 from left to right and from right to left. Example 2: Input: x = -121 Output: false Explanat..

해석과 풀이는 개인적인 부분이기 때문에 참고만 하시길 바랍니다. 다른 접근 및 풀이는 언제나 환영합니다. 댓글로 남겨주세요. 1. 문제 Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target. You may assume that each input would have exactly one solution, and you may not use the same element twice. You can return the answer in any order. Example 1: Input: nums = [2,7,11,15], target = 9 Out..

앞서 만든 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의 생명주기 react의 component에는 생명주기가 있는데 컴포넌트가 표시되고 사라지는 순간까지를 말한다. 컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생한다. mount (컴포넌트가 표시될 때) → update (컴포넌트 내부의 요소가 업데이트될 때) → unmount (컴포넌트가 사라질 때) useEffect 는 위 3가지 시점중 하나를 골라서, 해당 시점에 특정한 함수가 실행되도록 하는 Hook이다. 1. mount useEffect(컴포넌트가 표시될 때 실행할 함수, []) 화면이 로딩되고 나서 3초 뒤에 변수의 값이 변하는 예제 import React, { useState, useEffect } from 'react' function Loading() { c..

자바스크립트에서의 불변성이란? - 원시형 (string, number, boolean 등) 데이터들은 모두 불변성을 유지한다. (값이나 상태를 변경할 수 없는 것) let a = 1; let b = a; //깊은 복사 b = 2 console.log(a) //1 - 원시형 데이터들은 복사가 이루어질 때, 그 값 자체를 복사해서 새로운 메모리 주소에 할당한다. a → 0x000001 (메모리 주소) - 1 (값) b → 0x000002 (메모리 주소) - 1 (값) - a 변수를 b 에 복사한 이후에, b 를 수정해도 a 가 변경되지는 않는다. - 수정된 b 자체 또한 새로운 메모리 주소에 값이 할당된다. (b 수정 후) a → 0x000001 (메모리 주소) - 1 (값) 0x000002 (메모리 주소)..