Hazellog

npm과 yarn은 가장 인기있는 노드 패키지 관리자이다. 두 패키지 관리자를 비교하고 어떤 것을 사용하는 것이 좋은 지 고민하면서 이 글을 작성하게 되었다. 패키지 관리자를 사용하면 프로젝트를 좀 더 쉽게 관리할 수 있다. Package Manager 패키지 관리자는 컴퓨터 프로그램의 설치, 삭제, 업데이트 과정을 자동화하는 소프트웨어 도구를 말한다. 패키지 관리자를 사용하여 많은 프로그램을 스크립트를 통해서 한 번에 관리할 수 있는 장점이 있다. 그 중 npm과 yarn은 자바스크립트 런타임 환경인 노드의 패키지 관리자다. npm npm은 노드 패키지 매니저(Node Package Manager)의 줄임말로 노드를 설치할 때 자동으로 설치되는 기본 패키지 관리자이다. 온라인 플랫폼으로 사람들이 노드 ..

Iframe An inline frame is used to embed another document within the current HTML document. iframe HTML 태그는 웹 사이트 내에서 다른 웹 사이트를 보여줄 때 사용한다. 즉, html 파일을 가져와 보여주는 역할을 한다. 마치 노션의 embed 기능과 같다. 크기 조절 Target for a Link Different Url a 태그는 클릭으로 페이지를 이동할 수 있다. 다만, target 값으로 iframe의 name 값을 입력하면, iframe 내에서 해당 페이지를 확인할 수 있다. Embed embed 태그는 웹 페이지, 사진, 미디어 플레이어, 플러그인과 같은 외부 자원을 컨테이너로 정의한다. ⛔ 대부분의 브라우저는 더..

오류 상황 42cabi는 pm2로 서버를 구동하고 있다. pm2 log에 지속적으로 OkPacket 로그가 출력되는 것을 확인했다. 로그인이 완료된 이후, 아래와 같은 로그가 쌓이는 것을 확인하고 이를 지우기위해 고민했다. 오류 원인 OkPacket이 발생하는 원인을 확인했다. OkPacket은 SQL Query 문을 실행한 뒤에 result를 출력하면 나오는 내용이다. Node.js MySQL Result Object - Examples Node.js MySQL Result Object - Examples Node.js MySQL Result Object When a MySQL Query is executed in Node.js, an object called Result Object is return..

자바스크립트의 데이터 타입 데이터 타입은 값의 종류를 말한다. 자바스트립트(ES6 기준)는 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시 타입과 객체 타입으로 분류할 수 있다. 원시 타입 primitive type 숫자 타입 : number, 정수와 실수 구분없이 하나의 숫자 타입만 존재한다. 문자열 타입 : string 불리언 타입 : boolean, 참(true)과 거짓(false) undefined 타입 : var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 타입 : 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 심벌 타입 : ES6에서 추가된 타입 객체 타입 object/reference type 객체, 함수, 배열 등 6.1 숫자 타입 C나 자바의 경우, 정수와 실수..

1. 변수란 무엇인가? 왜 필요한가? 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다. 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 갓을 읽어 들여 재사용하기 위해 변수라는 매커니즘을 제공한다. 즉, 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 고간을 식별하기 위해 붙인 이름을 말한다. 상징적 이름인 변수는 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다. 따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 안전하게 값에 접근할 수 있다. 변수 이름 : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름 변수 값 : 변수에 저장된 값 할당 : 변수..

이전에는 전역 변수의 관리를 위해 React context를 사용했다면, 이번에는 Redux를 사용하려고 한다. React와 typescript 환경에서 코드를 작성하고 있다! Redux란? 리덕스는 action 이벤트를 사용하여 어플리케이션 상태를 관리하고 업데이트하는 라이브러리이다. 전체 어플리케이션에서 상태에 접근할 수 있는 특징이 있어 전역 변수를 관리할 수 있다. 즉, 해당 값이 필요한 컴포넌트에 도달하기 위해서 거치는 모든 자식 컴포넌트에 매개변수로 값을 전달하지 않고, 값이 필요한 컴포넌트에서만 참조하여 사용할 수 있다. https://react-redux.js.org/ React Redux | React Redux Official React bindings for Redux react-re..

사물함 대여 서비스를 운영하던 중 장기 대여 연체자가 생긴 문제가 발생했다. 슬랙봇으로 대여 및 반납, 연체 정보를 메세지를 전송하려고 했으나, 승인 지연으로 부득이하게 이메일로 연체 알림을 보내기로 했다. 이에 따라 연체자 명단을 이용하여 메일을 전송하는 코드를 작성했다. Nodemailer :: Nodemailer Nodemailer Nodemailer is a module for Node.js applications to allow easy as cake email sending. The project got started back in 2010 when there was no sane option to send email messages, today it is the solution most No..

React context는 상태를 전역적으로 관리할 수 있다. 하위 컴포넌트에 props로 인자를 전달하는 경우, 값을 사용하지 않는 컴포넌트라도 전달의 목적으로 값을 전달해야 한다. context를 사용하여 상태관리를 더 효율적으로 관리할 수 있다. useContext는 useState 를 함께 사용하여 구현할 수 있다. nested 되어 props로 변수를 전달하는 경우는 아래 코드와 같다. //Nested.js export const Nested = (props) => { return ( Nested ) } const Component = (props) => { return ( Component ) } const Component2 = (props) => { return ( Component2 {p..

Date Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담는다. 1970년 1월 1일 자정과의 시간 차이를 초 단위로 나타내는 UNIX 시간과는 다르다. 국제 표준 시간인 협정 세계시(UTC)는 그리니치 평균시(GMT)에 기반하며, UTC와 GMT는 초의 소숫점 단위에서만 차이가 난다. 그리니치 평균시(GMT)는 영국의 런던을 기점으로 하고 있어 우리나라와는 +9 시간 차이가 있다.(우리나라가 9시간 빠르다) Date 객체의 중심을 구성하는 시간 값은 UTC 기준이지만, 날짜와 시간 등 구성 요소를 가져오는 메서드는 모두 현지의 시간대를 사용한다! Date 의 최대 값은 JavaScript 에서의 안전한 최대 정수(Number.MAX_SAFE..

Context 란? Context는 모든 자식 컴포넌트에 props로 전달하지 않고 데이터를 전달할 수 있는 방법이다. 데이터는 top-down 방식으로 props를 사용하여 전달하는 경우, 사용하려는 자식 컴포넌트에 도달할 때까지 모든 컴포넌트에 props로 전달해야 한다는 번거로움이 있다. context는 컴포넌트 안에서 전역적으로 데이터를 공유할 수 있어 props 전달없이 데이터를 확인할 수 있다. 이는 사용자 정보, 테마, 언어 등을 관리할 때 사용할 수 있다. ☝🏻 만약, 단순히 많은 단계를 거쳐 props를 전달하는 것을 피하기 위함이라면 context 보다는 component composition 이 더 나은 방법일 수 있다. API React.createContext const MyCon..