분류 전체보기34 깃허브 프로젝트 업로드 하기! 1. 깃 허브에 가셔서 새로운 repository를 생성합니다 2. 프로젝트를 생성후 이런 페이지가 이동됩니다. 3. git init 4. git add . 5. git commit -m "commit" 6. git remote add origin "해당 주소" 7. git push origin master 8. 끝 !! 쉽죠! 2021. 2. 28. 바이낸스 웹소켓 사용해서 마켓 가격 가져오기~! 바이낸스 공식 웹사이트가면 정확히 웹소켓을 사용해서 가격을 가져오는법이 그지같다... 그래서 저도 문서를 읽어가면서 찾아 보아도 힘들었던 기억이.... 1. 소켓 JS 파일 을 다운받아주세요. 2. 소켓을 선언 해주면서 바이낸스 주소를 써줍니다. let socket = new WebSocket(" wss://stream.binance.com:9443/ws/btcusdt@depth10@100ms"); btcusdt 가 symbol이라서 코인의 종류를 쓰시면 되시고 depth은 array의 수를 나타냅니다 100ms는 1초당 데이터를 가져오는겁니다. 3. 이제 소켓을 통해 메시지를 보내줍니다. socket.onmessage = function(event){ console.log(event.data) } 4... 2021. 2. 26. 자바스크립트 비교 연산자 정복하기 ! 비교 연산자는 두 변수가 같은지 아닌지를 구분하는 방법입니다. Ex) X == Y ( == 는 변수의 타입에 상관없이 두 변수의 값을 비교 합니다 ) 반대로 같지 않다는 구분을 할려면 != 를 사용하시면 됩니다. Ex) X != Y는 x와 y는 같지 않다는 애기입니다. 만약 === 가 있으면 변수의 값과 타입이 정확히 일치 해야합니다 또한 값이 큰지 작은지 비교할 떄 이렇게 비교를 해주시면 됩니다. > 크다 >= 크거나 같다 2021. 2. 25. [PHP] Unix timestamp을 날짜로 변환 하기 PhP Unix timestamp 날짜로 변환하기 ! $timestamp = time(); $timestamp = strtotime("2021-02-4 00:00:00"); echo date("Y-m-d h:i:s", $timestamp); 2021. 2. 24. REST API와 OPEN API 개념 정리 Rest API란 : Representation State Transfer약자로써 모든 웹에 존재 하는 자원( 이미지,동영상, DB자원)에 고유한 URL 주소를 지정하는 것을 의미합니다. 해당 URL 주소를 통해서 HTTP method( Post, get, delete, put) 를 통해서 데이터를 전달하는 방식입니다. API란 application programming interface 약자로써 어플리케이션간의 연결고리라고 이해하시면 제일 쉬울것 같습니다. 프로그램의 연결고리는 == API 이렇게 통신 하는 REST API는 CRUD를 통해서 server에서 데이터를 요청합니다. CRUD 개념 : Create = POST 해당 URL를 요청하면 리소스를 생성합니다. Read = GET 해당 URL대한 .. 2021. 2. 17. Nextjs depoly 꽁자로 deploy하는 법!! Next.js 프로젝트를 다 만드신다음 배포를 고민하시는 분 많으실거라고 생각합니다. 혹은 이미 알고 계실수도 있지만 바로 firebase을 이용해서 무료로 hosting을 하는 방법이죠 1. 일단 첫번째로 package.json 가셔서 export를 추가 해주세요 2. 빌드를 해주세요 npm run build && npm run export 3. 빌드후 out이라는 폴더가 생깁니다. 이 out및에 index.html이 deploy되는겁니다. react에서는 public이지만 nextjs에는 out폴더로 deploy 해주시면 됩니다. 4. firebase 툴을 설치 해줍니다. npm i firebase-tools 5. firebase init을 설치해주시고 6. Hosting을 눌러주시고 설정을 해주시면.. 2021. 2. 16. HTML을 NextJS 만들어 보자~~!!! 1. Next JS 프로젝트 설치 npx create-next-app 프로젝트 이름 # or yarn create next-app 프로젝트 이름 2. 설치 후 기본적인 설정 3. public에 css,font,js,images를 이동시킵니다. 4. pages안에 Document.js를 만들어 줍니다. import Document, {Html, Head, Main, NextScript} from 'next/document' class MyDocument extends Document { static async getInitialProps(ctx) { const initialProps = await Document.getInitialProps(ctx) return { ...initialProps } } re.. 2021. 2. 12. Type + Script = Typescript란? 개념 잡기 배경 기존의 Javascript 가장 큰 장점이자 단점인 타입이 없어도 사용 가능하다는 것입니다. 여기서 큰 문제가 될 수 있는 것이 어디에서 에러가 발생했는지 알 수 없다는 점이 가장 큰 문제입니다. 특히 대형 프로젝트일 경우 많은 Fucntion과 변수들이 선언돼있으면 에러를 잡는데 많은 시간을 낭비해야 하는 단점이 있습니다. 이를 사전에 방지하고자 나온 것이 Typescript입니다. 특징 1. Typescripts는 결국 자바스크립트의 기본 배경이다! 2. Typescript는 자바스크립트의 libraries를 지원합니다 . 3. 대규모 프로젝트에서는 자바스크립트가 어렵고 불편하기에 이를 보안한 언어입니다. 4. 강력한 커뮤니티와 툴 기능의 최대 활용 가능 Ex) fuction 인사(값 : "st.. 2021. 2. 10. 쿼리 쉽게 하자 Graph QL [Server API] 탄생 배경: 서버를 운영 하다보면 여러가지 문제점을 만나게 됩니다. 특히 API의 많은 요청으로 서버의 성능이 저하되고나, 개발 로직을 위해서 리소스를 추가해야 한다는 점입니다. 이를 극복하기 위해서 나온 기술이 GraphQL입니다. 특히 Next.js는 Server Side Rendering(SSR)의 많이 사용되는 언어 입니다. 모르시면 Next.js 별거 아니야를 클릭해주세요 deveopler.tistory.com/5?category=876248 Next.js 별거 아니야 Next.js 이란 ??? 도대체 넌 무엇이냐? 탄생 배경: React, Vue, Angular 의 SPA(Single Page Application)의 등장으로 한페이지에서 모든것을 처리하는것에 초점이 마쳐있는 웹페이지 였습니다.. 2021. 2. 5. Next.js 별거 아니야 Next.js 이란 ??? 도대체 넌 무엇이냐? 탄생 배경: React, Vue, Angular 의 SPA(Single Page Application)의 등장으로 한페이지에서 모든것을 처리하는것에 초점이 마쳐있는 웹페이지 였습니다. 이것을 CSR(client-side rendering) 부릅니다. 하지만 여기 단점 2가지 1. 검색엔진의 어려움이 있습니다. 특히 Google SEO의 검색 문제가 있죠 (블로그 노출 광고 시 가장 취약) 2. 로딩 속도가 느립니다. client 요청--> server 요청 --> HTML --> client로 전달 그래서 등장한 !!! Next js! 1. Google- SEO 최적화된 SPA(Single Page Application) !!!! 2. CRS단점을 보안한 .. 2021. 2. 3. 이전 1 2 3 4 다음
