1. 오늘의 한 줄
녹아버릴 것만 같은 날씨,,
2. 배운 내용
Props / Props Drilling
Props Drilling은 여러 컴포넌트가 깊게 중첩돼 있을 때, 실제로는 그 값을 안 쓰는 중간 컴포넌트들까지 거쳐서 props를 계속 넘겨줘야 하는 상황을 말한다.
순수 함수(Pure) vs 비순수 함수(Impure)
- Pure 함수는 외부 상태를 안 건드리고, 같은 입력값이면 항상 같은 출력값을 리턴한다.
- Impure 함수는 외부 상태를 참조하거나 바꿔서, 같은 입력이어도 결과가 달라질 수 있다.
DOM 이벤트 vs React 이벤트
- DOM 이벤트는
addEventListener('click', handler)처럼 등록하거나element.onclick = handler처럼 등록한다. - React 이벤트는 JSX 안에서
onClick={handler}처럼 카멜케이스로 등록한다.
이벤트 버블링과 event.preventDefault()
이벤트 버블링은 요소에서 발생한 이벤트가 상위 요소로 차례로 전파되는 현상이다. event.preventDefault()가 이 버블링을 막는 건 줄 알았는데 찾아보니 그건 아니었다.
preventDefault()는 폼 제출 시 새로고침되는 것 같은 브라우저의 기본 동작을 막는 거고, 버블링을 막는 건 stopPropagation()이라는 다른 메서드라고 한다.
Bootstrap
npm install react-bootstrap bootstrap변수 scope
전역(함수 밖에서 선언)과 지역(함수 안에서 선언)으로 나뉜다.
HTTP의 특성과 인증/인가
- HTTP는 connectionless(연결을 계속 유지 안 함),
stateless(서버가 이전 요청 상태를 기억 안 함)한 특성을 가진다. - 권한은 데이터가 아니다 —> 그래서 세션/쿠키로 로그인 상태를 관리하거나, 요즘은 JWT(토큰) 방식도 많이 쓴다.
- 토큰은 header에 담아서 통신한다 (데이터가 아니라서 body에 담지 않는다).
- JWT(Json Web Token)는 Access Token(AT)/Refresh Token(RT)으로 나뉜다.
인증 vs 인가
- 인증(Authentication)은 신원 확인
- 인가(Authorization)는 특정 URL/기능에 접근할 수 있는 권한
react-router-dom
npm install react-router-domURL 경로에 따라 다른 컴포넌트를 보여주는 걸 라우팅이라고 하고, <Route>가 이 경로↔컴포넌트 매칭을 담당한다.
Conditional Rendering
JavaScript의 Truthy/Falsy를 이용해서, true && expression이면 expression이 그대로 나오고 false && expression이면 false가 나오는 단축평가를 조건부 렌더링에 활용할 수 있다. 삼항 연산자로 인라인 조건도 가능하다.
3. 실습 / 적용
① EventPage — Controlled Form으로 로그인 구현
const [email, setEmail] = useState('');
const [pswd, setPswd] = useState('');
const signInHandler = async (e, email, pswd) => {
e.preventDefault();
await api.get(`/users?email=${email}&pswd=${pswd}`)
.then(response => {
const ary = response.data;
if (ary.length > 0) {
const user = ary[0];
localStorage.setItem('userName', user.name);
moveUrl('/success', { state: { user } });
} else {
moveUrl('/error');
}
})
.catch(err => console.log(err));
}이메일/비밀번호 입력창을 value/onChange로 state와 동기화시키고, 로그인 버튼을 누르면 axios로 이메일과 비밀번호가 일치하는 계정이 있는지 조회한다. 만약 있으면 /success로 없으면 /error로 useNavigate()를 이용해 이동시켰다.
3일차에 로그인 폼을 location.href로 URL에 이메일/비번을 실어 보내는 게 보안상 안 좋다고 정리했었는데, 오늘도 api.get('/users?email=...&pswd=...')처럼 GET 쿼리스트링으로 로그인 정보를 보내는 구조라 같은 문제를 다시 만났다.
json-server는 POST/PUT/PATCH/DELETE도 다 지원하는데, POST /users는 로그인 검증이 아니기 때문에 로그인 확인용 엔드포인트가 따로 없다.
그래서 GET 조회로 이메일과 비밀번호가 일치하는 게 있는지 찾는 방식이 됐다. 실제 서비스라면 POST /login 같은 엔드포인트에 body로 보내고, 서버가 검증해서 토큰을 내려주는 방식이어야 한다고 한다.
오늘 배운 JWT 흐름(로그인 → 서버가 토큰 발급 → 이후 요청 header에 담아 전송)이 이 문제를 제대로 푸는 방식이라, 나중에 백엔드 과정에서 직접 구현해보고 싶다.
② react-router-dom으로 라우팅 구성
<BrowserRouter>
<Routes>
<Route path="/" element={<EventPage />} />
<Route path="/success" element={<SuccessPage />} />
<Route path="/error" element={<ErrorPage />} />
<Route path="/read/:id" element={<ViewPage />} />
</Routes>
</BrowserRouter>SuccessPage에서는 useLocation()으로 로그인 성공 시 넘겨준 user 정보를 받아 이름을 보여주는데, 새로고침하거나 주소로 직접 들어오면 state가 없을 수도 있어서 user?.name처럼 옵셔널 체이닝으로 안전하게 접근했다.
결과:
이메일/비밀번호 입력 → 로그인 버튼 클릭 → 계정 확인 → 성공/실패 페이지로 이동까지 흐름을 확인했다.
4. 오늘의 회고
- 느낀 점: 뭔가 깨달은 것 같으면 또 어려운게 잔뜩 생기지만, 배웠던 내용들이 조금씩 연결되고 있음을 느낀다.
- 다음에 할 것: 오늘 코드 복습X100
#LGCNS #LGCNS6기 #개발자 #LGCNSINSPIRECAMP
