전체 글 467

[Next.js] Expected server HTML to contain a matching <li> in <p>.

next.js 를 하다가 오류가 발생했다.       Error: Hydration failed because the initial UI does not match what was rendered on the server. See more info here: https://nextjs.org/docs/messages/react-hydration-error Expected server HTML to contain a matching in .   이런 에러인데 해결법은 챗gpt한테 물어보았다.      HTML 표준에서 li 태그는 ul 또는 ol 태그 안에서만 사용해야 한다고 하네요.. 그런데 flowbite에서 복붙해온 html에는 p 태그 안에 li 를 쓰고 있었습니다. 그래서 에러가 났던 것이었어요..

포트포워딩_localhost를 외부에서 접속하도록 만드는 법_공유기설정

localhost:3000 에서 제 사이트가 잘 보이죠 ?    그런데 이 사이트를 다른 사람도 볼수있도록 만들고 싶다면 ? 어떻게 해야할까요 ? 바로 포트포워딩입니다!    cmd -> ipconfig를 입력해줍니다.    그러면 이렇게 IPv4 주소 , 기본 게이트웨이 의 주소들이 보입니다.  여기서 Ipv4주소의 ip를 3000 포트번호에 연결해서 들어가보면 ?  잘나오는 것을 확인할수있답니다~  그런데 이 ip로 접속하는 것은 제 와이파이와 같은 접속일 때만 유효합니다.  그렇다면 어떻게 해야할까요?      아까 주소에서 마지막 숫자를 1로 변경해줍니다.  그러면 이렇게 와이파이 사이트로 들어갑니다.   저는 iptime 공유기를 사용하고 있어서 이렇게 뜹니다! 로그인을 잘 해주시면 이런 화면이..

깃허브_레포지토리 생성과_처음 vscode프로젝트 연결법

1. 레포지토리 생성 먼저 레포지토리를 생성해볼게요.  new 버튼을 눌러 레포지토리를 생성해줍니다!    적당히 리포지토리 이름과 설명을 적고하단에 create Repository를 눌러 만들어줍니다.    2. 로컬과 연결    3. 명령어 입력 터미널에서 해당 플젝위치에 들어가준다.  git init git commit -m "커밋 제목" git remote add orign  git push origin main       4. 커밋 완료!   https://github.com/dumi33/firstNext GitHub - dumi33/firstNext: next.js 프로젝트입니다.next.js 프로젝트입니다. Contribute to dumi33/firstNext development by c..

Next.js 프로젝트 생성_node.js, npm 설치 확인

1. Node.js 설치 https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org -> 다운로드 노드JS -> msi 파일을 눌러 설치를 해줍니다.  다 next를 누르고 설치하면 finish가 나옵니다.  node-v 명령어로 설치된 버젼을 확인할 수 있습니다!  혹시 nodejs 버젼충돌 문제가 난다면 ? (TypeError: Class extends value undefined is not a constructor or null)-> 참고 https://velog.io/@keynene/ErrorNodejs-N..

errno -4058 ENOENT: no such file or directory, lstat his is related to npm not being able to find a file.

이 문제는 npx create-next-app 을 실행하려다 발생하였다.   아마 node.js 버젼문제 인것같은데 삭제했다가 다시 깔아도 문제가 해결되지않았다.   그러다 쉽게 문제가 해결되었다. https://github.com/npm/cli/issues/6971 [BUG] npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\userName\AppData\Roaming\npm' · Issue #6971 · npm/cliIs there an existing issue for this? I have searched the existing issues This issue exists in the latest npm version I am ..

vue - axios사용방법_http 통신_then,catch

axios -> 뷰에서 권고하는 promise기반의 http 통신 라이브러리  ajax (Asynchronous Javascript And Xml)-> 비동기적인 webApplication의 제작을 위한 웹개발 기법      vue에서 http통신을 하기위해서는 axios를 주로 사용하도록 권고하고 있습니다.  axios는 오픈소스로https://github.com/axios/axios GitHub - axios/axios: Promise based HTTP client for the browser and node.jsPromise based HTTP client for the browser and node.js - axios/axiosgithub.com 이 깃허브 주소에서 확인하실수있습니다.    깃헙..

개발공부/vue.js 2024.08.04

[자격증]전공자의 SQLD 합격후기와 공부방법,기간

