본문 바로가기

javascript69

[NodeJS] 런타임이란 무엇일까? nodeJS란 무엇인가요?라고 물으면 항상 따라 나오는 답변이 있다. nodejs === javascript runtime environment 음... 그렇다면 런타임이란 무엇일까? 구글에는 아래와 같이 나와있다. What Does Runtime Environment (RTE) Mean? The runtime environment is the environment in which a program or application is executed. It's the hardware and software infrastructure that supports the running of a particular codebase in real time. 런타임 환경이란 무엇인가요? 런타임 환경이란 프로그램이나 어플.. 2022. 3. 14.
[JS] Hoisting이란? 자바스크립트 엔진은 코드를 실행할 때 함수와 변수 선언을 코드 상단으로 끌어올리는 호이스팅 작업을 실행한다. 왜 그럴까? 호이스팅를 통해 개발자는 변수 선언과 변수사용을 자유롭게 활용 가능하다. 즉 항상 상단에 변수 선언과 할당을 하지 않더라도 같은 스코프라면 언제든지 변수를 사용할 수 있게 되는 것이다. 하지만 함수의 경우 선언식인지 표현식인지에 따라 약간의 차이가 발생한다. 예를 들어 선언식의 경우 아래와 같이 작동을 한다. foo(); // "foo" function foo() { console.log('foo'); } 하지만 만약 표현식의 경우 변수 선언만이 호이스팅으로 이루어지기 때문에 아래와 같은 결과를 가지게 된다. foo(); // Uncaught TypeError: foo is not a.. 2022. 3. 13.
[JS] let, var, const의 차이점 오늘은 기술면접의 단골 질문이라 할 수 있는 const let var의 차이점과 호이스팅에 대해 알아보자. 자바스크립트에서 변수의 선언은 총 세가지 방법이 있는데, 위 짤에서 알 수 있듯... 우리 var 친구는 약간... 관심이 필요한 친구다... VAR ES6 이전에는 변수 선언과 할당을 위해서는 var키워드를 사용해야 했다. Scope of var 스코프란 간단하게 말해 변수들이 어디서 사용 가능한가를 나타낸다. var선언은 global 혹은 function/locally 스코프다. var변수가 만약 함수 밖에서 선언되었다면 var은 글로벌 스코프를 가진다. 그 말은 전 영역에서 사용 가능하다는 뜻. 만약 var변수가 함수안에서 선언된다면 함수 블록 안에서 접근 가능하다. Var variables .. 2022. 3. 13.
[Socket.io] socket.io 룸 생성과 메세지 전달 프로세스 오늘은 socket.io의 룸 생성과 메시지 전달 프로세스에 대해 알아보자. 무지 성으로 socket.io를 이용해 메시지 기능을 넣고 보니... 정말 오류가 난리도 아니다. 일단은 제일 난감한 오류는 한명이 메시지를 보내면 메시지와 상관없는 모오오든 유저들이 메시지를 받아버리는 기이한 현상이 있었다. 왜 그럴까? 원인은 바로 socket.io의 braodcast 기능 때문이었다. socket.io은 아래처럼 특정한 대상을 지칭하지 않으면 broadcast로 메세지를 전달한다. 용어에서 짐작할 수 있듯 소켓에 연결된 모든 유저에게 방송을 해버리는 것이다. socket.emit("send-message", {message}) 그래서 특정사람에게만 메시지를 보내고 싶다면 그 사람의 socket id를 추가하.. 2022. 3. 11.
[JS] 스크린 맨 아래 이동하기 웹 페이지에서 스크롤을 가장 하단으로 내리고 싶다면 어떻게 하면 될까? 코드는 아주 간단하다. window.scrollTo(0, document.body.scrollHeight); scrollTo 메서드는 첫번째 인자로는 x좌표 두 번째 인자로 y좌표를 받는다. document.body.scrollHeight 프로퍼티는 현재 창의 최대 높이값을 뜻한다. 만약 window.scrollTo(0,0)은 y좌표의 0 즉 최상단을 뜻하게 된다. 2022. 3. 5.
Axios 요청과 fetch 요청의 차이 현재 작업 중인 프로젝트에서 우리 팀은 클라이언트 서버 간 요청 방식을 axios로 통일하기로 합의하였다. 그러다 문제를 겪고있던 기능을 stack overflow에서 친절하게 설명한 글을 읽게 되었다. 해당 코드를 사용하면 모든 것이 해결되는 것이었으나... 문제는 fetch함수를 사용해 설명을 했기 때문에 작업 중인 어플에서 사용하려면 axios로 변경을 해줘야 하는 상황이었다. 사실 그냥 fetch로 사용해버릴까... 하다가 fetch를 axios로 변경하는 방법을 몰라서 fetch를 사용한다면 자존심이 용납을 못하는 것이기에 이번 기회에 한번 fetch와 axios의 차이점과 변환 방법을 알아보았다. fetch 예시 const upload = await fetch (url, { method:"PU.. 2022. 3. 5.
[React] 현재 스크롤 위치 얻기 오늘은 React에서 현재 스크롤의 위치를 얻는 방법에 대해 알아보자. 필자는 작업 중이던 애플리케이션에서 숫자가 1에서 350으로 점차 증가하는 애니메이션을 추가했는데 문제는 해당 컴포넌트가 페이지의 맨 아래에 위치했기 때문에 유저가 스크롤을 다 내렸을 때에는 이미 애니메이션이 모두 끝난 이후였다. 따라서 현재 스크롤의 위치를 파악하여 특정 위치에 도달하면 애니메이션을 시행하는 로직이 필요했다. 코딩 초보에게 스크롤의 위치파악이란 다소 어렵게 느껴질 수 있다. 하지만 겁먹지 말자. 웹 어플을 만드신 천상계 개발자 분들이 이미 window 객체 안에 관련 데이터를 얻을 수 있도록 여러 가지 객체를 담아놓았다. (감사합니다 ㅠㅠ) 아래 코드는 현재 Y축 스크롤 위치를 알려주는 착한 프로퍼티인데, windo.. 2022. 3. 5.
[JS] 이메일 인증 코드 생성하기 이메일 인증이나 별도의 인증코드를 만들어 보내줘야 할 때 그냥 번호만 띡 하고 만들어서 보내면 뭔가 보안상 안 좋을 것 같기도 하고 제일 큰 문제는 멋있지가 않다... 그래서 이번에는 랜덤으로 코드를 생성해주는 crypto.randomBytes를 사용해 보았다. crypto.randomBytes( size, callback ) 사용방법과 설명은 GeeksforGeeks에서 자세히 잘 나와있다. // Node.js program to demonstrate the // crypto.randomBytes() method // Including crypto module const crypto = require('crypto'); // Calling randomBytes method with callback cr.. 2022. 2. 13.
[Docker] Image를 Docker hub에 등록하기 자 이제 image를 만들었다면, 이미지를 dockerhub에 업로드해 어디서는 사용할 수 있도록 할 차례다. CLI를 통해 Docker에 로그인 일단은 아래 명령어를 통해 docker에 로그인하자. 필자의 경우 이미 로그인을 한 적이 있기 때문에 아래 명령어만으로 로그인이 되지만, 처음인 분들은 아이디와 패스워드를 입력해야 한다. sudo docker login 버전이 태그 된 이미지 생성 로그인이 완료되었다면 이제 dockerhub에 올릴 이미지의 버전을 생성해보자. 아래와 같이 명령어를 입력하면 자신의 도커 아이디/이미지 이름이 생긴 이미지를 확인할 수 있다. ex) seanswim/myimage:1.1 sudo docker tag 이미지이름 도커아이디/이미지이름:버전 이미지 업로드 여기까지 왔다면.. 2022. 2. 11.
[Docker] Image 생성후 container 실행하기 이번 프로젝트에서는 Docker를 적극적으로 활용하고자 하는데 역시 Dockerfile을 생성하는 것부터가 쉽지가 않다. Dockerfile 생성 필자의 경우 이것저것 시도해보다가 결국 인터넷에 나와있는 그대로 복붙을 해서 사용을 했다. FROM node:12-alpine WORKDIR /app COPY package*.json ./ RUN npm install --silent COPY . . CMD [ "npm", "start" ] EXPOSE 4000 설명을 덧붙이자면 FROM은 사용하는 기본 이미지를 의미한다. 이번 프로젝트의 경우 서버를 nodeJS로 구축하기 때문에 node:12-apline 버전을 적어 넣었다. 그리고 RUN은 앱을 실행하기전 실행해야 할 명령어를 적어놓는 부분이다. 위 코드를.. 2022. 2. 10.
[NodeJs] nodeJS를 이용해 이메일 보내기 오늘은 nodeJS를 이용해 이메일을 보내는 방법을 알아보자. 사실 mailchimp와 같은 Third-party API를 활용하면 간단하게 메일을 작성해서 메일을 주고받을 수 있지만, Third-party API를 이용하면 해당 API를 또 한 번 학습해야 하는 데다 지원하는 기능 이외에 기능을 추가하기가 어려운 단점이 있다. 따라서 오늘은 SMTP 프로토콜을 이용한 이메일 전송방법을 알아보려한다. NodeJS에는 SMTP 프로토콜 통신을 위한 준비가 모두 되어있다. 일단은 아래 모듈을 다운받아 주자 npm install nodemailer createTransport() 메서드는 메일을 보내기 전 환경을 셋업 하는 메서드다. 필자는 naver를 이용했기 때문에 아래와 같이 설정했다. const nod.. 2022. 1. 30.
[nodeJs] Yahoo Finance에서 주식 데이터 끌어오기 국내 커뮤니티를 돌아다니다 보면 주식 데이터를 활용한 프로그래밍에 대한 글은 많지만 막상 그 안을 들여다보면 거의 크롤링을 이용한 데이터 끌어오는 방식에 초점이 맞춰져 있다. 사실 그럴 수 밖에 없는 것이, 국내에 주식 데이터 api를 제공하는 기업이 사실상 전무하다 보니 이런 현상이 일어나는 듯하다. 인공지능과 빅데이터를 외치는 사람은 많지만 정작 프로그래밍에 필요한 데이터를 제공하는 곳은 없는 대한민국... 이전에는 한국거래소에서 실시간 정보를 api를 통해 제공한 듯 하지만 지금은 그마저도 서비스를 종료해 데이터를 받아올 수 없게 되어 버렸다. 그래서 방법이 없을까... 고민을 하던 중 Yahoo Finance에서 주식 데이터를 api로 받아 올 수 있음을 발견했다. 1. RapidApi 가입 ht.. 2022. 1. 29.

티스토리툴바