자스알못의 JS 이야기

오늘도 간단하게 node + express 환경에서 에러 핸들러를 구현해 볼까 합니다. 이거는 제가 초반에, 미들웨어라는 개념을 잘 이해못했을 때 어려워 했던 부분이기도 한데요. 보통은 보면 아래와 같은 형태가 라우트 단위 기본형입니다. get 요청을 root 로 받았을 때, req와 res 라는 인자를 가지는 콜백을 실행해라! 라는 내용인데, 간단합니다.! 그래서 저기서는 응답으로 index 페이지를 렌더링 해주고 있네요. 그런데 express에는 use 라는 메쏘드도 존재합니다. 미들웨어라고 불리는 것으로 쓰기 위해서이죠! 미들웨어는 말그대로 중간에 거쳐서 가는 그런 존재...? 라고 저는 이해했는데 필터 느낌인 것 같습니다. 위와 같이, 경로의 여부에 따라 적용할 내용을 만들 수 있는데, 미들웨어라..

오늘은 간단한 사용기를 들고 와봤습니다.최근에 front 단과 서버를 분리하면서 결론적으로 서버가 두대 필요하게 되었는데, 문제는 aws 에서 인스턴스 두개 이상을 쓰는 순간 프리 티어가 빨리 소모된다는 사실이죠...! ec2 프리티어는 1년간 총 750시간을 쓸 수 있게 해주는데, 한 인스턴스 당으로 계산하는게 아니라 인스턴스들의 사용량 합으로 이를 계산합니다. 그래서! 저는 가난한 학생...이기 때문에, S3 로 프론트 호스팅을 제공하고 서버를 ec2 한대로 돌리기로 했습니다. S3 는 아마존의 클라우드 스토리지 서비스인데요. 자세한건 사실 저도 모르고 ... 웹의 정적 에셋(html, js, css, png 등) 을 저장해놓았다가 제공만 해주는 역할로 씀으로써 프론트쪽 서버를 따로 안두어도 되게 만..

오늘은 간단하게 제가 이전에 배웠던 것을 적어볼까 합니다.처음에 aws ec2 쓸 때 정말 많이 찾아보고 다녔던 것 같은데, instance 만 지웠다 만들었다를 반복한 끝에, 제가 현재 쓰는 수준의 프로젝트는 지원할 수 있도록 환경설정을 금방 할 수 있는 수준에 다다랐습니다 ㅎㅎ 제가 쓰는 ec2 의 스펙은 Service: t2-microOS: amazon-ami 로 쓰고 있습니다. 참고하시고, 저와 위의 사항이 같다면 아무 문제 없이 이번 글은 따라하실 수 있습니다! 먼저 instance 를 launch 합니다. 그리고 pem 파일을 써서 aws 로 접속을 해줍시다! (요점이 아니라서 상세하게 다루지 않았습니다) 이제부터는 그냥 딱 명령어만 알려드릴테니 쉽고 빠르게 따라해보시기 바랍니다! (아시겠지만..

최근에 배포 환경 설정과 관련해서 굉장한 삽질을 했는데요... 그 일정을 한번 적어볼까 합니다.사실 과정은 딱히 안중요하고, 웹팩 설정만 보고 싶으신 분도 있으실 것 같아서 튜토리얼 스킵 버튼을 만들어 두었습니다. ㅎㅎ 먼저 여기서 설정하는 것은 제 개인 프로젝트의 서버단 배포이며, 프론트는 react-create-app 을 통해 설정을 하기 때문에 따로 하지 않았습니다. 저는 웹팩을 사용했습니다. 사실 원래는 배포라고 막 제가 하려는 작업이 많은 것이 아니라, uglify, compress 정도만 알고 있었기 때문에 이정도만 해주려고 했습니다.그래서 웹팩은 초기 학습 곡선이 높다고 들었으니, 자동화 툴 정도만 써서 간단하게 배포 환경을 구축해보자! 하고 gulp를 시도했었으나.. 1. 경로 설정의 난관..

어제 늦게 자서 그런지 집중도 잘 안되고... 해서 간단하게 글이나 써볼까 합니다. 정말 별거 아닌데, 최근에 좀 알게 되서 유용하게 쓰고 있는 건데요! 코딩할 때 에디터 뭐가 좋냐고 물어보는 글을 진짜 많이 본 것 같은데, 저는 개인적으로 아톰 씁니다 ㅎㅎsublime Text 도 잠깐 써봤고, webStorm 도 학생 인증 받아서 지금 깔려는 있는데, 웹스톰은 안그래도 배울 것 많고 어려운데 에디터까지 쓰는 법을 배워야 하나... 싶어서 잘 안쓰고 있습니다 ㅋㅋㅋ 뭐 아직 제대로된 코딩을 안하고 있어서 그럴 수도 있을 것 같긴 한데... eslint 나 엄청 잘 돌아가는건 아니지만 그래도 작동은 하는 node-inspector 같은 것을 쓰면서 때우고 있긴 합니다 ... :) 뭐 여튼, 이 글은 아톰..