안녕하세요.ᐟ IT직군에서 일하고 있는 개발자덕구입니다. 오랜만에 공부를 해보고 싶어서 SQLD 시험에 응시했어요. 준비를 하면서 짜증도나고 재미도 있었던 시험입니다. 대학교 졸업하고 오랜만에 머리를 써서 시험을 준비했어요. 준비기간은 대략 3주입니다. 어떻게 준비했느냐 하면 간단하게 말해보겠습니다. 노랭이 풀기 - 2과목 2장까지 이게 다 입니다. 그만큼 어려운 시험이 아니에요ㅎㅎ SQLD 자격증이 뭐에요? SQLD는 SQL 개발자 자격증으로 기본적인 SQL을 다룰수있는지 확인하는 자격시험이라고 보심됩니다. SQL 개발자 자격시험의 과목은 총 2과목으로 구성되며 필기 50문항으로 구성되어 있습니다. 총 60점을 넘으면 되구요 과목별로 40%미만일 때는 과락입니다. 응시료는 5만원입니다. 문항수는 50문..

자기계발 2024.06.19

[친절한SQL튜닝]DB의 저장구조_3

1. 데이터베이스의 저장구조 2. 데이터의 단위는 블록3. 논리적I/O vs 물리적I/O  1. 데이터베이스의 저장구조 데이터를 저장하려면 먼저 테이블스페이스를 생성해야한다. 테이블스페이스는 세그먼트를 담는 콘테이너이다.  세그먼트는 여러 익스텐트로 구성이 된다. 익스텐드란 공간확장의 단위이다. 데이터를 입력하다가 공간이 부족해지면 익스텐트를 추가로 할당받는다.  사용자가 입력한 레코드를 저장하는 공간은 데이터블록 이라고 한다.한 블록은 하나의 테이블에서 독점한다.  블록 : 데이터를 읽고 쓰는 단위익스텐트 : 공간을 확장하는 단위 세그먼트 : 데이터 저장공간이 필요한 오브젝트 테이블 스페이스 : 세그먼트를 담는 콘테이너   2. 데이터의 단위는 블록데이터를 읽고 쓰는 단위는 블록이다. 데이터I/O가 블..

CS/DB 2024.06.10

[친절한SQL튜닝]SQL이 느린 이유_2

오늘의 SQL 공부 들어갑니다. SQL이 느린 이유를 아시나요?그 이유는 바로 디스크I/O 때문입니다. 친절한sQL튜닝에서 저자는 I/O를 "잠"이라고 표현합니다. 시스템이 I/O를 처리하는동안 프로세스는 잠을 자기 때문입니다. 잠깐.ᐟ 여기서 프로세스는 뭔지 아시나요? 프로세스란  '실행 중인 프로그램'을 의미합니다. 특정 순간에는 하나의 프로세스만 CPU를 사용할수있기 때문에 프로세스는 생명주기를 갖습니다.  프로세스가 데이터를 디스크에서 읽어와야할 때는 CPU를 OS에게 반환하고 쉬어야합니다.(waiting) 프로세스가 열심히 일해야 속도가 빠른데 디스크I/O가 발생한 경우 한가하게 잠을 자고있는겁니다…ᐟ 그러면 성능이 안좋아지고 느려질수밖에 없습니다.

CS/DB 2024.06.10

[친절한SQL튜닝]SQL최적화란?_1

1. SQL 최적화란 ? SQL최적화 과정은 2가지 과정으로 나눠져있다. 1. SQL 파싱 2. SQL 최적화 2. SQL 옵티마이져란 ? SQL을 실행하면서 내부에서 엔진이 필요하다. 이러한 DBMS내부 엔진을 SQL 옵티마이져라고한다. SQL옵티마이져는 자동차 네비게이션과 흡사하여 원하는 작업을 가장 효율적으로 수행할수있는 최적화된 액세스 경로를 선택한다. 3. SQL 옵티마이져의 실행계획 선택과정 => 1. 쿼리를 수행할 후보군들(실행계획)을 찾는다. 2. 통계정보를 보고 각 실행계획의 예상 비용을 산정한다. 3. 최저 비용의 실행계획을 선택한다. 4. 옵티마이져 힌트옵티마이져 힌트를 이용해 데이터 엑세스의 경로를 바꿀수있다. 힌트는 주석기호에 '+'를 붙이면 된다. 예시) select /*+IND..

CS/DB 2024.06.04