프론트엔드

CSS transform 속성이란?

CSS transform 속성이란? CSS 에서 제공하는 transform 프로퍼티를 통해서 HTML 요소를 rotate(회전), scale(사이즈 조정), skew(왜곡), translate(이동) 시킬 수 있다. transform 속성은 CSS Visual formatting model 의 좌표 공간을 수정할 수 있는 기능이 있다. transform 속성이 none 값을 갖지 않는다면, stacking context 가 만들어진다. 이 경우에는 엘리먼트가 포함하는 position: fixed; 혹은 position: absolute; 엘리먼트에 대해 containing block 으로서 동작할 수 있다. 속성 예제 transform 에서 사용할 수 있는 다양한 함수들은 transform-functio..

CSS Animation 속성이란?

CSS Animation 속성이란? animation 과 관련된 여러 속성을 한번에 입력할 수 있는 축약 (shorthand) 속성이다. 예제 .animation { animation: 3s ease-in 1s infinite reverse both running slidein; } 순서 속성의 의미는 각각 아래와 같은 순서를 갖으며, 중간에 하나씩 생략도 가능하다. animation-name: 애니메이션의 이름 보통 @keyframes 의 이름이 들어간다. animation-duration: 애니메이션 한 싸이클의 지속시간 animation-timing-function: 애니메이션 시간대별 효과 가속, 선형 등의 옵션이 있다. animation-delay: 애니메이션이 얼마간의 딜레이를 갖고 실행될지 ..

CSS 포지션 (position) 속성이란?

CSS 포지션 (position) 속성이란? HTML 요소가 어떻게 위치할지에 대한 속성이다. top, right, bottom, left 프로퍼티가 최종 위치를 결정한다. position 의 종류 알아보기 position: static; position: relative; position: absolute; position: fixed; position: sticky; /* Global values */ position: inherit; position: initial; position: revert; position: revert-layer; position: unset; 위는 position 속성의 값으로 들어올 수 있는 모든 케이스를 적어둔 것이다. static 기본적인 엘리먼트 배치 원리를 따른..

node_modules 를 수정하고 프로젝트에 적용하는 방법

타인의 NPM 패키지 수정하기 라이브러리를 조금 커스터마이징해서 적용하고 싶을 때 유용한 방법이다. 수정 전 주의사항 최초 제작자의 라이선스 설정을 꼼꼼히 살펴보아야 한다. 간혹 무단 수정하면 안되는 라이브러리도 있다. 최초 제작자가 작성한 라이브러리 이용법을 꼼꼼히 살펴보아야 한다. 내가 원했던 기능이 이미 존재했을 수도 있고, 라이브러리 동작방식을 아는데도 도움이 된다. 수정 방법 1: Github Fork 뜨기 Github 프로젝트 Fork 뜨기 Github 에서 원본 라이브러리 프로젝트를 찾아 Fork 를 떠서 내 계정으로 들고오면 된다. package.json 에서 의존성 주소 수정하기 초기 의존성은 "react-native-nmap": "^0.0.66" 이와 같이 버전 정보만 표기되어 있는데,..

윈도우즈에서 node_modules 빨리 지우기 (rm -rf 사용하기)

문제 윈도우즈 VSCODE 에서 node_modules 폴더를 지우면 너무너무너무 느리게 지워진다. 빠르게 지우려면 rimraf 명령어를 이용하면 된다. 이를 이용하면, 윈도우즈에서도 rm -rf 와 같은 명령을 이용할 수 있다. 해결 npm install -g rimraf rimraf node_modules

React Effect Hook 이란?

Effect Hook 이란? 함수형 컴포넌트에서 사이드 이펙트를 만들 수 있도록 해주는 리액트 훅이다. useEffect() 와 같은 함수를 이용해 만들 수 있다. 기본적으로 DOM 리랜더링이 일어날 때마다 사이드 이펙트가 작동하며 컴포넌트가 화면에서 사라지면 return 에 작성해둔 clean up 함수가 실행된다. 두번째 파라미터에 배열로 state 값의 인자를 주면, 해당 값이 바뀌어 리랜더링이 될 때만 사이드 이펙트가 동작한다. 기존 클래스형 컴포넌트 라이프 사이클에서 componentDidMount 가 가지던 효과와 비슷하다. Effect Hook 과거와 현재 비교하기 카운트가 증가할 때마다, useEffect() 의 사이드이펙트에 의해 title 도 함께 수정되는 예제를 작성해본 것이다. 예전..

