react17 리액트 앱 호스팅하기 (Node.js호스팅 ,ReactJS호스팅) 이전에 팀프로젝트로 만든 파일을 로컬에서만 쓰다가 오늘 호스팅 하는 방법을 배워서 호스팅 하는 방법을 올려보려고 한다. 리액트파일과 서버파일이 있어서 두곳에 따로따로 호스팅 해줘야 한다. Node.js 서버 호스팅 HEROKU https://dashboard.heroku.com/apps Heroku dashboard.heroku.com 위의 사이트에 들어가서 가입을 해줘야한다. 가입을 하면 로그인을 하고 create new app으로 들어가 준다 이제 여기서 이름을 설정해 주고 Create app을 누르면 깃허브리포지터리 같은 게 만들어진다. 만들고 나면 이런 창으로 이동하게 되는데 깃허브처럼 파일을 여기로 보내주면 된다 heroku로 push 하기 위해서는 heroku를 설치해줘야 한다. https:/.. 2023. 3. 7. 타입스크립트 - 타입스크립트 설치,사용법 타입스크립트 설치 타입스크립트를 설치하기 위해서는 Node.js를 설치해야한다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 노드를 설치해주고 터미널을 실행시킨 다음 아래코드를 입력해주면 타입스크립트가 설치된다. npm install -g typescript 타입스크립트를 설치하고나면 이제 프로젝트를 만들 폴더에서 .ts 확장자로 파일을 만들어서 타입스크립트 코딩을 시작하면된다. 타입스크립트 컴파일설정 타입스크립트 프로젝트 폴더안에 tsconfig.json파일을만들어서 컴파일할때의 설정을 만들어줘야한다. Typescript 컴파일시 세부설정 (t.. 2023. 2. 24. 타입스크립트-(타입스크립트란?) 타입스크립트 http://www.typescriptlang.org JavaScript With Syntax For Types. TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code. www.typescriptlang.org 2012년에 발표됨 대규모 javascript 애플리케이션 개발용도 마이크로소프트 개발, 오픈소스 프로그래밍 언어 자바스크립트의 상위집합이다 (자바스크립트의 모든기능을 포함하고 자바스크립트에 없는 기능도 가지고있음) *.. 2023. 2. 24. The나들이 프로젝트 마지막으로 글을쓴게 2월2일인데 마무리하고 정리하고 올리려니까 벌써 21일이 되버렸다.. 원래는 중간중간 진행상황같은걸 정리해서 올려보고싶었는데 프로젝트를 진행하는데만 힘을너무쏟아서 블로그쪽은 생각도 안하고있었다.. 멀티가 이렇게나 안되다니.. 프로젝트 끝난것도 저번주 월요일인데 프로젝트 끝나고 일요일에 정처기 필기시험이있어서 공부하느라 또 정리를 못하고 결국 22일이 되어버렸다. 그래도 어떤방법으로 만들었고 어떤걸 만들고싶었었는지 다시한번 정리해놔야 나중에 어떻게만들었는지 기억이 날것같아서 정리를 해볼려고한다. 프로젝트이름 The나들이 (떠나자 나들이 라는 의미로 만들었다) 기능 설정되있는 여행지 중에서 사용자가 선택하고 추천해주는 여행지중에서 여행 경로를 확인하고 관련한 정보를 얻을수있는 사이트 사용.. 2023. 2. 21. 포트폴리오 작업기 여행사이트 Thenadlee .1 이제 3월 23일 수료가 2달 앞으로 다가오면서 슬슬 포트폴리오 압박이 들어오기 시작했다.. 무조건 리액트로 만들어야하는데 아직 리액트로 엉성한 사이트도 제대로 만들어보지 못해서 걱정이 크다.. 검색하다 보면 어떻게든 또 만들겠지 라는 생각으로 일단 함께할 팀원을 모아서 총 4명이서 여행코스를 만들어주는 사이트를 만들기로 했다. 각자 해외에 살다 온 경험이 있는 분들이라서 각 지역별로 추천관광지를 리스트업 하고 사용자가 추천관광지를 클릭하면 지도에 마크가 찍히고 서로 선으로 이어져서 여행동선을 한눈에 보기 편하게 만들어주는 사이트이다. 이걸 위해서 지도이미지와 마크 그리고 경로를 그려주는 기능이 필요했는데 마침 구글 maps API에서 모든 기능을 다 지원한다고 해서 일단 구글맵스를 공부하면서 어떻게 적.. 2023. 2. 2. [React]25 Redux middleware( 리덕스 미들웨어 개념 ) Redux-middleware 리덕스를 사용하는 이유 중에 하나는 미들웨어이다. 리덕스 미들웨어를 사용하면 액션을 디스패치하고 그 액션이 리듀서에 가기 전에 추가적인 작업을 더 해줄 수 있다. 그래서 보통 비동기 방식으로 사용할 때 미들웨어를 많이 사용한다고 한다. (서버에서 액션을 받아오면 리듀서에 가기 전에 비동기로 데이터를 받아서 보내줘야 하기 때문). 리덕스 미들웨어는 개인이 필요한 용도로 만들어서 쓸 수도 있지만 보통은 만들어진 미들웨어를 받아와서 사용한다. redux-thunk redux-saga redux-observable redux-promise-middleware 등이 있다. 이번 포스팅에서는 리덕스 미들웨어가 어떤 건지 파악만 하기 때문에 직접 미들웨어를 만들어보고 대강의 구조를 파악.. 2023. 1. 31. 이전 1 2 3 다음
