axios로 살펴보는 관심사의 분리와 추상화
소프트웨어 개발에 있어 자주 사용되는 개념인 관심사의 분리와 추상화에 대해서 axios의 코드를 예시로 보며 살펴봅니다. 소프트웨어 개발에는 여러 가지 원칙들이 있습니다. 원칙을 적용하면 소프트웨어를 더 유연하고 견고하게 만들 수 있습니다. 개발 관점에서 원칙이라는 것은 지켜야하는 수칙이라기 보다는 더 나은 소프트웨어를 위한 방법이라고 볼 수도 있습니다. 이번 글에서는 axios라는 자바스크립트 라이브러리를 살펴보면서 관심사의 분리와 추상화에 대해 살펴보겠습니다. axios
Nextjs getServerSideProps에 대해 알아보자
Nextjs 페이지 컴포넌트의 핵심 기능인 getServerSideProps가 props를 변경하고 전달하는 동작에 대해 알아보겠습니다. Nextjs는 리액트 생태계에서 가장 많이 사용하는 프레임워크 중 하나입니다. 주로 SSR 기반의 프로젝트에 사용합니다. 또한 파일 시스템 기반의 직관적인 라우팅, 이미지 최적화, 타입스크립트 지원 등 간단한 설정으로 사용할 수 있는 기능이 많아서 프로젝트를 구성하고 관리하는 작업이 줄어듭니다. 여러 기능 중 SSR에서는 DataFetch를 쉽게 구현할 수
Github Actions를 이용하여 docker image 빌드하기
Github Actions를 이용하여 어플리케이션을 Docker 이미지로 빌드하고 ghcr.io 저장소에 푸시하는 과정을 알아봅니다. 소프트웨어 제품이나 서비스의 운영에 있어 배포는 적지 않게 중요합니다. 특히 운영 규모가 커지거나 많은 사람이 협업하는 경우에는 더욱 강조될 것입니다. 그렇기에 배포 프로세스를 자동화하면 생산성을 높이고, 휴먼 에러를 줄일 수 있습니다. 요즘은 서비스 운영 환경이 컨테이너 기반으로 이루어진 경우도 많이 있습니다. 만약 kubernetes를 사용한다면 필수적
VSCode Extensions에 PR 제출하기(feat. vscode-github-pull-request)
This is interesting features for development 코드 작업을 하며 사용하는 vscode extensions 중에 GitHub Pull Requests and Issues가 있습니다. 실제 개발보다는 협업에 가까운 도구입니다. Github과 연동하여 PR이나 이슈를 vscode에서 확인할 수 있는 확장앱입니다. 최근에 vscode로 회사 업무를 하면서 불편한 것이 생겨 이 확장앱을 직접 수정하고 기여한 내
소비되는 상태의 변경에 대해서만 컴포넌트를 업데이트 하는 Hook
useState를 이용한 상태 관리 코드는 직관적이고, 재사용 가능하며, 관리하기 쉽습니다. 특정 기능별로 커스텀훅을 작성하면 일반적인 함수를 작성하는 것처럼 코드를 목적에 따라 분리할 수 있습니다. 하지만 하나의 커스텀훅을 사용하는 모든 컴포넌트가 같은 목적을 가진 것은 아닙니다. 만약 어떤 기능을 위해 커스텀훅을 호출했지만, 그중 필요하지 않은 상태를
Svelte가 DOM을 조작하는 과정 알아보기
React, Vue와 같은 라이브러리를 통해 Virtual DOM의 개념은 많이 알려져 있습니다. 개발자는 DOM을 직접 조작하지 않고 선언적으로 "상태"라고 부르는 데이터만 관리합니다. DOM을 업데이트하는 것은 React와 같은 라이브러리가 Virtual DOM을 사용해 알아서 합니다. Instead of using technique
Array는 아니지만 더 배열 같은... ArrayBuffer와 TypedArray
프로그래밍에 있어 빠질 수 없는 자료구조 중 하나는 바로 "배열"일 것입니다. 자바스크립트에는 "Array"라는 전역 객체로 배열을 사용할 수 있습니다. ("Array"를 번역하면 "배열"이지만) 실제로 자바스크립트의 Array는 일반적으로 컴퓨터과학에서 다루는 "배열"
참을 수 없는 코드의 가벼움(3년차 개발자 회고)
이 글의 제목인 참을 수 없는 코드의 가벼움은 환경과 다른 코드에 영향을 받아 쉽게 흔들리는 불안한 코드를 표현한 것이다. 취업해서 개발자로서 일을 시작한 지 2년이 넘었다. 나에게 코드는 굉장히 흥미로운 도구이지만, 매일 씨름하는 스트레스의 주범이기도 하다. 코드를 작성하는 개발자는 종종 "이게 왜 안되지?", "엥, 왜 돌아
MUI v5, 무엇이 바뀌었을까? (feat. why)
원문: Introducing MUI Core v5.0 이 글은 원문의 개선점에 대한 내용의 일부를 리뷰한 글이며, 오역이 있을 수도 있습니다. MUIv5가 릴리즈(2021.09.16) 되었습니다. MUI는 구글의 디자인 철학인 Material Design을 구현한 자바스크립트 라이브러리이고, 리액트 UI 라이브러리 중에서 가장 점유율이 높은 패키지입니다.
Docker를 이용한 세상 쉬운 데이터베이스 서버 띄우기
데이터베이스는 로컬 개발환경에서 자주 필요한 것 중 하나일 것입니다. 데이터베이스 서버는 한번 설치하고 서비스로 설정해두면 크게 손이 갈 일이 없긴 하지만, 저는 컴퓨터에 자주 사용하지 않는 프로그램을 설치하는 것이 찝찝하기도 합니다. 이런 데이터베이스 서버를 사용할 때마다 설치 없이 구동하는 방법이 있습니다. 바로 Docker를 이용하여 데이터베이스 서버
sequelize-cli를 typescript와 함께 사용하기
sequelize-cli를 typescript와 함께 사용할 수 있도록 세팅해보겠습니다. NodeJS 환경에서 Sequelize를 사용할 때 sequelize-cli를 사용하면 Model 생성, Migration 관리, 시드 구성 등의 기능을 CLI에서 사용할 수 있습니다. 하지만 sequelize-cli는 자바스크립트 기반으로 동작하고, 관련 파일을 JS파일로 작성해야 합니다. sequelize-cli를 사용할 때 typescript를 적용해
JS로 다루는 CSS, CSS-in-JS (feat. CSSOM)
자바스크립트를 이용하여 스타일을 적용할 수 있는 CSS-in-JS가 어떻게 동작하는지 알아보겠습니다. 또 CSS-in-JS를 구현한 라이브러리마다 어떤 차이가 있는지 비교해보겠습니다. 팀 버너스리가 고안한 웹이 등장한 이래로 많은 웹 기술들이 생기고 사라졌습니다. 하지만 여전히 HTML은 우리에게 중요한 기술로 남아 있습니다. 또한 CSS 역시 웹 문서의 스타일을 꾸미기 위해 사용하는 강력한 기술입니다. 웹 개발자라면 HTML과 CSS로 이루어진 웹 문서에 대한 이해가 필수적일 것입니다. React, Vue 등 많은 프론트엔드 기술이 있
실전에서 느낀 테스트 코드가 필요한 이유
소프트웨어 개발 과정에서는 많은 변화가 있습니다. 특히 프로젝트 초반에는 기획과 설계, 데이터 구조가 변경되는 일이 잦기 때문에 유연한 코드를 작성하는 것이 중요합니다. 또한 좋은 코드를 작성하는 것에 관해서 이야기할 때, 테스트 코드는 개발자들 사이에서 빠지지 않고 거론되며 거의 필수적이라고 여겨지는 것 같습니다. 하지만 아쉽게도 현시점의 제가 일하는 팀
React 컴포넌트에 ref props 전달하기 (feat. forwardRef, useImperativeHandle)
React에서 ref 속성(props)이 가장 많이 사용하는 용도는 DOM 엘리먼트를 참조하는 경우일 것입니다. HTML 엘리먼트에 대해 ref를 props로 넘겨주어 DOM 엘리먼트를 담거나, 콜백 함수를 넘겨주어 DOM 엘리먼트를 매개변수로 접근할 수 있습니다. 하지만 ref의 기능은 그것뿐만이 아닙니다. Refs provide a way to acc
자바스크립트, 딕셔너리를 만드는 가장 빠른 방법은?
자바스크립트 개발을 하면서 여러가지 자료구조를 사용하게 됩니다. 가장 많이 쓰이는 것은 역시 Array(배열)이겠죠? 그리고 데이터에 맞게 Object(객체)를 만들어 사용하기도 합니다. Prototype을 이용하거나, ES6의 Class 문법을 통해 객체 생성자를 만들어 사용하기도 합니다. 오늘 포스트에서 살펴볼 자료구조는 바로 Dictionary입니다.
리액트 컴포넌트 Rerendering 파헤치기
React는 웹 프론트엔드 라이브러리로 많이 사용되어지고 있습니다. 저 역시 리액트를 처음 접하고 업무 프로젝트로 사용한 지 1년 정도가 되었습니다. 라이브러리를 이용하여 개발을 하면 더 편하지만 알아야 할 것도 많이 생깁니다. 리액트로 개발을 할 때, 컴포넌트의 Rerendering에 대해 고민하게 될 때가 있는데요. React는 화면의 변경 사항에 대해
자주 사용하는 Git 명령어 정리
Git은 개발자들이 버전 관리 도구로 많이 사용하고 있습니다. 사용하기도 쉽고, Github과 연동하면 소스 코드를 관리하기도 편리합니다. 이번 포스트에서는 Git을 사용할 때, 자주 사용하는 명령어를 정리해보도록 하겠습니다. (단, git의 명령어의 개념과 명령어의 모든 옵션을 다루지 않습니다. 개인적으로 자주 사용하는 것들만 다루도록 하겠습니다.) I
AWS EC2 + RDS에 Node.js 서버 배포하기(Ubuntu, Mysql)
보통의 웹 서비스는 서버를 이용하여 서비스를 제공합니다. 서버 컴퓨터를 직접 구성해서 할 수도 있지만, 요즘에는 클라우드 서비스를 많이 이용합니다. 클라우드 서비스를 이용하면 물리적으로 서버를 직접 구성하거나 가지고 있지 않아도 되고, 내가 사용할 서비스에만 집중하여 서버를 운영할 수 있습니다. 이번 포스트에서는 대표적인 클라우드 컴퓨팅 서비스 중 하나인
Node와 Babel + Typesciprt + Eslint 개발 환경 구성하기
애플리케이션을 개발할 때, 애플리케이션 자체에 대한 것이 아닌 개발자가 개발을 편하게 할 수 있도록 돕는 여러 가지 도구들이 있습니다. 개발에 앞서 그러한 개발 도구들로 개발 환경을 구성한 후, 개발을 하게 되는데요. 이 글에서는 Node.js를 기반으로 하고, Babel Typescript Eslint를 이용하여 개발환경을 구성해 보겠습니다. Node.
Mobx의 상태 변화, Action을 알아보자(feat. 비동기 Action)
Mobx는 리액트에서 사용되어지는 상태 관리 라이브러리입니다. 리액트 자체적으로 state나 useState를 이용해서 상태 관리를 할 수 있지만, 전역적인 상태나 반응적인 변화를 위해서 Mobx와 같은 외부 라이브러리를 사용하기도 합니다. Mobx에서 상태 변화를 일으키는 것을 Action이라고 합니다. 이 글에서는 리액트에서 Action을 사용하는 것과
Javascript의 비동기 처리, async/await를 알아보자
안녕하세요. 오늘은 자바스크립트의 비동기 처리를 다루는 async/await 문법에 대해 알아보겠습니다. 지난 글에서 다루었던 Promise와 함께 자바스크립트의 비동기 패턴 중 하나입니다. 또한 async/await 패턴은 Promise를 기반으로 하고 있습니다. 혹시 아직 Promise에 대해 모르신다면 이 글들을 추천드립니다. 자바스크립트 Promi
Javascript의 비동기 처리, Promise를 알아보자
싱글스레드 환경에서 동작하는 자바스크립트의 비동기 처리를 하기 위한 Promise의 개념과 기본적인 사용법을 알아보겠습니다. 오늘은 자바스크립트에서 비동기 처리를 다루는 Promise에 대해 알아보겠습니다. 1. Promise? 왜 필요할까요? 자바스크립트 코드가 동작할 때, 어떠한 작업을 기다리게 된다면 어떻게 될까요? 만약 브라우저에서 실행되는 코드라면 웹 페이지의 동작이 멈추게 될 것입니다. 특히 웹 페이지에서는 1-2초의 먹통에도 사용자는 답답함을 느끼게 됩니다. 개발자는
Svelte로 만드는 TODO-App (3), Item 순서 변경하기
이번 포스트에서는 Item의 순서를 변경할 수 있도록 구현하겠습니다. 1. Item 순서 변경 구현하기 Item의 순서를 변경하여서 Todo-App을 사용하기 좋게 만들어 보겠습니다. 순서를 변경하는 UI/UX는 심플하게 드래그해서 변경할 수 있게 만들 것입니다. event를 이용하여 구현할 수도 있겠지만, 해본 적도 없고 하니 이미 만들어진 라이브러리를
Svelte로 만드는 TODO-App (2), 데이터 Store 구현하기 / 간단한 CRUD 구현하기
지난 시간에 이어서 boards와 items 데이터를 Store를 만들어서 관리하고, CRUD를 구현하겠습니다. 1. Store 구현하기 Svelte는 이미 Store 기능을 내장하고 있습니다. svelte/store를 import하면 그 기능을 사용할 수 있습니다. 먼저 Store를 구현할 파일을 만들도록 하겠습니다. /src폴더 아래에 stores폴더를
Svelte로 만드는 TODO-App (1), Svelte 설치하기 / 컴포넌트 구성하기
최신 프론트엔드 기술 중 Svelte라는 기술에 대해 TODO-App 제작을 하면서 알아보겠습니다. Svelte에 대한 소개나 API는 공식문서나 아래의 자료를 읽어주세요. 웹 프레임워크 Svelte를 소개합니다. SvelteJS(스벨트) - 새로운 개념의 프론트엔드 프레임워크 이 글은 Svelte 실습 예제입니다. 전체 프로젝트 코드는 Github에서
블로그 만들기, Jekyll Theme 적용 및 첫번째 포스트 작성하기
나만의 블로그를 위해 이미 만들어져 있는 Jekyll Theme를 가져와서 적용해봅니다. 그리고 Markdown으로 블로그의 첫번째 포스트를 쉽게 작성해봅니다. 지난 포스트에서 Github Pages를 이용하여 호스팅하는 블로그를 만들어보았다. 지금은 접속할 수 있는 환경을 만들어 둔 정도다. 이제 Jekyll을 좀 더 제대로 이용하면서 Theme 디자인 및 템플릿을 설정하여 블로그답게 만들 수 있다. 1. Jekyll Theme 가져오기 테마를 적용할 수 있는 방법은 여러가지이다. 아마 제일 쉬운 방법은 테마가
블로그 만들기, Github Pages 호스팅 및 Jekyll 설치
Github Pages와 Jekyll을 이용하여 나만의 블로그를 만들어 보겠습니다. jekyll을 이용하여 정적 사이트 블로그를 만들고, Github pages를 통해 무료로 사이트를 배포합니다. 개발자로 취업을 준비하면서 포트폴리오를 만들었던 적이 있다. 개발자, 디자이너 등으로 취업하는 분들은 이러한 경험이 있을 것이다. 내가 어떠한 것들을 만들었는지 정리하면서 그것들을 보여주는 것도 나에겐 참 어려운 일이었다. 어찌어찌 신입 개발자로 취업을 하였지만, 마음 한구석에는 두 가지 고민이 계속 있었는데, 하나는 "개발자로서 어떻게 계속 공부