Project8 [Knoticle] 문제해결과정 : Next SSR axios DNS 문제 문제 해결 과정 발생한 문제 서재페이지, 뷰어페이지를 Next getServerSideProps를 사용해서 SSR 적용 후 axios ECNNREFUSED 에러 발생 원인 분석 이전 develop에서 변경된 사항은 SEO에 관련한 타이틀,메타태그 추가와 SSR적용이었다. SSR이 적용되지 않은 메인,검색,에디터 페이지는 정상작동, SSR을 적용한 서재,뷰어 페이지만 에러가 발생했다. 하지만, 팀원 4명 중 나한테만 이러한 현상이 나타났다. SSR이 적용되지 않은 브랜치에서는 에러가 발생하고 있지 않았다. 이러한 상황을 종합해서 문제를 해결하기 위해서 여러가지 시도를 해봤다. 문제 해결 시도 서버 확인 보통 axios ECNNREFUSED 에러는 통신하려는 서버가 꺼져있을때 많이 발생하는 에러로 확인했다... 2022. 12. 16. [Knoticle] HTTP에서 HTTPS로 배포하기 SSL이란? SSL(SecureSocketsLayer)은 통신 암호화입니다. SSL을 이용하지 않는 경우, 통신 정보가 열람될 가능성이 있다. SSL을 사용하면 데이터 통신을 암호화 하기 때문에, 데이터를 도청 당해도 해독할 수 없다. 암호화에는 ‘공통키 암호 방식’과 ‘공개키 암호 방식’ 두 가지가 있다. SSL은 이 2개의 암호 방식을 조합하는 것으로 안전하고 빠른 통신을 실현한다. '공통키 암호 방식'은 브라우저(클라이언트)와 서버가 각각 공통키를 갖고 암호화 된 통신을 하는 것인데, 공통키를 서로 갖기 위한 통신은 암호화되어 있지 않다. 하지만 심플한 만큼 처리속도가 빠른 것이 특징이다. '공개키 암호 방식'은 공개키와 개인키가 세트이며, 공개키로 암호화 한 경우에는 개인키로 복호화해야 한다. 반.. 2022. 12. 16. [Knoticle] 좋은 UX를 위한 기능&도전 3 (markdown toc) TOC Knoticle 서비스는 여러 글을 모아 책으로 엮어주는 서비스이다. 이러한 서비스에서 책과 글의 TOC를 구현해 사용자가 글을 볼때 원하는 곳으로 이동하기 편하도록 개선했다. TOC를 구현하는 방법은 문자열 전환과 Link 태그의 href를 통해 구현했다. 1. 목차 title, padding값 전환 목차에 글의 h1,h2,h3 태그의 title을 표현하기 위해 하기와 같이 구현했다. DB에 저장하고 있는 article.content값을 articleToc함수로 전달한다. TOC에 표현하기 위해 h1,h2,h3 태그의 값만 분류하고 title과 count로 데이터를 전환한다. styled-component값의 props로 count값을 내려서 들여쓰기 구분한다. export const artic.. 2022. 12. 16. [Knoticle] 좋은 UX를 위한 기능&도전 2 (드래그앤드롭) Knoticle 서비스에서 책에서 글의 위치를 결정하는 기능은 매우 중요한 기능이다. 책과 글을 기반으로 만들어진 프로젝트에서 글의 위치를 결정하는 기능은 사용자의 좋은 경험에 중요한 지표가 될 것이다. 초기 기획단계에서 여러가지 방법을 논의했었다. 버튼으로 위치를 변경시키는 방법 마지막 위치로 고정시키고, 추후 책 수정에서 변경시키는 방법 드래그앤드롭 최종적으로는 드래그앤드롭으로 결정되고, 구현을 시작했다. 구현 방법의 고민 드래그앤드롭을 구현하기 위해 직접 구현하는 방법, 라이브러리를 사용하는 방법 중 고민을 시작했다. 가장 해보고 싶은 방법은 직접 구현하는 것이지만, 팀프로젝트를 완결성있게 완성시키는 것이 가장 중요했기 때문에 라이브러리를 사용해서 구현하기로 결정했다. 선정에 고민했던 라이브러리는 .. 2022. 12. 16. 이전 1 2 다음
