이론/Frontend73 Next.js로 metadata 구성하기 얼마 전 작은 규모의 신규 프로젝트에 프론트엔드로 참여할 기회가 생겼습니다. 프로젝트 특성상 외부에 노출되는 빈도 수가 매출에 큰 영향을 끼치기때문에 SEO(Search Engine Optimization, 검색 엔진 최적화)가 굉장히 중요한 요소가 되었습니다. 그 중에서도 페이지가 갖고 있는 메타데이터(Metadata)는 SEO에 있어 가장 중요한, 빼놓을 수 없는 요소입니다. 그러나 우리가 주로 사용하던 React.js의 일반적인 CSR 방식으로는 이러한 수요를 만족하는데 한계가 있었습니다. 그러한 이유로 SEO에 유리한 Next.js를 선택하게 되었는데, 오늘 포스팅에서는 Metadata에 대해 알아보고 이를 통하여 어떻게 SEO를 향상시킬 수 있는지 알아보겠습니다. SEO SEO 수준을 결정하는 .. 2023. 9. 24. 리액트에서 DOM Node를 찾는 방법 들어가며 오늘은 React에서 DOM Node를 선택하는 방법에 대해 짧게 적어보려합니다. 함수 컴포넌트가 주류가 된지 꽤 오랜 시간이 지난 지금이야 당연하게도 useRef를 사용하지만, 과거 클래스 컴포넌트가 주로 사용되었을때는 이러한 훅 대신, react-dom에 포함된 findDOMNode라는 메서드를 사용하여 브라우저의 DOM Node를 선택하였습니다. 이번 포스팅에서는 해당 메서드가 어떻게 사용되었는지, 이 방식이 어떤 문제점을 가지고 있었으며 현재의 모습으로 바뀌면서 어떻게 문제를 해결했는지에 대해 알아봅니다. findDOMNode findDOMNode는 리액트에서 노드를 찾는 가장 원시적인 방법으로, 클래스 컴포넌트의 생명 주기 메서드 내에서 사용합니다. 찾고싶은 DOM Node를 findD.. 2023. 8. 5. 자바스크립트에서 값 비교하기 들어가며 자바스크립트에서 값을 비교하는 방법으로는 크게 세 가지가 있습니다. == 를 사용하는 느슨한 비교 (loose equality) === 를 사용하는 엄격한 비교 (strict equality) Object.is() 를 사용하는 비교 느슨한 비교는 타입이 다르더라도, 변환했을때 값이 같으면 true를 반환하는 비교입니다. 때문에 비교 대상끼리 암시적 형변환이 일어나는 비교라고 볼 수 있습니다. 엄격한 비교는 값이 동일하더라도 타입이 다르면 false를 반환하는 비교입니다. 비교 로직 중 어떠한 형변환도 일어나지 않습니다. Object.is()를 사용하는 비교는 일단 두 값이 같은지만을 검사하는 비교입니다. 엄격한 비교와 마찬가지로 형변환이 일어나지 않습니다. /* 1. 느슨한 비교 */ '36' .. 2023. 4. 23. 검색창 영역을 위한 시멘틱 태그 <search> 지난 2023년 3월 24일부로, HTML standard에 새로운 시멘틱 태그가 추가되었습니다. 오늘 소개할 가 바로 그 주인공입니다. 등장 시멘틱 태그는 지난 포스트들에서도 몇 번 등장했었던, 접근성을 고려한 웹을 만들때 빠지지 않고 등장하는 개념입니다. 스크린 리더와 같은 장비가 웹 페이지를 쉽게 탐색할 수 있도록 시멘틱 태그를 이용해 영역 별로 역할을 나누어 준 것을 랜드마크(landmarks) 라고 하는데, 예시로는 main, header, aside, nav ... 등이 있습니다. 우리가 흔히 사용하는 웹 페이지는 이러한 랜드마크의 역할(role)을 통해 대부분의 영역을 설명할 수 있습니다. 랜드마크로는 아래의 8가지 역할이 지정될 수 있습니다. banner complementary conte.. 2023. 4. 15. JavaScript의 모듈 시스템에 대하여 오늘은 자바스크립트의 모듈 시스템에 대해 알아보겠습니다. 자바스크립트에서 어떻게 모듈 시스템이 생기고, 지금의 모습으로 발전해왔는지에 대한 내용을 배경 설명과 함께 작성해보도록 하겠습니다. 최초의 자바스크립트 최초의 자바스크립트에는 모듈 시스템이 없었습니다. 지난 글이었던 웹 표준에 대한 고찰에서 이야기 했던 내용처럼, 원래 HTML은 단순히 HyperText라고 부르는 정보를 전달하기 위한 문서였습니다. 자바스크립트는 이 HTML에 붙어 약간의 상호작용을 더해주는 한정된 역할만을 갖고 있었습니다. 다시 말하면, 그 당시의 자바스크립트 코드는 모듈 시스템을 구성할 필요가 없는 규모의 프로젝트였다는 의미입니다. 하지만 시간이 흘러 자바스크립트는 점점 더 많은 일을 할 수 있게 되었습니다. 단순한 정보 전달.. 2023. 3. 4. Yarn PnP가 Typescript를 인식하지 못할때 Cannot find module 'react' or its corresponding type declarations. Yarn berry 버전, 그 중에서도 PnP를 사용해 본 적이 있다면 한 번 쯤은 VSCode가 Typescript를 인식하지 못하는 오류를 겪어본 경험이 있으실겁니다. 보통 프로젝트를 처음 시작할때 가장 많이 발생하고, 이미 진행중인 프로젝트의 구조를 변경하다가 발생하기도 하는 오류입니다. Yarn의 공식 문서에서도 이 문제에 대한 해결 방안을 따로 섹션을 만들어 놓을 정도로 잘 알려진 오류이긴 하지만 막상 겪어보면 상당히 당황스럽습니다. 여기에서 안내하는 방법을 따르면 대부분의 문제는 해결됩니다. 저도 이 방법으로 매 번 효과를 보았었는데, 프로젝트 중간에 구조를 변경했던 이번 경.. 2023. 2. 25. 이전 1 2 3 4 5 6 ··· 13 다음
