차근차근

0. Setup 리액트 네이티브 앱, 리액트 웹 어플리케이션이 있고, css 코드를 공유하고 싶을 때 사용한다. 왜냐하면 리액트 네이티브에 작업한 css코드는 사실 css가 아닌 JS object이기 때문이다. 이 포스팅에서는 SASS코드를 SASS설치 없이 사용하고, css파일 없이 css코드를 짤 수 있도록 해보겠다. 먼저 다음과 같이 디렉토리 구조 세팅을 하고 시작하겠다. 세팅 완료 후 다음과 같이 작성한다. 결과화면은 다음과 같다. 색상은 이 사이트에서 참고하였다. https://flatuicolors.com/ Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨 280 handpicked colors ready for COPY & PASTE flatuicol..

0. useEffect useEffect는 componentWillUnmount, componentDidMount, componentWillUpdate와 비슷하다. 이 모든 것과 동일한 function이다. react hooks로 작업할 때 중요하다. 다음 예시를 보자. useEffect는 ComponentDidMount, componentDidUpdate의 역할을 하기 때문에 시작하거나 버튼을 클릭할 때 콘솔에 hello가 찍힌다. useEffect의 첫번째 인자는 function으로서의 effect가 된다. 두번째 인자는 dependency이다. 만약 dependency(deps)가 있다면 effect는 (deps)리스트에 있는 값일 때만 값이 변하도록 활성화 될 것이다. 다음 dependency를 ..

0. Hooks - Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. functional component에서 state를 가질 수 있게 해준다. 앱을 리액트 훅으로 만든다면, class component, componentdidmount, render 이런것들을 안해도 되고 모든것은 하나의 function이 되는 것이다. 이제 functional programming style이 되는 것이다. - 몇가지 Hooks를 알아보겠다. useTitle : react document 의..

0. React & Redux 생활코딩 강좌를 듣고 정리한 내용입니다. React는 사용자 정의 태그, 즉 컴포넌트를 만들어서 체계적이고 잘 정돈된 어플리케이션을 만들어주는 기술이다. Redux는 상태를 중앙에서 관리하는 것을 통해서 데이터가 예측하지 않은 대로 변형될 가능성을 낮춰주는 기술이다. 즉, React 건 Redux건 모두 개발에 복잡성을 낮춰주는 기술이라고 할 수 있다. 비유를 해보면 다음과 같다. 왼쪽은 react만으로 구현한 데이터의 흐름이고 오른쪽은 redux를 도입한 후 데이터의 흐름이다. react는 소문과 같고 redux는 미디어 같은 느낌이다. react는 컴포넌트들로 만들어진 사회와 비슷하고 어떤 컴포넌트에서 변화가 생기면 왼쪽에 있는 그림처럼 모든 컴포넌트들로 그 데이터가 전..

0. Router 목표는 url이 달라질때마다 새로운 페이지를 띄워주는 것이다. 먼저 브라우저에서 개발을 할 수 있도록 다음과 같이 개발자 도구 - Sources - Filesystem 에 들어가서 폴더를 추가 후 작업한다.함수들을 다음과 같이 간단하게 작성하고 react-router-dom을 설치하고 import해준다. BroswerRouter로 App을 감싼다. 또한 위와 같이 코드를 작성하면 url 이 달라져도 정확한 정보를 얻기 힘들다. 하나의 예를 들어보면 "/topics"를 탐색하면 "/"와 "/topics" 둘 다 탐색되기 때문이다. 따라서 exact 를 사용해야 한다. 1. Switch Exact를 쓰지 않고도 Exact를 쓴것과 똑같은 효과를 나타낼 수 있다. Switch태그로 감싸주면된..

0. From, Event Handling form태그를 이용하고 post방식을 사용한다. 결과화면은 다음과 같다. 위 작업을 마쳤을 때 추가하기를 눌러도 아무일이 일어나지 않는다. Node.js Express에서 파일 업로드 요청 처리와 DB에 데이터 삽입하는 코드를 추가로 작성하여야 한다.

0. AWS(RDS) 고객에 대한 정보를 저장하기 위해서는 MySQL같은 DB 시스템이 필요하다. AWS의 RDS 서비스를 이용하면 MySQL과 같은 관계형 데이터베이스를 쉽고 빠르게 구축할 수 있다. Workbench를 통해 접속 하여 DB를 볼 수 있다. 1. DB테이블 구축 및 Express와 연동 database 관련 내용은 github에 올리면 안된다. .gitignore 처리를 해서 올라가지 않도록 처리한다. 아래의 형식에 맞게 내용을 채워넣는다. nodejs 와 mysql 을 연결하기 위해서 다음 명령으로 mysql 을 설치해준다. 그 후 다음과 같이 코드를 작성한다. 이제 연결이 완료되었기 때문에 workbench에서 데이터를 하나 추가하면 client쪽에서는 추가된 데이터까지 보여준다.

0. Life Cycle 1) constructor() 2) componentWillMount() 3) render() 4) componentDidMount() 컴포넌트가 생성될 때 위와 같은 순서로 진행된다. 1. API Loading Material UI의 Progress 를 이용해보겠다. 그 중 Circular Determinate를 이용할 것이다. 데이터를 불러오는 동안 지연이 일어난다면 progress 모양이 다음과 같이 나올 것이다.

0. 서버 개발환경 구축하기 React부분을 Client폴더를 만들어 그곳으로 옮긴다. package.json 과 server.js를 작성한다. package.json server.js npm run dev 명령어를 통해서 실행시킨다. localhost:3000 으로 들어가면 다음과 같은 화면이 뜬다. localhost:5000/api/hello 으로 들어가면 다음과 같은 화면이 뜬다. 정상적으로 작동이 됨을 알 수 있다. 1. REST API 구축하기 위와 같이 서버 개발환경을 구축했으면 이제 REST API를 구축해보겠다. REST API는 최근 상당수 웹서버 프레임워크에서 기본적으로 지원하는 기능으로써 서버와 클라이언트가 웹 프로토콜을 기반으로 하여 데이터를 효과적으로 주고 받을 수 있게 해준다. ..

0. React 리액트(React)는 UI를 효과적으로 구축하기 위해 사용하는 자바스크립트(JavaScript) 기반의 라이브러리이다. 리액트는 대화형 UI를 작성하기에 유리하다. 데이터가 변경되었을 때 효율적으로 렌더링을 수행할 수 있도록 한다. 캡슐화된 컴포넌트가 상태를 관리하고 UI를 효과적으로 구성할 수 있다. 기존의 소스코드를 불필요하게 다시 작성하지 않고 새로운 기능을 개발할 수 있다. 클라이언트 렌더링(그때그때 데이터를 받아오는 방식) 뿐만 아니라 서버 사이드 렌더링(서버에서 미리 만들어서 클라이언트로 보내주는 방식)도 지원한다. 그래서 Ajax등과 같은 비동기 방식과 비교했을 때 검색 엔진 최적화(SEO) 등에 있어서 유리한 형태로 소스코드를 작성할 수 있다. 이러한 검색엔진 최적화 문제는..