profile
개발을 개발개발 🐾
post-thumbnail

Buffer와 Stream

node.js에서 fileSystem을 사용해 파일을 읽고 쓰고 저장하는 동작을 하려고 fs로 시작하는 명령어를 사용하다 보면 데이터를 주고 받을 때 다음과 같이 낯선 데이터 형식을 만나게 된다. 이게 뭔가 싶다. 이렇게 이상한 데이터 형식을 사람이 알아볼 수 있

2021년 9월 26일
·
0개의 댓글
post-thumbnail

Electron 앱 build부터 자동업데이트까지

Electron은 크로스 플랫폼(macOS, Linux, Windows), 그리고 x64, ia32 등의 아키텍쳐를 지원한다. 당연히 Electron에서 지원하는 build 시스템도 있다. 별도의 라이브러리 없이 build 하고자 하는 경우 여기를 참고한다. gyp과

2021년 9월 12일
·
0개의 댓글
post-thumbnail

Electron 개요 및 구조

Electron은 데스크탑 어플리케이션을 만드는 프레임워크다. Electron 공식 문서의 What is Electron? 을 보면 Electron에 대해 다음과 같이 표현한다. > Electron은 JavaScript, HTML 및 CSS를 사용하여 데스크탑 애플리

2021년 8월 13일
·
0개의 댓글

글또 6기를 시작하면서

글또 5기 신청서를 쓸 때가 불과 얼마 전이었던 것 같은데 어느새 5기가 종료되고 다시 6기 신청을 하고 6기 첫 글을 쓴다. 사실 회고하는 것을 별로 좋아하지 않는 편이라 지금까지 회고 글을 쓴 적이 없었다. (회고할 것이 없기도 했다) 최근 들어서 일상에서 자주 스

2021년 8월 1일
·
0개의 댓글
post-thumbnail

JavaScript에서 객체 동결하기

JavaScript에서 객체는 변경 가능한 값이다.흔히 let 키워드로 선언하면 변경 가능한 값, const 키워드로 선언하면 변경 불가능한 값이라고 생각하는데 이것은 원시값에 해당하는 이야기다.const 키워드로 선언한 객체는 값을 재할당하는 것이 불가능할 뿐, 프로

2021년 5월 2일
·
0개의 댓글
post-thumbnail

리액트 기반 일렉트론에서 filesystem 활용하기

최근 electron에서 파일을 로컬에 저장하고 읽어들이는 작업을 했다. 주로 JavaScript에서 작업했던 나에게 filesystem을 직접 건드리는 작업이 좀 생소했기 때문에 기록으로 남겨두려고 한다.내가 테스트한 환경은 macOS, electron + react

2021년 4월 18일
·
0개의 댓글
post-thumbnail

JSDoc을 사용해 JavaScript 파일 문서화하기

JSDoc이란? JSDoc은 Javadoc과 유사한 JavaScript용 API 문서 생성기이다. 문서 주석을 코드와 함께 소스 코드에 직접 추가할 수 있다. JSDoc은 소스 코드를 스캔하고 HTML 문서를 생성한다. JSDoc의 주목적은 JavaScript 앱

2021년 4월 4일
·
1개의 댓글

env: node: No such file or directory

또 까먹을까봐 남겨둔다.env: node: No such file or directory이 에러는 내가 입력한 명령어를 실행할 node 환경이 구성되지 않았다는 뜻으로, npm이 설치되지 않았다면 npm을 설치하고, nvm을 사용하고 있어서 use를 해주지 않았다면 n

2021년 3월 25일
·
0개의 댓글
post-thumbnail

얕은 복사와 깊은 복사

객체를 복사하는 과정에 있어서 객체가 프로퍼티의 값으로 존재해 이중객체의 형태를 띄는 경우, 복사하는 방법은 얕은 복사와 깊은 복사 두 가지 방법으로 나뉜다.위와 같은 객체를 예로 들면, 프로퍼티 키(이하 키)가 a와 c의 경우 원시값을 프로퍼티 값(이하 값)으로 갖는

2021년 2월 21일
·
0개의 댓글
post-thumbnail

CORS (교차 출처 리소스 공유: Cross-Origin Resource Sharing)

CORS란 Cross-Origin Resource Sharing의 약자로, 번역하면 교차 출처 리소스 공유라고 불리는 HTTP 헤더 기반 메커니즘이다. 이렇게만 봐서는 그래서 무슨 역할을 하는 것인지 알기가 쉽지 않다. 쉽게 말하면, CORS는 브라우저가 안전한 리소스

