프로그래밍 72

[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 를 쓰고 있었습니다. 그래서 에러가 났던 것이었어요..

깃허브_레포지토리 생성과_처음 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..

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 ..

생활코딩-HTML 강의 정리

생활코딩 사랑해요 HTML 강의 주소 : https://www.opentutorials.org/course/2039/10930 기술소개 - 생활코딩 기술소개 2015-12-05 10:55:56 www.opentutorials.org 역시 생활코딩 짧고 간단하고 이해하기 쉽다. HTML 공부 처음할땐 생활코딩 추천~~ 설렁설렁 들어서 3월 6일 ~ 10일(5일) 동안 들었다. [HTML이란?] HTML(Hyper Text Markup Language) Hyper text란 문서와 문서가 링크로 연결되는 것을 의미한다. 문서와 문서가 링크로 연결되는 것은 a태그를 통해 이루어진다. 도널드 이런 태그가 있다면 도널드란 글자를 클릭하면 ~~~에 있는 링크로 이동한다. [태그의 중..

(2)HTML5와 웹표준(API, CSS 3.0) 마스터하기 _ 텍스트를 덩어리로 묶어주는 태그

태그 - 제목 표시 n에는 1부터 6까지가 들어가는데 숫자가 작을수록 큰 제목이다!! 태그 - 개행태그 한번 엔터를 친 효과를 준다. 태그 - 수평 줄 넣는 태그 태그 - 하이퍼링크를 넣는데 사용하는 태그 href 속성을 이용해 페이지를 지정한다. 위에 설명한 태그를 추가하여 html코드 실습을 해보았다. Antifragile 걸어봐 위엄 like lion NAVER 안티프레자일과 걸어봐~ 는 hn의 n사이즈가 다르므로 사이즈가 다른 것을 확인할 수 있다. hr태그를 이용해 수평 줄을 추가하였다. NAVER으로 이동할 수 있는 하이퍼링크를 넣는 a태크를 추가하였다. 밑의 이미지와 거리를 두기 위해서 개행문자를 추가하였다. 다운받은 이미지 크기가 커서 img태그의 style 속성을 이용해서 크기를 조절하였다.

(1)HTML5와 웹표준(API, CSS 3.0) 마스터하기 _ html 구조

회사에서 교육을 들으라고 멀티캠퍼스에서 html 강의를 수강신청했다. Do it! HTML5 + CSS3 웹표준의 정석 책까지 보내주길래 꽤 최신의 괜찮은 강의를 기대했는데^^ 2013~4년에 촬영한 강의인듯하다ㅎㅎ 프론트는 안그래도 빨리 기술이 변하는데 이렇게 예전 강의를 들으라고 하면.... 너무하다..... 그래도 책은 2020년 최신판이니 책을 기준으로 잡고 강의를 보조도구로 생각하고 진행할 생각이다. html의 구조는 이러하다. 의 구조이다. 는 웹 문서 시작을 알리는 태그 (사용할 언어를 지정) 시간이란... 이 코드를 vscode에 입력하고 우클릭 - open with live server를 하면 화면이 나타난다. title로 지정한 말이 위에 잘 뜨고, 이미지도 잘 뜬다.

HTML_from태그가 뭘까

회사부서배치 받고 나니 프론트였다... 내가 프론트 개발자?! 이제 html, css, javascript를 공부해볼 생각이다. 어차피 프론트 하게된 김에 열심히 파봐야지 간단하게 유튜브 유노코딩을 봤다. 참고 영상 https://www.youtube.com/playlist?list=PLFeNz2ojQZjtQc7mt8E9fNzIh9or34A61 입문자를 위한 HTML 기초 강의 www.youtube.com 어차피 언어에 대한 기본은 있으니 내가 새롭게 알게된것만 정리하겠다. html에서의 주석은 이다. 는 그냥 글자쓸 때 은 굵은 글자쓸 때 속성을 넣고 싶을 때는 시작태그 안에 띄어쓰기 한칸하고 넣으면 된다. strong 태그에 style 속성을 넣었다. hello~! 브라우저에 띄우면 이렇게 된다. f..

JDK, JRE, JVM, GC.... 이것들은 뭘까?

자바를 설치할 때 보면 2가지로 나뉘어져 있다. 1. JDK : Java Development Kit 2. JRE : Java Runtime Environment JRE는 자바를 실행할 수 있는 환경의 집합이다. JDK가 JRE를 포함하고 있다. JAVA로 개발을 하려면 JDK가 필요하고 JAVA프로그램을 실행시키 위해서는 JRE만 있으면 된다. JVM : Java Virtual Machine GC : Garbage Collector JVM은 자바 프로그램이 수행되는 프로세스를 말하여 메모리 관리를 한다. JVM 내에서 메모리 관리를 해주는 것이 GC (가비지 컬렉터)이다. JAVA는 ios든 window든 어디서든 실행할 수 있다. 이는 자바가 OS에 종속되어있지 않기 때문이다. 종속되지 않고 실행을 ..

인터페이스와 추상클래스

인터페이스 : 실제 코드는 만들지 않더라도 어떤 메서드들이 있어야 하는지를 정의하려고 할 때 사용한다. 인터페이스 내부에 선언된 메서드들은 Body가 있으면 안된다. 인터페이스를 구현하는 클래스를 만들때는 implements라는 예약어를 사용한다. "구현하다"라는 의미이다. 다중 상속은 불가능하지만 다중 구현은 가능하다. 구현할 경우 인터페이스에 정의된 모든 메서드들의 몸통을 만들어주어야만 한다. 클래스 public class MemberManager { } 인터페이스 public interface MemberManager{ } abstract 클래스 public abstract class MemberManager { } abstract 클래스 몸통이 없는 메소드 선언문에는 abstract라는 예약어를 ..

DTO(Data transfer Object)...이제 생성자를 곁들인(ft.this)

DTO 속성들을 갖는 클래스를 만들고 이를 쉽게 전달하기 위해 사용하는 자바 패턴 여러 개의 데이터를 하나의 타입에 넣어서 넘겨줄 수 있다!! DTO을 이용해서 상황에 맞게 생성자를 만들수있다. public class MemberDTO { public String name; public String phone; public String email; public String getName() { return name; } public MemberDTO(String name) { this.name= name; } public MemberDTO(String name, String phone){ this.name = name; this.phone = phone; } } 이렇게 MemberDTO 클래스를 만들고 ..