Code Playground

< h1 > Code Playground </ h1 >

파이널 프로젝트가 끝났다. 부트캠프도 끝났다. 좀 진부한 얘기지만 부트캠프 시작한지 별로 안된 것 같은데 어느새 끝이라니. 시간이 참 빨리 간다. 지난주 토요일에 파이널 프로젝트 발표회가 있었다. 이전 기수를 수료하고 현재 개발자로 일하시는 분들과 다음 기수 사람들이 우리들이 하는 발표를 들으러 왔다. 우리 기수 사람들끼리 소소하게 발표했던 1차 프로젝트때와 분위기가 많이 달라서 정말 떨렸다. 하필 발표 순서가 맨 마지막이어서 더욱 떨렸던 것 같다. 그래도 발표 연습을 많이 했어서 떨렸지만 무사히 잘 끝냈다. 오늘은 내가 2주라는 시간 동안 어떤 프로젝트를 어떻게 기획해서 어떻게 구현했는지에 대한 소개와 다 끝내고나서 지난 시간들을 뒤돌아보며 어떤 부분이 발전했고 어떤 부분이 아쉬웠는지를 정리해보려고 한..

드디어 1차 프로젝트가 끝났다...! 진짜 정신적으로나 체력적으로나 힘들었고 다 끝내고 보니 부족한 점도 참 많지만 그래도 뿌듯하다. 오늘은 내가 2주 동안 어떤 프로젝트를 만들었고 어떤 점에서 잘했고 어떤 점이 부족했는지를 글로 정리해보려고 한다. React Native로 만들어본 커플 채팅 어플 내가 첫 프로젝트로 만든 어플은 커플 채팅앱이다. 회원가입을 하고 서로의 아이디를 입력하면 단 둘만의 대화방이 만들어지고 채팅을 할 수 있는 어플이다. 상태메시지를 입력하고 사진을 변경하여 나의 프로필 사진을 꾸밀 수 있고 채팅 대화를 하면 상대방에게 push 알람이 전달된다. 핵심 기능은 대화 분석 기능인데, Google Natural Language API를 활용하여 두 사람이 나눈 대화 내용의 감정을 분..

대화 상대방이 텍스트를 입력 중일 경우 상대방 화면에 표시해주는 기능을 처음으로 구현해보았는데 별거 아닌 기능이지만 막상 만들려니까 어떻게 해야될지 감이 안잡혀서 고생했다ㅋㅋ 일단 구현하는 로직은 이렇다. 1. 사용자가 input박스에 텍스트를 칠 때마다 서버에 startTyping 이벤트를 보내는데, startTyping이벤트를 거는 동시에 setTimeout()으로 일정시간 뒤에 stopTyping이벤트가 실행되도록 한다. 2. 그런데 input의 onChange 이벤트가 계속된다면 clearTimeout()을 이용하여 setTimeout으로 걸어놓은 stopTyping 이벤트들을 계속해서 clear시켜준다. 3. 그러다가 input에 change 이벤트가 더 이상 일어나지 않으면 그 때서야 비로소 ..

아직 수료하기까지 한 달이라는 시간이 더 남았지만 그래도 마지막 프로젝트 기간만 남았고 수업은 거의 끝마친 것과 다름이 없으니 중간 리뷰를 한 번 써보려고 한다. How do I get into Vanilla Coding? 내가 어쩌다가 바닐라코딩이라는 곳에 인연이 닿아 흘러들어오게 되었는지 참 신기하다. 작년 겨울, 그러니까 퍼블리셔로 일한지 1년도 채 안되던 때였다. 퍼블리셔라는 직업이 앞으로 과연 언제까지 살아남을 수 있을지에 대한 불안감과 걱정으로 가득했다. 내가 퍼블리셔 공부를 했을 때만 해도 html, css, jQuery 정도만 할 줄 알면 되는 줄 알았는데 그 후로 취업하고 몇 개월 만에 IT업계의 분위기가 달라지는 것이 피부에 와닿을 정도로 분위기가 바뀌고 있었다. 취업 사이트만 대충 살..

