프론트엔드

FormData 란? 그리고 사용법

개요 HTML form 과 값들을 표현하는 key/value 쌍의 집합을 쉽게 생성할 수 있는 방법을 제공하는 인터페이스이다. fetch() 혹은 XMLHttpRequest.send() 메서드에 전달하기 위해 사용될 수 있다. 인코딩 타입이 "multipart/form-data" 로 설정되었다면, form 이 전달하는 포맷을 동일하게 사용한다. 만일 form element 가 하는 방식으로 쿼리 파라미터를 만들어 간단한 GET 요청을 제출하고 싶다면, URLSearchParams 의 생성자에 직접 넘길 수 있다. FormData 를 구현하는 오브젝트는 for...of 구조에서 직접 사용될 수 있다. 굳이 entries() 메서드를 한번 더 불러올 필요 없다. for (const p of myFormDat..

URLSearchParams 란? 그리고 사용법

개요 URLSearchParams 로 URL 뒤에 복잡하게 붙은 파라미터를 쉽게 쪼갤 수 있다. ex. www.example.com?foo=1&bar=2 에서 {foo: 1, bar: 2} 와 같이 뒤에 붙은 파라미터를 쉽게 가져올 수 있다. URLSearchParams 는 URL 의 쿼리 스트링과 관련된 작업을 하는 유틸리티 메서드를 정의하는 인터페이스이다. 주된 사용법: 생성자 URLSearchParams 는 주로 new 키워드를 이용한 생성자를 통해 초기화하고 사용한다. const params = new URLSearchParams("foo=1&bar=2"); console.log(params.get("foo")); // 1 console.log(params.get("bar")); // 2 생성자의..

window.location 이란?

개요 window.location 은 읽기 전용 프로퍼티로 Location 오브젝트를 반환한다. Location 오브젝트에는 현재 문서의 위치와 관련된 정보가 들어있다. window.location 에는 특별한 기능 하나가 있는데 비록 읽기 전용 프로퍼티지만, 주소 문자열을 할당하면 브라우저가 해당 주소로 이동하는 기능이 있다. window.location = "https://naver.com"; // 네이버로 이동 window.location 이 제공하는 다양한 정보들 window.location 은 브라우저의 주소표시줄에 나오는 문자열을 파싱하여 개념별로 제공해준다. 이를테면 https://example.org:8080/foo/bar?q=baz#bang 이라는 주소가 있다고 하면 이는 아래와 같이 파..

바닐라 자바스크립트를 이용해 이벤트 등록할 때 실수하기 쉬운 부분들

이벤트 리스너에서 실수하기 쉬운 부분 개발자가 만든 DOM 요소가 브라우저의 이벤트에 반응하게 만들기 위해서 이벤트 리스너를 등록한다. 이벤트 리스너는 웹사이트 이용자가 DOM 과 상호작용 가능하게 만들기 위해 필수적인 부분이다. 이벤트 리스너를 등록하는데는 잘 살펴보면 2가지 방법이 있다. EventTarget.addEventListener() 를 이용하는 방법 HTML DOM 의 onclick 프로퍼티 를 이용하는 방법 두 방식은 약간 다르다. EvnetTarget.addEventListener() 를 이용하는 방법 장점 하나의 이벤트에도 여러 개의 콜백 함수 등록이 가능하다. ex) onclick 시에 연쇄적으로 여러 개의 함수가 호출되게 만들 수 있다. 단점 여러개의 이벤트 등록이 가능한만큼 이벤..

HTML Element 에 바인딩된 이벤트 가져오기

개요 개발하다보면 간혹 해당 버튼에 어떤 이벤트가 들어있는지 알고 싶을 때가 있다. 하지만 아쉽게도 브라우저에서 제공하는 Native API 로는 알 수 있는 방법이 없다. 그러나, JQuery 를 통해 혹은 Chrome Dev tools 를 통해 알 수 있다. Jquery 를 이용한 방법 Jquery 는 내부적으로 엘리먼트에 대한 이벤트 정보를 저장하고 있어 이렇게 이벤트를 확인하는 것이 가능하다. $._data($("#엘리먼트_아이디")[0], "events"); 위와 같은 코드를 실행하여 해당 엘리먼트에 걸린 이벤트를 볼 수 있다. [0] 을 해주는 이유는 Jquery Object 에서 Standard Html Element 로 타입을 변환하기 위해서이다. 참고로 위의 결과로 나오는 내용은 Jque..

tailwind css 세팅 방법

tailwind css 세팅 방법 세팅 방법으로는 총 4가지가 있다. Tailwind CLI: Tailwind CLI 도구를 이용한 설치 방법으로 가장 빠르고 간결하다. input.css 를 지정하면 그에 따른 output.css 가 나오게 되는 간단한 원리를 가지고 있다. Using PostCSS: Webpack, Rollup, Vite, Parcel 과 같은 빌드 도구와 가장 깔끔하게 통합되는 방법이다. Framework Guides: 프레임워크 가이드를 보고 세팅하는 것이다. 공식문서에 자세하게 나와있다. Play CDN: CDN 을 이용하는 방법인데, 브라우저에서 간단하게 스크립트를 하나 추가하면 할 수 있다. 그러나 프로덕션에 권장되진 않고 개발용으로 사용하면 괜찮다. tailwindcss 초기..

