profile
끊임없이 떨어지는 물방울이 바위를 뚫는다
post-thumbnail

영상 최적화 (feat. ffmpeg)

\-i {영상명} : 어떤 영상을 인코딩 할지\-vcodec {codec} : 비디오 코덱을 어떤 압축 알고리즘을 사용할 건지\-movflags +faststart : MP4 영상의 크기, 재생 시간 같은 메타 정보가 든 moov atom을 파일 첫부분으로 옮겨서 스

2023년 2월 18일
·
0개의 댓글
·
post-thumbnail

next.js v13 @next/font 적용기

프로젝트를 최근에 react(v18) + next(v13)으로 마이그레이션했다. next v13 소식중에 가장 간단히 적용해서 좋은 성능 변화를 이끌어낼 수 있을 것 같아보여서 바로 적용해보았다.@next/font 를 적용하면 세가지 정도가

2023년 1월 23일
·
0개의 댓글
·
post-thumbnail

프로젝트 yarn berry로 마이그레이션 하기

주의 : 중간중간 정리와 설명이 포함되어있어 가독성이 좋지 않습니다.yarn berry는 yarn 2.x.x, 3.x.x의 프로젝트 명이다. 기존의 yarn 1과는 너무 다르게 작동해서 팀에서 완전히 다른 이름을 지정한 것 같다.yarn berry는 종속성을 설치하고

2023년 1월 15일
·
0개의 댓글
·
post-thumbnail

[next.js] getServerSideProps 사용전에 고민해보기

페이지에서 getServerSideProps라는 함수를 export 하면 next.js에서 getServerSideProps에서 반환한 데이터를 사용하여 각 요청에 대해 페이지를 미리 렌더링한다.gssp가 적용된 페이지 url을 주소창에 입력하여 직접 요청시 gssp가

2023년 1월 8일
·
0개의 댓글
·

모던 자바스크립트 deep dive (42, 43, 44 ,45장) 정리

함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜스택) 이라고 부른다.함수의 실행 순서는 실행 컨텍스트 스택으로 관리한다.자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.위 예제의

2022년 12월 18일
·
0개의 댓글
·

모던 자바스크립트 deep dive (40, 41장) 정리

브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생 시킨다. 예를 들어, 클릭 ,키보드 입력, 마우스 이동 등이 일어나면 브라우저는 이를 감지하여 특정한 타입의 이벤트를 발생시킨다.프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트

2022년 12월 10일
·
0개의 댓글
·

모던 자바스크립트 deep dive (38, 39장) 정리

파싱은 프로그래밍 언어 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스트리를 생성하는 일련의 과정을 말한다. 일반적으로 파싱이 완료된 이후에는 파스

2022년 12월 5일
·
0개의 댓글
·

모던 자바스크립트 deep dive (33,34,35,36,37장) 정리

다른 값과 절대 중복되지 않는 유일무이한 값심벌 값도 문자열, 숫자, 불리언과 같이 객체처럼 접근하면 암묵적으로 래퍼 객체를 생성한다심벌 값은 암묵적으로 문자열이나 숫자 타입으로 변환되지 않는다.단, 불리언 타입으로는 암묵적인 타입 변환이 가능하다.Symbol 함수는

2022년 11월 26일
·
0개의 댓글
·

모던 자바스크립트 deep dive (28,29,30,31,32장) 정리

Number 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 \[NumberData] 내부 슬롯에 0을 할당한 Number 래퍼 객체를 생성한다.크롬 브라우저의 개발자 도구에서 실행해보면 \[PrimitiveValue]라는 접근할수 없는 프로퍼티가 보

2022년 11월 20일
·
0개의 댓글
·

모던 자바스크립트 deep dive (26, 27장) 정리

ES6 이전까지 자바스크립트의 함수는 별다른 구분 없이 다양한 목적으로 사용되었다. 자바스크립트의 함수는 일반적인 함수로서 호출할 수도 있고,new 연산자와 함께 호출하여 인스턴스를 생성할 수 있는 생성자 함수로서 호출할 수도 있으며,객체에 바인딩되어 메서드로서 호출할

2022년 11월 13일
·
0개의 댓글
·

[인용글] js에서 function()은 더이상 사용하지말자!

참고한 영상 : https://www.youtube.com/watch?v=LPEwb5plEoU썸네일 문구가 자극적이여서 얼마나 설득력있게 설명하실지 궁금해서 보게되었는데 주장하시는 이유가 분명해서 설득당했다..! 좋은 내용이라서 블로그에 정리를 하게 됐다!목적

2022년 11월 3일
·
0개의 댓글
·

vscode 폴더 대소문자 변경

깃 허브에서 폴더에 대소문자만 변경하고 push하면 적용이 안되어있어서pull로 가져온 코드에서 vscode에서 자동 리팩토링시켜준 경로에서 에러가 났었다.다시 말하면 리팩토링된 경로 코드는 푸시가 되었지만 가져온 경로의 폴더가 변경이 안되어서 에러가 났었다.git b

2022년 11월 1일
·
0개의 댓글
·

모던 자바스크립트 deep dive (22장)

객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다,getDiameter 메서드 내에서 메서드 자신이 속한 객체를 가리키는 식별자 circle을 참조하고 있다. 이 참조표현식이 평가되는 시점은

2022년 10월 30일
·
0개의 댓글
·

토스 면접 후기

난 평소에 토스에 대한 환상이 있었다. 토스는 최고라는 수식어가 붙어도 이상함이 없는 기업이였고 그 수식어에 대해 뒷받침하는 근거가 충분했다고 생각해왔다. ( 토스피드와 유튜브에 토스가 일하는 문화, 방법이 모든것을 충분히 설명해주었다.)

2022년 10월 26일
·
0개의 댓글
·

모던 자바스크립트 deep dive (19, 20, 21장)

자바스크립트는 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 모든것이 객체이다.객체 지향 프로그래밍이란 프로그램을 명령어 또는 함수 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점을 벗어나서 여러 개의 독립적 단위, 즉 객체의 집합으로 프로

2022년 10월 23일
·
0개의 댓글
·

[React] useIntersectionObserver(+once) custom hook

이 글은 설명글이 아닌 뷰포트 내에 Element의 교차점을 관찰하여 애니메이션 동작 여부를 결정할 때 사용하기 적합한 IntersectionObserver custom hook을 제공하는 글입니다.우리는 IntersectionObserver를 아래와 같은 상황에 자주

2022년 10월 19일
·
0개의 댓글
·

모던자바스크립트 deep dive 내용 정리 (16,17,18장)

ECMAScript 사양에 등잘하는 이중 대괄호(\[…])로 감싼 이름들이 내부 슬롯과 내부 메서드 이다.내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객

2022년 10월 16일
·
0개의 댓글
·

모던자바스크립트 deep dive 내용 정리 (2,4,5,6,7,8,9 장)

자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다. ( 개발자도구를 통해 콘솔을 찍어보면 한줄씩 변환하는 작업을 하는게 그 예시이다. ) 대부분의 모던 자바스크립트 엔진 ( 크롬의 v8, 파이어폭스의 spiderMonkey, 사파리의 jav

2022년 10월 2일
·
0개의 댓글
·

[React] 컴포넌트에서 조건부로 props 전달하는 방법

출처 : https://hohoya33.tistory.com/190

2022년 9월 7일
·
0개의 댓글
·

[React] 접근성 및 재사용성을 위한 Emoji

label과 symbol 참고 : https://unicode-table.com/kr/emoji/

2022년 8월 17일
·
0개의 댓글
·