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

Styled-component #3 with typescript

오늘은 글로벌 스타일 적용하고, 스타일 컴포넌트에 타입 적용하는 방법을 해보겠돠.하루에 아조조~금씩🔨 야금야금🔨npm i styled-componentnpm i -D @types/styled-componentsstyled-components를 사용할때 보통 테마/전

2020년 8월 1일
·
4개의 댓글

React, Next and Typescript #1 설치

정적 사이트 생성을 위해 next를 사용하기로 했고, CNA로 next 프로젝트 생성했다.nextjs 공식문서 typescript 사용하기nextjs+typescript 예제 깃헙npx create-next-app --example with-typescript with

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

리덕스+리액트 Redux with React #8 useSelector() useDispatch() hooks

리액트에서 리덕스를 사용하기 위해서는 고차 컴포넌트(HOC, 이하 HOC) connect() 로 컴포넌트 감싸기mapStateToProps 작성mapToDispatchToProps 작성위 과정을 해야만 리덕스 스토어에 접근할 수 있었다. 리덕스에서 hooks를 지원하게

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

리덕스+리액트 Redux with React #7 덕스패턴

연관된 action-types, action-creater, reducer 를 하나의 파일에 작성reducer는 export default 로 내보내기action-creater는 export 로 내보내기action-types는 접두사+액션이름으로 작성(예: todos/

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

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

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

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

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

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

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

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

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

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

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

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

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

React Hooks #10 useLayoutEffect(), useDebugValue()

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

2020년 7월 13일
·
1개의 댓글

React Hooks #9 useImperativeHandle()

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

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

React Hooks #8 useMemo(), useCallback()

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

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

React Hooks #7 useRef()

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

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

React Hooks #6 커스텀 훅 만들기

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

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

React, 성능 최적화 방법

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

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

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

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

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

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

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

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

React Hooks #4 useContext()

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

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

React Hooks #3 useEffect()

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

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

React Hooks #2 useState()

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

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

React Hooks #5 useReducer()

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

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