yceffort

23 posts tagged with "react"

Socket.IO 공부하기 (1)

Posted on March, 2020

WebSocket 웹은 전형적으로 HTTP 요청에 대한 HTTP…

Read full post

NextJS 1. Page & Route

Posted on March, 2020

요즘 리액트를 쓰는 많은 프로젝트에서, SSR을 지원하기 위해 nextjs를 쓰고 있다. 초기 로딩 속도나, SEO 지원 이슈 등 등 때문에 아무래도 SPA는 요즘 트렌드에서 많이 밀린 기분이다. 물론 razzle 을 쓰거나 custom server 로 맨 바닥에 해딩하는 방법도 있지만 여기저기 컨퍼런스나 주변 사람들의 말을 들어보면 nextjs…

Read full post

NextJS 2. Data Fetching

Posted on March, 2020

nextjs의 공식 문서를 보고 요약한 내용입니다. 1. getInitialProps 2. getStaticProps 3. getStaticPaths 4. getServerSideProps 1. getInitialProps Nextjs 9.3 이전에는 밖에 존재하지 않는다. 최신 버전인 9.…

Read full post

React count down에서 배운 event-emitter 와 requestAnimationFrame

Posted on January, 2020

리액트에서 카운트 다운을 만들며 배운 것들 리액트에서 카운트 다운을 만든다고 가정해보자. 가장 먼저 생각나는대로, 빠르게 구현한다면 아래와 같은 느낌이 될 것이다. 하지만 이 코드는 한가지 문제를 가지고 있다. setInterval, setTimeout…

Read full post

블로그 개편했습니다. 😎

Posted on December, 2019

주말에 집구석에 혼자 오래있을 일이 있어서, 생각난 김에 블로그를 개편했습니다. 이 전에는 hexo 기반으로 만들어진 블로그를 작업했는데, hexo 생태계가 관리가 잘 안되고 있는 건지 플러그인이나 기능들이 제대로 동작을 안하더군요. wordpress -> ??? -> github pages -> hexo -> gatsby…

Read full post

리액트 텍스트 하이라이트 만들기

Posted on October, 2019

요구사항 한 엘리먼트안에서 특정한 키워드를 다른 색싱으로 바꿔서 출력하는 것이다. 아래 예시를 살펴보자 before after 의식의 흐름 특정 키워드가 포함되어 있는지, 그리고 그것을 따로 뽑아 낼 수 있는 가장 간단한 방법은 무엇일까? 바로 split 일 것이다. 그러나 여기서 두 가지 몰랐던 사실을 알게 된다. 첫 문자에 seperator…

Read full post

리액트 인터뷰 질문 & 답 (2)

Posted on August, 2019

목차 table of contents React Router What is React Router? How React Router is different from history library? What are the components of React Router v4? What is the purpose of and methods of ? How…

Read full post

리액트 인터뷰 질문 & 답 (1)

Posted on August, 2019

목차 Core React What is React What are the major features of React? What is JSX? What is the difference between Element and Component? How to create components in React? When to use a Class Component…

Read full post

타입스크립트 타입 단언

Posted on August, 2019

문제의 시작 문제의 시작은 여기 였다. 내가 사용하는 코드는 아래와 같았다. 그러나 다른 프로젝트에서 아래와 같은 에러가 발생했다. 파라미터로오는 이 enum의 키가 아닐 수도 있기 때문에 발생하는 에러 였다. 기존 lint 룰에서는 any를 accept…

Read full post

리액트 인터뷰 질문 & 답

Posted on August, 2019

원문-reactjs-interview-questions 1. Core React 2. React - Router, Internationalization, Redux, Native and supported libraries and Integration 

Read full post

React Hooks Api (2)

Posted on August, 2019

useReducer 의 대체 함수다. 다수의 하윗 값을 만드는 복잡한 로직, 혹은 다음 state가 이전 state의 의존적인 경우에 쓴다. 뭐가 뭔지 모르겠으니까 예제를 보자. useState를 쓰기전 예제를 보니 대충 감이 온다. dispatch를 통해서 state값에 변화를 주지 않고 state…

Read full post

React Hooks Api (1)

Posted on August, 2019

Hooks API Hook은 react 16.8에서 추가된 개념으로, Hook을 시용하면 class를 갖성하지 않아도 state관리와 같은 react의 기능을 사용할 수 있다. 기본 Hook useState…

Read full post

Typescript, React, NextJs, Koa, Styled Component 로 프론트엔드 환경 만들기

Posted on June, 2019

