positioning 속성으로 요소의 위치를 결정하는 데 사용relative는 요소를 기준 위치를 기준 으로 이동시킨다.absolute는 최상위 위치가 되는 요소(보통 가장 가까운 position: relative를 가진 부모 요소)를 기준으로 배치 ❗❗ relati

label과 input의 관계label 태그 : for속성을 통해 특정 input과 연결되거나 label 안에 포함된 input 요소와 암묵적으로 연결된다.예를 들어 아래와 같은 예시가 있다고 가정하자지금 보면 이벤트가 input뿐만 아니라 span태그에도 적용이 되어

package.json에서 간혹 패키지 명 앞에 @ 이 붙는 경우가 종종 있다. 그 의미가 뭔지 알아보았다. 패키지 앞에 @가 붙는 것은 스코프안에 속해있다는 것을 의미한다. 무슨 의미냐면 결과적으로 필요한 부분만 패키지로 활용하겠다는 의미이다. 예시를 보자 vue라든

throw문을 적용했을 때 이거를 단순하게 처음 접했을 때 인터럽트 마냥 생각해서 호출스택 등 고려하지 않은 적이 있다. 물론, throw문을 가끔이라 쓰고 거의 안쓰긴 하지만, 궁금한 점을 정리하기 때문에 throw에 대해서 작성해보고자 한다. throw문은 예외를

class에 조건 적용은 안되는 걸까class는 HTML, CSS에서 요소(element)를 스타일링하고 구조화하는 데 유용한 도구이다.클래스를 활용함으로써 재사용성, 조합, 선택 적용 등 다양한 스타일링이 손쉽다.예시보통 동적으로 class를 적용하거나 할 때 Jav

자바스크립트는 이런 것도 되네... 라는 생각이 참 잘 드는 스크립트 언어 같다...봤던 것들 중 살펴보고, 조심해야 될 부분을 작성해보고자 한다. 보통 자바스크립트 변수를 선언할 때 키워드 const, let, var 등을 활용한다. 이런 식으로 가다보면 쭉 내려가면

개발을 진행하면서 watch를 사용하는 분들이 계셨는데, 데이터를 어떻게 넣느냐에 따라 감지가 되는지 안되는지 확인하다보니 궁금증이 생겨서 찾아보고 그에 대한 글을 작성해보고자 한다상태 변화를 감시하고, 데이터의 변화를 추적을 하여 특정 값이 변할 때 마다 API 호출

스토리북이라는 컴포넌트 디자인 시스템 개발을 진행했던 중에 이에 대해서 반응형을 찾아보았다. 단 하나의 방법이 아니라 여러 방법을 체크하고 테스트하는 것도 포함해야 하지만, 해당 글에서는 rem을 활용한 방법을 소개해보고자 한다우리가 주로 사용하는 px과 비교를 해보자

가끔 함수를 작성하다보면 매개변수가 생각보다 많이 늘어나는 경우가 생긴다. 이런 경우 Rest 파라미터를 사용해서 함수에서 매개변수 받는 부분을 줄일 수도 있긴하다. 우선 정의와 활용, 예시로 살펴보자 나머지 매개변수는 매개 변수 이름 앞에 세개의 점 ...을 붙여서

vue를 사용하면서 문득 왜 ref() 반응형을 사용할 때 왜 .value가 붙는지 궁금해졌다. 한 번 살펴보자 객체로 만든 값을 ref로 감싸서 콘솔창에 찍은 경우 위와 같이 나타낸다RefImpl이 나오는데 무슨 말일까? 우선적으로 Vue.js 3에서 프록시 객체를

this : 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다자바스크립트 엔진에 의해 암묵적으로 생성된다.중요한 점은 this 바인딩은 함수 호출

선언문은 특정 작업을 지시하는 명령이며, 독립적으로 존재할 수 있다.표현식은 값으로 평가될 수 있으며 어떤 값을 생성하거나 반환, 다른 표현식의 일부 등으로 사용할 수 있다 add함수는 함수 선언문인데 호출이 제대로 되지만, 표현식은 TypeError가 나온다 변수 호

개발을 하면서 객체 프로퍼티 이름에 기존의 변수를 넣어서 할려고 했을 때 단순하게 넣어서 하려고 하면 에러가 발생한다 아래 예시를 보자 에러는 아니지만 우리가 key값으로 location을 원했지만 그냥 단순하게 tempKey라는 문자열로 인식하여 나오게 된다 그래서

이번에 프로젝트 개발을 진행하면서 다른 사람들의 스프레드 문법, 디스트럭처링을 많이 사용하는 모습을 보면서 한 번 정리하고자 해본다. 처음에는 스프레드 연산자는 종종 사용했지만, 최대, 최소값을 구하기 위해 Math.min, Math.max를 할 때 Math.max(.

hasOwnProperty는 자바스크립트 객체의 메서드이며 특정 객체가 해당 이름의 속성을 직접적으로 가지고 있는지 확인한다. 이 말은 즉, 객체의 프로토타입 에서 상속된 속성은 무시하고, 객체 자체에 존재하는 속성 만을 검사한다. 예시를 보자 toString() 메서

개발하다보면 생각보다 함수에 인자로 던졌는데 값이 변경되거나 안되거나 하는 문제들을 직면하지만 그 내용 깊이를 많이 안따지고 넘어갔던 적도 있었다. 그래서 해당 방법, 메커니즘 등을 한 번 알아본다 값에 의한 호출이며 함수에 인수를 전달할 때 인수의 값이 복사되어 함수

개발하면서 selectBox 2가지 중 한 가지의 특정 값에 따라 나머지 한 가지의 값을 HTTP 요청 시 파라미터에 넣거나 없애거나 보내야 했었다 fetch API로 예를 들어보자위의 예시는 select1.value 값이 3일 때만 파라미터에 값이 들어가고 아닌 경우

개발진행하면서 API interceptor 부분에서 직렬화와 역직렬화가 있는 것을 보았다직렬화, 역직렬화 이름만 들어도 뭔지 모르기 때문에 이번 기회에 정리해보고자 한다 직렬화는 데이터를 특정 형식(주로 문자열) 으로 변환하는 과정이다Javscript에서 일반적인 방법

개발하면서 객체 안의 객체를 선언하고 이를 ref로 감싸서 반응형을 가져가려다 보니 동작은 하는 것 같되 왜 그런지 살펴보도록 하고자 글을 남기게 되었다. ref()는 Vue3에서 반응형 상태를 선언하는 권장 방법이다.위의 예시를 보면 ref로 정의하면 .value 속

개발하면서 화살표 함수를 2개 이상 쓰는 코드를 보게 되어 신기해서 정리해보고자 한다. 막상 알고보면 2개의 함수를 그냥 쓰는 느낌이긴 하지만, 클로저 랑도 연결되기도 한다.전통적인 함수화살표 함수함수를 간략하게 표현한 것이라고 보면 될 것 같다. 일반 함수와의 차이점