y.developer
[TIL] Day 41 Pro Tips 본문
2023.11.30 목
그동안 메모했던 꿀팁들을 모아봤다.
나중에 찾아볼 나를 위해서라도 흩어져있는 정보들을 한 곳에 모아서 정리해야겠다.
1. ENV란?
웹,앱 개발을 하다보면 포트, DB관련 정보, API_KEY등 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있다. 이때 필요한 것이 dotenv 패키지 이며 환경변수 파일을 외부에 만들어 URL, 포트, API_KEY 등을 저장시켜 소스코드 내에 하드코딩하지 않고 사용할수 있다.
기억해야할 것!
- 환경변수의 이름은 REACT_APP_로 시작하게 만든다.
process.env.REACT_APP_은 예약어이므로, 다른 이름은 사용하면 React가 인식하지 않는다.
이는 의도적인 것으로, 우연히 우연히 같은 이름을 가진 시스템의 private key가 노출될 위험이 있기 때문이라고 한다.
- evn 파일을 수정했으면 yarn start를 다시 해준다.
process.env는 실행시 로드되기 때문에 .env의 설정을 바꾸게 되면 React 프로젝트를 다시 구동해야된다.
2. 비교
inpuValue가 빈 값이라면 두가지 조건으로 if을 쓸 수 있다.
가장 기본적으로 쓰는 방법은 이거다.
if ( inputValue.id === "" ) → true
간단하게 작성하려면
단일 부정 연산자를 사용하면 된다.
if ( !inputValue ) → true
참고로 아무것도 없는 값("")의 type은 string, boolean은 false가 나온다.
3. 단일, 이중 부정 연산자
JavaScript에서 `!`와 `!!`의 차이는 논리 부정(Not) 연산자에 있다.
단일 부정 연산자 (!)
논리적 부정을 나타내며, 피연산자의 값을 반전시킨다.
예를 들어, `!true`는 `false`, `!false`는 `true`로 전환된다.
이중 부정 연산자 (!!)
피연산자를 부정하고 다시 부정하는 것으로, 값을 Boolean으로 강제 변환한다.
어떤 값이 참인지 거짓인지에 대한 명시적인 값을 생성하는 데 사용된다.
예를 들어, `!!true`는 `true`, `!!false`는 `false`로 정의된다.
4. CSS vh, vw와 %의 차이
vw, vh : 스크롤바 포함
% : 스크롤바 미포함
5. 데이터 최신순으로 가져오기
- Firebase에서 시간순으로 데이터 가져오기 (최신순)
const q = query(postsRef, orderBy('createdAt', 'desc'));
- json-server에서 시간순으로 데이터 가져오기 1 (최신순)
GET /todos?_sort=createdAt&_order=desc
- json-server에서 시간순으로 데이터 가져오기 2 (최신순)
const response = await axios.get(
`${process.env.REACT_APP_DB_SERVER_URL}/letters?_sort=createdAt&_order=desc`
);
- json-server에서 시간순으로 데이터 가져오기 3 (오래된순)
const response = await axios.get(
`${process.env.REACT_APP_DB_SERVER_URL}/letters?_sort=createdAt&_order=asc`
);
6. json 형식 식별하기
key가 ""로 묶여있다면 json 형식
7. 옵셔널 체이닝(?) 대신 쓸 수 있는 로직
if (!todos) return;
8. 청크 이름
청크 이름 앞에는 언더바 2개( __ )를 붙인다.
createAsyncThunk / 리덕스툴킷 내장 API
9. 자동완성 시 텍스트 및 배경 색 컨트롤
&:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #2c2c2c inset;
-webkit-text-fill-color: #fff;
}
10. 서버에서 요청 받을 수 있는 방법
1. : param 파라미터(파람) (주소창)
2. ? query 쿼리 (주소창)
3. body 바디 (주소창에 표출 안되게(보안))