PostCSS 의 Autoprefixer 란 무엇인가?

개요 Autoprefixer 는 PostCSS 플러그인 중 하나이다. CSS 를 파싱하고 vendor prefixes 를 추가한다. Can I Use 로부터 얻은 결과를 이용한다. 사용 예 적용 전 ::placeholder { color: gray; } .image { background-image: url(image@1x.png); } @media (min-resolution: 2dppx) { .image { background-image: url(image@2x.png); } } 위와 같이 vendor prefixes 가 포함되지 않은 CSS 를 작성하면, 적용 후 ::-moz-placeholder { color: gray; } :-ms-input-placeholder { color: gray; } ..

PostCSS 란 무엇인가?

개요 PostCSS 란 JS 플러그인을 통해 스타일을 변환하는 도구이다. 이 플러그인들을 통해 CSS 에 대한 린팅을 할 수도 있고, 변수와 믹스인 을 지원하기도 하고, 미래의 CSS 문법과 인라인 이미지를 변환하는 등의 일을 한다. Autoprefixer 는 가장 많이 쓰이는 인기있는 PostCSS 플러그인 중 하나의 예시이다. PostCSS 는 CSS 파일을 가져가서, 규칙을 분석 및 변경하기 위한 API 를 제공한다. CSS 를 Abstract Syntax Tree 로 변환함으로써 이를 제공한다. 이렇게 제공되는 API 는 PostCSS 를 이용하는 플러그인들에 의해 사용된다. 이를 통해 에러를 찾거나 vendor prefixes 등을 추가할 수 있다. Autoprefixer 는 이를 통해 vend..

SCSS 의 믹스인 (@mixin) 키워드에 대해 알아보자

개요 @mixin 과 @include 는 sass 혹은 scss 에서 자주 볼 수 있다. @mixin 을 통해 스타일 그룹을 지정하고 @include 를 통해 만들어놓은 그룹을 이용할 수 있다. 자바에서 사용되는 믹스인과 같은 맥락으로 사용된다. 자바에서의 믹스인 참고 @mixin 기본 사용 예 @mixin 정의 @mixin red-box { padding: 10px; margin: 5px; background-color: red; } red-box 라는 믹스인을 정의했다. @mixin 으로 정의했다면, @include 를 이용해 사용할 수 있다. @include 사용 div { @include red-box } 위와 같이 입력하면, div { padding: 10px; margin: 5px; backg..

npm 의 문제를 해결하려 나온 pnpm 은 어떻게 npm의 문제를 해결하는가? pnpm 이란?

pnpm 이란? 기존의 npm 과 yarn 의 비효율을 개선한 노드 패키지 매니저이다. 기존 노드 패키지 매니저의 문제 npm 으로 여러 프로젝트를 관리하다보면, 여러 프로젝트에서 모두 같은 의존성을 사용하는 경우가 있다. 이를테면 react 프로젝트 100개가 로컬에 있을 수 있다. 이 때, 기존의 npm 이나 yarn 으로 프로젝트를 관리하는 경우에는 100개의 프로젝트 내부의 node_modules 디렉토리에 각각 리액트 라이브러리를 모두 설치한다. 결과적으로 로컬 하드 디스크에는 실질적으로 똑같은 파일이 100 copy 가 설치되는 것이다. 문제 해결 pnpm 은 content addressable file store 라는 것을 이용해 문제를 해결한다. 단순하게 파일 이름으로 해당 파일을 접근하는..

JS 코드로 .css 파일 혹은 .js 파일 삽입하기

개요 가끔 CSS 파일이나 JS 파일을 javascript 코드를 이용하여 동적으로 삽입하고 싶을 때가 있다. 그 때 아래의 코드를 이용하면 편리하다. 코드 if (document.getElementsByTagName("head") != null) { document.getElementsByTagName("head")[0].insertAdjacentHTML( "beforeend", ' />' ); } head 태그에 insertAdjcentHTML() 메서드를 이용해 추가해주는 방식이다. insertAdjacentHTML() 메서드는 문자열을 HTML 태그 형태로 바꾸어주는 역할을 하는 메서드이다. 레퍼런스 insertAdjacentHTML 메서드 설명 공식문서

prefers-color-scheme 과 다크모드 적용 실무 팁

개요 다크 모드를 적용하다가 몇가지 시행착오를 겪었다. CSS 에서 @media (prefers-color-scheme: dark) 라는 부분에 대한 이해가 부족했기 때문이다. prefers-color-scheme 란? 요즘은 OS 에서 선호하는 컬러 모드를 설정할 수 있고, 그 결과가 prefers-color-scheme 이다. Mozilla CSS @Media prefers-color-scheme 공식문서 에서 자세한 내용을 볼 수 있다. 나중에는 다른 컬러를 지원할지 모르겠지만, 현재는 light 와 dark 중 선택하는 하는 것만 존재한다. 이 부분은 개발자가 임의로 javascript 로 변경할 수 없는 부분이며, OS 에서 설정하는 곳이 있다. 처음 다크모드를 개발할 때 이 부분을 내가 자바스..