우파루파의 개발 기록

안녕하세요. 오늘은 제가 프로필 페이지를 제작하면서 만들었던 간단한 타이핑 애니메이션에 대해 포스팅하려고 합니다. 정말 간단한 애니메이션인데, 혹시나 비슷한 걸 만들고자 하시는 분께 도움이 되고자 간략하게 포스팅 해봅니다. 1. UI 제작하기 이번 프로젝트에선 기본적으로 React 프로젝트가 준비되어 있다는 가정 하에 진행하도록 하겠습니다. 우선, 타이핑 애니메이션 이전에 보여지고픈 UI를 제작해줍니다. // ... const MainTitle = styled.div` text-align: left; font-weight: 500; margin: 2rem 0; line-height: 1; font-size: 7rem; position: relative; display: flex; align-items: ..

안녕하세요. 오늘은 제가 가장 최근까지 좋아하는, 빡센 규정은 아니지만 적당한 규정의 ESLint/Prettier 설정에 대해 공유하려고 합니다. 프로젝트를 시작할 때 린터와 포매터를 설정하는 것이 의외로 오래 걸리는 과정 중 하나인데요. 그래서 겸사겸사 저도 기록하는 용도로 간단하게 적어보고자 합니다. 참고로 린터와 포매터의 개념에 대한 글은 이전에 적어둔 글이 있어 달아두기만 하겠습니다. 1. Package install 가장 우선적으로 prettier와 eslint의 본체와 플러그인을 다운 받아야 합니다. 다만 CRA로 만들어진 React 프로젝트의 경우, 본 링크에서 확인할 수 있듯이 기본적인 eslint plugin들을 이미 포함하고 있습니다. 보통 CRA로 프로젝트를 생성하는 경우가 많기 때문..

안녕하세요. 최근 Gatsby로 자기소개 페이지를 간단하게 기획해서 배포까지 완료했었는데요. Gatsby + Typescript 스펙을 주로, 스타일 라이브러리로는 styled-components를 사용했습니다. 그런데 이게 Gatsby에선 기본 React프로젝트와는 설정 방식에 살짝 차이가 있어서 이곳저곳 찾아보면서 진행했었는데요. 아마도 써놓지 않으면 잊을 수 있기 때문에! 간단하게 기록해두겠습니다. 추가적으로 누군가에게 도움도 됐으면 좋겠습니다. 1. 패키지 설치 일단 기본적으로 Gatsby 프로젝트 자체가 생성되어 있다는 전제로 진행합니다. (+ npm 사용) styled-components와 관련된 패키지부터 설치해주도록 합니다. npm install styled-components @types..

이번 포스팅에서는 styled-components 라이브러리의 기본적인 문법과 간단한 사용법에 대해 다루고자 합니다. 공식 문서의 글을 좀 더 단순하고 쉽게 표현한 글 입니다. 좀 더 심화된 내용은 공식 문서를 참조하시면 좋습니다. [공식 문서] (본 글은 이전에 업로드 되었던 내용을 좀 더 보기좋게 다듬어 재 업로드 한 글입니다.) className의 명시적인 주입 없이 컴포넌트를 만들고 스타일을 적용하기 import React from 'react'; import styles from './styles.css'; /* ... */ Default CSS 기본적인 CSS를 이용한다고 가정했을때, 위와 같이 사용하려는 스타일을 classname을 사용해서 일일이 지정해줘야 합니다. 그닥 나쁜 경우는 아니지..

들어가며 프로젝트를 진행할 때 꼭 필요한 Lint 설정을 진행합니다. Lint란 무엇이고, 왜 필요한 지에 대해서 학습합니다. 최종적으로Prettier, ESLint를 사용하여 VSCode에서 저장 할 때마다 자동으로 원하는 스타일로 Auto formating 해주는 설정 방법에 대해서 알아봅니다. 본 글에서는 React + Typescript 설정을 기준으로 하며, JS 설정을 하고 계신다면 typescript 관련된 내용을 제외하고 적용하시면 됩니다. Lint가 필요한 이유 설명에 들어가기 앞서, Lint/Linter의 개념부터 알아봅니다. Lint, Linter란 소스코드를 분석하여 문법적인 오류나 스타일적인 오류, 적절하지 않은 구조 등에 표시를 달아주는 행위이고, Linter란 Lint의 동작을..

들어가며 안녕하세요. 이번 포스팅에서는 Shallow compare 와 Class component 에서의 최적화에 대해 말씀드리려고 합니다. 메모리에 대한 이해가 있으시면 좀 더 쉽게 이해하실 수 있습니다. 물론 없어도 무관 합니다. 최적화란 무엇일까요? 최적화란 말 그대로 성능을 개선하여 가장 적은 비용으로 가장 좋은 퍼포먼스를 낼 수 있도록 하는 것입니다. 들어는 봤는데, 너무 어렵지 않나요? 'Webpack을 이용하여 build한 파일을 경량화하고, 의존성을 파악하여 코드 스플리팅을 진행하고.. ' 맞습니다. 최적화는 깊이 파고들면 어려운 방식들이 가득합니다. 하지만 위와 같이 어려운 작업은 하나씩 천천히 진행하면 됩니다. 너무 어려운 작업 말고, 작업 중에서도 가장 쉽게 접근할 수 있는 방법에 ..

이번 포스트는 정말 간단하다. Create-React-App(이하 CRA)을 이용해서 Typescript 프로젝트를 만들어 볼 것이다. 0. 이번 프로젝트는 yarn을 사용한다. yarn 다운로드 방법에 대해서는 공식 홈페이지를 참고하자. https://classic.yarnpkg.com/en/docs/install # Typescript React Project 만들기 1. global로 CRA를 설치한다. > yarn global add create-react-app 터미널에 명령어를 입력하면 설치가 된다. mac OS의 경우 권한이 없다고 에러가 나올 수 있는데 global install의 경우는 명령어 앞에 sudo 를 붙여줘야 한다. * mac OS: > sudo yarn global add c..