오늘은 풀을 땡겼는데 무수한 오류들을 마주한 것이.. ".env"가 없었기 때문이라는 것을 깨달았다.
git ignore 에 env를 넣었기 때문에 풀을 받을때 env를 가져오지 않아서 오류가 났고,
.env 파일을 계속 따로 만들어 줘야한다고 한다.
그래서 트러블 슈팅과, env에 대해 알아보려고 한다!
image map 돌리기
우선 완성된 작품이다..
저 이미지 6개를 map 돌리기까지의 여정을 정리해보고자 한다.
1. 이미지 import 해오기
2. 변수 선언해서 import한 이미지 배열로 돌리기
3. map 함수 쓰기
display : grid 로 간격 조정
사실 늘 flex 나 float 로만 간격을 조정해봤지..
grid 를 사용해본 것은 처음이다!
완성본이다!
grid-template-columns: 130px 130px 130px;
- 주황색 글씨
- 가로 그리드 간격 조정
- 130px, 130px, 130px = 1, 2, 3
grid-template-rows: 120px 120px;
- 초록색 글씨
- 세로 그리드 간격 조정
- 120px, 120px = 1, 2
onClick 시, 선택된 사진 하나에만 css 주기
이렇듯 onClick 시 border의 색과 check 이미지를 띄우는 작업을 시도했다.
1. 선택된 값의 번호를 설정하기 위해, useState 사용
onClick 함수에 setter 넣기
img 에 props 넣어서 getter 값 전달하기
- 초기값이 0 이었던 Selected 라는 getter가,
- onClick 시 setSelected 라는 setter 로 인해 v로 바뀐다.
- onClick 시 선택한 사진으로 바뀐다.
- arr 의 v
- const arr = [profile1, profile2, profile3, profile4, profile5, profile6]
- img 와 checkimg 에 props(isActive) 를 넣는다.
- isActive 는 getter 의 값이 선택된 사진으로 바뀔 때마다 적용된다.
props 값을 받아서 css 적용하기
- onClick 돼서 isActive 됐을 경우, border가 보라색, 아닐 경우 하얀색
- onClick 돼서 isActive 됐을 경우, check img 가 보이기, 아닐 경우 안보이기
아이디/닉네임 중복확인
1. input 값 받아오기
- 아이디 중복확인 버튼을 클릭했을 시
- useMutation 으로 만든 mutate : IdDupCheck 로 nicknameRef.current.value 값을 보낸다.
2. 매개변수로 값 받아오기
- 매개변수 값은 아무 값으로 설정해도 된다.
- 나는 nicknameRef.current.value 을 nickname 으로 받아왔다.
3. API 명세서의 URL로 변수 넣어서 보내기
- 변수는 ${ 변수명 } 으로 넣어야 한다.
- 변수를 넣을 시 앞뒤를 백틱으로 감싸야 한다.
3-1. Postman 에서 확인해볼 때는 변수명의 { } 를 빼야 한다.
4. 백엔드에서 에러 났을 경우 반환하는 값은 두 가지다.
4-1. success 혹은 error
4-2. true 혹은 false
true 혹은 false 의 경우,
error 값이 나오지 않고 무조건 success 값만 나오기 때문에
data === true/false 로 구분해야 한다.
API 명세서에서는 result : truel/false 로 반환한다고 했지만,
실제로 postman 으로 확인해보니 그냥 true 로 반환되기 때문에
data === true/false 로 코드를 짰다.
만약 명세서대로 result : true/false 로 값이 반환된다면,
response.data.result === true/false 등 다른 방식으로 코드를 짰어야 했을 것이다.
env
env 란 ?
- 개발자 혼자서 또는 팀만알아야 하는 값, 즉 git 오픈소스에 올리면 안되는 값들이 있다.
- 이 때 필요한 것이 dotenv 패키지다.
- 환경변수 파일을 외부에 만든다.
- URL, 포트, DB 관련 정보, API_KEY 등을 저장시킨다.
- 소스코드 내에 하드코딩하지 않고 사용할 수 있다.
.env 파일
-
.env 파일은 프로젝트의 최상위 루트(src 밖)에 파일을 만든다.
-
외부 파일(.env)에 환경변수를 정의하여 변수로 받아오는 이유 ?
- 보안과 유지보수에 용이하기 때문
.env 파일 사용법
- .env.{mode명}
- .env.--- 파일의 내용을 수정하면 npm(yarn) 으로 다시 시작해야 한다.
React 에서 .env 사용하기
- process.env.REACT_APP 는 예약어이므로, 다른 이름은 사용하면 React가 인식하지 않는다.
.js
const abc = {
key : process.env.REACT_APP_지정한 변수
}.env
REACT_APP_지정한 변수 = 값.env 활용 모듈 - dotenv
- nodeJS 의 모듈로, npm 을 사용해 설치하고 사용할 수 있다.
- dotenv 를 사용해 현재 디렉토리에 위치한 .env 파일로부터 환경 변수를 읽어낼 수 있다.
- npm(yarn) install dotenv
require("dotenv").config();
- 애플리케이션이 작동될 때 가장 먼저 실행되는 js 파일의 최상단에서 config( ) 함수를 호출하면 .env 파일에 저장된 환경 변수를 process.env 모듈을 통해 불러올 수 있다.
정리
- env 파일은 "환경 변수 파일" 을 의미한다.
- 이 파일은, 애플리케이션이 실행될 때 넘기고 싶은 특정 값을 담고 있는 변수가 기록되어 있다.
- 미리 정의된 값을 애플리케이션에서 활용하고 싶을 때 이 .env 파일을 활용한다.
참고
- https://carmack-kim.tistory.com/110
- https://velog.io/@jhyounyaho/env-%ED%8C%8C%EC%9D%BC
- https://code-designer.tistory.com/102
- hoje15v.log
