개발개발

emotion emotion 문서를 읽어보자. css Props className prop을 허용하는 모든 component 또는 element는 css prop도 사용할 수 있다. css prop에 제공된 스타일이 평가되고 계산된 클래스 이름이 className prop에 적용된다. Object styles import { jsx } from '@emotion/react' render( This has a hotpink background. ) string styles string style를 전달하려면, @emotion/react에서 내보낸 css 를 사용해야 한다. render( This has a hotpink background. ) styled components chaning ..

Next - foundation Next.js 공식 문서를 보면서 학습한 내용을 정리할 예정입니다. 첫 번째 글은 Next 공식 페이지에서 제공하는 Learn Next.js 에서 기초 내용으로 Next.js가 무엇인지 알아봅니다. Next.js? Web SDK server rendering, typescript support, smart bundling, route, re-fetching 등 next.js에서는 웹을 만드는 데 필요한 모든 도구가 있다. Bundling block of a web applictaion 모던 웹을 빌딩할 때 몇 가지 생각할 것이 있다. User Interface Routing 앱의 다른 파트를 검색하는 방법 data fetching 데이터의 위치와 가져오는 방법 render..

이번 글에서는 rollup이 무엇인지 알아보고 typescript와 최신 자바스크립트 문법을 사용할 수 있도록 세팅하는 법을 정리해보았습니다. 예제는 rollup을 설치, plugin 사용법, 타입스크립트 사용하기, 바벨 붙이기 순으로 진행됩니다. Rollup? Rollup은 자바스크립트 모듈 번들러다. 모듈 번들러? 모듈 번들란 HTML, CSS Javascript, Images 등을 모두 각각의 모듈로 보고 모듈 단위로 나누어 최소한의 파일 묶음(번들)을 만든다. 여러 파일들을 하나의 파일로 묶음으로서 네트워크 요청을 줄일 수 있음 또한 최신 문법의 자바스크립트 코드가 모든 브라우저에서 돌아갈 수 있도록 변환(Transpile)하는 등 다양한 기능을 지원함 rollup 번들러 세팅하기 rollup 번..

지난 글에 이어 Type challenges를 풀이한 내용을 올립니다. First of Array generic에 배열 타입을 넣으면 배열의 첫 번째 요소의 타입을 구현한다. type arr1 = ['a', 'b', 'c'] type arr2 = [3, 2, 1] type head1 = First // expected to be 'a' type head2 = First // expected to be 3 solutions type First = T extends [] ? never : T[0]; generic 타입으로 입력 된 타입을 배열로 제한한다. extends any[] (Generic Constraints) 빈 배열이 들어온 경우를 처리한다..

타입스크립트를 잘 써보고 싶기도 하고 재밌어 보여서 type-challenges를 시작했습니다. 이번 글에서는 type challenges easy 단계인 Pick, Readonly, Tuple of Object 과제를 풀어보고 정리해보았습니다 ~ Pick 구현하기 Pick interface Todo { title: string description: string completed: boolean } type TodoPrevidew = MyPick const todo: TodoPrivew = { title: 'Celan room', completed: false, } solution type MyPick = { [P in K]: T[P] } 어떤 타입을 받아오고, K라는 것은 T 타입에 있는 키들을 상속..

이번 글에서는 이벤트 핸들러 이름을 지을 때 어떤 규칙이 있는지 정리해보았다. 어떤 경우에 handle* 을 쓰고 on* 을 쓰는지 알아보자. 리액트 이벤트 핸들러 네이밍 Prop Names prop 이름을 정할 때 보통 onClick과 같이 on* 접두사를 사용한다. 리액트 빌트인 이벤트 핸들러 규칙과 같다. Function Names function name은 handleClick과 같이 handle* 로 사용한다. 이 두 가지를 다음과 같이 사용할 수 있다. on 접두사가 붙은 경우, 이 prop에 실제 이벤트가 연결되어 있다는 걸 뜻하고, handle 접두사가 붙은 경우, 이벤트가 발생했을 때 호출되는 실제 Function을 의미한다. click 동사는 클릭했을 때 어떤 일이 일어나는지에 따라 달..

회사에서 영상 스트리밍할 때 hls.js 라이브러리를 사용하는데, hls가 무엇인지 궁금해져서 알아보았습니다. hls가 무엇인지 이 프로토콜을 따른다면, 영상은 어떻게 저장되고 전송되는지 등을 간단하게 정리했습니다. Live Streaming? 일단 hls가 무엇인지 알아보기 전에 이 프로토콜을 사용하는 이유인 라이브 스트리밍이란 무엇일까? 우선 스트리밍이란 사용자들에게 멀티미디어 디지털 정보를 제공하는 기술로 인터넷에서 영상 및 오디오등의 파일을 다운로드 받지 않고 실시간으로 재생해주는 기법이다 라이브 스트리밍은 생방송처럼 촬영한 정보를 실시간으로 사용자의 동영상 플레이어로 보내 재생하도록 하는 방식을 말한다. HLS의 등장 배경 hls가 등장하기 전에 라이브 스트리밍을 위해 많이 사용하던 전통적인 프..

overflow: auto로 속성을 지정하면, 콘텐츠의 크기에 따라 스크롤 바를 추가할지 말지 자동으로 결정된다. 모바일웹에서 손가락으로 스크롤을 하는데, 이 때 발생하는 이벤트를 살펴보면, touchstart: 손가락이 닿을 때 발생 touchmove: 손가락이 닿은 채 움직일 때 발생 touchend: 손가락을 뗄 떼 발생 touchmove일 때 스크롤도 같이 움직이게 되는데, 손가락을 떼는 순간 즉시 스크롤이 멈추게 된다. Momentum Scrolling이란? momentum scrolling이란 touchend 이벤트 발생 시 즉시 스크롤이 멈추지 않고 스크롤 제스쳐가 끝나고 손가락을 터치 화면에서 떼어도 잠시 스크롤이 지속된다. 모바일 사용자가 보통 손가락을 튕기면서 스크롤링을 하기 때문에 손..

타입스크립트에서는 다른 일반적인 프로그래밍 언어에서는 찾을 수 없는, 타입을 변환하는 것이 가능하다. 별 모양의 타입을 별 모양의 일부분만 변환하는 transform도 가능하다. utility 타입을 가져다가 쓸 수도 있지만, 정확하게 어떻게 이것이 가능한 것인지 먼저 알아본다. Index Type { const obj = { name: 'ellie' } obj.name; obj['name'] } 이것처럼 인덱스를 기준으로 타입을 결정할 수 있다. type Animal = { name: string; age: number; gender: 'male' | 'female' } type Name = Animal['name'] // stri..

이번 글에서는 Type과 Interface의 차이점을 정리했다. Type Alias vs Interface - 구현 모든 곳에 인터페이스를 쓰는 것은 좋지 않다. 타입과 인터페이스는 다르다. type PositionType = { x: number; y: number } interface PositionInterface { x: number; y: number; } const obj1: PositionType = { x: 1, y: 2 } const obj2: PositionInterface = { x: 1, y: 2 } class Pos1 implements PositionType { x: number y: number } class Pos2 implements PositionInterface { x:..