Programming/JavaScript tips (22) 썸네일형 리스트형 Typescript 익숙해지기 익숙해 지는 과정 새로운 무언가에 익숙해 지기 위해서는 몇가지 해야할 사항들이 있다. 그 중에서 가장 어려운건 바로 지금의 익숙함을 내려놓아야 한다는 것이다. 바닐라 자바스크립트로 개발을 할 때보다 타입스크립트를 사용할 때 계속 들었던 생각은, 굳이.. 굳이.. 타입스크립트를 써야하는가... 였다. 많은 개발자들이 타입스크립트로 개발을 하고 협업을 한다. 그렇기 때문에 나도 타입스크립트에 익숙해져야 한다고 생각했다. 하지만 중요한건 타입스크립트를 써야하는 이유를 찾아야 즐겁게 재밌게 개발을 할 수 있지 않을까 생각이 들었다. 아, 이거구나! 리액트로 프론트 작업을 하는 중에 셀렉트 옵션을 주는데 개발자 답지 않게 열심히 하드코딩을 하고 있는 나를 발견했다. 내가 이걸 지금 왜 쓰고 있지... ㅎㅎ 바로 .. React 로 포트폴리오 만들기 https://me.hometowndeveloper.com/ AWS S3 - React app 배포하기 어떻게 배포할까 문득 react 로 만든 앱을 어떻게 배포했었지?.. 기억을 잃은 듯한 느낌을 받았다. 오늘은 AWS S3 를 활용해서 웹호스팅을 해보자! 1. Create react app & build 1 2 3 4 5 # react app 만들기 $ npx create-react-app react-app # /react-app $ npm run build cs React app 을 만들고 build 해주면 build 폴더가 생성되고 그 안에 static 폴더와 index.html 을 포함해 필요한 파일들이 생성된다. 2. AWS S3 버킷 만들기 AWS S3 콘솔에서 Create bucket 을 클릭해서 새로운 버킷을 만들어준다. 3. S3 설정하기 생성된 버킷을 클릭하고 상단의 Properties.. Socket.io 다루기 - 실시간 투표앱, A to Z 프로젝트, 기대의 시작 "오늘 점심 뭐 먹지..?" 아마 직장을 다니는 분이라면 공감할텐데, 중요하진 않은것 같지만 모두가 매일같이 고민하고 또 고민하는 그 질문. 오늘 뭐먹지. 점심에만 하면 다행인데 하루에 최소 두번은 하는 고민이지 싶다. 그래서 조금이나마 이런 고민을 덜어주고 오히려 이런 고민을 단순하지만 재밌게 게임처럼 메뉴를 골라볼 수 있도록 런치고고를 만들었다. 서버와 클라이언트 모두 자바스크립트 기반의 node.js 와 리액트를 사용했다. 전체적인 플로우는 다음과 같다. 메인페이지에서 새로운 룸이 생성되면 사용자의 위치를 확인한다. 동의시 사용자의 현재 위치를 기준으로 투표결과에 따라 가까운 거리순으로 식당 목록을 알려준다. => 만약 미동의시, 사용자가 직접 입력할 수 있도록 주소 검색 컴.. AWS 시대 AWS 정성과 시간을 들여서 서버를 만들고 웹앱을 만들더라도 개발자의 컴퓨터에서만 접속할 수 있다면 무슨 소용일까. 우리가 개발하고 만들어낸 많은 것들은 혼자만 사용하기 위함이 아니라 되도록이면 많은 사람들이 사용하고 공유할 수 있기를 바라면서 태어난다. 지금과 같이 많은 서비스를 누리고 경험하면서 살 수 있는 이유가 지금 나열하려고 하는 내용이다. " 배포 " : deploy 그렇다면 어떻게 배포를 할 수 있을까? 누구나 방문해서 서비스든 정보든 원하는 것을 얻어가기 위해서는 각 사용자들 컴퓨터에서 브라우저가 읽어야 하는 파일들이 필요하다. HTML, JS 혹은 CSS 와 같은 파일들이다. 어떻게 하면 이 파일들을 사용자들이 접근하고 서버에 요청하고 원하는 정보들을 얻어 갈 수 있는지 알아보자. S3 .. [TIL] node.js 서버 구성 MAIN ACTIVITY : Node.js 환경에서 서버를 만들고, 기존에 만들었던 채팅앱에서 GET 과 POST 를 써서 데이터를 주고 받을 수 있도록 만들었다. 아래 코드는 다른 모듈을 사용하지 않고 node.js만을 이용해 클라이언트의 요청에 따라 처리할 수 있도록 서버를 만든 것이다. 아주 간단한 어플리케이션 서버이고 이러한 구성으로 만들어 나갈 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 const http = require('http'); const port = 3000; const ip = '127.0.0.1'; const server = http.createServer((request,.. Node.js 서버사이드 자바스크립트를 사용하는 프론트엔드 개발자들도 이 자바스크립트를 사용하여 백엔드 서비스 개발을 할 수 있도록 만들어준게 바로 이 Node.js이다. 여기서 말하는 백엔드 서비스란, API(Application Programming Interface) 라고도 불린다. 유저들과 직접적으로 액션이 일어나는 Web App 이나 Mobile App 도 이 백엔드 서비스를 통해서 데이터를 주고 받아 보여지게 된다. 왜 Node.js 인가? 1. 프로토타입핑과 애자일 개발에 효과적이다. 애자일 소프트웨어 개발이란 : 완전한 무계획이나 너무 완벽한 계획에서 벗어나 일정한 주기로 프로토타입을 만들어 이를 발전시켜가는 방법론이다. (출처: 위키피디아) 2. 시스템적으로 빠르고 예상한 결과를 쉽게 측정하고 얻어낼 수 있다. .. React.js_리액트 React.js 란? " 사용자 인터베이스를 만들기 위한 JavaScript 라이브러리 " 현재와 같이 유저들과 수많은 인터액션이 일어나는 인터넷 페이지에서 불편한 부분을 줄이고 훨씬 더 효율적으로 운영하고 관리하기 위해서 만들어진 프론트엔드 라이브러리다. 웹상에서 돔의 상태변화가 주기적으로 또는 셀 수 있을 만큼 일어난다면 리액트를 쓰지 않고도 자바스크립트만을 이용해 인터페이스를 만들어 줄 수있다. 하지만 무수히 많은 클릭과 동적인 상태변화를 요구하는 지금은 그 많은 상태들을 관리하기 쉬운 상태로 쪼개놓고 필요한 부분만을 쉽고 편하게 관리하게 만들어 주는게 바로 리액트다. 우리가 많이 사용하는 페이스북의 개발자들이 만든 라이브러리이고 굵직굵직한 기업에서도 많이 사용하고 있어 넓은 생태계속에서 빠르게 성.. 이전 1 2 3 다음
