인생은 효율성

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..

에러 내용 yarn : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\~~~~~~~~ 파일을 로드할 수 없습니다. 자세한 내용은 http ://go.microsoft.com/fwlink/?LinkID=135170의 about_Execution_Policies를 참조하십시오. 위치 줄:1 문자:1 + yarn --version + ~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess 원인 시스템에서 스크립트를 실행할 수 있는 권한이 없음 해결방법 1. Windows PowerShell 실행 2. 현재 권한 상태 확인 get-ExecutionPolicy 위 명령어를 ..

에러 원인 소스트리에서 깃 저장소 코드를 가져올 때 최초 한 번 비밀번호 입력 창을 띄운다. 이때 비밀번호를 한 번 잘못 입력하면 다시 입력할 수 있도록 창이 뜨거나 하지 않고 계속 비밀번호가 잘못되었다는 에러나게된다. 에러 내용을 확인해보면 핵심은 아래 내용이다. Bitbucket Cloud recently stopped supporting account passwords for Git authentication. 그래서 비밀번호를 다시 입력하기 위해서는 비밀번호가 저장된 파일을 삭제해주어야 한다. 잘못된 비밀번호 삭제 방법 C:\Users\[UserName]\AppData\Local\Atlassian\SourceTree\passwd 위 경로에서 passwd 파일을 삭제해준다. 이렇게하면 일단 저장된 ..

package-lock.json파일이 깃 저장소에 항상 올라가 있어야 한다는 것은 알고 있었는데 이 파일이 왜 저장소에 있어야만 하냐는 이유를 물어보면 명확하게 설명을 할 수 없을 것 같아서 npm 공식 문서에 잘 정리되어 있길래 정리해보았다. package-lock.json 파일은? npm이 node_module를 수정하면 자동으로 반영되는 파일이다. 그래서 npm install을 하면 자동으로 생성되고 패키지 업데이트가 있었다면 파일 내용이 수정되어있는 걸 확인할 수 있다. 이 파일에는 npm을 통해 설치한 패키지들의 상세 내용이 기록되어있다. npm install을 하면 프로젝트 설정 파일인 package.json에 명시한 모듈을 설치하게 되고 package-lock.json 생성되며(node_mo..

["@babel/plugin-proposal-private-methods", { "loose": true }] 젠킨스 빌드를 돌리는데 빌드가 30분째 돌아가고 있는 것이다. 원래는 5분쯤이면 빌드 완료가 떴기 때문에 무엇이 문제인지 로그를 확인해봤다. Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties. 위와 같은 warni..

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