profile
TIL 기록 블로그 :: 문제가 있는 글엔 댓글 부탁드려요!
태그 목록
전체보기 (121)React(38)django(20)Backend(19)JavaScript(18)python(16)hooks(12)nodejs(9)redux(7)프로젝트1차(6)typescript(6)git(6)github(5)express(5)클론코딩(4)graphql(4)Crawling(4)Database(3)CSS(3)vscode(3)scss(3)JWT(3)npm(3)CRUD(3)shell(3)CRA(2)mysql(2)gatsby(2)html(2)http(2)TIL(2)인증인가(2)노마드코더(2)package.json(2)aws(2)Module(2)예외처리(2)beautifulsoup(2)styled components(2)webpack(2)authentication(2)ESLint(2)Prettier(2)nextjs(2)bcrypt(2)authorization(2)useRef(2)Custom Hooks(2)&&(1)클로저(1)setState(1)is not a function(1)Node(1)v8(1)front end(1)ORM(1)async(1)비동기(1)가상환경(1)vue.js(1)error(1)AWS S3(1)oAuth(1)pymysql(1)SSR(1)useCallback(1)메모이제이션(1)code 명령어(1)destructuring(1)useEffect(1)useState(1)useContext(1)useMemo(1)useReducer(1)status code(1)iamport(1)transform(1)transition(1)Fetch(1)blog(1)yarn(1)prefetch_related(1)set(1)import(1)package(1)sys.modules(1)sys.path(1)install(1)contextAPI(1)data structure(1)rebase(1)callback(1)fs(1)static file folder(1)express-handlebars(1)크로스브라우징(1)소수점(1)templete engine(1)Synchronous & Asynchronous(1)null(1)undefined(1)Virtual Environment(1)conda 명령어(1)function parameters(1)try except(1)core module(1)POST method(1)built-in modules(1)asterisk(1)URL Parameters(1)unpacking(1)Cross Browser Testing(1)connect()(1)유동라우터(1)Query parameters(1)AqueryTool(1)역참조(1)related_name(1)HashMap(1)정참조(1)package list(1)상태코드(1)결제(1)dataset(1)forwardRef(1)not defined(1)reference error(1)createReducer(1)github blog deploy(1)github reset(1)grapyql(1)surge(1)createAction(1)graphDB(1)암호화(1)pip(1)Token(1)ref(1)interface(1)life cycle(1)정규표현식(1)rds(1)async await(1)Absolute Path(1)Relative Path(1)router(1)miniconda(1)document.js(1)HTTPie(1)git remote(1)Request(1)Response(1)selenium(1)env(1)icon(1)coding convention(1)spa(1)웹 크롤링(1)nodemon(1)erd(1)node sass(1)tofixed(1)beautifulsoup4(1)데이터구조(1)parseFloat(1)Sync(1)queryset(1)gitignore(1)try catch(1)higher-order-component(1)useImperativeHandle(1)code convetion(1)useDebugValue(1)비동기함수(1)input auto focus(1)gh-pages(1)getInitialProps(1)models(1)salting(1)useLayoutEffect(1)프로젝트공유(1)GNB(1)flow(1)create repository(1)resetcss(1)version control system(1)CSS pre-processor(1)라우트(1)animation(1)git merge(1)storybookjs(1)squash(1)fontawesome(1)소스코드빌드(1)git stash(1)리액트기본세팅(1)key stretching(1)input outline(1)selectrelated(1)VCS(1)에러생성자(1)로그인(1)Immer(1)promise(1)defualtValue(1)리덕스(1)create react app(1)tutorial(1)decorator(1)js(1)frontend(1)MacOS(1)context(1)HoC(1)Sass(1)cors(1)react.js(1)tree(1)typeError(1)

리덕스+리액트 Redux with React # immer 사용하기

객체, 배열의 불변객체 유지하기 객체 : 전개연산자 사용(...) 배열 : 전개연산자 사용(...), concat, filter, map 등 함수사용 (push, splice등 인덱스 직접 수정 안됨!) 리덕스나, state를 객체로 변경하게 되면 아래와 같은 코

약 3시간 전
·
0개의 댓글

리덕스+리액트 Redux with React #5 createReducer()

리덕스 툴킷 문서-createReducer리듀서를 작성하다보면 switch 문으로 작성하게 되는데 createRedicer()는 switch문 보다 더 단순한 구조로 리듀서를 작성하도록 도와주는 함수다.

약 4시간 전
·
0개의 댓글

React Hooks #12 Class-Component를 고려한 커스텀 훅

기존 클래스형 컴포넌트에서 커스텀 훅을 사용할 수 있는 방법고차 컴포넌트(이하 HOC) or 랜더 속성값(render-props) 를 사용하여 클래스형 컴포넌트에서 커스텀 훅 사용참고 : 책 : 실전 리액트 프로그래밍/이재승 저

약 14시간 전
·
0개의 댓글

React Hooks #11 Class-Component life-cycle, hooks로 구현하기

