IT 개발 블로그

프로그래머스 코딩테스트 광탈 방지 강의 내용을 스크랩 해 온것이다. https://programmers.co.kr/ 1. 구조 분해 할당을 이용한 변수 swap ES6의 구조 분해 할당 문법을 사용하여 두 변수를 swap 할 수 있다. let a = 5, b = 10; [a, b] = [b, a]; console.log(a, b); // 10 5 2. 배열 생성으로 루프 제거하기 단순히 범위 루프를 돌고 싶다면 다음과 같은 코드를 작성한다. let sum =0; for(let i=5; i k + 5) .reduce((acc, cur) => acc + cur, 0); 3. 배열 내 같은 요소 제거하기 set을 이용할 수 있다. const names = ['Lee', 'Kim', 'Park', 'Lee', ..

한번은 규칙을 기록해보면 좋을것 같아서 정리해봤다..! ■ 대괄호 [ ] list를 나열할때 list의 인덱스를 지정해줄때 ex) array[0], array[1] ■ 중괄호 { } dictionary를 만들때 ex) { "key" : "value" } style tag를 적용할때 ex) .style { color: "red" } 특정 function에 대해 정의해줄 때 ex) function () { 실행 할 내용 } 반복문(for, while), 조건문(if) 뒤에 실행할 내용을 적어 줄 때 ex) for (i=0; i

# state - 컴포넌트 내부에서 바뀔 수 있는값 - 두가지의 state가 있다. 클래스형 component가 가지고 있는 state 함수형 component가 가지고 있는 useState라는 함수를 통해 사용하는 state # 클래스형 component component에 state를 설정할 때는 constructor 메서드를 사용한다. 클래스형 컴포넌트에서 constructor를 작성할때는 반드시 super(props)를 호출해줘야 한다. 이 함수가 호출되면 현재 클래스형 컴포넌트가 상속받고 있는 리액트의 component 클래스가 지닌 생성자 함수를 호출해준다. 그 다음에 this.state값에 초깃값을 설정했다. component의 state는 객체 형식이여야한다. render 함수에서는 현재 ..

예전에 js로 만든 코드를 살짝 바꿔서 리액트로 만들어보고자 한다. 살짝만 바꾸는건데도 에러가 많이 떠서 아..아직 리액트가 익숙하지가 않구나 했다... 처음에 복붙했는데 이러면 리액트를 사용하는 의미가 있나 싶어 state를 사용하기로! # 순서 우선은 components 폴더에 clock파일을 하나 만들어준다. state에 timer와 setTimer를 넣어주고, 초기값은 "00:00:00" 상태로 만들어줄것이다. 현재시간을 의미하는 currentTime 함수를 만들고, 이 함수에 Date 내장객체를 이용해서 시,분,초를 불러온다. 그리고 setTimer 값에 변화된 hours, minutes, seconds를 넣어준다. startTimer라는 함수를 통해서 1초마다 시간 데이터를 불러오는 setIn..

localstorage를 이용하면 된다는것은 알겠는데 어떻게 사용해야 하는지 몰라 헤매던 끝에 방법을 찾았다..! window로도 불러오고 별짓 다했는데 소용이 없었다. 물론 내가 잘못사용해서 그런걸지도... npm문서를 읽어보다 react 전역라이브러리 중 하나인 recoil을 이용하기로 했다 recoil- persist !! 사용방법도 나 같은 초보자가 적용하기에 엄청 쉽다..! # localstorage 데이터를 만들고 새로고침을하면 localstorage에 저장된 데이터가 불러져 나온다. F12 개발자 도구 => Application => Local Storage 로 가면 key와 value값으로 저장 된다는것을 알 수 있다. # recoil을 이용해 state 저장하기 우선 atom에 persi..

// CreateToDo.tsx import { useForm } from "react-hook-form"; import { useRecoilValue, useSetRecoilState } from "recoil"; import { categoryState, toDoState } from "../atoms"; interface IForm { toDo: string; } function CreateToDo(){ // component를 가져올때 다시 사용하는것이아니라 // 수정할수 있도록만 해주면됨. const setToDos = useSetRecoilState(toDoState); const category = useRecoilValue(categoryState); const {register,handl..

// App.tsx import React from 'react'; import { createGlobalStyle } from 'styled-components'; import {darkTheme,lightTheme} from "./theme" import ToDoList from './components/ToDoList'; const GlobalStyle = createGlobalStyle` @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400&display=swap'); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, bl..

* selector를 이용해 minutes hours 변환기 만들기 // App.tsx import { useRecoilState } from "recoil"; import { minuteState, hourSelector } from "./atoms"; function App() { // useRecoilState는 atom의 값에 더해서 // atom을 수정할 함수까지 준다 const [minutes, setMinutes] = useRecoilState(minuteState); const [hours,setHours] = useRecoilState(hourSelector); // atom이나 selector로 useRecoilState를 쓸때 결과 // array의 첫번째 item은 atom의 값이거..

# react-hook-form 리액트에서 form을 다룰때 편리한 라이브러리. form 작업시 가장 좋은 방법 react-hook-form을 사용하지 않는다면 하나의 기능을 만들고 그 유효성(validation)에 대해 직접 확인하기 위해 아래와 같이 긴 코드로 확인을 해봐야한다. import React, { useState } from "react"; function ToDoList(){ const [todo, setTodo] = useState(""); const [todoError,setTodoError] = useState(""); const onChange = (event:React.FormEvent) => { const { currentTarget:{value}, } = event; setT..

# Recoil? => react.js에서 사용할 수 있는 state management library 한마디로 state대신. # necessity of state 1. recoil을 사용하지 않았을 때, app에서 만든 light/dark mode에 대한 toggle을 coins에서 사용하기 위해 app => router => coins 순서로 보내준다. chart에서도 사용하기 위해서는 app => router => coin => chart 순서로 보내준다. function App() { //1. lightmode/darkmode상태 대한 state를 만든다 const [isDark, setIsDark] = useState(false); //2. 상태를 변경시켜줄수 있는 toggle function..