인생은 효율성

Flow Field Flow Field 는 시뮬레이션에 사용되는 그래픽 기술로, 각 지점에 대한 특정 방향으로의 흐름을 나타내는 표현 방법이다. (feat. chat GPT) 예시를 찾아보면 초등학생 때 철가루와 자석을 이용해 자기장을 표시하는 듯한 비주얼이다. generative art 결과물들을 보면 여기에서도 많이 쓰이는듯한데 p5.js 라는 라이브러리를 이용하면 좀 더 편하게 구현할 수 있는 모양이다. 하지만 간단한 건 직접 구현하기 그다지 어렵지 않으니 HTML canvas + JavaScript 로 직접 구현해 보자. 결과물 위처럼 마우스 드래그 할 때마다 Flow Field가 그려지도록 만들 것이다. Flow Field 구현 세세한 코드를 전부 올리진 않고(어차피 GitHub에 있으니..) ..

자바스크립트 성능 개선 필요성 네트워크 전송 시 자바스크립트의 평균 전송 크기는 350KB 정도이다. 이것은 압축된 것이기 때문에 파싱되고 컴파일 및 실행되면 900KB로 늘어난다. 자바스크립트라는 자원을 수행하는데 비용이 많이 들어가는데, 웹 애플리케이션은 대부분 자바스크립트로 만들어진 것이라서 자바스크립트 엔진 효율성 향상을 위한 지속적인 개선이 이루어지고 있다. 자바스크립트 성능을 개선하기 위한 기술 중 코드 스플리팅은 자바스크립트 청크로 애플리케이션을 분할하고, 청크를 필요로 하는 애플리케이션의 경로에만 청크들을 배분하여 성능을 향상시키는 기법이 있다. 그러나 코드 스플리팅을 사용한다고 해서 사용되지 않는 코드를 포함한 자바스크립트 애플리케이션의 문제를 해결하지는 못한다. 이 문제의 해법을 트리 ..

