🐻 Header
1. 컴퓨터/태블릿 뷰
semi-final때도 헤더부분을 내가 작업했기에, 이 부분은 쉽게 진행할 수 있었다.
NO PROBLEM 😏
- 로그인 상태
- 로그아웃 상태
2. 모바일 뷰
문제는 모바일 뷰였다...😭
2-1. isToggled 상태값으로 아이콘 변경
const [isToggled, setIsToggled] = useState(false);
<MobileNav onClick={() => setIsToggled(!isToggled)}>
{isToggled ? (
<AiOutlineClose size="20" />
) : (
<AiOutlineMenu size="20" />
)}
</MobileNav>2-2. 아이콘을 눌렀을때 isLoggedIn 상태에 따라 nav 내용 출력
- 이 부분에서, nav 내용이 출력될 때, 홈페이지 내용 부분이 nav 크기 만큼 아래로 내려가는 상황 발생
=> 홈페이지 내용이 그대로 있고, 그 위에 nav 내용이 출력이 되도록 하고 싶어 머리를 쥐어쌈 😱 - 어찌저찌 기능 구현은 되었지만, 덕지덕지 코드는 나중에 리팩토링 하는 걸로....
🐻 Footer
- Wireframe을 잘 만들어 놓은 덕에(후훗..😎), 디자인 구상한 그대로 코드를 구현했다
- icon은 react-icons 이용!
🐻 Loader
- codesandbox와 google에서 열심히 서칭한 결과물
- circle 색만 우리 프로젝트에 맡게끔 변경했음 😊
🐻 Error Handling
서버측 관련 문제였다.
긴급 미팅으로 일단 문제가 무엇인지 파악을 한 후, 각자 해결방법을 찾아보기로 하였다.
아래와 같은 코드가 위에 사진에 적힌 에러 메세지를 보였다.
const { giver } = require('./models');
app.get('/', async (req, res) => {
const giver = await giver.findAll();
console.log(giver);
});migration에 문제가 없었고,
db에 seed가 모두 다 잘 저장되어 있었기에,
혹시나 싶은 마음에 아래내용처럼 시도해보았다.
const { giver } = require('./models');
app.get('/', async (req, res) => {
const giverList = await giver.findAll();
console.log(giverList);
});모델 정보를 불러와 그 정보를 담는 변수명을 바꾸어주니, 해당 오류가 해결되었다!!
모델명과 변수명이 같으면 오류가 발생하는 것 같은데,
이 부분에 대해 관련된 정보를 구글에서 찾아보려 했으나 찾기가 쉽지 않았따 ㅠㅠ
내가 이해한 바로는,
- 딱히 정해진 룰은 없으나, 모델명의 첫글자는 대부분의 경우 대문자로 진행
- 그 모델을 불러와서 사용할 시에는, 아래와 같이 사용
const user = await User.findAll()