리액트 컴포넌트 밖 변수 선언의 의미 (Feat. 리액트에서 절대 하면 안되는 것 1가지)

리액트에서 절대 하면 안되는 것 리액트에서 절대 하면 안되는 것이 하나 있다. 컴포넌트 함수 밖에 let 으로 변수 선언을 하면 절대 안 된다. 잘못된 코드 // import 생략 ... let count = 1; function WrongComponent() { const [_, setCount] = useState(1); const onClick = useCallback(() => { setCount(count++); }, []); return count: {count}; } export default WrongComponent; 문제 생각해보기 위처럼 코드를 작성하면, 위 컴포넌트를 페이지당 1개 쓸 때는 크게 문제가 없을 수도 있지만, 컴포넌트 밖 중복되는 이름의 let 변수가 있을 때 해당 변수..

React 컴포넌트 어떻게 나누고 재사용할 것인가?

컴포넌트를 어떻게 나눌 것인가? 현실에서 일어나는 일들 우리는 프로덕션을 개발하며 수많은 변경을 마주하게 된다. 이에 대해 현명한 대처가 필요하다. 이러한 이유는 뭘까? 현재의 제품이 완벽하지 않다. 사용자 입장에서 불편함이 있다. 만일 프로덕션이 변경될 일이 없다면? 현재의 제품이 완벽하다. 사용자 입장에서 불편함이 없다. 사실 제품이 변화하는 것은 놓쳤던 고객의 니즈를 발견하고 제품을 성장시키는 과정이다. 그리고 이러한 변경에 대응하는 것은 쉬운 일이 아니다. (특히 설계가 제대로 되지 않은 소프트웨어에서는 더더욱 그렇다.) 제품이 만들어지는 흐름 작은 역할을 하는 여러 개의 컴포넌트를 만든다 기능을 만들기 위해 컴포넌트를 합친다. 컴포넌트가 너무 커지면 적당히 분리한다. 위의 흐름은 틀리지 않았지만..

CSS - Flex 정리

개요 2017년에 W3C Candidate Recommendation 에서 레이아웃 쉽게 잡을 수 있도록 FlexBox Layout 을 만들었다. FlexBox Layout 는 사이즈에 상관없이 유연하다고해서 이름에 flex 라는 단어가 들어갔다. 사이즈에 상관없이 유연하다는 장점이 있어 스크린의 크키가 각각 다른 기계에 대해서도 균일한 스타일 코드가 나올 수 있다는 장점이 있다. Flexbox Layout 과 비교되는 것으로 Grid Layout 이 있는데, 이는 좀 더 큰 사이즈의 레이아웃을 만드는 것을 목적으로 탄생했다. Flexbox Layout: 애플리케이션의 컴포넌트 레이아웃에 쓰기 적합 (one-dimensional layout model) Grid Layout: 애플리케이션 전체의 레이아웃..

React Hook Form 이 해결하는 문제들과 사용법

기존의 React Form 코드 import React, { useState } from "react"; export default function NormalForm() { const [username, setUsername] = useState(""); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [formErrors, setFormErrors] = useState(""); const onUsernameChange = (event: React.SyntheticEvent) => { const { currentTarget: { value }, } = event; setUsername(v..

React Hook Form 소개

React Hook Form 이란? 사용하기 쉬운 검증(validation), 뛰어난 성능, 유연성, 확장 가능성을 특징으로 하는 리액트 폼 생성 라이브러리이다. 특징 DX 직관적이며, 기능 완전한 API 를 제공한다. HTML Standard HTML 마크업의 장점을 극대화시키고 제약을 기반으로한 validation API 를 통해 form 을 검증한다. Super Light 다른 의존성을 추가로 안가져가는 가벼운 라이브러리이다. Less code. More Performant. Isolate Re-renders. 전체 코드의 양도 줄여주면서 불필요한 리렌더링도 없애준다. 재 렌더링을 최소화하고 검증에 드는 비용을 최소화하며 더 빠른 마운팅을 제공한다. 기존의 Controlled Form 방식과 비교했..

자바스크립트를 이용해 쿠키 값 구하기

코드 쿠키 값을 오브젝트 형태로 불러온다. function getCookieObject() { return document.cookie.split(";").reduce((acc, e) => { const [key, value] = e.trim().split("="); return { ...acc, [key]: value, }; }, {}); }