HTML22 리액트 앱 호스팅하기 (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. 타입스크립트 타입사용법(?(optional),readonly,interface) interface Dog{ readonly name:string age:number color?:string } let dog1:Dog ={ name:"구름", age:3 //color 가 없어도 에러나지않음 } let dog2:Dog = { name:"몽이", age:2, color:"black" } optional ? 키워드로 사용할수있다 optional로 만들어진 타입은 말그대로 옵션이기때문에 선언할때 있을수도있고 없을수도있다 포함하지 않는다고해서 에러가 나지않는다. interface 객체의 타입을 선언할때 사용하는 키워드이다. 타입을 확장할때에 type으로 선언한것보다 편리하고 성능적으로 객체의 타입을 만들때에는 interface를 사용하는걸 권장한다. interface Dog{ name:stri.. 2023. 3. 2. 타입스크립트 기본타입사용법(타입추론,타입명시,함수타입) 타입스크립트 기본타입사용법 1)타입추론 타입스크립트는 타입 표기가 없는 경우 코드를 읽고 분석하여 타입을 유추할수있음 let a = "abcde" //string 타입으로 지정됨 2)타입 명시 변수 선언시 변수값의 타입을 명시함으로써 변수값의 데이터 타입을 지정 let a:string = "abcde" //string타입으로 지정된변수에 스트링값 대입 3)타입선언 1.변수 타입 선언 type 변수이름 = 타입 number,string,boolean,null,undefined,object,array 항목의 값을 지정할수없을때는 any 타입을 지정 type APPLE = string //타입을 변수로 만들고 let apple:APPLE = "string" // 선언하는 변수에 타입변수를 넣어서 사용 2.유니.. 2023. 2. 24. 타입스크립트 - 타입스크립트 설치,사용법 타입스크립트 설치 타입스크립트를 설치하기 위해서는 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. 이전 1 2 3 4 다음
