아싸지만 1일1글 하고싶어

목차 And 연산자 저번에 변수에 따라 레이아웃이 달라지는 삼항 연산자를 포스팅했었는데, 삼항연산자 목차 어우.. 저녁을 너무 많이먹어버렸따... 삼항 연산자 삼항 연산자는 if else를 다르게 표현한 코드이다. 으음.. 예로 들어 if( toggle == True) console.log("True!"); else console.log("False!"); toggle이.. sirong.tistory.com import {useState} from 'react'; export default function App () { const [toggle, setToggle] = useState(false); function handleOnClick(){ setToggle(!toggle); } return ( O..

목차 역시 학은 쉽고 습은 어렵다. 그래도 해결했으니 다행이다. "학(學)과 습(習)"의 차이를 아시나요? 오늘도 생뚱맞은 질문으로 포스팅을 시작해 보겠습니다. "학(學)과 습(習)"의 차이를 아시나요? ... blog.naver.com Slick Slick은 createReducer와 createAction 두 개의 함수를 createSlice 하나의 함수로 관리하는 방식이다. 설치 포스트 한지 좀 됐으니 설치부터 다시 가보자. 터미널에 입력하면 된다. npm i redux redux 설치 명령어이다. npm i @reduxjs/toolkit redux 코드를 간편화 시켜주는 toolkit 설치 명령어이다. npm i react-redux redux를 react에 접목시켜주는 패키지 설치 명령어이다. ..

목차 제목을 쓸 때 해당 함수(패키지) 명을 써야 사람들이 들어오기 편할까, 해당 오브젝트가 하는 일을 적어야 들어오기 편할까? 으음... 내가 뭔가 모르는데 이러한 툴을 쓰고 싶어서 검색한다면 함수나 패키지 명보다는 하는 일을 적는게 더 편할 것 같긴 한데 갑자기 제목을 어떻게 써야 할지 고민됐다. 익숙했던 것을 돌아볼 수 있다는 건 좋은 일인 것 같다. PropTypes 금액 데이터를 받았는데 숫자가 아닌 문자로 다른 자료형으로 되어있다. 그래서 계산식에서 에러가 떴는데 어디서 문제가 생겼는지 알려주는 것, 그것이 PropTypes의 용도이다. 코드 //App.js import React from "react"; import PropTypes from 'prop-types'; function User..

목차 쿠키 쓰는 법에 대해 적으려 했다가 개념을 먼저 적었다 후후... 설명하는 방식으로 블로그를 쓰니 이렇게 개념을 짚고 넘어가게 된다. 쿠키와 세션 목차 쿠키 사용법을 포스팅하려는데 쿠키와 세션의 차이점에 대해 명시를 하고 적는 게 좋다고 생각되었다. 쿠키와 세션 HTTP 목차 CORS와 Representational를 알아가면서 계속 나왔던 것은 HTTP 였다. sirong.tistory.com React cookie 쿠키에 대해 알아보았으니, 쿠키를 쓰는 법에 대해 알아보자! npm install react-cookie 일단 패키지를 다운받자 import React from 'react'; import ReactDOM from 'react-dom'; import { CookiesProvider }..

목차 오랜만에 포트폴리오를 만지니깐 포스팅할 아이템도 더 눈에 띈다. 잠시 거리를 두고 보는 것은 이러한 장점이 있다. createElement 태그 스타일 변경 일단 createElement 함수에 대해 모르는 사람은 알아보고 오자! JS로 태그 추가하기 목차 저번 포스트에서 태그 추가하는 법을 지나치듯 짚고 넘어갔었다. SVG Z-index 목차 SVG SVG는 백터 로 이미지 를 표현하는 태그 이다. 이런 식으로 html 그리기 Svg / Canvas SVG 데이터 전달용을 목표 sirong.tistory.com 글이 80개 정도 쌓이니깐 슬슬 기초적인 건 다 적어놨다고 생각하는 게 편하다. 인용할 때도 그렇고, 포스팅 주제 찾을 때도 그렇고. 함수로 element를 만들었을때 해당 태그 스타일을 ..

목차 styled components 심화편 React의 styled components 심화 편이다. 설치와 기본적 사용은 이 글을 참고하자. styled component 목차 ... styled-component에 대해 쓸려고 기본적 구글링을 하는데 혼란스러웠다... 뭔가.. 앞뒤가 맞지 않는 정보가 많았다... 그만큼 내 글이 더 도움이 된다는 뜻이지!! (무~~ 야~~~ 호~~~) 내일 포스트 sirong.tistory.com //App.js import React from "react"; import styled from 'styled-components'; function App() { return ( ); } const D_styled = styled.div` display: inline-..

목차 드디어 마지막 Redux Toolkit이다아아 Redux Toolkit Redux Toolkit은 Redux를 좀 더 간편하게 만들 수 있는 도구이다. 으음.. react로 비유하자면 hook 같은 느낌! life Cycle을 이해하고 쓴다면 코드를 엄청 줄일 수 있는 강력한 도구! 설치 일단 터미널을 통하여 npx create-react-app my-app --template redux 터미널에 해당 명령어를 입력하여 redux를 포함한 react 프로젝트를 생성한다. npm install @reduxjs/toolkit 이번에는 toolkit두 설치해주자! 코드 이번 코드는 바로 전 Redux-react에서의 코드를 toolkit으로 얼마나 효율적으로 바꿀 수 있는지가 핵심임으로 저번 코드에서 가..

목차 당신에게 Redux는 필요 없을지도 모릅니다. 이 글은 Dan Abramov의 You Might Not Need Redux를 번역한 글입니다. medium.com Redux 공식 홈페이지에 올라와 있는 글 중 하나이다. 구글링을 하면서 리덕스에 관한 로드맵을 봐서 어렵게 생각하고 있었는데, 그냥 공식 홈페이지 글과 같이 가볍게 접근하는 게 좋을 것 같다. Redux by react 오늘은 react로 redux를 사용해보자, redux toolkit를 쓰면 간편한 코드로 사용할 수 있지만, 구성 이해를 위해서 toolkit을 안 쓴 쌩코드로 redux를 공부 한 다음 toolkit을 포스팅할 거다. 설치 npm install --save react-redux 터미널에 해당 명령어를 입력하여 reac..