앞으로 클라이언트 사이드로 React를, 서버 사이드로 Node.js를 이용하여 사이트를 만들어볼 계획이다. 현재 React는 대략적으로 공부를 해보았으니, Node.js와 연동하는 법을 공부해보았다. 오랜만에 밑줄 서식 이용해서 글 적어야지 ㅎㅎㅎ React + Node.js 이 둘을 연동하는 방법엔 다양한 방법이 있다고 한다. 먼저 이 포스팅에서는 'express'와 'http-proxy-middleware'라는 미들웨어를 이용하여 간편하게 Proxy를 설정하는 방법을 사용해보았다. Express 웹 서버에 필요한 기능들은 다양한 것이 있지만, 이를 모두 Node.js로 짠다면 귀찮을 수 있다. 이때 쓰는 것이 웹 프레임워크인데, 대표적으로 Express, Koa, Hapi가 있다. 그 중, Expr..
1. 계기 처음엔 나도 이게 뭔지 몰랐는데, 개발 대회를 준비 중에 찾은 사이트이다. 나의 현재 상황(?), 원하는 것은 - 대회에서 다른 사람들에게 링크를 공유하여 페이지를 배포하고 싶었음 - 무료여야 함 - 오래걸리지 않아야 함 - 현재 배포하려는 페이지는 무겁지 않음(용량이 크지 않음) - 데이터베이스를 일단 쓰지 않는 웹 페이지 이다. 그래서 처음엔 git deploy를 사용하려했다... 근데 git deploy는 지난 학기에 전공과목에서 딱 한번만 써봤고, React 프로젝트를 배포하는 것밖에 안해봐서 단기간에 시도하기엔 리스크가 컸다!! 두둥 그래서 선택한 것이 바로바로 pythonanywhere이다. 2. PythonAnywhere pythonAnywhere은 python에 특화된 웹 호스팅..
1. 이미지 파일 화면에 띄우기 이미지 파일은 static file으로 넣는 방법과 변경 가능하게 넣는 방법 두 개가 있다. 1) 정적 이미지 삽입 static 폴더 안의 image 폴더에 넣어주었다. 현재 static 폴더 안에 넣는 image들은 css파일을 넣는 방법과 동일하다. 파일을 image폴더에 넣은 후, 렌더링할 HTML파일에 해당 위치를 적어두면 된다. 코드는 아래와 같이 하였다. url_for함수를 이용하여, 파일의 위치를 잡도록 하였다. 이미지가 잘 삽입되었다. 2) 동적 이미지 삽입 위의 static폴더를 이용하면, 한번 삽입한 이미지는 바꿀 수가 없다. 이미지를 바꾸려면, render_template함수의 파라미터로 이미지 파일의 이름을 넘겨주면 된다. 그리고 이미지를 띄울 htm..
1. 웹 프레임워크 과거에 써뒀던 Flask글이 있는데, 다 까먹고 지금 다시 보니까 모르겠다....케케케케케 https://argoswebpage.tistory.com/9 (과거의 글...) Flask에 대해 말하기 전에, 웹 프레임워크에 대해 짚고 넘어가고 싶었다. 먼저 웹 프레임워크란? 쉽게 말하면 직접 물건을 전달해주는 것과 배달 서비스를 이용하는 것으로 비유를 들 수 있는데, 배달 서비스의 경우 이용방법만 안다면 아주 간편하게 물건을 전송할 수 있다. 여기서 배달 서비스는 프레임워크이고, 직접 물건을 전달하는 방식보다 훨씬 간편하게 해준다. 즉, 웹 프레임워크는 간단히 말하자면 '웹을 개발하는 데에 있어 쉽게 할 수 있도록 도와주는 도구'이다. 위키 백과를 보면, 웹 프레임워크는 동적인 웹 페이..
Loading Screen 이제 로딩 스크린을 만들어 보자!! 저번처럼 App.js의 아래에 만들 수 있겠지만, 따로 파일을 만들어 작업해보자. 저번 React강의에서는 class형이었지만 이번엔 함수형!!이다. export default를 해주어 export해주고, App.js에서 가져와준다. 그러면 오른쪽처럼 너무 top에 붙어서 화면이 나오니 flex로 화면 조정을 해주자!! 다음의 코드 중에 paddingHorizontal과 paddingVertical는 React Native에서만 있는 속성이다. 배경색까지 설정해주면 완성이다!! 폰트 설정까지 따로 해주면, 참고로 fontSize에서 숫자로 적으면 따옴표가 필요없고, px를 붙이면 따옴표가 필요하다. fontSize : 40 fontSize :..
