Definition of Seon

이전에 리액트 프로젝트를 진행할 때는 주로 SCSS를 사용해왔습니다.SCSS는 CSS를 확장한 기능으로 가독성이 좋고 재사용 가능한 스타일링에 유용했지만이제는 프로젝트에서 많이 사용하는 Tailwind를 도입해보기로 했습니다.1. SCSS vs Tailwind CSS1) SCSSSCSS는 가독성 높은 코드와 변수, 믹스인, 중첩 규칙으로 유연한 스타일링이 가능합니다.하지만 큰 프로젝트에서는 스타일이 충돌할 수 있고 관리가 어렵습니다.2) Tailwind CSS테일윈드는 클래스를 통해 스타일을 빠르게 작성할 수 있습니다.하지만 초기 학습이 필요하고 클래스 네이밍이 길어질 수 있습니다.이러한 SCSS 대신 Tailwind를 사용하여 생산성을 높이고 유지보수를 간편히 할 수 있을 것이라 생각해 이번 프로젝트에..

CSS에서 사용자 지정 속성(CSS 변수)를 정의할 때는 전용 표기법이 있다.이 표기법은 SCSS와 CSS에서 사용하는 방법이 다르다. 1. 언제 사용하는가?복잡한 웹사이트에서 많은 값을 반복적으로 사용할 때,예를 들어 어떤 특정 색상을 반복적으로 사용할 때혹시 그 색상을 바꿔야하는 일이 생길 경우한 영역에 값을 저장해놓고 참조를 통해 값을 사용하는 것이 좋다. 2. CSS 변수:root { --main-bg-color: brown;}element { background-color: var(--main-bg-color);} root 위치에 선언할 경우 HTML 문서 어디에서나 사용자 지정 속성에 접근할 수 있다.이렇게 선언한 변수를 사용할 때는 var() 함수를 지정하고 매개변수로 사용자 지정 속성의..

::marker로 Marker 스타일링하기 리스트는 과 로 나뉜다.기본적으로 은 1. 2. 3. ...으로 글머리가 생기고은 작은 점으로 글머리가 생긴다.하지만 이 스타일이 마음에 들지 않는다면...?그럴 때 사용하는 css의 ::marker 기능!::marker { /* ... */} 원하는 리스트의 마커 요소에 스타일링을 추가할 수 있다.아래와 같이 사용하면 된다.li::marker { color: red; font-size: 1.5em;} 여기에 사용할 수 있는 프로퍼티는 다음과 같다.1. font properties모든 폰트 프로퍼티를 사용할 수 있다.font, font-size, font-family 등등...font-size를 다르게 한다면?약간 어색하지만 이런 결과도 가능하다.마커만 커..

CSS 폰트 (글꼴) 적용하기아름다운 웹사이트를 위해서 기본 폰트가 아닌 사용자 지정 폰트가 필요할 때가 있다.보통 프로젝트에서 폰트 설정은 가장 처음에 진행하는데,장기간 프로젝트를 하다보면 다음 프로젝트를 진행할 때 폰트 추가 방법을 까먹기 쉽다. CSS의 @font-face를 사용하면 웹페이지에 온라인 폰트나 폰트 파일을 적용할 수 있다.폰트 문법은 다음과 같다.@font-face { font-family: ; src: [,]*; [font-weight: ]; [font-style: ];} 1. font-family : 필수, 폰트명으로 사용할 이름을 지정해준다.2. src : 필수, 폰트 파일의 위치를 나타내는 Url을 url() 괄호 안에입력한다.대체 폰트가 있다면 쉼표 뒤에 추가로 입력..

1. 오류상황 프로젝트에서 Next.js를 쓰기로 하여 급하게 배우려던 중,갑자기 EEXIST 오류를 맞닥뜨렸다. 하라는 대로 npx create-next-app tutorial를 입력했는데 왜 안되는 걸까...npm ERR! code EEXISTnpm ERR! syscall renamenpm ERR! path /Users/seon/.npm/_cacache/tmp/3ee0a393npm ERR! dest /Users/seon/.npm/_cacache/content-v2/sha512/06/d8/20f3d7409ea0f8bd5ed1de19703b182aa1b5102a0c77326ad0462d3261bb3f3f4ca6f17a33200964a958a53ea1d0c17b387bd4dfeb7aeb0a0979f0170..

