개발자들 사이에서 함께 자라기 책은 너무나 유명해서 이 책을 읽어보진 않았더라도 책 제목 정도는 알고 있는 분들이 많을 거라고 생각합니다. 추천 도서로도 많이 거론되는 책입니다. 저도 프로젝트를 하면서 추천 받은 책이었어요. 사실 '애자일'이라는 단어, '애자일하게 일

React와 같은 라이브러리, Angular와 같은 프레임워크로 개발하면서 지금 개발하고 있는 페이지가 SPA라는 것을 모르는 개발자는 없을 겁니다. 하지만 바닐라 자바스크립트로 SPA를 구현하라고 하면 좀 막연한 기분이 드는데요. 이번에는 바닐라 자바스크립트로 간단한

SPA란 Single Page Application의 약자로, 하나의 페이지(html)에 변경된 정보, 또는 영역을 동적으로 변경하는 것을 말합니다. 그렇다면 하나의 페이지를 동적으로 변경한다는 것이 무엇일까요?태초에 MPA(Multi Page Application)가

프론트엔드 개발을 하는 사람이라면 웹 접근성(Web Accessibility)에 대해 한번쯤 들어봤을 것입니다. 사용자가 직접 사용하는 화면을 만드는 것이 프론트엔드 개발자이기 때문입니다. 어떤 사람은 개발을 시작하는 단계에서 웹 접근성에 대해 가볍게 알고 넘어갔을 수

제가 처음 리액트를 공부할 때 리덕스는 넘어야만 하는 큰 산 중에 하나였습니다. 상태 관리를 해야 했으니까요. 하지만 '상태를 변경한다' 라는 목적만을 갖고 봤을 때 리덕스가 사용하고 있는 방식은 다소 난해하게 느껴졌습니다. 리덕스를 사용하기 위해서는 최소 리듀서와 액

많은 서비스들이 사용자의 정보를 서버에 저장합니다. 가장 대표적인 사용자의 정보라면 아이디와 비밀번호를 들 수 있습니다. 오늘은 사용자의 비밀번호를 어떻게 암호화해서 서버에 전달하는지에 대해서 작성하려고 합니다. 비밀번호를 암호화할 때 사용한 패키지는 bcrypt입니다

의사 클래스(가상 클래스)는 CSS를 적용할 때 클래스 선택자나 태그 선택자에 추가해 선택한 요소가 특별한 상태일 때의 스타일을 적용하는 방식입니다. 클래스나 태그로 선택자를 선택하고 스타일을 적용할 때는 DOM에 이미 정의된 요소로 선택하지만 의사 클래스를 사용하면

next.js로 한참 작업을 하고 있는데 이런 에러가 떴다. > Warning: Expected server HTML to contain a matching ` in ` 당시 내가 하고 있었던 작업은 다국어 지원용 드롭다운을 만들면서 다음과 같이 국기 svg와 언어

1. 지난 글또 활동을 돌아보자 글또는 5기부터 참여하게 되어 6기, 그리고 7기까지 신청하게 되었다. 글또를 몇 기에 걸쳐 참여하면서 기술 블로깅을 잘 한다는 게 쉽지만은 않다는 걸 매 순간 느꼈던 것 같다.

aria는 웹 접근성을 높이는 방법 중 하나인데, MDN에서는 aria를 다음과 같이 설명하고 있다.접근가능한 리치 인터넷 어플리케이션(Accessible Rich Internet Applications, ARIA)은 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션(

html5에서 추가된 <video> 태그는 영상 요소를 자유롭게 삽입할 수 있도록 한다. 그러나 youtube나 vimeo와 같은 외부 영상 서비스를 삽입할 때는 <video> 태그를 사용하지 못하고 해당 사이트에서 제공하는 소스를 사용하는 경우가 많다. 이

면접을 보러 갔을 때 Flux 패턴에 대한 질문을 받은 적이 있다. 그때 Flux 패턴이라는 용어(?)가 낯설어서 잘 모른다고 대답했었는데 알고보니 Flux 패턴은 React로 개발하면서 늘상 마주치는 단방향 데이터 흐름을 일컫는 것이었다. React로 개발한 토이 프

css는 html에 스타일을 입히는 스타일시트 언어이며 우선순위에 따라 스타일이 입혀지는 형태로 구성되어 있다. css의 우선 순위는 선택자에 따라, 작성된 위치에 따라, !important의 유무에 따라 정해진다.css의 선택자는 태그명, 아이디, 클래스, 추상 클래

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

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

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

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

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

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

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