아래처럼 말줄임표를 표시하는 방법을 알아보자. 1. 한 줄일 때 말줄임표 말줄임표를 적용해야 하는 텍스트가 한 줄인 경우는 아래처럼 css를 작성한다. div { width: 200px; /* 오버되면 말줄임 적용할 최대 넓이 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 결과 2. 여러 줄일 때 말줄임표 말줄임표를 적용해야 하는 텍스트가 한 줄인 이상인 경우는 아래처럼 css를 작성한다. div { width: 200px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 2줄 넘어가면 말줄임 */ -webkit-b..

tr > td:nth-child(2) { pointer-events: none; // 이벤트 막음 span { pointer-events: all; // 이벤트 허용 } } 위 처럼 pointer-events: none; 을 주면 아무런 클릭 이벤트가 실행되지 않는다. 그런데 만약 이벤트를 막은 요소 중에서도 특정 요소에는 이벤트를 주고 싶다면 예시의 span 에 사용한것처럼 pointer-events: all; 을 주면 이벤트가 정상적으로 먹힌다.

.word1 { letter-spacing: 2px; /* 글자 간 간격 넓게 */ } .word2 { word-spacing: -2px; /* 단어 간 간격 좁게 */ } 글자 사이 간격(normal) 글자 사이 간격(-2px) 글자 사이 간격(2px) 단어 사이 간격(normal) 단어 사이 간격(-2px) 단어 사이 간격(2px)

파이어베이스 인증 기능 설정 1. 아래 링크로 접속한다. https://console.firebase.google.com/ 2. 인증 기능을 추가할 프로젝트를 선택 3. 인증 설정 화면으로 이동 4. 로그인으로 사용할 방법을 선택해준다. 나는 이메일, 구글, 깃허브를 사용할 것이기 때문에 차례로 하나씩 설정해보도록 하겠다. 5-1. 이메일 인증 이메일/비밀번호 토글을 "사용 설정" 해준다. 5-2. 구글 인증 마찬가지로 "사용 설정" 해준 뒤 [프로젝트 지원 이메일] 셀렉트 박스에 뜨는 나의 이메일을 선택해준다. 5-3. 깃허브 깃허브는 단계가 살짝 많은데, 우선 클라이언트 ID와 보안 비밀번호를 입력하기 위해 깃허브에 접속한다. 5-3-1. https://github.com/settings/profil..

data attributes html5는 특정 엘리먼트와 연관되어있지만 어떤 의미를 가질 필요가 없는 데이터에 대한 확장성을 고려하여 디자인되었다. data-* 속성을 사용하여 비표준 속성이나 DOM의 추가 속성을 사용하는 등의 hack 없이도 의미론적인 추가 정보를 저장할 수 있다. 사용 예시 HTML에서 아래와 같이 data- 속성을 사용하여 시각적으로 나타낼 필요가 없는 추가 정보를 저장할 수 있다. ... 이를 자바스크립트에서 읽으려면 아래와 같이 작성한다. const article = document.querySelector('#electric-cars'); // The following would also work: // const article = document.getElementById(..

출처(Origin)란? CORS를 알아보기 이전에 '출처'라는 것이 무엇인지 먼저 알아야 한다. 출처는 서버의 위치를 뜻하고 프로토콜, 호스트, 포트로 구성되어있다. 우리가 로컬에서 개발하면서 자주 보는 아래 같은 주소를 구분하자면 이렇다. https://localhost:3000 Protocol Host Port 경우에 따라서 이 뒤에 Path, Query string, Fragment가 붙을 때도 있지만 출처(Origin)는 위의 URL구성을 뜻한다. 콘솔로 location객체의 origin프로퍼티를 출력해보면 현재 출처를 알 수 있다. CORS의 뜻 개발을 하다 보면 CORS를 자주 접하게 되는데 이와 관련해서 SOP라는 정책이 있다. SOP는 간단하게 설명해서 같은 출처에서 리소스를 공유할 수 있..

번들러? 번들러의 예시로 웹팩을 들 수 있다. 웹팩은 많이 사용되는 모듈 번들러 중 하나인데 번들러의 특징은 아래와 같다. 1. 의존성이 있는 모듈 코드를 하나(또는 여러 개) 파일로 만들어 주는 도구 2. 브라우저 환경에서 잘 실행될 수 있도록 가공해 주는 역할 번들러 사용 이전의 문제점 프로젝트가 커질수록 자바스크립트 파일 각각의 의존성과 코드 사이 순서를 보장하기 힘들다는 부작용을 초래했고 심할 경우 일부 파일의 문제가 전체 스크립트를 실행에 영향을 미치기도 한다. 자바스크립트 언어 사양에 신규 모듈 시스템인 ES Module이 포함되어 이제는 모듈 없이 자바스크립트로 코딩하기 힘들어졌다. 아직 모든 브라우저에서 ES Module을 사용할 수 있는 것은 아니기 때문에 브라우저에서 모듈을 사용하려면 ..

REST API 클라이언트에서 서버의 리소스에 액세스 할 수 있도록 해주는 메커니즘 REST 디자인 원칙 6가지 균일한 인터페이스: 요청이 어디서 오든지 동일한 리소스에 대한 요청은 동일하게 보여야 함 클라이언트-서버 디커플링: 서로 간 독립적이어야 함. 클라이언트가가 아는 유일한 정보는 URI Stateless: 각 요청에서 처리에 필요한 모든 정보가 포함되어야 함. 서버 측 세션 필요 없음 캐싱 가능성: 클라이언트 혹은 서버에서 캐싱 가능해야 함 ⇒ 서버 측 확장성 증가 & 클라이언트 성능 향상 계층 구조 아키텍처: 호출과 응답이 서로 다른 계층 통과. 서로 직접 연결 아님. 중개자 있음 코드 온디맨드: 정적 리소스 전송하지만 특정 경우는 실행코드(jaca 애플릿) 포함할 수도 있음 HTTP 메서드 ..