IT 개발 블로그

예전에 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..

# Typescript? - js를 기반으로 한 프로그래밍 언어로 js와 거의 똑같은데 거기에 새로운 기능만 살짝 추가했다 - strongly-typed한 언어로 프로그래밍 언어가 작동하기전에 type을 확인한다. 예를 들어 원래 js문법은 const plus = ( a,b ) => a+b; 이렇게만 해주어도 오류가 나지 않는다. 타입스크립트를 사용하면 const plus = ( a:number , b:number ) => a+b; 이렇게 a와 b뒤에 숫자라고 타입까지 명명해줘야한다. # 필요성 const user = { firstName: "minJi" lastName: "Kim" }; console.log(user.name); 콘솔에 출력했을때, js 는 사용자에게 undefined라고 보여줄 것이다..

# 구현하고자하는것 theme을 이용해서 darkmode/lightmode를 만들것 # theme? 모든 색상들을 가지고 있는 object # 사용법 index.js에서 ThemeProvider를 import 해준다. App의 바깥쪽에 ThemeProvider를 만들어준다. theme이라는 props를 사용할것이고, 우선은 빈칸으로 해준다. darkmode/lightmode 에 관한 theme을 만들것이고 이 둘의 property 내용 (이름)은 같아야한다. 만약 darkmode에서 textcolor를 사용했다면, lightmode에서도 textcolor를 사용해야한다. darkmode/lightmode 는 서로 반대되는 색으로 textcolor와 backgroundcolor를 정했다. // index...

보호되어 있는 글입니다.