이번엔 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 사용해서 가장 하위의 컴포넌트까지 전달해주는 형식을 띄고 있는 것..
🔥 서버 사이드 렌더링이란? (SRS: Server Side Rendering)서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미합니다. SSR은 클라이언트에서 모든 것을 처리하지 않고, 웹 사이트에 접속하면 서버에서 필요한 데이터를 모두 가져와서 HTML 파일을 만들게 되고, 만들어진 HTML과 HTML 파일을 동적으로 조금 제어할 수 있는 소스코드와 함께 클라이언트에게 보낸다. 클라이언트는 잘 만들어진 HTML 문서를 사용자에게 바로 보여주게 된다. 장점페이지 로딩 속도가 빨라진다모든 콘텐츠가 HTML 에 표기되기 때문에 효율적인 검색엔진최적화(SEO) 가 가능하다.단점Blinking Issue : 새로고침을 하게 되면 전체 페이지를 다시 서버에서 받아와야 하기에 화..
시맨틱 마크업 (semantic Markup) semantic 는 의미의, 의미론적인, 이라는 뜻을 지니고 있습니다. 즉, 의미를 잘 전달 할 수 있도록 HTML 태그 문서를 작성하는 것을 말합니다. 시멘틱 마크업을 사용하는 이유 웹 접근성에 효율적 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있기 때문입니다. 코드 가독성에 따른 유지 보수의 용이 단순한 div, span으로 둘러싸인 요소들보다 코드를 볼 때 가독성이 좋습니다. 검색엔진 최적화(SEO) 에 유리 검색 엔진은 의미론적 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주하기 때문입니다. 검색 엔진에 최적화시킨다는 것은 곧 웹 표준에 맞춘다는 말과 같습니다. 시멘틱 마크업..
프레임워크(Framework)란?프레임워크는 복잡한 문제를 해결하거나 서술하는 데 사용되는 개본 개념 구조이다.-위키백과- 원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대를 의미합니다.애플리케이션 개발 시 필수적인 코드, 알고리즘, DB 연동과 같은 기능들을 위해 어느 정도 뼈대(구조)를 제공하며 이러한 뼈대 위에서 사용자는 코드를 작성하여 애플리케이션을 개발합니다. 앱/서버 등의 구동, 메모리 관리, 이벤트 루프 등의 공통된 부분은 프레임워크가 관리하며, 사용자는 프레임워크가 정해준 방식대로 클래서, 메서드들을 구현하면 됩니다. 예시Java 서버 개발에 사용되는 SpringPython 서버 개발에 사용되는 Django, Flask안드로이드 앱 개발에..
