전체 글
-
[Docker] elasticsearch + kibana 세팅프로젝트 세팅 2023. 8. 28. 16:53
Elasticsearch 설치 이미지 pull 먼저 docker pull 명렁어로 Docker hub에서 Elasticsearch 이미지를 다운받습니다. docker pull docker.elastic.co/elasticsearch/elasticsearch:7.9.1 컨테이너 실행 docker run 명령어로 Elasticsearch 컨테이너를 실행합니다.Elasticsearch가 클라이언트가 통신하기위한 기본 포트는 9200이며 이미 사용중일 경우 9200~9299 사이의 값을 차례대로 사용합니다. 또한 노드간의 통신에서 사용되는 기본 포트는 9300이며 이미 사용중일 경우 9300~9399 사이의 값을 차례대로 사용합니다. docker run -d -p 9200:9200 -p 9300:9300 -e ..
-
[Next js] SEO에 대하여카테고리 없음 2023. 8. 7. 13:32
SEO는 웹사이트가 검색 결과에서 더 높은 순위를 차지할 수 있도록 최적화하는 작업이며, 이를 통해 브랜드 신뢰도를 높이고 더 많은 방문자를 유지할 수 있습니다. 검색 시스템의 네 가지 주요 역할은 다음과 같습니다: 크롤링: 웹을 통해 모든 웹사이트의 콘텐츠를 파싱하는 과정입니다. 현재 3억 5천만 개 이상의 도메인이 있으므로 이는 막대한 작업입니다. 인덱싱: 크롤링 단계에서 수집된 모든 데이터를 저장할 위치를 찾는 것입니다. 이렇게 하면 데이터를 쉽게 접근할 수 있습니다. 렌더링: 페이지에 있는 JavaScript와 같은 리소스를 실행하여 사이트의 기능을 향상시키고 콘텐츠를 풍부하게 만드는 과정입니다. 검색 엔진에서의 렌더링은 크롤러가 웹 페이지의 콘텐츠를 이해하고 인덱싱하는 데 필요한 단계입니다. 웹..
-
[Next js] robots.txt 에 대하여next js 2023. 8. 7. 12:20
robots.txt는 파일은 웹사이트를 방문하는 컴퓨터 프로그램들에게 어떤 페이지를 볼 수 있고, 볼 수 없는지 알려주는 지시서 같은 것입니다. 목적 : 일반 사용자들이 접근할 수 있는 웹사이트의 특정 부분(예: 관리자 페이지)을 숨기고 싶을 때 사용합니다. 장점 : 원하지 않는 부분이 검색결과에 나타나지 않게 할 수 있습니다. 사용법: robots.txt라는 파일을 웹사이트의 루트에 만듭니다. 이 파일에는 어떤 프로그램이 어떤 페이지를 볼 수 있는지, 볼 수 없는지를 적습니다. 예를 들면, /accounts라는 경로를 모두에게 보이지 않게 하고 싶다면: User-agent: * Disallow: /accounts 라고 적으면 됩니다. Next.js에서의 사용법: 프로젝트의 public 폴더 안에 rob..
-
[NEXTJS]_app 과 _documentnext js 2023. 7. 17. 17:41
_document와 _app에는 페이지에 공통적으로 적용될 내용을 작성하곤 하는데, 둘이 정확히 어떻게 다른지와 어떤 내용을 작성해야 하는지에 대해 정리해 보겠습니다. 📝 App 페이지 _app은 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로, 페이지에 적용할 공통 레이아웃의 역할을 합니다. 🎯 주요 사용 목적 모든 컴포넌트에 공통으로 적용할 속성 관리 function MyApp({ Component, pageProps }) { return } export default MyApp ⚙️ 규칙 Component 속성값은 서버에 요청한 페이지가 됩니다. (Ex. http://localhost:3000/home에 접속하면, Component는 home 컴포넌트를 가리킵니다.) pageProps는 g..
-
[NEXTJS]디렉토리 구조 정리next js 2023. 7. 17. 17:01
프로젝트를 생성 후 처음으로 하는 세팅 중 하나인 디렉토리 구조 짜기. 매 새로운 프로젝트마다 디렉토리 구조가 조금씩 다른데, 나도 나만의 디렉토리 구조를 하나 정하려고 한다. 크게는 pages, app, public 세개로 나눈다. 🗂 app api : API 호출을 위한 기능들을 모은다. 인스턴스 설정(axios.tsx), 호출 통합 로직(send.tsx), 호출 함수들 components : 화면 구성에 재사용되는 컴포넌트를 모은다. constants : 공통으로 사용되는 상수들을 정의하고 관리한다. API 엔드포인트 URL(apiEndPoint.tsx), 디자인시스템(theme.tsx), 타입과 인터페이스(types) containers : 모든 페이지에 전체적으로 적용되는 레이아웃 컴포넌트를 모..
-
[REACT] useQuery 키를 여러개 전달하여 응용하기React, Next 2023. 5. 16. 00:08
useQuery 요청시 첫 매개변수 자리는 식별자 키(key)이다. 보통 이 부분은 스트링 형태인 것으로 알지만 아래와 같이 배열 형태로 여러개의 키를 가질 수 있다. 특정 상황에서 useQuery를 직접 다시 호출하기 useQuery를 다시 호출하고 싶을 때는 queryClient.refetchQueries를 이용해서 useQuery의 키를 넣어주면 된다. 이렇게 해주면 되는데 그전에 세팅이 되어있는지 살펴보아야 한다. queryClient를 상위 컴포넌트 쪽에 세팅해줘야 한다. _app.js export default function App({ Component, pageProps }) { const client = new QueryClient({ defaultOptions: { queries: { ..
-
[EXPRESS] MySQL, 시퀄라이즈 설치부터 Node 연결까지!Node, Express 2023. 4. 21. 23:37
MySQL 설치 및 실행 맥에서는 Homebrew를 통해 MySQL을 설치하는 것이 좋다. Homebrew는 다음 명령어로 설치할 수 있다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" Homebrew 설치를 완료하고 나면 Homebrew를 통해 MySQL을 설치한다. $ brew install mysql $ brew services start mysql $ mysql_secure_installation 설치 후 brew services start mysql 명령어로 MySQL을 시작하고 mysql_secure_installation 명령어로 root 비밀번호를 설정한다. val..