이 문서는 더 이상 업데이트 하지 않을 생각이다. 대신 https://github.com/yceffort/koa-nextjs-react-typescript-boilerplate 여기에서 계속 해서 만들어 가고 있다. 사용한 오픈소스 React 자세한 설명은 생략 한다 Nextjs NextJs…

Read full post

Typescript Type, Enum, Partial, Record로 글로벌 변수 관리하기

Posted on June, 2019

고민지점 Global 로 관리하는 Colorset Red, Blue, Green, Black이 있다. 이 색들은 각각 지정된 칼라코드가 있다 그러나 때로는 그 컬러코드에 맞게 안쓰는 경우도 있다 그러나 때로는 저 네개를 다 안쓰고 1~3개만 쓰는 경우가 있다. Union types Union Type 어떤 라이브러리에서 받는 파라미터의 값을 number…

Read full post

React 공부하기 7 - 컴포넌트 라이프 사이클

Posted on May, 2019

React Component Life Cycle 라이프 사이클은 총 10가지다. 접두사는 어떤 작업을 작동하기전에 실행하는 메소드가, 는 어떤 작업을 한 후에 실해오디는 메서드다. 이 메서드들은 컴포넌트 클래스에서 덮어써서 선언하여 사용할 수 있다. 라이프사이클은 총 3가지 카테고리로 나눌 수 있는데, , , 다. Mount DOM…

Read full post

React 공부하기 8 - 함수형 컴포넌트

Posted on May, 2019

함수형 컴포넌트 함수형 컴포넌트는 컴포넌트에서 라이프사이클, state 등의 기능을 제거한 상태이므로 메모리 사용량이 다른 컴포넌트에 비해 적다. 따라서 성능을 최적화 하기 위해서는 위와 같이 함수형 컴포넌트를 많이 쓰는 것이 좋다.

Read full post

React 공부하기 6 - 컴포넌트 반복

Posted on May, 2019

컴포넌트 반복해서 쓰기 특별한 거는 없지만, 콘솔에서 가 없다는 에러가 발생한다. 가상 DOM을 비교한느 과정에서, Key값을 활용하여 변화가 일어나는지 확인하기 때문에, key값을 지정해줘야한다. 이제 에러가 나지 않는다. 보통은 이렇게 정적인 데이터를 쓰기보다는, 동적인 데이터를 더 렌더링할 기회가 더 많을 것이다.

Read full post

React 공부하기 5 - Reference

Posted on May, 2019

Reference (Ref) 특정 DOM요소에 작업을 하기 위해서 id를 부여하는 것 처럼, React에서 DOM에 이름을 다는 방식이 있는데 이것이 바로 ref (Reference)다. 반드시, 컴퍼넌트 내부에서 사용 중요하게 봐야할 부분은 바로 여기 ref 속성을 추가할 때는 props를 설정하듯이 하면 된다. ref…

Read full post

React 공부하기 4 - Event

Posted on May, 2019

이벤트 리액트의 이벤트는 기본적으로 HTML의 이벤트와 비슷하지만, 주의사항이 몇가지 있습니다. 이벤트 명은 카멜 케이스로 작성해야 한다. → 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니고, 함수형태의 값을 전달해야 한다. DOM요소에만 설정할 수 있다. Custom Component는 onClick…

Read full post

React 공부하기 3 - Component

Posted on May, 2019

컴포넌트 기본적인 컴포넌트를 만들어 보자. Props 컴포넌트의 속성을 줄때 사용하는 값이다. 아런식으로 부모에서 값을 넘겨 줄 수 있다. 또한 default값을 설정할 수도 있다. 유의할 점은 props에 아무값을 안넘겨줘도 () 값은 default 가 아닌 "" 가 나온다는 것이다. 왜냐하면 ""는 기본적으로 string…

Read full post

React 공부하기 2 - JSX

Posted on May, 2019

Create-react-app 라이브러리로 시작 app.js의 구조 코드 첫줄은 node.js의 기능, 즉 react를 불러와서 모듈화 시키는 것이다. 이를 번들링하는 작업은 webpack에서 처리해 준다. css-loader로 를, file-loader로 파일을 (), babel-loader로 es6를 es…

Read full post

React 공부하기 1 - background

Posted on May, 2019

리액트 요약 기존에 많은 자바스크립트 기반 플게임워크들이 있었는데, 대부분의 프레임워크들은 MVC (Model-View-Controller), MVVM(Model-View-View Model), MVW(Model-View-Whatever) 아키텍쳐를 사용하여 개발되었다. MVC…

Read full post