componentDidMount() 보다 먼저, 최초 1회만 실행되어야 한다.useEffect로 componentDidMount() 구현하기(https://velog.io/@hwang-eunji/React-Hooks-3-useEffect\[useEffect로

약 14시간 전
·
0개의 댓글

React Hooks #10 useLayoutEffect(), useDebugValue()

useEffect() 는 비동기useLayoutEffect() 는 동기useLayoutEffect() 훅의 로직에서 연산이 많으면 브라우저가 먹통이 될 수 있으니 주의!앵간하면 useEffect() 사용하고, 렌더링 직후 돔요소의 값을 읽는 경우 useLayoutEff

약 15시간 전
·
0개의 댓글

React Hooks #9 useImperativeHandle()

리액트 공식문서 - useImperativeHandle(https://ko.reactjs.org/docs/hooks-reference.html자식컴포넌트의 메서드 호출할 수 있도록 한다.forwardRef() 와 함께 사용한다.부모 컴포넌트에서 입력한 ref객

약 15시간 전
·
0개의 댓글

React Hooks #8 useMemo(), useCallback()

메모이제이션(memoizaition) \- 컴퓨터 프로그램이 같은 계산을 반복할 때, 이전 계산값을 메모리에 저장하여 반복수행 제거, 실행속도를 빠르게 하는 기술 \- React.memo()사용. (ToastUI - React.memo() 현명하게 사용하기)

약 15시간 전
·
0개의 댓글

React Hooks #7 useRef()

클래스형 컴포넌트에서 createRef()를 hooks에서는 useRef()로 사용한다.컴포넌트가 마운트 되고 DOM 요소에 접근 가능해 졌을 때DOM 요소에 포커스(focus), 외부 요소 클릭 이벤트(out-side-click-event) 적용할 때렌더링과 무관한

약 15시간 전
·
0개의 댓글

React Hooks #6 커스텀 훅 만들기

React에서 기본으로 제공하는 useState, useEffect 등의 훅을 사용해 새로운 훅을 만들어낸다.창의 너비를 알려주는 훅컴포넌트의 마운트 여부를 알려주는 훅(HOC보다 훨씬 간결하게 사용가능하며, 타입스크립트와의 호환도 좋다!)훅의 호출 순서는 동일해야 한

약 16시간 전
·
0개의 댓글

React, 성능 최적화 방법

성능 최적화를 고민하기전 일단 편하게 코딩 먼저 하자! 성능 이슈가 생기면 그때 고민해도 늦지 않는다!리액트에서 가장많은 cpu를 사용하는 것은 렌더링이며, 렌더링을 효율적으로 하는 것은 성능 최적화에 큰 영향을 준다. 렌더링 될 때 = state, props가 변경되

약 16시간 전
·
0개의 댓글

React, 고차 컴포넌트 (HOC) 사용하기

참고 : 리액트 공식문서 고차 컴포넌트(higher-order-component)책 : 실전 리액트 프로그래밍/이재승 저: 아래 작성된 예제 코드고차 컴포넌트(HOC, higher-order-componentm), 이하 HOC로 통일HOC는 컴포넌트를 인자로 받아 새로

약 17시간 전
·
0개의 댓글
post-thumbnail

React, HTML 데이터 세트(dataset) 사용하기

MDN 데이터 세트(dataset)데이터 세트는 HTML 표준에 정의된 기능DOM요소에 값을 저장, JS 코드로 값을 읽어들일 수 있음html 사용법 : data-를 시작으로 data-이름을-지정하면-된다와 같이 tag element에 속성으로 사용 : <p da

약 19시간 전
·
0개의 댓글

React Hooks #4 useContext()

react 공식문서 Context 살펴보기컨텍스트는 여러게를 만들수 있다(다중스토어)React.createContext에서 반환값으로 <컴포넌트.Provider>로 최상위 컴포넌트를 감싼다.생성 컨텍스트컴포넌트는 export 하여 <컴포넌트.Consumer>

1일 전
·
0개의 댓글

React Hooks #3 useEffect()

네트워크 리퀘스트(GET,POST,DEL..)DOM 수동 조작로깅정리(clean up) : 타이머함수(인터벌같은)제거, 이벤트리스너 제거useEffect(CB) : componentDidMount(), componentDidUpdate()useEffect(CB,\[])

1일 전
·
0개의 댓글

React Hooks #2 useState()

useState는 길이 2짜리 배열 반환 : 값, 그리고 값을 변경할수 있는 함수배열 구조분해 할당(Destructuring) 사용하여 배열 분리하여 사용인자로 초기값 전달, 해당 값 초기화 기능 있을 경우, 초기값 변수 사용 추천!클래스형 컴포넌트에서는 state객체

1일 전
·
0개의 댓글

React Hooks #5 useReducer()

codevolution-useContext+useReducer최상위 루트 컴포넌트useReducer로 상태관리할 state, dispatch 생성export Context = React.createContext() 로 context 생성<Context.Provid

1일 전
·
0개의 댓글

Node .env 활용

위 에러는 package.json에 기입된 패키지 버전과 CRA의 같은 패키지의 버전이 충돌하기 때문에 발생한다.이때는 루트에 .env를 만들어 SKIP_PREFLIIGHT_CHECK = true을 입력하여 해결할 수 있다.콘솔 안내글에 수동설치 하지말라고 언급되어 있

7일 전
·
0개의 댓글
post-thumbnail

React + Storybook.js

컴포넌트/UI를 상태별로 확인 할 수 있는 라이브러리. react뿐만아닌 다른 프레임워크에서도 지원된다!이런거 굳이 알아야 되나? 했지만 막상 간단한 실습만으로도 왜쓰는지 알것 같다.컴포넌트 수정할때마다 UI가 정삭 작동 하는지 서버켜고 확인하고 코드 수정하고 반복 하

2020년 7월 7일
·
0개의 댓글
post-thumbnail

react - Input 태그 속성 value & defaultValue

아래 예제코드 처럼 input태그에 readOnly 속성을 추가해주면 경고창이 사라진다.value 속성이름을 defaultValue 속성으로 변경한다.

2020년 7월 7일
·
0개의 댓글

웹 - 용어 설명

(Global Navigation Bar)사이트 최상위 전체 공통네비게이션.메인메뉴, 대분류 메뉴, 전체 사이트에서 사용되는 공통메뉴바(Local Navigation Bar)현재 서비스 영역(Local)만 해당되는 네비게이션.서브메뉴, 중분류 메뉴, 각 서브분류 별 사

2020년 7월 6일
·
0개의 댓글