분류 전체보기94 [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. [ZOOM 클론 코딩] #1. Set up ~0.4까지의 강의 니꼬쌤과 이번에는 ZOOM 클론 코딩을 해보고자 한다! 이 강의를 듣기전에, ExpressJS, app.get(), Pug, (req, res)=> 를 알고 오라고 하셨지만... (이 부분은 백엔드로 사용한다고 하심! 프론트는 그냥 바닐라JS로 사용하신다고 합니다.) 우선은 그냥 들어보겠슴다. cmd창에서 원하는 위치로 가서 npm init -y를 해준다. 그리고 code .로 열어준다. 그 후 package.json으로 가서 main과 sciprts를 삭제한다. 그 후 이것저것 깃허브 관련 설정을 하고, nodemon을 설치하기 위해 npm i nodemon -D를 해준다. 바벨도 설치해줘야 해서, babel.config.json라는 파일도 만들어준다. 그리고 nodemon.json.. 2022. 7. 30. [React Native 101] #7. PUBLISHING OUR APPS ~4.4까지의 강의 expo를 얘기하고 어떻게 앱을 공유하는지에 대해서 알아보도록 하자. 어떻게 프로젝트를 publish할 수 잇을 까? 그것은 expo로 가서 위의 버튼을 눌러주면 된다. 그러면 모든 사람과 코드를 공유할 수 있다. 그럼 어플리케이션 이름을 적고 publishing을 누르면 된다. 이 작업은 React.js를 평범한 JS로 바꿔주는 것이다. 그리고 이것은 expo로 간다. 링크에 접속해서 바로 다운받을 수 있다. 이것은 test를 위한 것이다. React Native Web에서는 view를 div로 바꾼다. 리액트 네이티브를 가지고 가서, js처럼 변경해준다. expo로 한 것을 웹사이트로도 만들 수 있다는 것이다. run with browser를 클릭해보자. 가끔 storage가 nu.. 2022. 7. 26. [React Native 101] #6. Persist&Delete ~3.8까지의 강의 얼레벌레 전부 듣기는 했지만, 뭔가 휘몰아 쳐서 들은거라 나중에 한 번 더 듣도록 하자 이제 작은 박스를 수정해보도록 하자. 즉, Work는 Work만 Travel은 Travel만. work 대신에 working이라고 해서 비교를 해주면 된다. 즉 ScrollView에서 해주면된다. {Object.keys(toDos).map((key) => toDos[key].working === working ? ( {toDos[key].text} ) : null )} todo가 지금 우리가 있는 모드인 working하고 같은지 확인을 해주면 된다. 일치파면, 보여주고 아니면 안 보여주면 된다. 이제 이 메모를 핸드폰에 저장을 해주어야 한다. expo로 돌아가서, asyncStorage를 사용한다... 2022. 7. 25. 이전 1 ··· 6 7 8 9 10 11 12 ··· 16 다음
