TIL ( CODESTATES) (62) 썸네일형 리스트형 Node.js 란 : 유튜브 영상 찾아보기 NodeJS가 뭐야? 쉽고 짧게 3분 설명! - Nomad Coders JavaScript는 원래 브라우저에 내장되어 있다. Node.js는 JavaScript를 브라우저 밖으로 가지고 나와서 사용자의 컴퓨터에서 돌아가도록 만든 것 따라서 브라우저에서 console.log를 실행하는 것처럼 터미널에서 node를 실행시키고 console.log를 찍으면 똑같은 결과를 얻을 수 있다. Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다. 유명 기업들이 Node.js를 찾고 있는 이유 - Fastcampus School - YouTube www.youtube.com Node.js란 서버 측 프로그래밍 언어로는 Java, Ruby, Python 등 여러가지가 있지.. 코드스테이츠 31주차 (Im 15w) HA 이후 느낀 점 Pre 16주가 끝나고 Immersive 15주 차. 얼마전 Web Hiring Assessment를 치뤘다. 결과를 떠나서 문득 그런 생각이 들었다. 코드스테이츠 과제나 시험은 틀을 만들어 놓고 그 안에서 기능을 구현하는 내용이었는데 만약 그런 틀 없다면 나는 이런 것들을 해낼 수 있을까? 코드 구현을 떠나서 내 머릿속에는 지금까지 배운 내용들이 카테고리별로 잘 정리가 되어 있나? 누가 지금 배우는 내용에 대해서 물어보면 얼마나 자세히 말할 수 있을까? 대답은 모두 부정적이었다. 코스매니저와 상담을 진행했다. 코스매니저의 조언은 이러했다. 누구나 드는 의문이고 앞으로도 그런 의문이 들어야 한다. 하지만 크게 걱정할 일은 아니다. 내용들의 연관성을 자세히 알기에는 시간이 더 많이 필요하다. 하지만 유튜브.. 코드스테이츠 시작한지 6개월 째 몇 가지 느낀 점이 있어서 잠시 기록해본다. 1. 내가 모르는 건 남도 모르구나. 처음에는 전공자도 아니고, 심지어 문과생에다 다른 사람들처럼 여러 강의를 접해본 적도 없어서 조금 주눅이 들었었다. 그래서 초반에는 모르는 게 생기고 문제에 부딪힐 때마다 어디 질문하기도 조심스러웠다. 다들 알텐데 싶어서. 그런데 꼭 그런 건 아니었다. 남들은 아는 걸 나만 모르는 게 아니라, 질문을 통해서 최소한 나는 확실히 알게 된다는 것이었다. Github 코드스테이츠 헬프데스크에 '이런 것까지 자꾸 물어봐도 되나' 싶다가도 여기 아님 어디다 이런 걸 물어보겠나 싶어서 지금은 애용 중이다. 2. 일기 썼는데 알림은 안 와도 되지 않나? 맘스다이어리를 통해 매일 매일 육아 일기를 쓰고 있는데 오후 3시면 맘스 다이어리 .. React.js - JSX, Component, 예제 Hello World! Component 를 사용하면 직관적, 재사용성이 높아진다. React 는 기본적으로 es6를 사용한다. 따라서 아래 내용은 반드시 알고 시작해야 한다. destructuring spread operator rest parameters default parameters template literals arrow function for-of loop React Component는 JSX를 리턴한다. 리액트 컴포넌트에서는 반드시 JSX를 리턴해주어야 하는데 JSX는 javascript의 확장 문법이다. ReactDOM.render( // 3.렌더링한다. Hello, world , // 2.해당 JSX 코드를 document.getElementById('root'); // 1.root 라는 id를 가진 ele.. React 개발 환경 구축하기 처음으로 React를 사용해 보게 되었다. 공식문서도 잘 되어 있고 다양한 플랫폼에서 활용할 수 있는 프론트앤드 라이브러리라고 하니 설레었다. 스프린트 repo를 받은 후 해당 디렉토리로 이동 후 다음 명령어를 실행하면 되었다. npx create-react-app twittler-react * create-react-app 이란 페이스북에서 만든 공식적인 React 웹 개발용 Boilerplate이다. 이후 twittler-react 디렉토리에 React 프로젝트가 생성이 된 것을 확인할 수 있다. 그리고 twittler-react 디렉토리로 이동 후 npm start를 하면 http://localhost:3000에서 실행 결과를 확인할 수 있다. cd twittler-react npm start 공식.. Chatterbox server - Refactoring w/ Express const express = require('express') const app = express() const bodyParser = require('body-parser') // body parser 미들웨어 함수를 사용한다. const jsonParser = bodyParser.json() // 이 부분은 아래에서 app.use(bodyParser.json())으로 해도 될 것 같다. const cors = require('cors') // 모든 응답/요청에 CORS 헤더를 붙이기 위해 cors 미들웨어 함수를 사용한다. const port = 3000; app.use(cors()); app.use(bodyParser.urlencoded({ extended: false })); let data = .. Express - 라우팅, 미들웨어의 작성 및 사용 공부하는 이유 chatterbox server를 express를 이용해서 refactoring하는 것이 이번 과제이다. 미들웨어가 무엇인지 알고 그 중 body parser, cors 라는 미들웨어를 적용해 보는 것이 그 내용이다. 여기서는 과제를 다루기 전 기본적으로 routing에 대해서 이해하고, 미들웨어를 어떻게 작성하는지, 사용하는지 공부한 것을 기록한다. 모든 내용은 express 공식문서의 내용을 바탕으로 한다. 라우팅 라우팅은 URI(또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 end point에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말한다. 각 라우트는 하나 이상의 handler 함수를 가질 수 있는데, 이러한 함수는 라우터가 .. Chat Application - client 구현하기 server는 이미 AWS에 구축/배포되어있는 코드스테이츠의 chatterbox-server를 활용한다. fetch API를 활용하여 서버에 메세지를 요청하고(GET) 메세지를 보낸다(POST). browser에 나타나는 모습은 아래와 같아야 할 것이다. index.html chatterbox 코드스테이츠 youtube post -form 안에 select 박스를 만들고 '코드스테이츠'와 'youtube'를 옵션으로 넣어주었다. // select #roomname text 박스에서 username을 입력받도록 하고 //text #username textarea에서 text를 입력받게 했다. //textarea #text 버튼을 눌렀을 때 form이 제출되도록 하기 위해 버튼을 만들었다. //button .. 이전 1 2 3 4 5 6 ··· 8 다음
