전체 글

• Next.js SEO(검색엔진최적화) 전략, 필요한 이유

  프론트엔드 개발 2023. 11. 1. 01:16

  SEO 란? SEO (Search Engine Optimization) 검색 엔진 최적화 SEO란 사람들이 사이트에서 무언가 검색했을 때, 그 검색 결과를 상위에 노출되도록 만드는 작업입니다. 검색 결과를 확인할 때 대부분의 사람들은 1페이지 내의 결과를 클릭합니다. 검색 엔진 결과 페이지, 즉 SERP에서 높을 순위를 만드는 작업을 해야 상단 노출이 될 가능성이 높아집니다. 상단 노출이 돼야 유저 트래픽이 높아지기 때문에 SEO는 개발에 있어서 매우 중요한 작업입니다. 물론 광고를 통해 상단에 내 페이지를 띄울 수도 있습니다. 하지만, 광고라는 인식으로 신뢰도와 클릭수가 떨어집니다. 따라서 검색엔진최적화 작업으로 검색 순위를 높여 자연스럽게 트래픽을 유도하는 것이 필요합니다. 이러한 작업을 위해선 구글..

  Read More
• 웹소켓(Websocket) 개념과 동작원리에 대해

  프론트엔드 개발 2023. 10. 28. 19:03

  화면을 구현할 때 일부 데이터를 자동 업데이트 해줘야 되는 경우가 많습니다. 이때, 서버로부터 데이터를 가져오기 위해 HTTP통신을 사용하게 됩니다. 클라이언트에서 XMLHttpRequest 객체를 이용해 서버에 요청을 전달하면 서버가 응답하는 방식입니다. 새로운 HTML을 받아오는 것이 아닌 페이지 일부만 수정할 수 있지만 결국엔 HTTP를 이용함으로 일정 주기로 요청을 보내고 응답을 받는 행위가 필요합니다. 클라이언트가 요청을 보내야만 서버가 응답받을 수 있는 단방향 통신의 번거로움을 해결하기 위해 양방향 통신이 가능한 웹소켓이 등장했습니다. 웹소켓(Websocket)의 개념 웹소켓은 실시간으로 양방향 통신을 지원하는 프로토콜입니다. HTTP 프로토콜과는 달리 웹소켓은 서버와 클라이언트 간 지속적인 ..

  Read More
• Javascript 클로저(Closures) 개념 이해하기

  프론트엔드 개발 2023. 10. 27. 00:52

  자바스크립트를 하는 사람이라면 한 번쯤 들어보고, 또 쓰고 있는 것이 '클로저'입니다. 저뿐 아니라 많은 개발자들이 이미 작성하는 코드의 많은 부분에서 사용하고 있을 것입니다. 하지만 기술 면접 같은 데서 각 잡고 설명하려니 말문이 턱 막혔던 경험이 있어 확실히 개념을 못 박아두고 넘어가려고 합니다. 클로저(Closure)란? 클로저에 대해 찾아보면! 함수가 선언될 때 주변의 환경과 함께 갇히는 것, 함수가 속한 렉시컬 스코프를 기억하고 렉시컬 스코프 밖에서 실행될 때도 이 스코프에 접근할 수 있는... 으.. 심플하게 설명하면 함수 A가 자신의 내부가 아닌 외부에서 선언된 변수에 접근하는 것을 뜻합니다. 개발할 때 너무 자연스럽게 하던 외부에 선언된 변수에 접근! 이 개념이 바로 클로저입니다. 간단한 ..

  Read More
• react-hook-form 총정리 & 효율적인 Form관리

  프론트엔드 개발 2023. 10. 26. 01:32

  react-hook-form 기존 문제점 간단한 폼 하나 만들 때 들어가는 수많은 useState들! input 하나에, value값 이벤트 상태 등 관리 포인트들이 너무나 많다. 사용 시 개선점 react-hook-form은 value를 관리하기 위한 별도의 상태값이 필요없고! 쉽고 직관적인 API를 제공하여 복잡한 폼 로직을 단순화 합니다. react-hook-form에서 제공되는 hook함수들을 사용하여 관리할 수 있어 꽤나 편리하고 효율적인 코드를 만들 수 있다. 그럼 어떻게 사용해야 하는지 알아보자. Get Started npm install react-hook-form 혹은 공홈 참조 https://react-hook-form.com/get-started Get Started Performan..

  Read More