inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

4.4 layout file

강의외 복잡한 ui 입력폼 관련 질문 있습니다

223

현석오

작성한 질문수 53

1

image.png

 

 

지금 여기까지 구현 했는데

image.png


이렇게 순서 바꾸기를 해야 되는데 잘안됩니다

혹시 원인이나 해결 방법 아시나요?

https://okky.kr/questions/1516211

그리고 이렇게 데이터가 복잡할 경우 프론트에서 데이터 가공해서 디비로 보내는게 어쩔수 없다고 보시나요 아니면 조금 과잉이라고 보시나요? 그점도 궁금합니다

react 인터랙티브-웹 클론코딩 next.js tailwind-css zustand

답변 2

1

도도(코딩루팡)

코드 런타임 환경이 아니라서 사실 정확하게 답변드리기 어렵습니다. 몇단계에서 막히는지 알려주시면 추가 답변가능할수 있어요.

1.드래그 시작 이벤트가 작동하는가 ?

2.드래그 끝 이벤트가 작동 하는가?

3.드래그 끝으로 상태 데이터가 변경 되었는가?

4.데이터 변경에 따른 UI가 업데이트 되었는가?

-> 불변성 문제일 가능성이 큽니다. 데이터의 depth가 깊기 때문에 이를 위한 관리가 필요하죠.

-> 배열의 key 값이 고유하지 않아도 문제가 될 수 있어요.

 

 

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

현석오님, 질문해주신 내용과 관련하여 기존에 유사한 질문과 답변을 찾을 수 없어 상세히 답변드리겠습니다.

순서 바꾸기 문제 해결 방법

현재 UI에서 순서 바꾸기가 원활하지 않다는 문제에 대해 조언드리겠습니다. 복잡한 폼 데이터를 다루는 경우 가장 흔한 원인과 해결책은 다음과 같습니다:

  1. React DnD 라이브러리 사용:

    • React에서 드래그 앤 드롭을 구현하려면 React DnD와 같은 라이브러리를 사용하는 것이 좋습니다. 이 라이브러리는 높은 수준의 드래그 앤 드롭 기능을 제공합니다.
  2. 상태 관리:

    • 폼 데이터를 상태로 관리할 때, 중첩된 데이터 스트럭처가 있을 경우 불변성을 유지하는 것이 중요합니다. 이를 위해 immer 또는 immutability-helper와 같은 라이브러리를 사용하는 것이 좋습니다.

데이터 가공 및 DB 전송에 대한 의견

프론트엔드에서 복잡한 데이터를 가공하여 DB로 보내는 것이 과잉인지에 대해 궁금해하셨는데요, 이를 다음과 같이 답변드릴 수 있습니다:

  1. 데이터 형식:

    • 프론트엔드에서 데이터를 가공하여 서버로 보내는 경우가 일반적입니다. 특히 폼 데이터나 복잡한 사용자 입력을 다룰 때는 클라이언트에서 데이터를 유효성 검사 및 정리하는 것이 편리합니다.
  2. 서버-클라이언트 역할 분담:

    • 비즈니스 로직이나 데이터 가공 작업이 프론트엔드보다는 백엔드에서 처리되는 것이 좋을 수 있습니다. 서버에서 데이터 가공 및 저장을 담당하고, 클라이언트는 간단한 유효성 검사와 사용자 인터페이스를 담당하는 것이 권장됩니다.

더 구체적인 문제가 있으시면 관련 코드와 더 많은 정보 제공 부탁드립니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

4.6강 초기 로딩 속도 케이스 비교

0

86

2

Sidebar & Header 컴포넌트 등 레이아웃 설정 방식

0

92

3

문의드립니다.

0

151

3

Vercel signup이 안되요,, 계속 제 깃허브 계정은 추가 인증이 필요하다며 registration@vercel.com에 문의를 하라고 하네요,,, 이럴땐 진행을 어찌해야할까요,,,

1

106

2

에러, 로딩 내용 페이지를 모든 페이지에 다 만드는 이유가 따로 있나요?

2

159

3

3.2, 3.3 화면에 아무것도 나오지 않고 있습니다!

0

213

3

코드가 왜 그런지 모르겠는데, 이럴땐 어떻게 공부해야하나요?

1

223

3

npx랑 yarn이랑 같이 써도 되나요?

0

440

2

article / section 태그에 관해

0

180

1

카테고리 변경 시 이미지 로딩

1

192

2

next zustand 사용 시 문의

0

476

2

component 파일에서는 tsx파일이 아니라 jsx 파일을 쓰는 이유를 알 수 있을까요?

1

178

2

versel 을 통한 배포를 하는 것과 (홈서버 + 클라우드 플래어 프록시)를 하는 것을 비교해주실 수 있나요?

1

181

1

선생님 죄송한대

1

153

1

깃 push가 안되서 ssh를 한참해메고 있습니다. ㅠㅠ

1

145

1

Chapter 7 영상 화면이 안보입니다.

0

276

2

오류발생 문제입니다.

1

233

1

질문있습니다.

1

182

1

11.5 Channel 노래,앨범 section 강의중

0

159

1

소스 수정 후 자동 컴파일 문의드립니다.

1

285

2

정적배포

0

200

1

zustand 상태관리

0

337

1

state에서 buffer랑 time이 안 나옵니다

0

205

2

components 들은 jsx 로 만드신 이유

0

315

3