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

이미 설치되어 있는 WSL 1 이미지의 버전을 WSL 2로 변경해 보자. WSL 버전 1과 2의 차이점은 이전에 작성한 글에 정리해 두었으니 참고하자! WSL - 1. Windows에서 Ubuntu 개발 환경 설정을 위한 WSL2 설치 및 VSCode 연동 Mac OS 사용자와 함께 개발 협업을 하다 보면 종종 아래에 보이는 것처럼 이상한 에러와 마주할 수 있다. 이런 에러가 발생하는 이유는 무엇일까? 정답은 Mac OS와 Windows의 개행 문자 방식이 다르기 guiyomi.tistory.com 필자는 새로운 노트북에 WSL을 설치하려다 설치 기본 버전을 2로 변경하는 것을 까먹고 우분투를 설치했더니 다음과 같이 WSL 1을 설치해 버렸다. 이미 개발 환경 설정을 다 해놓은 터라 재설치가 어려운 상황..

VSCode 내에서 eslint, prettier 설정을 하다 보면 다음과 같은 오류가 발생하곤 한다. 위 오류는 windows에서 발생하는 오류로, prettier의 기본 라인 개행 방식(lf)이 windows의 개행 방식(crlf)과 다르기 때문에 발생한다. 해결 방법은 eslint 설정에서 prettier의 개행 방식을 auto로 변경하면 된다. package.json에 eslintConfig가 위치한 경우 "eslintConfig": { ... "rules": { // eslintConfig - rules에 다음과 같이 추가 "prettier/prettier": [ "error", { "endOfLine": "auto" } ] } }, 별도의 .eslintrc 파일이 있는 경우 { ... "rul..

@mixin & @include 디렉티브를 사용한 스타일 재사용 mixin은 CSS 내에서 공통으로 사용되는 스타일을 재사용할 수 있는 기능이다. 함수처럼 중복되는 스타일을 분리하여 별도의 이름을 붙여 사용할 수 있고, 파라미터를 정의하여 값을 전달할 수도 있다. mixin은 SCSS 문법 기준으로 아래와 같이 정의한다. scss 문법 기준으로 작성했으나, 중괄호({})와 세미콜론(;)을 제외하면 sass 문법도 동일하게 사용이 가능하다. 파라미터 이름 앞에는 $ 기호를 붙여주고, 기본값을 지정하고자 하는 경우에는 $파라미터명: 값 형태로 작성하면 된다. @mixin 디렉티브를 이용하여 mixin을 정의하고, 정의한 mixin은 @include 디렉티브로 사용할 수 있다. // 기본 mixin 정의 @m..

글을 읽기 전 미리 보는 완성본은 다음과 같다. 어떻게 만들었고 적용했는지 궁금하신 분들은 아래로 스크롤! See the Pen tistory code block by MiJeong Kim (@sap03110) on CodePen.  발단여느 날과 다름없이 회사 맥북으로 공부하면서 블로그 글을 작성하고 있는 도중, 갑자기 내 티스토리 블로그 코드 블록 디자인이 무척이나 거슬리기 시작했다. 구글링을 하다 보면 여러 기술 블로그들을 엿보게 되는데, 대부분의 블로거 분들이 기본 코드 블록을 사용하기 보다는 디자인을 커스텀해서 사용하고 있는 것이었다. 난 참고로 기본 블로그 테마를 사용한다. 그렇다. 디자인이 민둥하다. 그 중에서도 이쁘다고 느꼈던 코드 블록 디자인은 carbon이라는 코드 이미지화 사이트에서..

트랜지션(transition)은 자바스크립트를 사용하지 않고 CSS만 이용하여 애니메이션을 구현하는 방법 중 하나로, 특정 CSS 속성 값을 일정 시간 동안 변경되도록 할 수 있는 속성이다. transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; 트랜지션은 transition-property, transition-duration, transition-timing-function, transition-delay 4개의 상세 속성으로 이루어진다. 각 속성은 생략이 가능하며, 순서는 자유롭게 바꿔도 되지만 transition-duration이 transition-delay 속성 ..

캐시란 데이터에 빠르게 접근하기 위해 자주 사용되는 데이터나 값을 미리 복사해 놓는 임시 장소를 의미한다. 캐시를 적용하기 좋은 데이터는 다음과 같다. - 자주 참조되는 데이터 - 자주 변경되지 않는 데이터 - 동일한 입력에 대해 동일한 출력을 보장하는 데이터 프론트엔드에서는 서버에 요청을 보내고 응답을 받아 화면을 렌더링하는 경우가 많다. 네트워크를 통해 서버에 데이터를 요청하게 되면, 해당 서버가 응답을 반환할 때까지 페이지가 로드되지 않는다. 페이지 로딩에 필요한 css, js, html, 이미지 등의 정적 리소스를 캐싱하여 사용하게 되면, 요청을 보내는 네트워크 요청 횟수를 줄일 수 있을 뿐만 아니라 서버 응답을 기다려야 할 필요도 없기 때문에 사용자에게 보다 빠르게 화면을 보여줄 수 있다. 이러..

자바스크립트에서는 a(anchor) 태그를 이용하여 페이지 이동 외에도 파일 다운로드 링크나 메일 링크 등 다양한 기능을 만들 수 있다. a 태그의 속성에 대해 간단히 알아보자. href 링크가 가리키는 URL로, HTTP 스킴 뿐만 아니라 브라우저가 지원하는 모든 URL 스킴의 사용이 가능하다. 또한, 페이지의 어느 한 요소로 이동할 수 있는 프래그먼트의 사용도 가능하다. 주로 사용되는 케이스는 아래와 같다. URL로 이동 // 1. 절대 경로로 이동 이동 // 2. 상대 경로로 이동 이동 // 3. 다른 origin으로 이동 이동 // 4. 동일한 scheme일 경우 생략 가능 이동 절대 경로 URL로 이동하는 경우에는 origin을 생략하고 이동하려는 경로만 작성하면 된다. 상대 경로 이동은 /(슬..

React에서는 컴포넌트 단독으로도 사용이 가능하지만 다른 컴포넌트를 감싸는 wrapper 컴포넌트로도 사용이 가능하다. // 1. 컴포넌트 단독으로 사용 // 2. wrapper 컴포넌트로 사용 wrapper 컴포넌트로 사용할 경우에는 해당 컴포넌트 내에 작성된 요소들은 children이라는 props로 컴포넌트에 전달된다. wrapper 컴포넌트에서는 반드시 이 children을 리턴하는 마크업에 포함시켜야 화면에 노출된다. const Layout = ({ children }) => { return {children}; }; 만약 wrapper 컴포넌트를 사용하는 부모 컴포넌트가 아닌 wrapper 컴포넌트에서 전달받은 children에 추가적인 props를 더 전달하고자 할 때는 어떻게 하면 될까?..

Next.js는 서버 사이드 렌더링 방식(SSR)을 제공하는 React의 풀스택 프레임워크이다. 초기 접근 시에는 SSR 방식으로 페이지를 생성하고, 페이지 이동을 할 때는 CSR 방식으로 동작하기 때문에 부드러운 화면 전환이 가능하다. SSR와 CSR 방식의 특징 및 차이점은 아래 블로그 글에 정리해 놓았다. 페이지 렌더링 방식 비교: SSR vs CSR vs SSGSSR(Server-side Rendering) SSR은 서버에서 페이지를 렌더링하는 방식으로, Next.js와 PHP, ASP 등이 이에 속한다. SSR의 동작 방식은 다음과 같다. 1. 클라이언트가 특정 페이지를 요청한다. 2. 서버에서는 해.guiyomi.tistory.com  Next.js는 일반적인 리액트 어플리케이션과는 달리 서버..

자바스크립트에서 사용되는 참조값으로는 대표적으로 object(객체)와 array(배열)이 있다. 객체와 배열은 자바스크립트의 Object 객체에서 제공하는 메소드를 이용하여 서로 형변환이 가능하다. object를 array로 변환하기 위해서는 Object.entries() 메소드를 사용할 수 있다. Object.entries는 object를 인자로 받아 [key, value] 형태의 배열을 값으로 갖는 2차원 배열을 반환한다. 객체의 키나 값만 배열로 가져오고 싶다면 Object.keys(), Object.values() 메소드를 사용하면 된다. const obj = { name: 'mjkim', age: 26, birth: '0128', address: 'dongdaemungu' }; const arr..