이 기술 블로그를 만들기 위해 5년을 미뤘다.

오늘은 못생긴 bash를 버리고 zsh을 설치하여 사용해 보자. zsh은 macOS의 기본 쉘이며, bash와 거의 비슷하지만 다음과 같은 장점을 갖고 있다. 자동 완성 및 탭(tab)으로 이동 가능 zsh는 자주 사용하는 명령어에 대한 자동 완성(추천) 기능을 제공한다. zsh-autosuggestions 플러그인을 설치하면 사용할 수 있다. 또한 bash는 사용 가능한 목록만 보여주는 정도로만 자동 추천을 제공하지만, zsh은 tab 키를 이용하여 리스트를 탐색하고 선택할 수 있는 옵션을 제공한다. 다양한 플러그인 및 테마 지원(oh my zsh) zsh은 oh my zsh라는 커뮤니티를 통해 다양한 플러그인과 테마를 제공한다. 사용자가 원하는 작업 환경을 설정하여 사용할 수 있는 다양성을 누릴 수 ..

이전 글에서 WSL2를 설치하고 VSCode 연동까지 하는 방법을 정리했다. WSL - 1. Windows에서 Ubuntu 개발 환경 설정을 위한 WSL2 설치 및 VSCode 연동 Mac OS 사용자와 함께 개발 협업을 하다 보면 종종 아래에 보이는 것처럼 이상한 에러와 마주할 수 있다. 이런 에러가 발생하는 이유는 무엇일까? 정답은 Mac OS와 Windows의 개행 문자 방식이 다르기 guiyomi.tistory.com 오늘은 WSL을 ubuntu GUI 모드로 실행하는 방법을 알아보자. 기본적으로 microsoft 공식 문서를 참고하여 WSL을 설치하는 경우에는 CLI 모드로 ubuntu를 이용할 수 있다. 하지만 CLI 모드로만 사용하기에는 여간 불편한 점이 많다. 가장 큰 단점은 GUI 프로그..

