Dug_House

어떤 것이 궁금한지 도메인 (IP 주소에 매핑되는 텍스트 문자열) 대신에 IP 주소에 직접 SSL 인증서를 적용하여 배포할 수 있는가. 왜 궁금한지 많은 사이트들이 회사 브랜드명으로 도메인을 갖고 있는데 사내 메일로 IP로 배포되고 HTTPS인 웹사이트를 보았고 도메인이 아닌데 HTTPS 적용이 되어 있는 게 궁금하였다. 기존에 IP 도메인으로만 배포하는 경우를 보지 못해서 권장되지 않는구나라고 판단을 했는데, HTTPS://123.123.123.123 같은 도메인을 보니 HTTPS가 어쨌든 보안을 위한 것인데 왜 IP가 아닌 도메인만 가능할 거라고 생각했을까라는 의문이 들었다. SSL 인증서 사는 게 힘든 건가? Yes, 불가능한 게 아니라 발급해주는 곳을 찾기 힘들다는 것! ..

어떤 것이 궁금한지 Server Side Rendering(SSR) 페이지에서도 lazy loading이 필요할까? 왜 궁금한지 SSR은 서버에서 HTML을 생성하여 클라이언트로 보내기 때문에 초기 렌더링 속도가 빠를 것 같은데, lazy loading으로 한 번 더 최적화할 필요가 있는지 의문이 생김. lazy loading이란? 최초에 모든 모듈을 가져오지 않고, 필요한 경우에만 클라이언트(브라우저)에서 모듈을 로드하여 네트워크 트래픽을 줄이고 초기 렌더링 속도를 향상시키는 기술. 필요한 상황 페이지 크기 최적화: 서버에서 클라이언트로 전송하는 HTML의 크기를 줄이고, 필요한 리소스만 브라우저에서 로드하여 초기 렌더링 속도를 더욱 향상. ..

어떤 것이 궁금한지모든 컴포넌트를 lazy loading한다면 어떤 결과가 나올까?왜 궁금한지 React로 개발 시 어차피 클라이언트에서 렌더링이 이루어져 SEO가 중요하지 않다면, 초기 로딩 속도를 더 빠르게 하기 위해 모든 컴포넌트를 lazy loading해도 괜찮지 않을까 궁금하다. lazy loading이란? 필요한 모듈만 동적으로 로드하여 초기 로딩 속도를 개선하고 네트워크 트래픽을 줄이며, 사용자 경험을 향상시키는 방법입니다. 초기 렌더링 시 모든 모듈을 가져오지 않고, 실제로 필요한 순간에만 로드합니다.장점 초기 로딩 시간 감소: 초기 로딩 시 필요한 최소한의 리소스만 로드하여 초기 렌더링 속도를 개선. 네트워크 효율성: 사용자가 필요한 컴포넌트만 로드하므로 네트워크 ..

어떤 것이 궁금한지 Next.js에서 미들웨어를 사용하여 서버 측에서 페이지 접근을 막는 것이 좋을지, 클라이언트 컴포넌트를 사용하여 클라이언트 측에서 페이지 접근을 막는 것이 좋을지 고민된다. 왜 궁금한지 (상황) 서버와 클라이언트 모두 구현 가능하지만, 최선의 방법을 선택하기 위해 각 접근 방식의 장단점을 비교하고 싶다. 미들웨어 사용 장점 보안 강화: 서버에서 직접 관리하므로 클라이언트가 우회하기 어렵다. 중앙 집중 관리: 모든 접근 제어 로직을 한곳에서 관리할 수 있어 유지보수와 일관성이 용이하다. 단점 복잡성 증가: 미들웨어 설정 및 관리가 까다로울 수 있다. 서버 부하: 모든 요청에 대해 미들웨어가 실행되어 서버..

프론트엔드 면접에서 웹 접근성을 얼마나 준수하며 개발을 하냐는 질문을 들었습니다.웹 접근성에 대하여 얼마나 아시죠?다음과 같은 답변을 하였습니다.기본적으로 시맨틱 마크업을 통해서 스크린 리더기가 식별할 수 있도록 하고, 스크린 리더기가 인식하지 못하거나 어쩔 수 없이 를 사용해야 하는 경우에는 role, aria 속성을 사용하여 정확하게 명시합니다.대체 텍스트 제공: alt키보드만으로도 사용할 수 있어야 합니다., , 등은 tab으로 접근이 가능합니다.의미 없는 디자인용 이미지의 경우, alt를 빈칸으로 남겨둡니다. (스크린 리더기가 alt를 읽어주기 때문입니다.)js로 router를 통해 페이지 이동을 구현할 수 있지만, 태그를 사용하여 검색엔진에서 사이트맵 작성 시 태그 기반 트리를 만들 수 있..

문제 상황 Warning: Prop `style` did not match. Server: "null" Client: "min-width:;height:" 원인 Next.js는 SSR을 하기에 서버에서 생성된 컴포넌트와 CSR로 클라이언트에서 생성된 컴포넌트의 클래스명이 서로 달라지게 된다. 게다가 Fullcalendar라이브러리는 SSR을 지원하지 않는다. 해결법 그렇기에 클라이언트에서만 렌더링을 해야한다. Next.js에서 제공하는 dynamic import를 사용한다. export const CalendarPage = () => { const Calendars = dynamic(() => import('./components/Calendar'), { ssr: false, }); return ( );..

사진을 업로드하는데 계속 버그가 뜬다...! 여기서 키워드는 No 'Access-Control-Allow-Origin' header is present on the requested resource. 즉, CORS 차단되었다는 것이다 그래서 S3 콘솔로가서 CORS를 변경해주었다. [ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "HEAD", "GET", "PUT", "POST", "DELETE" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [ "ETag", "x-amz-meta-custom-header" ] } 그러고 다시 사진을 업로드 해보니 아직 안됨... 그래서 s3 400을 구글링 해보았다. https://velo..

고려해야할 점1. Next는 SSR이라서 클라이언트에서만 ToastUi-Editor를 dynamic import를 해와야함 2. Next에서의 환경변수는 .env.local파일안에서 클라이언트에서만 사용할 것은 밑에 처럼 NEXT_PUBLIC_ 키워드가 앞     에 붙어야한다3. dynamic import를 사용했기에 ref를 제대로 가져오지 못한다 그래서 React.fowardRef()를 사용해서 ref를 가져와야함  dynamic import  React.fowardRef()참고자료https://myeongjae.kim/blog/2020/04/05/tui-editor-with-nextjshttps://velog.io/@broccoliindb/Next.js-Editor-SSR-REF-이슈https:/..