분류 전체보기 (47) 썸네일형 리스트형 [Node.js X React] Node.js와 React 연동하기 앞으로 클라이언트 사이드로 React를, 서버 사이드로 Node.js를 이용하여 사이트를 만들어볼 계획이다. 현재 React는 대략적으로 공부를 해보았으니, Node.js와 연동하는 법을 공부해보았다. 오랜만에 밑줄 서식 이용해서 글 적어야지 ㅎㅎㅎ React + Node.js 이 둘을 연동하는 방법엔 다양한 방법이 있다고 한다. 먼저 이 포스팅에서는 'express'와 'http-proxy-middleware'라는 미들웨어를 이용하여 간편하게 Proxy를 설정하는 방법을 사용해보았다. Express 웹 서버에 필요한 기능들은 다양한 것이 있지만, 이를 모두 Node.js로 짠다면 귀찮을 수 있다. 이때 쓰는 것이 웹 프레임워크인데, 대표적으로 Express, Koa, Hapi가 있다. 그 중, Expr.. React Native 4] 파일 분리와 expo api사용하기 Loading Screen 이제 로딩 스크린을 만들어 보자!! 저번처럼 App.js의 아래에 만들 수 있겠지만, 따로 파일을 만들어 작업해보자. 저번 React강의에서는 class형이었지만 이번엔 함수형!!이다. export default를 해주어 export해주고, App.js에서 가져와준다. 그러면 오른쪽처럼 너무 top에 붙어서 화면이 나오니 flex로 화면 조정을 해주자!! 다음의 코드 중에 paddingHorizontal과 paddingVertical는 React Native에서만 있는 속성이다. 배경색까지 설정해주면 완성이다!! 폰트 설정까지 따로 해주면, 참고로 fontSize에서 숫자로 적으면 따옴표가 필요없고, px를 붙이면 따옴표가 필요하다. fontSize : 40 fontSize :.. React Native 3] Logic : Flexbox Layout Layout React Native에서 적용되는 Layout에 대한 규칙들이 있다. (expo뿐만 아니라 React Native 전체에 다 적용되는 규칙들) 위 화면에 보이는 것처럼 flex라는 것이 있다. 1. flexdirection 위에서 보이는 것처럼 컴포넌트의 flexdirection 디폴트는 column이다. 웹에서는 row였지만, 모바일에서는 대게 모든게 서로 아래에 있기 때문이다. 바꾸고 싶다면 물론 바꿀 수 있다. 2. flex : 1? 웹사이트에서는 1이나 2처럼 지정해주지 않는다. 아래 코드를 보자 다음과 같이 만들어진다. container는 아빠다. container에서의 flex가 1은 모든 공간을 사용가능하다는 것을 의미한다. styles에서 container를 모두 지워버리면 .. React Native 2] React Native 기초 이 글은 노마드코더님의 강의를 요약한 것입니다. https://nomadcoders.co/react-native-fundamentals/lectures/1572 How does React Native Work? 모바일앱을 만드는 데에는 세가지 방법이 있다. 완전 native : Switf or objective-c로 iOS앱을 만드는 것, Java 또는 코틀린을 가지고 Android를 만드는 것 Xcode와 Android Studio를 통해 만든다. 앱 기반 웹뷰를 만드는 것 : 매우 심플한 앱을 만드는 것 Cordova나 PhoneGap을 이용해서 그 안에 그냥 HTML, CSS를 넣는 것 앱 안에서 작동하는 웹사이트 같은 것 현재 아마존앱이 그렇게 만들어졌음 React Native 방식 : Andro.. React Native 1] Expo Project 시작 이 글은 노마드코더님의 강의를 요약한 것입니다. https://nomadcoders.co/react-native-fundamentals/lectures/1572 Creating the Project 위의 React Native사이트에 적힌대로 따라하면 된다. 1. 원하는 경로로 가서 expo 초기화 나는 리눅스 명령어에 편해있어서 powershell을 사용하고 있었는데, powershell은 일반적으로 관리자권한이 없어서 저런 에러가 뜬 것이라고 한다. 해결 방법은 https://www.hahwul.com/2017/08/powershell-execution-of-scripts-is.html에 있지만 귀찮아서 그냥 cmd를 이용하기로 했다!! zero부터 시작할 것이니, blank를 선택한다. (초보자 추.. React Native 0] React Native 설치와 Expo설치 React Native 공부는 노마드 코더의 'React Native로 날씨앱 만들기'를 보면서 실습을 따라할 것이다. https://nomadcoders.co/react-native-fundamentals/lectures/1569 Introduction -이 강의에서는, 크로스 플랫폼 ios와 안드로이드 앱을 만들 것 -리액트와 결합된 자바스크립트 + 엑스포의 파워를 이용할 것 - 리액트와 자바스크립트는 알아야 함 Requirements 1. node js의 10버전 이상과 npm이 필요 다행히 나는 12버전인 node js와 npm이 설치되어있다. 2. expo 설치 mac으로 작업 -> Xcode가 있어야한다. 그래야 강의에 필요한 시뮬레이터도 가질 수 있다. 윈도우나 리눅스 -> 시뮬레이터가 포함.. #7 React 졸업하기(A to Z) 0. React 짱짱맨 React는 페이스북(facebook)에서 제공하는 프런트엔드 라이브러리이다. JSX가 기본이 되며, 컴포넌트 기반의 개발을 도와준다. 사실 React가 없 더라도 우리는 HTML, CSS, JS등 이미 잘 알려진 도구를 활용해 웹페이지를 만들 수 있다. 하지만 사람들이 왜 그토록 React에 열광하는 것일까? 그 이유는 React의 특징과 이것이 없을 때와 있을 때 편의성을 비교해보면 쉽게 알아차릴 수 있다. React는 앞서 말했듯이 컴포넌트라는 것을 이용해 UI를 만들어 나간다. UI가 큰 덩어리 라고 가정하면, 컴포넌트는 이 큰 덩어리를 이루고 있는 작은 덩어리들이라고 생각하면 쉬울 것 같다. 즉, 우리가 웹 사이트를 볼 때 만약 그것이 React로 짜여있다면 내비게이션 바.. 10] React Update & Delete 1. update 구현 update의 기능은 read+create기능이다. update는 기존의 컨텐츠를 불러와서 내용을 추가해주는 과정이기 때문이다. 먼저 form 기능이 구현되어있는 CreateContent컴포넌트를 복사하여 외부파일로 만들어주고, UpdateContent로 이름지어준다. 다음으로 App.js에서 mode가 update로 바뀌면 Update컴포넌트로 바꾸어주기 위해 Create때와 똑같이 조건문을 추가하여 컴포넌트를 생성해준다. 바뀌는 컴포넌트를 생성해주는 부분을 잘라 함수로 만들어, 밖으로 빼준다. getContent()안에 내용들을 render밖으로 빼내, return _article을 해준다. 컴포넌트가 들어가는 부분이었던 {_article}을 {this.getContent()}.. 9] React Create 0. props vs state 쉽게 말해서 props는 해당 컴포넌트 내에서 바꿀 수 없으며, state는 바꿀 수 있다. 또한, state는 내부적으로 쓴다. 외부에서는 props를 통해 컴포넌트를 만진다. 이 모든 것은 DOM에 영향을 주어 UI에 변화를 준다. 결론은...props와 state를 적절하게 이용해야 한다는 의미이다. 지금까지는 read가 되는 페이지를 만들었는데, 이제 write를 통해 동적으로 페이지를 유저가 바꾸는 앱을 만들어보자!! 두둥!! 1. create 구현 : 소개 모든 정보는 CRUD 안에 있다고 한다. Create, Read, Update, Delete를 의미하는데, 우리는 이미 read를 해보았다. create, update, delete라는 버튼을 추가할 것이다... 8] React Event처리 1. State변경과 render함수 현재 상태는 위와 같다. 먼저 설계(?)를 해보자면, -제일 위에 위치한 WEB에 링크를 달아서 링크가 눌리면 밑에 Content컴포넌트에 Welcome이라는 텍스트가 뜨게 할 것 -TOC에서 각 항목을 누르면 해당하는 내용을 Content컴포넌트에 보여줄 것 먼저 우선적으로 링크를 달 것이다. Subject.js에서 먼저 링크를 달아준다. 이 각 링크에 이벤트를 연결할 것이다. 링크를 누르면 App컴포넌트의 state가 바뀌고, Content의 props값으로 전달되면서 동적으로 앱이 바뀌는 것을 만들어 볼 것이다. 다음으로 state를 세팅해보자. 현재 페이지가 welcome페이지인지 read페이지인지 구분하기 위해서 state에 mode라는 값을 둘 것이다. m.. 이전 1 2 3 4 5 다음
