javascript19 리액트 앱 호스팅하기 (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. Todolist 만들기 (feat.노마드코더) OMG 아티스트 NewJeans 앨범 NewJeans 'OMG' 발매일 2023.01.02 완성본링크 https://cokeholic-kim.github.io/VanillaJS-TODO/ Document cokeholic-kim.github.io 이번에 노마드코더 자바스크립트 챌린지 강의를 자바스크립트 복습도 할 겸 도전하게 되었다. 정말 기초부터 시작해서 크게 어렵지 않게 따라 할 수 있고 다 배우면 요런 투두리스트사이트를 하나 만들 수 있다. 코드를 한번 보자. index.html Welcome 00:00:00 Daily advice : HTML에는 로그인을 할수있는 부분과 콘텐츠 부분 그리고 뒤에 보일 배경 div들을 만들어놓았다. 자바스크립트는 기능별로 파일을 만들어서 사용한다. 제일처음 logi.. 2023. 3. 5. 자바스크립트 데브매칭 준비 (바닐라 자바스크립트 SPA) 리액트 라우터 나 라이브러리를 사용하지 않고 순수 자바스크립트만으로 라우터를 구현해서 Single Page Application을 구현하는 문제를 학원에서 풀어보았다. 이런 걸 해볼 때마다 라이브러리 만든 사람방향으로 절을 올리고 문제를 만든 사람 방향으로는 두 번 절을 올리고 싶은 심정이다. 한번 풀어보쟈! 코드샌드박스로 완성본을 올려놓고싶었는데 같은 코드가 코드샌드박스에선 실행이 안된다.. 어째서...ㅜㅜ 그래서 캡쳐로 대신하겠다. index.js HOME POST SHOP 각 페이지로 넘어갈 버튼들의 마크업이다 자바스크립트를 연결해 주는데 데브매칭 문제들은 대부분 컴포넌트로 구현하기 때문에 type을 module로 하고 나머지 요소들을 자바스크립트에서 컴포넌트로 만들어서 넣어준다. style.css.. 2023. 3. 4. 타입스크립트 - 타입스크립트 설치,사용법 타입스크립트 설치 타입스크립트를 설치하기 위해서는 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. The나들이 프로젝트 마지막으로 글을쓴게 2월2일인데 마무리하고 정리하고 올리려니까 벌써 21일이 되버렸다.. 원래는 중간중간 진행상황같은걸 정리해서 올려보고싶었는데 프로젝트를 진행하는데만 힘을너무쏟아서 블로그쪽은 생각도 안하고있었다.. 멀티가 이렇게나 안되다니.. 프로젝트 끝난것도 저번주 월요일인데 프로젝트 끝나고 일요일에 정처기 필기시험이있어서 공부하느라 또 정리를 못하고 결국 22일이 되어버렸다. 그래도 어떤방법으로 만들었고 어떤걸 만들고싶었었는지 다시한번 정리해놔야 나중에 어떻게만들었는지 기억이 날것같아서 정리를 해볼려고한다. 프로젝트이름 The나들이 (떠나자 나들이 라는 의미로 만들었다) 기능 설정되있는 여행지 중에서 사용자가 선택하고 추천해주는 여행지중에서 여행 경로를 확인하고 관련한 정보를 얻을수있는 사이트 사용.. 2023. 2. 21. 포트폴리오 작업기 여행사이트 Thenadlee .1 이제 3월 23일 수료가 2달 앞으로 다가오면서 슬슬 포트폴리오 압박이 들어오기 시작했다.. 무조건 리액트로 만들어야하는데 아직 리액트로 엉성한 사이트도 제대로 만들어보지 못해서 걱정이 크다.. 검색하다 보면 어떻게든 또 만들겠지 라는 생각으로 일단 함께할 팀원을 모아서 총 4명이서 여행코스를 만들어주는 사이트를 만들기로 했다. 각자 해외에 살다 온 경험이 있는 분들이라서 각 지역별로 추천관광지를 리스트업 하고 사용자가 추천관광지를 클릭하면 지도에 마크가 찍히고 서로 선으로 이어져서 여행동선을 한눈에 보기 편하게 만들어주는 사이트이다. 이걸 위해서 지도이미지와 마크 그리고 경로를 그려주는 기능이 필요했는데 마침 구글 maps API에서 모든 기능을 다 지원한다고 해서 일단 구글맵스를 공부하면서 어떻게 적.. 2023. 2. 2. 이전 1 2 3 4 다음
