인생은 효율성

0. Homebrew 설치하기 (설치되어 있다면 바로 1번으로) a. 아래 명령어를 터미널에 입력해서 Homebrew가 설치되어 있는지 확인하자. brew -v 버전 정보가 나오지 않는다면 Homebrew가 설치되지 않은 것이다. b. Homebrew를 설치하기 위해 아래 명령어를 터미널에 입력하여 설치하자. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" c. 다시 brew -v 로 버전 확인을 통해 설치가 완료되었는지 확인하자. ************************************************************************* 만약 아래 같은 에러..

자바스크립트 성능 개선 필요성 네트워크 전송 시 자바스크립트의 평균 전송 크기는 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; 을 주면 이벤트가 정상적으로 먹힌다.

CRA로 리액트 프로젝트를 생성하면 자동으로 환경변수 두 가지 development, production 가 적용된다. package.json의 스크립트에 환경변수에 따라 빌드를 할 수 있게 되어있는데 개발환경과 운영환경 말고 스테이징 환경도 필요하게 되어서 staging 을 추가하고 싶었다. 그래서 .env.staging 파일을 추가하고 빌드 스크립트도 아래와 같이 추가하였다. "scripts": { ... "build:staging": "REACT_APP_ENV=staging react-scripts build", ... }, 하지만 빌드를 하고 나면 환경변수가 스테이징 환경으로 적용되지 않았다. 문제 원인 CRA로 생성한 프로젝트는 기본적으로 development, production 두 가지밖에 ..

https://school.programmers.co.kr/learn/courses/30/lessons/12900?language=python3# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr [풀이방법] 타일 크기는 2x1이기 때문에 결국 가로길이인 n에서 1과 2를 조합한 경우의 수를 구하는 문제나 마찬가지이다. n=0인 경우는 타일을 배치할 수는 없지만 경우의 수로 따졌을 때는 타일이 0개 배치된 한 가지 방법이 있다. n=1인 경우는 타일을 세로로 배치하는 한 가지 방법밖에 없다. n=2는 가로와 세로 배치가 모두 가능한데, 세로배치 같은 경우는 ..

웹 개발을 하다 보면 다른 탭으로 이동했다가 다시 작업 중이던 탭으로 돌아왔을 때에 특정 이벤트를 주어야 하는 경우가 있다. document.visibilityState를 이용하면 간단하게 구현할 수 있다. const onVisible = async function () { if (document.visibilityState) { // 페이지(탭) 활성화 시 동작 } }; document.addEventListener('visibilitychange', onVisible); 참고: https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState Document.visibilityState - Web APIs | MDN The Docume..

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

문제 상황 문자열을 줄바꿈을 해주고 싶을때가 있다. 문자열 자체에 정규식 개행문자를 추가했지만 JSX 안에서 보여줄 때, 줄바꿈이 먹히지 않는다. const str = '줄바꿈\n테스트'; 줄바꿈 html 태그인 을 넣어도 태그가 문자 그대로 출력된다. 해결방법 JSX안에서는 개행문자 \n 이 먹히지 않아서 일어나는 문제이다. 이럴때는 CSS에서 아래처럼 설정해준다. white-space: pre-line; * 참고로 여기서 줄바꿈 뿐 아니라 들여쓰기도 필요하다면 아래 옵션으로 설정해준다. white-space: pre-wrap; 공식 문서: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space white-space - CSS: Cascading S..