** 이 글은 react 16.2 버전 이후 기준으로 작성되었습니다. ** 리액트에서는 직접적으로 DOM 요소에 접근하는 것을 권장하지 않는다. 부득이하게 DOM 요소에 접근해야 할 때에는 ref 속성을 이용하여 특정 DOM 요소에 접근할 수 있다. 클래스형 컴포넌트에서는 createRef, 함수 컴포넌트에서는 useRef를 사용하여 ref 변수를 생성할 수 있다. 함수 컴포넌트에서도 createRef를 사용할 수는 있지만, 컴포넌트가 리렌더링될 때마다 ref 값이 null로 초기화되어 화면에 표출되는 원하는 값을 얻을 수 없으므로 useRef를 사용하는 것을 권장한다. import React, { useState, createRef } from 'react'; const App = () => { con..

Mac OS 사용자와 함께 개발 협업을 하다 보면 종종 아래에 보이는 것처럼 이상한 에러와 마주할 수 있다. 이런 에러가 발생하는 이유는 무엇일까? 정답은 Mac OS와 Windows의 개행 문자 방식이 다르기 때문이다. Mac에서는 LF(\n) 방식을 사용하고, Windows에서는 CRLF(\r\n) 방식을 사용한다. 그래서 개발 환경 설정을 하다 보면 위 사진과 비슷한 에러가 종종 발생한다. 보통 해당 오류를 해결하기 위해서는 prettier나 ESLint 설정에서 linebreak 관련 속성만 추가해도 해결되는데, 내 경우에는 인터넷에서 찾을 수 있는 모든 방법을 다 동원해도 오류가 고쳐지지 않았다. 그래서 Windows에서 Ubuntu 환경을 사용할 수 있는 방법을 탐색했고, 여러 방법들 중 WS..

Typescript 타입 + 자바스크립트 브라우저에서 실행하려면 별도의 컴파일 과정 필요 장점 에러의 사전 방지 의도하지 않은 타입의 인자가 전달되었을 때 런타임(브라우저)이 아닌 개발 단계에서 오류를 탐지하여 수정할 수 있음 코드 가이드 및 자동 완성 용이 VSCode에서 해당 변수의 타입에 맞는 메소드 자동 완성 타입이라는 개념은 크게 아래 5가지를 의미 type alias interface class enum import 구문 JSDoc 소스코드 파일에 주석을 달기 위해 사용되는 마크업 언어 자바스크립트에서 타입스크립트처럼 코딩 가능 typedef / property를 사용하여 타입에 대한 힌트 제공 가능 /** * @typedef {object} Address * @property {string}..

타입스크립트에서 타입을 선언하는 방식에는 type 키워드를 사용한 type alias 방식과 interface 키워드를 사용한 방식 2가지가 있다. Type Alias type Point = { x: number; y: number; }; type SetPoint = (x: number, y: number) => void; Interface interface Point { x: number; y: number; } interface SetPoint { (x: number, y: number): void; } 둘의 차이점은 다음과 같다. 1. interface는 동일한 이름으로 재선언 가능 interface에서는 동일한 이름을 갖는 인터페이스를 중복하여 선언할 수 있다. 이를 선언 병합(Declaratio..

개발을 하다 보면 헷갈리는 동기와 비동기, 블로킹과 논 블로킹의 개념을 정리해 보자. 한 줄 요약을 하자면 블로킹/논 블로킹은 제어권, 동기/비동기는 요쳥/완료 시간을 기준으로 개념을 이해하면 된다. 먼저 블로킹과 논 블로킹의 개념을 이해해 보자. 블로킹(blocking) 자신의 작업을 진행하다가 다른 작업이 시작되면 다른 작업이 끝날 때까지 기다림 호출된 다른 작업에게 제어권을 다른 작업에게 넘겨주고 해당 작업이 종료되면 제어권을 반환받아 작업 재개 논 블로킹(Non-blocking) 호출된 다른 작업에게 제어권을 넘겨주지 않으므로 다른 작업과는 관련 없이 자신의 작업을 진행 호출한 다른 작업에서 바로 리턴 블로킹과 논 블로킹은 제어권을 어느 작업이 갖고 있는 지에 따라 다르다. A 함수에서 B 함수를..

개발을 하다 보면 API 요청을 보낼 때 CORS 에러와 마주칠 수 있다. 처음엔 CORS가 뭐지? 에러 이름이구나! 하고 가볍게 넘겨짚기만 하고 따로 깊게 찾아보지는 않았었다. 하지만 이런 공부 부채들이 쌓이면 쌓일 수록 난 개발자가 아닌 무지성으로 코딩만 하는 기계가 될 뿐이라는 것을 알게 되고... 뒤늦게 쌓아놨던 CORS에 대해 공부를 하면서 알게 된 내용을 정리해 보려고 한다. 먼저, CORS에 대해 알아보기 전에 SOP에 대해 알아보자. SOP(=Same-Origin Policy, 동일 출처 정책)란? 같은 origin 내에서만 데이터 통신이 가능한 브라우저의 정책 CSRF(=Cross-Site Request Forgery) 공격을 막기 위한 방법 중 하나 CSRF이란, 허용되지 않은 orig..

리액트에서 컴포넌트에 style을 적용하는 방법에는 일반적인 CSS를 사용하는 방법도 있지만, 보통 다음과 같은 4가지 방법을 주로 사용한다. 1. Sass(Scss) 2. CSS Module 3. Styled-components 4. Inline style Sass(Syntactically Awesome Style Sheets) SASS는 CSS 전처리기이며, 개발과 유지보수에 용이한 Sass, Scss라는 확장된 CSS 문법을 제공한다. CSS 전처리기(CSS pre-processor)란? CSS를 확장할 수 있는 스크립팅 언어로서, 컴파일러를 통해 브라우저에서 사용할 수 있는 일반 CSS 문법 형태로 변환하여 사용할 수 있음 Node.js 환경에서 SASS 문법은 sass 패키지를 설치하여 사용이 ..

HTTP(HyperText Transfer Protocol)이란? 웹(WWW) 상에서 하이퍼 텍스트를 주고받기 위한 프로토콜을 말한다. 프로토콜이란 데이터 전송을 위한 규칙을 말하며, HTML 뿐만 아니라 이미지, 동영상, 음성 등의 파일도 전송이 가능하다. HTTP의 특징으로는 다음과 같다. 무상태성(stateless) HTTP는 요청에 대한 상태를 가지지 않음 각각의 요청은 독립적이므로 이전 요청과 다음 요청은 서로 영향을 주고받지 않음 상태(로그인 상태 등)를 전송하기 위해 세션, 쿠키 사용 비연결성(Connectionless) 요청을 주고받을 때만 연결을 유지하고 요청이 끝나면 연결을 끊음 연결 유지에 대한 자원을 아낄 수 있음 서버-클라이언트 구조 일반적으로 클라이언트는 웹 브라우저를 의미, 서..