선호:하다

css 작업 중 position: absolute를 사용하다보니 100%를 채워야하는 div의 width가 inline 요소 마냥 줄어드는 것을 목격하게 되었다. 해당 문제를 해결하기위해 찾아보니 다음과 같은 글을 발견할 수 있었다. position: absolute가 inline-block로 바꾼다? div 태그 안에 span 태그를 어떻게 가운데로 정렬 할지 고민중 position을 사용하기로 결정했습니다.보시다시피 span태그에 block속성도 주지 않았는데 width값이 정상적으로 적용됩니다.처음에 어> span velog.io position 속성의 absolute와 fixed는 해당 요소의 display 값을 inline-block으로 변경한다는 특징이 있다는 것이다. position 속성을 ..

any 아무 타입이나 될 수 있다는 뜻으로 타입의 보호를 받지 않기를 원할 때 사용 비어있는 값을 쓰면 기본적으로 any가 됨 자주 사용하는 것은 권장되지 않음 let a = [] // a는 any 타입 const a: any[] = [1, 2, 3] const b: any = true a + b // 오류가 나지 않는다. unknown 변수의 타입을 미리 알지 못할 때 사용 어떠한 작업을 할 경우 해당 변수의 타입을 먼저 확인한 뒤 사용해야함 let a: unknown let b = a + 1 // 에러 발생 (타입확인 필요하다.) // 사용할 때 마다 변수 타입을 지정해야한다. if(typeof a === 'number'){ let b = a + 1 } if(typeof a === 'string'){..

타입스크립트를 사용해서 객체 프로퍼티의 타입을 지정할 때 쓸 수 있는 특이한 기능들에 대해 알아보자. ? (Optional) ?는 선택적인 프로퍼티의 타입을 정의하는 단축어로 해당 타입이거나 undefined라고 해주는 것과 동일한 의미이다. type Player = { name: string, age?: number, } const jieun : Player = { name: ‘jieun’, } const coll : Player = { name: ‘coll’, age: 20, }​ age?: number는 age: number | undefined와 같은 의미이며 따라서 위와 같이 age 값을 갖지 않는 객체를 만들 수 있는 것이다. readonly readonly는 요소들을 읽기 전용으로 만들 때 ..

순수 CSS는 프로젝트의 규모가 커질수록 요수보수가 어려워진다는 한계때문에 CSS-In-JS나 SCSS와 같은 기술의 사용이 대세가 되었다. 이 글을 통해 기존 CSS의 문제점을 개선한 SAAS와 SCSS에 대해서 알아보고 그중 더 많이 사용하는 SCSS에 대해 더 자세히 정리해볼 것이다. Sass Sass란 CSS 전처리기로써, 변수, 상속, 중첩 등의 다양한 기능을 제공한다. Sass로 작성한 코드는 CSS로 컴파일을 거친 뒤 실행된다. SCSS SCSS란 Sass의 일종으로 Sass의 모든 기능을 지원하며, 기존 CSS와 비슷한 문법을 사용한다는 점이 특징이다. 이러한 특징때문에 Sass보다 SCSS를 더 많이 선호하는 추세이다. ※ Sass와 SCSS 문법 비교 Sass: 중괄호가 아닌 들여쓰기 ..

Attribute selector (속성 선택자) 특정 속성 값을 갖는 요소를 선택할 때 사용한다. 정규표현식의 일부 기호인 *, ^, $, | 등을 사용하여 다양한 표현이 가능하다. 태그종류[속성표현]의 기본 형태를 가진다. 예시들을 통해 사용 방법을 알아보자 a[href] { color: green; } href 속성을 갖는 모든 a태그를 선택한다. a[target="_blank"] { color: red; } target 속성 값이 _blank인 모든 a태그를 선택한다. div[class*="test"] { color: red; } class에 test라는 글자를 포함하는 모든 div태그를 선택한다. ex) class="mytest", class="tests" ... a[href^="https://..

State Batch Update란? 리액트는 컴포넌트의 렌더링 횟수를 최소화하기 위해서 State Batch Update를 사용한다. 이는 리액트의 이벤트 핸들러를 사용하여 여러 번의 setState를 호출할 때 이를 하나의 업데이트로 일괄 처리하여 리렌더링이 한 번만 발생하도록 하는 것이다. ※ 특징 state값의 업데이트는 16ms 단위로 이루어진다. 16ms 내 변경된 state값은 한 번에 업데이트된다. import { useState, useEffect } from "react"; export default function App() { const [num, setNum] = useState(0); const handlePlus = () => { setNum(num + 1); setNum(nu..

자바스크립트의 클래스 자바스크립트의 클래스는 객체와 관련이 있다. 객체를 직접 작성하여 정의하고 생성할 수 있지만, 클래스를 사용하면 여러 객체를 더 쉽고 빠르게 만들 수 있다. 즉, 클래스는 객체를 생성하기 위한 템플릿이다. 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이기 때문에 클래스란 개념이 존재하지 않았다. 그동안은 프로토타입을 이용하여 클래스를 비슷하게 표현해왔지만 ES6로 업데이트 되면서 클래스 문법이 문법이 추가되었고, 자바스러운 객체지향 프로그래밍을 표현할 수 있게되었다. 다만 생김새만 클래스 구조이지, 엔진 내부적으로는 프로토타입 방식으로 동작한다. 프로토타입 문법 // 생성자 function Person({name, age}) { this.name = name; this.a..

NVM 이란? 노드 버전을 업데이트하기 위한 패키지로, 쉽게 Node.js의 버전을 관리할 수 있다. NVM 설치 Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com 해당 링크를 통해 nvm-setup.zip 파일을 내려받은 후, 실행하여 설치해준다. Node.js 버전 변경하기 node -v // 현재 사용하고 있는 노드 버전 확인 nvm list available // 사용 가능한 버전 조회 nvm install 18.17.1 // 원하는 노드 버전 다운로드 nvm list // 설치되어있는..

자바스크립트의 함수는 호출될 때 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달 받는다. 자바스크립트의 this 키워드는 자바에서의 개념과 달라 혼란을 줄 수 있다. 자바에서 this는 인스턴스 자신을 가리키는 참조변수이다. 주로 매개변수와 객체 자신이 가지고 있는 멤버변수명이 같을 경우 이를 구분하기 위해 사용된다. public Class Person { private String name; public Person(String name) { this.name = name; } } 하지만 자바스크립트의 경우 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라진다. 함수 호출 방식은 아래와 같이 다양하다. 1. 함수 호출 2. 메소드 호출 3. 생성자 함수 호출 4. a..

클로저 클로저를 쉽게 정의하면 다음과 같이 정의할 수 있다. 클로저란 자신이 생성될 때의 환경을 기억하는 함수이다. 클로저는 자바스크립트 고유의 개념이 아니라 다양한 프로그래밍 언어에서 사용되는 중요한 특성이다. 위 정의에서 말하는 '함수'란 반환된 내부함수를 의미하고 '자신이 생성될 때의 환경'이란 내부함수가 선언됬을 때의 스코프를 의미한다. 즉, 클로저는 반환된 내부함수가 자신이 선언됬을 때의 스코프를 기억하여 해당 스코프 외부에서 호출되어도 해당 스코프에 접근할 수 있는 함수를 말한다. function outer() { var a = 2; function inner() { console.log(a); } return inner; } var func = outer(); func(); // 2 위의 코..