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

글을 읽기 전 미리 보는 완성본은 다음과 같다. 어떻게 만들었고 적용했는지 궁금하신 분들은 아래로 스크롤! 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 SSG SSR(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..

SSR(Server-side Rendering) SSR은 서버에서 페이지를 렌더링하는 방식으로, Next.js와 PHP, ASP 등이 이에 속한다. SSR의 동작 방식은 다음과 같다. 1. 클라이언트가 특정 페이지를 요청한다. 2. 서버에서는 해당 페이지에 필요한 데이터를 포함한 HTML 파일을 클라이언트에 전달한다. 3. 클라이언트에서는 해당 HTML 파일을 파싱하면서 필요한 정적 리소스(CSS, 이미지 등)와 자바스크립트 파일을 다운로드하며, 페이지를 렌더링한다. 이 때 사용자는 렌더링된 페이지를 볼 수는 있지만 아직 클릭 등의 인터렉션은 할 수 없다. 4. 클라이언트에서 다운로드한 자바스크립트 파일을 실행한다. 5. 페이지 인터렉션이 가능해진다. SSR의 특징은 다음과 같다. 1. 최초 페이지 로딩..

커밋을 삭제하는 방법에는 여러 가지가 있다. 삭제하고자 하는 커밋이 직전 커밋인 경우에는 git reset 명령어로 간단하게 롤백이 가능하다. # git reset HEAD~1 # 최근 1개의 커밋 삭제 + 변경된 파일은 unstaging 상태로 유지 # git reset HEAD~n # 최근 n개의 커밋 삭제 + 변경된 파일은 unstaging 상태로 유지 # git reset --hard HEAD~1 # 최근 1개의 커밋 삭제 + 변경된 파일도 함께 되돌림 # git reset --hard HEAD~n # 최근 n개의 커밋 삭제 + 변경된 파일도 함께 되돌림 # git reset --hard [커밋ID]~n # 해당 커밋 ID 기준 n개의 커밋 삭제 + 변경된 파일도 함께 되돌림 만약 예전에 했던 커..

리액트 강의를 들으면서 인증 로그인 구현 과제를 통해 공부한 firebase auth 패키지 사용법을 정리했다. 먼저, firebase 콘솔에서 프로젝트를 생성해야 한다. 로그인 - Google 계정 하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인 accounts.google.com 프로젝트 생성을 완료했다면 앱 등록 버튼을 클릭하여 웹 앱을 생성한 프로젝트에 등록하는 작업이 필요하다. 생성한 프로젝트 홈에서 앱 추가 버튼을 클릭한 후, 웹을 클릭하면 웹 앱에 Firebase 추가라는 화면으로 이동할 수 있다. 해당 화면에서 앱 닉네임을 등록하면 Firebase SDK를 추가할 수 있는 단계로 이동할 수 있다. Firebase SDK 추가 1. firebase 패키지 설치 # np..