Web Service42 [Netlify] 깃허브 연결해서 Web 배포하기 ~ 저번에 한 번 배포했었는데, 적지 않으면 기억에 남지 않는 다는 것을 알고 정리하고자 한다. ~ 1. 먼저 사이트에 접속하여 로그인/회원가입 한다. (나는 그냥 깃허브로 했음) https://www.netlify.com/ 2. Sites -> Add new site -> Import an existing project 클릭 3. 깃허브 클릭 후 Configure Netlify on Github 클릭 4. 모든 레포할건지 선택할건지 클릭 후에 밑에 있는 Install 클릭, 레포 선택 5. 배포할 브렌치 선택 후 build 추가 여기서 Base directory는 build가 속해있는 상위 폴더를 적어주면 된다. 6. Code에서 public밑에 _redirects 파일 생성 /* /index.html.. 2023. 5. 18. [Realtime Database] Setting ~ 아두이노랑 연결하는 프로젝트 시 Realtime Database를 써야 할 때가 있어서 이번 기회를 통해 익혀보고자 한다. ~ 리액트 초기 세팅은 평소대로 해두기. 콘솔로가서 프로젝트 추가까지도 똑같음. 앱을 클릭한 후 톱니바퀴를 누른다. 밑에 내리면, SDK 설정 및 구성-> firebaseConfig의 코드를 fbase추가 후 코드 추가하기. 이건 늘 하던 대로. env로 하면 된다. (databaseURL도 env로 하고 싶은데,,,,,, 그럼 프로젝트 실행할 때 오류가 생긴다.... 그 이유를 아는 사람.... 댓글로 알려주세요.... url로 접속해봤자 아무것도 할 수 있는 거 없으니까 괜찮겠지.....) 사용하는 것만 우선 등록함 realtime database를 사용해야하니 databas.. 2023. 5. 17. [실전형 리액트 Hooks] #1. INTRODUCTION 그동안 너무 리액트 공부를 하지 않아서 해커톤 전에 잠깐 하려고 한다! 리액트 hooks의 숨겨진 이론에 대해서 알아보고자 한다. usestate와 useeffect와 같은 숨겨진 이론을 연습할수 있는 기회가 될 것이다. hooks library를 build하고자 한다. 만든 hooks를 넣어서 npm에 넣어서 다른 사람들이 사용할 수 있도록 하자. 강의를 이해하고 hooks의 강점을 알기 위해서는 리액트를 알고 있어야 한다. setstate와 props 등을 알고 있어야 hooks가 훌륭한 이유를 알 수 있을 것이다. 전부 리액트와 node이므로 npm이나 yarn을 이용해서 설치하도록 한다. npm을 설치해야 패키지를 publish할 수 있다. 그런데 이걸 hooks를 자동으로 테스트할 수 있게 하고.. 2023. 1. 11. [ZOOM 클론 코딩] #4. SocketIO ~2.3까지의 강의 SocketIO - 쉽게 실시간 기능을 만들어주는 프레임워크 - 실시간, 양방향, event 기반의 통신 가능 - 탄력성, 신뢰성, 빠른 속도 - 연결이 끊어지면 재연결을 시도할 것 WebSockets과 굉장히 비슷하지만, WebSockets을 사용해서 통신 기능을 사용하는 것이다. 즉, WebSockets에 문제가 생겨도 계속 진행할 수 있으며 부가기능이 아니다. SocketIO를 사용해서 서버를 만들어볼 것이다. 제대로 비교해보기 위해서, server.js에 있는 것들을 주석처리를 해준다. SocketIO를 설치방법 1. npm i socket.io 2. import SocketIO from "socket.io"; (server.js) WebSocket을 생각해보면, 서버를 만들기.. 2022. 8. 31. [ZOOM 클론 코딩] #3. Chat & Nicknames ~1.9까지의 강의 home.pug ul form input(type="text", placeholder="write a msg", required) button Send form을 만들어 우리가 보게될 메시지 리스트를 만들 것이다. 그리고 추가한 것을 찾게 하기 위해서 app.js에서 편집을 해준다. app.js const messageList = document.querySelector("ul"); const messageForm = document.querySelector("form"); home.pug와 연결시키는 부분들이다. 그리고, 메시지를 send하는 부분을 지우고 아래와 같이 변경한다. function handleSubmit(event) { event.preventDefault(); con.. 2022. 8. 24. [ZOOM 클론 코딩] #2. WebSockets ~1.5까지의 강의 먼저, HTTP와 WebSocket의 차이점을 알아보자. 둘다 protocol이기는 하다. 즉, 모든 server들이 작동하는 방식이다. HTTP user가 request를 보내면 서버는 response를 준다. 즉, server가 반응하는 것이다. (앞에서 user가 뭘 보내면 반응하도록 server.js에서 해보았다.) 인터넷 전체가 http를 기반으로 만들어져있다. 기억해야할 것인 statelss이다. 즉,백엔드가 user를 기억하지 못한다는 것이다. request&response 과정 뒤에 백엔드는 user를 잃어버린다. 즉, response만 주면 끝나는 것이다. server로 메세지를 보내고 싶으면 내가 누구인지 알려주는 쿠키를 server에 보내야한다. 그럼 server가.. 2022. 8. 4. 이전 1 2 3 4 5 ··· 7 다음
