이론110 Next.js로 metadata 구성하기 얼마 전 작은 규모의 신규 프로젝트에 프론트엔드로 참여할 기회가 생겼습니다. 프로젝트 특성상 외부에 노출되는 빈도 수가 매출에 큰 영향을 끼치기때문에 SEO(Search Engine Optimization, 검색 엔진 최적화)가 굉장히 중요한 요소가 되었습니다. 그 중에서도 페이지가 갖고 있는 메타데이터(Metadata)는 SEO에 있어 가장 중요한, 빼놓을 수 없는 요소입니다. 그러나 우리가 주로 사용하던 React.js의 일반적인 CSR 방식으로는 이러한 수요를 만족하는데 한계가 있었습니다. 그러한 이유로 SEO에 유리한 Next.js를 선택하게 되었는데, 오늘 포스팅에서는 Metadata에 대해 알아보고 이를 통하여 어떻게 SEO를 향상시킬 수 있는지 알아보겠습니다. SEO SEO 수준을 결정하는 .. 2023. 9. 24. 인터넷 프로토콜 HTTP와 HTTPS 오늘은 네트워크 기본 지식이자 면접 단골 질문 주제이기도 한 HTTP와 HTTPS에 대해 정리해보겠습니다. TCP/IP란? HTTP와 HTTPS에 대해 알기 위해서는, TCP/IP의 개념부터 알아야합니다. 컴퓨터가 네트워크 장비나 다른 컴퓨터와 통신하기 위해서는 반드시 서로 같은 방법을 사용하여 통신해야 합니다. 사람끼리의 의사소통에서도 서로 같은 언어를 사용해야 제대로 된 의미를 전달할 수 있겠죠? 사는 지역이 다르고, 성별이나 나이가 달라도, 심지어 국적이 다르더라도 같은 언어를 사용하는 사람들끼리는 소통이 가능합니다. 이는 컴퓨터도 마찬가지입니다. 지금 주위를 둘러보면 데스크톱이나 노트북, 스마트폰처럼 일반적으로 많이 사용하는 개인용 컴퓨터나, 스위치 장비나 게이트웨이 같은 네트워크 장비끼리들도 통.. 2023. 9. 3. 리액트에서 DOM Node를 찾는 방법 들어가며 오늘은 React에서 DOM Node를 선택하는 방법에 대해 짧게 적어보려합니다. 함수 컴포넌트가 주류가 된지 꽤 오랜 시간이 지난 지금이야 당연하게도 useRef를 사용하지만, 과거 클래스 컴포넌트가 주로 사용되었을때는 이러한 훅 대신, react-dom에 포함된 findDOMNode라는 메서드를 사용하여 브라우저의 DOM Node를 선택하였습니다. 이번 포스팅에서는 해당 메서드가 어떻게 사용되었는지, 이 방식이 어떤 문제점을 가지고 있었으며 현재의 모습으로 바뀌면서 어떻게 문제를 해결했는지에 대해 알아봅니다. findDOMNode findDOMNode는 리액트에서 노드를 찾는 가장 원시적인 방법으로, 클래스 컴포넌트의 생명 주기 메서드 내에서 사용합니다. 찾고싶은 DOM Node를 findD.. 2023. 8. 5. 순서가 있는 정렬 : 위상 정렬 (Topological sorting) 들어가며 오늘은 특정한 몇몇 요소끼리의 순서가 정해진 상황에서 사용할 수 있는 정렬 방법인 위상 정렬(Topological sorting)에 대하여 알아보겠습니다. 알고리즘 수학에서 위상(topology)이란 연속적인 힘에 의한 변형에도 유지되는 기하학적인 속성을 의미합니다. 이렇게만 말하면 와닿지 않으니 갓 나온 가래떡을 하나 떠올려봅시다. 길쭉한 원기둥 모양을 한 가래떡에 찢어지지 않을 정도로 적당한 힘을 가하면 원래 모양보다 늘어나거나 구부러집니다. 그러나 가래떡의 모양이 변했다고 해서 원래 가지고 있던 속성들이 모두 변하는 것은 아닙니다. 아래 그림을 한 번 보겠습니다. 예를 들어, 이렇게 가래떡을 구성하는 분자들끼리 연결된 상태들은 변하지 않죠. 여전히 서로를 꽉 붙잡고 있습니다. 이렇게 서로간.. 2023. 7. 9. 암호 키 (Encryption Key) 지금까지 올라온 각종 네트워크 이론 포스트들을 보면 공통적으로 등장했던 단어가 있습니다. 바로 키입니다. 이번 글에서는 포스트마다 빠지지 않고 등장했던 중요한 개념인 키에 대해서 조금 더 자세히 알아보겠습니다. 키 (key) 우리가 흔히 키라고 부르는 암호 키(Encryption Key)는 암/복호화 과정에 함께 사용되는 일련의 값을 의미합니다. 대개 사람이 직접 연산하기 어려울 정도로 대단히 큰 수이며, 키의 길이가 길어지면 길어질수록 암호 알고리즘의 보안 강도(안전성이 유지되는 기간) 또한 높아지게 됩니다. 세상에 다양한 암호 알고리즘이 있듯, 키 또한 어떤 암호 알고리즘에 사용되는지에 따라 다양한 종류의 암호 키가 존재합니다. 우리가 이전에 SSH 통신을 하기 위해 PuTTYGen을 통해 만들었던 .. 2023. 6. 11. 공개 키 인증서 (Public key certificate) 지난 포스트에서는 디지털 서명을 이용해 부인방지를 적용하는 과정에 대해 알아보았습니다. 이번 포스트에서는 네트워크 통신상에서 디지털 서명을 포함하고 있는, 인증서에 대해서 간단하게 알아보겠습니다. 인증서란? 인증서는 디지털 서명보다 비교적 친숙하게 들리는 용어입니다. 실제로 일상생활에서 마주치게 될 확률이 높기 때문인데, 예시로 사용자가 웹을 탐색할때 종종 아래와 같은 오류 페이지를 만나게 될 때가 있습니다. 이때 주소창 부분의 "주의 요함" 을 클릭해서 확인해보면, 이런 팝업이 표시됩니다. 두 번째 리스트의 '인증서가 올바르지 않음' 이라는 문구가 보이시나요? 우리가 오늘 알아 볼 인증서가 바로 이것입니다. 웹 서핑을 할때 암호화 프로토콜인 HTTPS 를 이용하면, 우리는 실시간으로 이 인증서를 사용하.. 2023. 5. 28. 이전 1 2 3 4 5 6 ··· 19 다음
