🐳 Email 페이지 코드 수정하기 화면 자체의 로직은 완성된 줄 알았는데... 다른 팀원분의 PR 확인을 기다리다가 한참 뒤에야 로직에 문제가 있는 것을 알았다. 문제점은 인증코드 발급을 눌렀을 때 아래 렌더링 되어야하는 화면이 렌더링 되지 않는 것..!! 조건문에서 문제가 발생한 것으로 사료되어 해당 코드로 이동해보았다. 문제의 코드 const handleSend = () => { if (!isEmailError) setIsSend({ ...isSend, send: true }); } 문제가 된 코드는 바로 이부분이다. 분명 로직상으로는 EmailError에 오류가 존재하지 않는다면 send를 true로 변경해달라는 것이었는데 (send를 기준으로 화면의 렌더링이 변하기 때문) 렌더링도 일어나지 않을..

🐳 Conditional Rendering 메인 프로젝트 보강 지난 2월 공식적으로 코드스테이츠의 메인 프로젝트가 종료된 후, 팀원들끼리 추가할 기능을 더 추가하자고 회의하였는데 그 중 내가 맡은 화면은 이메일 인증 화면.... 화면 정의서를 보고 생각한 것은, 조건부 렌더링을 이용해야겠다는 것이었다. 인증코드 발급 버튼을 누른 전 후로 이메일 입력 창에 값을 넣을 수 없게 비활성화 되면서 버튼 아래에 인증코드 입력 창이 뜨기 때문이다. 컴포넌트 나누기 우선적으로 해야할 일은 컴포넌트를 나누는 것이다. Styled-Components를 이용하여 이메일 입력 컴포넌트(EmailInput)와 인증번호 입력 컴포넌트(VerifyInput)로 나누었다. const EmailInput = styled.div``;..

🫒 Next.js Next.js란? Next.js는 웹 애플리케이션을 만들 때 사용하는 React.js 프레임워크이다. React.js로 UI를 만들면서, CSR과 SSR/SSG, 라우팅, 데이터 페칭 등을 한꺼번에 할 수 있게 해주는 종합선물세트 같은 역할을 한다. React.js만으로도 third party library를 함께 사용해 웹 애플리케이션을 만들 수 있는데, 그럼 왜 Next.js를 사용하는 걸까? 🧐 이 때 빠지지 않는 이야기가 바로 CSR vs SSR에 대한 이야기인 것 같다... CSR vs SSR 그리고... 간단히 말하자면 React.js는 CSR을 지원하는데 Next.js는 SSR도 지원한다.. React.js로도 SSR 구현이 가능하지만 추가 라이브러리와 여러 설정이 필요하기..