profile
Show me the code

React TypeScript - Props 사용법

TypeScript를 활용하여 React 개발을 할때의 좋은 점 중 한가지는 바로 Props를 받는 쪽에서 정할 수 있다는 점이다. Props로 지정할 수 있는 변수들의 이름과 형태까지 지정해 줄 수 있어서 자식 컴포넌트에 Props를 넘겨줄 때 일어나는 문제점을 미리 방지 할 수 있다. 그렇다면 간단하게 어떻게 Props를 정의해주고 활용하는지에 대해 ...

2019년 12월 8일
·
0개의 댓글

React Hooks - useState

Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줍니다. 함수형 컴포넌트는 클래스형 컴포넌트와는 다르게 인스턴스가 생성되지 않아, 코...

2019년 12월 8일
·
0개의 댓글

React 개발환경 세팅하기(without CRA) - 4. typescript 설치 및 설정

src 폴더에 components 폴더 생성 typescript 설치 typescript 설정 파일 추가 root폴더에 tsconfig.json 생성 후 아래 코드 입력 components 폴더에 Hello.tsx 파일 생성 아래코드 입력 src폴더의 index.js의 확장자명을 .tsx로 변경 변경 후, 아래 코드와 같이 Hello 컴포넌트 추가 ...

2019년 11월 27일
·
0개의 댓글

React 개발환경 세팅하기(without CRA) - 3. React 설치하기

react, react-dom 설치 router 추가 설치시 src/index.js 폴더에 리액트 삽입 npm start 로 확인

2019년 11월 27일
·
0개의 댓글

React 개발환경 세팅하기(without CRA) - 2. babel 설치하기

babel 설치 webpack.config.js 파일 아래코드 추가 output이하 root폴더에 .babelrc 파일 생성 후 아래 코드 추가

2019년 11월 27일
·
0개의 댓글

React 개발환경 세팅하기(without CRA) - 1. webpack 설치하기

프로젝트 디렉토리 생성 index.html 만들기 root폴더에 index.html 생성 script에 번들 코드 추가 웹팩설치 및 설정 package.json의 script에 start 명령어 코드 설정 root폴더에 webpack.config.js파일생성 개발서버 실행해보기 root폴더에 src폴더 생성후 index.js 파일 생성 index....

2019년 11월 27일
·
0개의 댓글

clean code 에 대하여

모든 이들이 코드를 작성할때, 좋은 코드를 작성하려 하는 건 당연할 것이다. 1. 클린코드란 무엇을 말하는 것일까? 먼저 클린코드에 대해 소프트웨어의 대가들의 생각을 정리해 보았다. 클린코드는 한 가지를 제대로 한다 - 바야네 스트롭스트룹(C++창시자) 훌륭한 프로그래머는 사람이 이해할 수 있는 코드를 짠다. - 마틴파울러(리팩토링 저자) 클린코드는 ...

2019년 11월 25일
·
0개의 댓글

JavaScript 비동기 처리와 콜백 함수

1. 비동기 처리란? 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날때까지 기다려주지 않고 다음 코드가 먼저 실행되는 자바스크립트의 특성을 의미한다. 2. 비동기 처리의 사례 메서드는 비동기 처리의 대표적인 사례이다. 메서드는 코드를 바로 실행하지않고, 지정한 시간만큼 기다린 이후 로직을 실행한다. 비동기 처리방식이 아니라면 아마 결과는 다음과 같...

2019년 11월 24일
·
0개의 댓글

promise 공부

1. promise란 무엇인가? 프로미스는 자바스크립트의 비동기 처리에 사용되는 객체다. 자바스크립트의 비동기 처리란 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성을 의미 한다. 2. promise는 왜 필요할까? 프로미스는 주로 서버에서 받아온 데이터를 화면에 렌더링하는 상황에서 사용된다. 서버에서 데이터...

2019년 11월 24일
·
0개의 댓글

Git rebase 를 해보자

협업에서 git은 효과적인 도구이다. 작업을 commit한 시점별로 버전을 저장해주고, remote master 브랜치를 활용하여 실시간으로 공유하며 협업을 이어나갈 수 있다. 이러한 git은 기본적으로 commit을 한 시점 기준으로 merge를 하게되는데 이는 동시다발적인 작업을 할때 각자 진행한 작업 단위로 revert를 어렵게 만드는 요소이기도 하...

2019년 11월 17일
·
0개의 댓글

AWS EC2 서버를 활용하여 Git에 저장된 프로젝트 Deploy 해보기

먼저, 이 포스팅은 AWS에 하나 이상의 EC2 인스턴스를 생성 후, 보시기를 권장드립니다! 1. 먼저 터미널을 활용하여 우분투서버에 접속한다. 아래 명령어를 입력합니다. 여기서 jungsw586-key.pem 은 인스턴스생성후 다운로드한 key파일 이름이다. 파일이있는 디렉토리에서 터미널을 실행하시면 위 명령처럼 파일명만 적으면 되지만, 다른 위치에...

2019년 11월 10일
·
0개의 댓글

React 개발환경 세팅하기 - 4. HighCharts-React 설치

intro. highchart는 react 라이브러리에서 제공하는 차트를 쉽게 구성할 수 있도록 제공하는 라이브러리이다. Highcharts-react official git : https://github.com/highcharts/highcharts-react Highcharts Demos: https://www.highcharts.com/demo AP...

2019년 11월 4일
·
0개의 댓글

React 개발환경 세팅하기 - 3. Sass 설치

React 프로젝트에 Router 설치 방법 1. 터미널을 킨다. 2. Sass 설치를 희망하는 React프로젝트의 디렉토리로 이동한다. 3. 입력한다. 4. 설치한 React 프로젝트 디렉토리를 열어 package.json 파일에 "dependencies" 중 "node-sass" 이 있는지 확인해 본다. 끝! +활용방법 형태로 파일을 생성 후,...

2019년 11월 3일
·
0개의 댓글

React 개발환경 세팅하기 - 2. React Router 설치

React 프로젝트에 Router 설치 방법 1. 터미널을 킨다. 2. Router 설치를 희망하는 React프로젝트의 디렉토리로 이동한다. 3. 입력한다. 4. 설치한 React 프로젝트 디렉토리를 열어 package.json 파일에 "dependencies" 중 "react-router-dom" 이 있는지 확인해 본다. 끝! +Router 활용해...

2019년 11월 3일
·
0개의 댓글

React 개발환경 세팅하기 - 1. React 프로젝트 생성

세상에서 가장 간단하고 빠른 리액트 프로젝트 시작방법 1. 터미널을 켭니다. 2. 터미널에서 리액트 프로젝트를 생성할 디렉토리로 이동해 줍니다. 3. 터미널에 다음의 명령어를 입력합니다. *my-app 위치에 희망하는 디렉토리명을 입력해주어도 됩니다. *npm install -g 이용해 이미 글로벌로 react-create-app을 설치해놓은 경우는 ...

2019년 11월 3일
·
0개의 댓글