저번에 react에서 개인 프로젝트 소개하면서, 간단하게 로그인 기능 구현하는 거를 소개했었는데요.http://js-almot-story.tistory.com/5 이번에는 연결된 차원에서 node.js 를 통해서 어떻게 authentication 을 구현했는지를 간단하게(?) 소개를 해보려고 합니다! 1. 필요한 모듈 1) Node.js && NPM 2) passport, passport-local 3) jsonwebtoken 4) bcrypt *) 옵션으로 유저 정보를 저장할 mysql와 seqelize도 있으면 좋겠죠 2. 구성 원리바로 코드로 들어가서..! 유저가 로그인을 하면, 아래있는 라우트로 요청을 합니다. ( /auth/login ) < controller / user.authenticati..

어제부터 이제 본격적으로 개인적으로 하던 프로젝트를 리액트로 옮기고 있는데, 이쯤되서 간단하게 한 번 정리를 해볼까 합니다. 사실 프로젝트라고 뭐가 있는 건 아니고... 그냥 게시판이나 로그인 기능 등을 SPA 로 구현해 놓은 것인데, 기본적인 틀을 보는데는 나쁘지 않을 것 같아서 소개를 해봅니다. 일단 리액트 게시판이니까 프론트 부터 정리를 해보겠습니다. 서버는 추후에 node 게시판에 업로드 하겠습니다. 1. File Structure public/ index.html src/ actions/ reducers/ configureStore.js components/ Nav / nav.js nav.less nav.css Alert / alert.js ... routes / Login / login.js ..

예 맞아요... 제목에서 보이다시피 오늘은 fetch api 써보려다 삽질만 열심히 하고 실패한 사례를 보겠습니다... 일단 사건의 발단은 Google I/O의 웹 기술 세션에서 fetch api 라는게 있다 라는 부분부터 시작을 하는데, 이때까지만 해도 저런 핫트렌드 기술은 아직 써볼일도 없겠지 하고 있었는데 ... 그 후, 거의 다른 소스를 복붙하다시피 해서 기반이 약했던 개인 프로젝트의 앵귤러 단을 버리고! 이사를 하고자 리액트를 시작하게 되었는데요 리액트를 시작하고 나서도 시작된 광활한 삽질!! 리액트 홈페이지 정독과 관련 블로그 정독, 그리고 어김없이 나오는 환경설정, 새로운 시작을 알리는 redux, JSX, react-route 의 라우팅 모듈 등등 '내가 이러려고 리액트를 시작했나 어렵고 ..

어제 리액트를 계속 보다가 머리가 아파서 오랜만에 잠깐 code wars 라는 코딩 테스트? 사이트를 가서 문제를 풀었는데, 초기 레벨에는 좀 풀만 하던데 4, 5단계 문제로 가니까 꽤 어렵더라구요... https://www.codewars.com/dashboard 여기로 들어가시면 바로 체험하실 수 있습니다!! 이번에는 제가 풀었던 문제를 간단하게 공개해 보겠습니다. 다 풀고 나서 다른 사람들 답을 보는데 정말 부족하다는 생각이 많이 들더라구요... 사진이 생각보다 작게 나왔는데, 간단하게 설명을 하자면 - 볼링 점수 계산기 - 총 10 라운드, 매 라운드마다 2회를 던진다 (단, 한 번에 10개를 치는 경우, 바로 다음 라운드로 넘어간다.) - 스트라이크의 경우, 다음에 두 번 점수 만큼을 보너스로 ..

첫 글이라서 가볍게 시작해봅니다. 리액트를 쓰기 위해서 환경 설정을 해봅시다! 먼저 리액트 환경 설정에는 크게 두가지 재료가 필요합니다. Babe(ES6)webpack(bundler) - import 와 require를 사용할 수 있게 해주고 자바스크립트 파일을 하나로 합쳐줌 그리고 node.js 를 통해 패키지 설치를 해주시면 되는데 설치가 되어 있지 않은 분은https://nodejs.org/en/ 으로 가셔서 하시기 바랍니다. 1. 프로젝트 폴더 생성 및 의존성 설치 머 폴더 생성은...그냥 마음에 드는 이름으로 하나 해주시고! 커맨드 라인에서 해당 폴더로 들어가주신 후에 패키지 설치를 해주시면 됩니다.( 아 그전에 npm init 을 통해서 package.json 파일을 만들어 줍니다. 의존성 관..