2021년 2월 7일
·
0개의 댓글
post-thumbnail

HTTP METHODS

브라우저가 웹 서버와 통신하기 위한 규약으로 브라우저가 요청(request)하면 응답(reponse)하는 구조로 되어있다.W3C, IETF 등에서 제정한 인터넷 표준(RFC-2616)으로 국제적인 약속이다.1991년 HTTP/0.9부터 20년 이상 전세계적으로 사용되는

2021년 1월 24일
·
0개의 댓글
post-thumbnail

입력받은 숫자를 원화 표기로 변경하기

0 이상 1조(1000000000000) 미만의 정수천 단위에 콤마를 찍는다만, 억 단위에 해당 단위를 삽입한다금액 사이는 한 칸을 띄운다주어진 숫자가 1000000이라면 100만으로 표기주어진 숫자가 1000001이라면 100만 1원으로 표기원은 마지막에 추가새로운

2021년 1월 5일
·
0개의 댓글
post-thumbnail

내비게이션 상태 관리

인스타그램 내비게이션 이 이미지는 인스타그램 내비게이션이다. 이 내비게이션의 특징적인 점이 몇 가지 있는데, 클릭하면 페이지가 이동되거나 모달이 뜬다. 모달이 뜨는 경우 페이지가 이동하지 않기 때문에 마지막으로 이동한 페이지가 활성화 된 상태이다. 모달을 끌 경우

2020년 12월 21일
·
0개의 댓글
post-thumbnail

Angular에서 모듈 형태로 라이브러리 직접 주입하기

메가박스 클론 프로젝트를 할 때의 일이다.당시 나는 메인 페이지를 맡고 있었는데 코린-코린이였던 당시의 나(지금은 코린이)에게 캐러셀은 너무 큰 장벽 중에 하나였다. 모르면 용감하다고, 프로젝트를 시작하던 당시의 나는 '캐러셀을 만들어보고 싶다'는 생각을 진심으로 했었

2020년 12월 20일
·
0개의 댓글
post-thumbnail

reflow와 repaint

브라우저가 화면에 픽셀을 렌더링하는 순서는 다음과 같다. (chrome 기준) DOM 및 CSSOM 트리는 결합되어 렌더링 트리를 형성한다. 렌더링 트리에는 페이지를 렌더링하는 데 필요한 노드만 포함된다. 레이아웃은 각 객체의 정확한 위치 및 크기를 계산한다.

2020년 12월 13일
·
0개의 댓글
post-thumbnail

Enums

Enums는 Enumeration의 약자로 열거형이라는 뜻이다. Enums을 사용하면 명명된 상수 집합을 정의할 수 있다. Typescript에서의 Enums은 숫자와 문자열을 모두 제공한다. 열거형은 enum 키워드를 사용해 정의할 수 있다.1로 초기화되는 Up이라는

2020년 12월 7일
·
0개의 댓글
post-thumbnail

Element.animate()

흔히 애니메이션은 CSS로 구현하는 경우가 많다. 복잡한 조건, 복잡한 인터렉션이 일어나지 않는 경우에는 CSS로만 구현하는 것이 훨씬 비용을 줄이는 방법이기도 하다. 하지만 아주 단순한 애니메이션이라고 하더라도 같은 코드를 반복해서 작성해야 한다면 Javascript

2020년 11월 30일
·
0개의 댓글
post-thumbnail

브라우저의 전역 변수

위와 같은 객체에서 프로퍼티에 접근하는 방법은 두 가지이다. 마침표 표기법(Dot notation) 이나 대괄호 표기법(Bracket notation) 을 활용하는 것이다. 접근 방법을 구분하는 기준은 프로퍼티 키가 식별자 네이밍 규칙을 따르는가 이다.프로퍼티 키가 식

2020년 11월 30일
·
0개의 댓글
post-thumbnail

반응형 웹에서 요소 리사이징하기

반응형 웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다. 위키피디아, 반응형 웹 디자인 요즘 반응

2020년 11월 29일
·
0개의 댓글
post-thumbnail

다크모드 구현하기

다크모드란 일반적으로 더 어두운 색상 팔레트를 사용하는 UI를 말한다. 쉽게 말하면 어두운 배경에 밝은 색상의 요소를 사용하는 것이다. 그러나 어떤 배경(라이트/다크)을 가지고 있더라도 웹 콘텐츠 접근성 지침(WCAG: Web Content Accessibility

2020년 11월 29일
·
2개의 댓글