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

바닐라 자바스크립트로 SPA 구현하기

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

1일 전
·
0개의 댓글
·
post-thumbnail

SPA란 무엇일까?

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

2022년 9월 4일
·
0개의 댓글
·

웹 접근성을 왜 지켜야 할까?

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

2022년 8월 21일
·
0개의 댓글
·

SWR 사용하기

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

2022년 8월 7일
·
0개의 댓글
·
post-thumbnail

비밀번호 안전하게 저장하기

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

2022년 7월 24일
·
0개의 댓글
·

의사 클래스 중첩해서 적용하기

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

2022년 6월 26일
·
0개의 댓글
·

서버사이드 렌더링시 발생하는 html 매칭 문제(next.js)

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

2022년 5월 29일
·
0개의 댓글
·

글또 7기를 시작하며

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

2022년 5월 15일
·
0개의 댓글
·
post-thumbnail

aria로 tab 메뉴 구성하기

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

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

iframe 요소를 반응형으로 만들기

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

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

Flux 패턴

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

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

css의 우선 순위

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

2021년 10월 24일
·
0개의 댓글
·
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일
·
1개의 댓글
·
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개의 댓글
·