Chaeyeon0 / GreenDay_Study

여은개의 공부 일지
0 stars 0 forks source link

[20240517] 프론트엔드 회의, 페이지 전환 수정, 그린데이 일기 코드 수정 #4

Closed khw010419 closed 1 month ago

khw010419 commented 1 month ago

🤷‍♀️ 프론트엔드 회의

리액트를 제대로 공부하면서 중간발표 전 급하게 작성한 코드에서 문제점을 발견할 수 있었음 중간발표 때 오류가 떴었던 페이지 전환문제와 모달이 충돌되는 부분에 대해서 배울 수 있었음

그리하여 월요일~수요일 동안 페이지 전환부분, 모달충돌을 해결하던 중 또 다른 문제를 발견함

중간발표때까지 쓴 코드는 html 기반의 문법이라 리액트 구조에서는 돌아가지 않는다는 것을 발견 (중간발표까지 작성한 코드는 결과만 있을 뿐 과정은 거의 다 틀렸다는 소리)

월~수동안 페이지 전환부분, 모달충돌을 해결하려고 노력했는데 이는 중간발표까지 작성한 코드를 싹 엎어야 돌아감...!!

그리하여 목요일에 급하게 아란이와 회의를 해야겠다고 논의했고 금요일인 오늘 회의를 하며 틀린 코드에 대해서 얘기했고, 언제까지 어떤 코드를 수정할지 얘기함(사실 전체 다 고쳐야함ㅎ)

🤷‍♀️ 페이지전환

그동안 내가 작성한 페이지 전환 문법은 html 기반의 문법이였음 그래서 html 처럼 필요한 페이지의 파일을 각각 만들었음 근데 이 문법에 리액트식의 리스트 문법을 적용하니 페이지 전환이 불가능 했던 것임

--우리가 현재까지 쓴 코드-- image

--수정할 부분--

  1. 페이지마다 파일을 하나씩 만드는 것이 아니라 라우터의 element안에 해당 파일에 쓰여야하는 내용을 써야함
  2. 모달과 같이 특이한 문법이 쓰이는 경우에는 페이지를 따로 작성할 수 있는데 이는 import와 export를 이용하여 (예시)modal.js파일에는 export로 내용을 보내주고 라우터가 쓰이는 메인페이지에는 import로 받아와야함
  3. 또한 페이지 이동은 useNavigate()라는 리액트 문법을 사용해야함

🤷‍♀️ 일기모달

일기모달문법은 다행스럽게도 리액트로 작성했음 그러나 쓰이는 장소가 애매함

나는 메인.js(app.js)에 다 갖다박았는데 신기하게 열리긴함 그런데 이게 정석은 아님!

현재의 방식을 고수할 수 있으나 혹시 다른문법과 충돌할까봐 더 알아보고 수정할 예정임!

pu2rile commented 1 month ago

좋아요~ 계속 발전해나가는 모습 아주 좋습니다 아자아자 최종발표 부셔보자~

Chaeyeon0 commented 1 month ago

우아아 수고 많았습니다아 !! 그린데이 프론트 진짜 짱 ><

janghw0126 commented 1 month ago

수고많았써요 프론트 진짜 쉽지 않을텐데 고생이 많습니당 🥺🥺 같이 아자아자잣 해보아요 !

aranlll commented 1 month ago

수고햇어용 ❤️ 같이 열심히 해보쟈고용 !!!!