정말 오랜만에 블로그 글을 작성하는 것 같다. 바닐라코딩에서 서버쪽 공부를 시작하면서 할 것도 엄청 많고 과제에 허덕이다보니 도저히 블로그 글을 쓸 여유가 안생겼었다. 이번에 웹소켓을 이용해서 랜덤 채팅을 구현했는데 처음에 이런 저런 버그들로 엄청 고생했어서 만들고 나니까 너무 뿌듯하다ㅜㅜ 실시간으로 소통하는 채팅을 만들기 위해 웹 소켓(WebSocket)을 사용하여 구현하였다. MDN 문서를 보면 웹 소켓은 클라이언트(브라우저)와 서버 사이에서 상호 작용 가능한 통신 세션을 설정할 수 있게 하는 기술이라고 되어있다. 그래서 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능하다고 되어있다. 여기서 폴링(Poling)이란 ..

Ajax에 관해 공부할때 REST라는 단어를 한번쯤을 들어봤을 것이다. 여기저기에 굉장히 자주 쓰이는 단어인데 문제는 REST가 그래서 뭔데? 라고 말했을때 설명하기 굉장히 어렵다는 것이다. 그래서 오늘은 REST를 처음 접하는 사람도 이해하기 쉽게 REST 개념에 대해서 정리를 해보려고 한다. REST라는 개념은 2000년에 Roy Fielding이라는 사람이 논문을 내면서 알려졌다. 네트워크 시스템의 아키텍쳐 스타일에 대해 처음 소개하면서 나온 용어이다. Roy Fielding이란 사람은 HTTP(HyperText Transfer Protocol)의 주요 저자 중 한 사람이기도 하다. HTTP란 www, 즉 웹 상에서 정보를 주고받을 때 쓰이는 전송 규약, 규범이다. 매우 매우 중요한 개념이고 지금 ..

지난 번에 Express와 MongoDB로 간단하게 백엔드 서버를 만들었으니 이제 그걸 이용해서 프론트엔드 구현을 마저 해보려고 한다. client/src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './components/App'; import * as serviceWorker from './serviceWorker'; import { BrowserRouter as Router } from 'react-router-dom'; import { CookiesProvider } from 'react-cookie'; ReactDOM.render( , docume..

https://im-developer.tistory.com/164 [Node.js] Express를 backend로 하는 Create-react-app 시작하기 이번주부터 바닐라코딩에서 백엔드 공부를 시작했다. Node.js와 MongoDB를 이용하여 여러 가지 과제를 해보는 중인데 처음 접하는거라 어렵긴하지만 프론트에서 api 요청을 보내서 데이터 받아오는 것만 해보다가.. im-developer.tistory.com 지난번에 포스팅으로 올렸던 Express와 React 연습 앱을 활용해서 회원가입 / 로그인 구현을 해보기로 했다. 여러가지 방법들이 있겠지만 나는 지난번 바닐라코딩 서버 관련 과제를 하다가 만난 jwt 토큰을 이용해보기로 했다. (Json Web Token이 무엇인지 자세히 알고 싶다면..

GET이나 POST는 매우 자주 쓰는 HTTP 메소드들이다. 아마 제일 많이 쓰지 않나 싶다. 근데 정확히 두 개가 어떻게 다른지, 어떤 특징을 가지고 있는지 잘 모르겠어서 정리해보려고 한다. 아래 글들은 영문 블로그 내용을 번역한 것이고 원문 글에 대한 출처는 글 하단에 있다. GET GET 메소드는 주로 데이터를 읽거나(Read) 검색(Retrieve)할 때에 사용되는 메소드이다. 만약에 GET요청이 성공적으로 이루어진다면 XML이나 JSON과 함께 200 (Ok) HTTP 응답 코드를 리턴한다. 에러가 발생하면 주로 404 (Not found) 에러나 400 (Bad request) 에러가 발생한다. HTTP 명세에 의하면 GET 요청은 오로지 데이터를 읽을 때만 사용되고 수정할 때는 사용하지 않는..

프로그래밍 공부를 하다보면 오픈 API에 요청보내고 응답받는 일을 굉장히 많이 하게 된다. 그러다보면 CORS 에러도 필연적으로 만나게 되는데, 대체 CORS란 무엇인가? Cross-Origin Resource Sharing (CORS) 많은 웹 어플리케이션들이 이미지 파일이나 폰트, css 파일 같은 리소스들을 각각의 출처로부터 읽어온다. 만약에 웹 어플리케이션이 자기 자신이 속하지 않은 다른 도메인, 다른 프로토콜, 혹은 다른 포트에 있는 리소스를 요청하면 웹 어플리케이션은 cross-origin HTTP 요청을 실행한다. 만약에 프론트엔드 자바스크립트 코드가 https://domain-a.com에서 https://domain-b.com/data.json으로 json 데이터 요청을 보낸다면 이것이 바..