목록대학교/FE (41)
차근차근
0. Redux 리덕스는 state management 툴이다. 리덕스가 필요한 이유는, 컴포넌트는 local state를 가지고 있고, 앱은 global state를 가지고 있기 때문이다. 예를 들어, 인스타그램 사진이 하트를 만든다고 할 때 하트는 2개의 state가 있다. 하트누르면 빨간색, 안누르면 회색. 이 컴포넌트는 local state이 있는 것이다. 문제는 앱은 많은 컴포넌트를 기반으로 지어졌는데 또한 동시에 global state를 가지고 있다. global state의 예시는 유저가 로그인을 했느냐, 안했느냐의 여부이다. global state에서는 모든 컴포넌트가 영향을 받는다. 유저가 로그인을 했느냐, 안했느냐에 따라 앱이 어떻게 보이는지도 다르다. 즉, global state, l..
0. Getting the Weather 위치 정보 확인에서 받아온 위도, 경도를 토대로 api를 부른다. isLoaded = true를 쓰는 대신에 새로운 _getWeather이라는 새로운 함수를 만들었다.경도, 위도, 2개의 attrubutes를 얻게 되면 웹사이트에서 제공하는 api key를 사용한다. open weather map >> current weather data >> geo coordinates 를 그들의 서버에 보내면 날씨정보를 받아올 수 있는 것이다. 그것을 보낼 때마다 response를 json으로 하고 그 json을 console.log 할것이다. https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap ..
0. Building the Loading View 아래 내용들은 노마드코더의 weather app tutorial을 토대로 작성하였다. 리액트 네이티브로 앱을 만들때, 항상 local state로 작업을 해야한다. shorthand property, 예를 들면 padding: 40 30 50 60, 이런것은 CSS와 다르게 작동하지 않는다. 아래 화면을 설명해보면 다음과 같다. 첫번째 컴포넌트 안에 state를 만들고 isLoaded: false로 저장을 하였다. 데이터 api를 불러오게 되면 이 값은 true가 될 것이다. 하지만 그 전에는 Loading 중이기 때문에 false이다. 그 컴포넌트 안에 컨디션을 만들었다. isLoaded? 이것은 로딩이 되었다면 , 아직 보여줄 자료는 없고(null)..
0. Basic React Native Concepts RN의 가장 기본적인 컨셉은 더이상 div, html이 없다는 것이다. 이것은 return 할 수 있는 컴포넌트가 정해져 있다는 뜻이다. 아와 같은 컴포넌트는 RN documentation에서 확인할 수 있다. view 컴포넌트를 이용하면 ios/android환경에 따라 objective-c 혹은 java로 변한다. RN은 굉장히 엄격하다. CSS와 비슷한 Style이라는 것을 사용한다. 1. React Native Layouts with Flexbox flexbox로 디자인을 짤 수 있는 앱은 RN이 유일하다. 기존 css와 백프로 동일하진않지만 비슷하다. 디폴트 설정으로 RN은 flex direction이 column이다. html, css에서는..
0. React Native React Native는 네이티브 웹 어플리케이션을 빌드하게 도와주는 UI 라이브러리이다. 줄여서 RN이라고 부르겠다. RN은 html, css 어플리케이션을 생성하지 않는다. 마지막 컴파일링 할 때, 각각 iOS(objective-C) / android(java) 네이티브 코드로 실행이 된다. RN이 구동되는 방법은 JSX, 자바스크립트로 작성을 하고, 그 뒤에서 자바스크립트가 objective-c 혹은 java로 변환되는 것이다. 페이스북이 개발한 이 기술에 의하여 js - objective-c , js - java 의 다리(bridge)가 연결되는 것이다. react js 코드와 비슷하다. 차이점은 다른 패키지를 쓰는데, 그 패키지 이름이 react native이다. 웹..
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는 최근 상당수 웹서버 프레임워크에서 기본적으로 지원하는 기능으로써 서버와 클라이언트가 웹 프로토콜을 기반으로 하여 데이터를 효과적으로 주고 받을 수 있게 해준다. ..