프로젝트에서 메인 페이지와 상세 페이지 상단에 이미지 슬라이더를 넣기로 했다. 조건은 두 가지. 1. 화살표 버튼을 눌렀을 때 이동이 가능할 것. 2. 시간이 지나면 자동으로 다음 이미지로 넘어갈 것. - 옆으로 넘어가는 장면 useState와 useEffect가 필요하다.import { useState, useEffect } from 'react'; react-icons를 설치하여 화살표 아이콘을 가져온다.import { IoIosArrowForward, IoIosArrowBack } from 'react-icons/io'; 이미지 슬라이드에 들어갈 이미지들은 배열 형태로 외부에서 props로 받아오도록 한다.export default function ImageSlider({ slides }) 우선 이..

Sass는 CSS 프로세서입니다. CSS만으로 작성한 코드는 복잡하고 관리가 어렵습니다. Sass는 CSS의 방식은 그대로 적용하되, 기능을 추가하여 관리를 쉽기 해줍니다. 컴파일러를 돌리면 컴파일러가 Sass코드를 CSS 코드로 변환해줍니다. 그래서 Sass를 CSS Pre-processor라고 부릅니다. Sass의 특징 1. 변수 제공 Sass에서 변수는 $ 달러 표시로 사용합니다. 2. 중첩 가능 nav ul li에 스타일을 추가하고 싶을 때 nav 안에 ul을 넣고 그 안에 li를 넣는 방법으로 중첩할 수 있습니다. 3. 연산자 4. partials, imports : 여러 파일에서 CSS를 쓸 수 있게 해주고 불러오게 해줍니다. 5. Mixins 재사용 가능한 코드 여러줄이 있는 변수라고 생각하..

HTML과 CSS를 잘 작성하기 위해서는 세 가지를 고려해야 합니다. 1. Responsive Design 반응형으로 작동하는 웹사이트를 만들어야 합니다. 미디어 쿼리나 fluid 레이아웃을 넘어서 화면에 맞는 글꼴과 이미지의 크기, 데스크톱 또는 모바일 중에 무엇이 먼저인지 등등을 고려해야 할 것입니다. 2. Maintainable and scalable code 유지가능하고 확장가능한 코드를 만들어야 합니다. 깔끔하고 이해하기 쉽고 확장성이 높은 코드를 써야 나의 코드를 보는 다른 개발자들에게도 좋습니다. 어떻게 마크업을 구조화하고 클래스 이름을 지어야 할지 등을 고려해야 합니다. 3. Web Performance 웹사이트를 더 빠르게 만들기 위해 우리는 httmp 요청과 코드 자체를 줄이고 코드를 ..

배열 메서드 배열은 그 자체로 개체이므로 매서드가 있습니다. 1. slice let arr = ['a', 'b', 'c', 'd', 'e']; console.log(arr.slice(2)); // cde console.log(arr.slice(2,4)); // cd console.log(arr.slice(-2)); //de slice 매서드를 이용하여 배열의 요소를 자를 수 있습니다. 괄호 안에 인덱스를 넣어 사용할 수 있는데 -를 입력할 경우 끝에서부터 -1, -2... 이렇게 셉니다. 2. splice splice의 결과는 slice와 동일하지만, splice는 원래 배열을 변경합니다. splice해서 추출된 요소를 잃고 나머지 요소만 기존의 배열에 포함됩니다. 3. reverse arr.revers..

디폴트 매개변수 ES5에서는 디폴트 값을 설정할 때 함수 안에 아래와 같은 방식을 사용하였습니다. numPassengers = numPassengers || 1; price = price || 100; 그러나 ES6에서는 함수의 매개변수에 바로 디폴트 값을 설정할 수 있습니다. const createBooking = function(flightNum, numPassengers = 1, price = 199) 함수를 사용할 때 매개변수를 건너뛰고 입력할 수는 없습니다. 만약 1, 3번째 매개변수만 입력하고 싶다면 2번째 매개변수 위치에 undefined를 입력하면 됩니다. 퍼스트 클래스 함수, 고차원 함수 함수를 변수나 개체 속성에 저장할 수 있습니다. 함수를 다른 함수에 대한 인수로 넘길 수도 있습니다...