전체 글 (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를 모두 지워버리면 .. 이전 1 2 3 4 ··· 16 다음
