이번엔 AudioRef 에 대한 리펙터링을 진행할 것이다. 컴포넌트의 간단한 구조는> WritePad > Letter > ImageUpload > > > Recode > 이미지 첨부 Button가장 상위의 컴포넌트에 선언되는 form 의 default value 에 audio Ref 값을 추가해준다. 그리고 나서 복잡하게 컴포넌트의 props 로 전달하고 있던 부분을 모두 제거한다.그 안에 있는 Letter 컴포넌트에서도 제거 react-hook-form 은 혁신 인 것 같다.. 이게 진리고 이게 답이다.. 코드가 점점 더 깔끔해지고 있고, 컴포넌트 사이에 props 없이 값..
컴포넌트의 간단한 구조는 > WritePad > Letter > ImageUpload > > > Recode > 이미지 첨부 Button 즉, 이미지를 보여줘야하는 곳과 이미지를 첨부해야 하는 곳의 위치가 다르기 때문에, 늘 그렇듯 Ref 를 사용했다. Ref 를 필요한 각 컴포넌트의 Props 로 보내주듯이 구현을 했다.즉, react-hook-form 을 사용하고 있으면서 장점을 전혀 활용하고 있지 못했던 것이다. 이렇게구현하면, 코드에 inputRef 가 남발한다. 이렇게 가장 상위의 컴포넌트에서 props 사용해서 가장 하위의 컴포넌트까지 전달해주는 형식을 띄고 있는 것..
no such file or directory, open 'E:\projects\myCore\myCore\.next\BUILD_ID 오류 해결 next project 를 start 했을 때 npm run start 예를 들어 이런 식으로 오류가 난다. (다른 곳에서 캡쳐) 1. update node and next latest version. 2. npm uninstall next 3. npm install next 4. npm run build 5. npm run start 이렇게 버전 업데이트 하고, 다시 next 설치 후 빌드 해주면 해결된다! 참고 : https://github.com/vercel/next.js/discussions/57066
🔥 서버 사이드 렌더링이란? (SRS: Server Side Rendering) 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미합니다. SSR은 클라이언트에서 모든 것을 처리하지 않고, 웹 사이트에 접속하면 서버에서 필요한 데이터를 모두 가져와서 HTML 파일을 만들게 되고, 만들어진 HTML과 HTML 파일을 동적으로 조금 제어할 수 있는 소스코드와 함께 클라이언트에게 보낸다. 클라이언트는 잘 만들어진 HTML 문서를 사용자에게 바로 보여주게 된다. 장점 페이지 로딩 속도가 빨라진다 모든 콘텐츠가 HTML 에 표기되기 때문에 효율적인 검색엔진최적화(SEO) 가 가능하다. 단점 Blinking Issue : 새로고침을 하게 되면 전체 페이지를 다시 서버에서 받아와야 하..
