미누에요

웹 프론트엔드 개발자로 수많은 프로젝트를 진행하다 보면 컴포넌트의 사이즈를 정할 때 px을 사용하지 말라고 많이 들었을 것이다. px은 정적인 단위로, 데스크톱, 태블릿, 모바일까지 다양한 기기로 웹페이지를 접속하는 현 시점에서 불리하기 때문이다.그와 동시에, rem 혹은 em을 사용하라는 말도 들어봤을거라 생각한다. remrem은 root 폰트 사이즈를 1rem으로 계산하여 사용하는 방식이다. 부모 폰트 사이즈를 기준으로 하는 em과는 다르게, 가장 상위에 존재하는 root의 폰트 사이즈를 기준으로 하기에 보다 일관적인 UI를 나타낼 수 있다. 하지만 나는 개발을 하면서 왜 rem이 반응형인지 의문이 들기 시작했다.root 의 폰트 사이즈를 기준으로 철저히 계산된 정적인 값이 아닌가? 하지만 언제까지나..

최근 프로젝트를 하던 중 다른 팀원의 코드에 interface를 사용하여 props를 받는 부분을 보았다. typescript를 아직 많이 사용해보지 않아 기본적으로 type을 사용하고 있었는데, 이 코드를 보고 interface와 type은 각각 어떨 때 사용하는거지 ? 라는 의문이 들어 찾아보게 되었다.    type 을 사용하는 경우단순히 원시 값, 튜플(tuple) 등을 선언할 때!type Name = string; type은 일반적으로 모든 선언에 사용할 수 있다.선언해둔 것을 확장할 수 없다.type Student = { name:string; stdNo:string;};type Student = { age: number;}; // Error 또한 type으로 선언한 것들은 선언적 확장(..

프론트엔드 개발을 하다보면 처음에 배웠던 JavaScript 외에도 TypeScript라는 것을 사용하게 된다.이름만 들었을 때, type이 추가된건가 ? 싶다. 이에 대해서 차근차근 정리해보자. TypeScriptTypeScript는 JavaScript의 상위 집합이다. 즉 쉽게 말해서, JavaScript에서 type을 추가하여 확장한 언어라고 생각하면 좋다. JavaScript에다 타입 관련 기능을 추가한 언어이므로, 기존 JavaScript에서 사용하던 문법들을 100% 사용할 수 있다.  TypeScript 공식 웹 페이지에서는 TypeScript의 강점을 위처럼 서술하고 있다.JavaScript에 추가적인 문법을 통해 타입 안정성을 확보하여 에러를 빠르게 잡을 수 있다.TypeScript는 J..

이번에 해커톤을 진행하면서 "공유하기" 버튼을 눌렀을 때, 모바일에서 공유할 어플리케이션을 선택하는 부분이 뜨는 걸 구현하게 되었다.  아이폰 유저들은 위 사진을 많이 봤을 것이다.나는 웹 페이지에서 "공유하기" 와 같은 버튼을 누르면 위 공유 창을 띄워 공유할 곳을 선택하고 싶었다. 그러다 이 기능은 Web Share API를 사용하여 개발하게 된다는 것을 알게 되었다. Web Share APIMDN에서 만든 공유 api이다.텍스트, 링크, 파일 및 기타 콘텐츠를 운영체제의 공유 매커니즘을 활용해 공유할 수 있도록 하는  api Web Share API에서는 두 가지 메서드를 기본적으로 제공한다.navigator.canShare()navigator.share() navigator.canShare()해당..

우리는 링크를 카카오톡으로 공유하면 링크와 함께 미리보기 창이 뜨는 것을 많이 보았다.이렇게 공유할 때 정보를 함께 띄우려면, OG태그라는 기술을 사용해야 한다.  OG태그(Open Graph Tag)웹페이지가 소셜 미디어에서 공유될 때 어떻게 보일지를 정의하는 메타 데이터.소셜 미디어에서는 이 태그 정보를 참조하여 미리보기를 구성하게 된다.  OG 태그가 적용된 예시 페이지 이 페이지는 소셜 미디어에서 공유될 때 OG 태그를 활용하여 미리보기 정보를 제공합니다. OG태그는 주로 HTML 파일의 내부에 태그로 정의한다.  OG태그의 주요 구성 요소로는 아래와 같다.og:title - 페이지의 제목og:description - 페이지의 설명og:image - 대표 이미지의 URLog:url - 페이..

JavaScript의 ES6에서는 이전과는 많이 다른 형태의 함수 선언 방법이 제시되었다.그 방법은 바로 화살표 함수 방법이다.   화살표 함수(Arrow Function)화살표 함수 표현식을 사용하여 함수를 나타내는 방법은 아래와 같다.const 함수이름 = (인자)=>{ 함수 내용}; 딱 봐도 함수가 비교적 간단해 보이지 않는가 ? 보는 것처럼, 화살표 함수는 일반 함수에 비해 생략된 기능을 가진다. 화살표 함수는 this를 가지지 않는다.화살표 함수는 arguments를 가지지 않는다.화살표 함수는 생성자 함수로 사용할 수 없다. 화살표 함수는 this를 가지지 않는다. 기본적인 함수 선언에서 this는 동적으로 바인딩된다.객체의 메서드에서 this일반 함수 this생성자 함수에서 this객체..