Slowly, Steadily, Surely 👩‍💻

https://nomadcoders.co/nextjs-for-beginners NextJS 14 시작하기 – 노마드 코더 Nomad CodersNextJS 14 For Beginnersnomadcoders.co React는 라이브러리, Next는 프레임워크.라이브러리는 코드 내에서 사용하려고 설치하는 것이며 사용의 주체는 개발자이다. 라이브러리는 아무 결정도 해주지 않는다. 어떤 폴더, 파일, 구조에서 사용할지 개발자가 결정.프레임워크를 사용하면 많은 일을 대신해준다. 개발자에게 통제권이 없다. Next.js의 규칙을 따라야 한다. 올바른 위치에 폴더와 파일이 있어야 한다. Next.js가 우리의 코드를 찾아서 실행한다.  https://nextjs.org/ Next.js by Vercel - The R..

* 부정 연산자console.log(!{}) => falseconsole.log(![]) => false 빈 배열도 true이다.   * 논리 연산자console.log('A' && 'B' && '')=>console.log('A' && 'B' && 'C')=> Cconsole.log(0 || 1)=> 1console.log(function () {} || undefined || '')=> f () {}console.log(false || 0 || NaN)=> NaN  * Nullish 병합 연산자const n = 0;const num2 = n ?? 7;console.log(num2);=> 0console.log(null ?? undefined);=> undefinedconsole.log(null ?? ..

ECMAhttps://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8 ECMA스크립트 - 위키백과, 우리 모두의 백과사전위키백과, 우리 모두의 백과사전. ECMA스크립트(ECMAScript, 또는 ES[1])란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트를 표ko.wikipedia.orgJS = ES String문자데이터는 큰따옴표, 작은따옴표, 백틱(`)로 만들 수 있음. 백틱은 ${} 데이터(템플릿 리터럴) 를 문자열에 연결할 때 사용 (보간)리터럴 : 기호를 통해 데이터를 만드는 방식. number에 undefined를 더하게 되면 NaN..

Node.js Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 -> 프로그래밍 언어가 동작하는 환경 -> JavaScript의 문법을 해석하고 그것을 실제로 동작시켜줄 수 있는 엔진 웹브라우저에서는 HTML, CSS, JS만 작동. 개발을 도와주는 모듈을 설치해서 도움을 받고자 할 때, Node.js를 통해서 JavaScript로 변환 필요. https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org LTS 버전 설치. node --version npm NPM(Node Package Manager)은 전 세계의 개발자들이 만든 다..

블록(상자) 요소. 제목을 의미하는 요소. (Heading) h1~h6. 숫자가 작을수록 더 중요한 제목을 정의. h1은 대주제라서 난발하기 보다는 h2~h4 많이 씀. 블록(상자) 요소. 문장을 의미하는 요소 (Paragraph). p태그 대신 div을 써도 상관은 없음. 블록(상자) 요소. 순서가 필요없는 목록의 집합을 의미. (Unordered List) 자식으로 li 태그가 꼭 들어가야 함. 블록(상자) 요소. 목록 내 각 항목 (List Item) 사과 딸기 인라인(글자) 요소. 이미지를 삽입하는 요소 (Image). src, alt 필수 속성. 인라인(글자) 요소. 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소. (Anchor) href : 링크 URL target : 링크 URL의 ..

내용 시작(열린) 태그 종료(닫힌) 태그 부모요소, 상위요소 자식요소, 하위요소 빈(Empty) 태그 내용을 채울 수 없기 때문에 속성이 필요한 경우가 많음. (필수속성) ex) meta 태그는 닫힌 태그가 없음. vs 편리함 안전함 HTML5에서는 둘다 사용 가능. 내용 글자와 상자 요소가 화면에 출력되는 특성, 크게 2가지로 구분. 인라인(Inline) 요소 : 글자를 만들기 위한 요소들. 블록(Block) 요소 : 상자(레이아웃)를 만들기 위한 요소들. 대표적인 인라인 요소. 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도. 요소가 수평으로 쌓임. → 포함한 콘텐츠 크기만큼 자동으로 줄어듬. Hello World Hello World - 글자 요소는 가로, 세로 사이즈를 지정할 수 ..

https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 브라우저 스타일 초기화 브라우저마다 여백같은 게 다르기 때문에 초기화 필요함. https://www.jsdelivr.com/package/npm/reset-css jsDelivr - A free, fast, and reliable CDN for JS and Open Source Optimized for JS and ESM delivery fr..

DOCTYPE 문서의 HTML 버전을 지정 DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도. 아무것도 안 쓰면 HTML5 (표준).

폴더 자체가 프로젝트. 프로젝트 단위는 폴더단위. 파일의 이름을 관리할 때는 소문자. ! (느낌표)를 적고 탭이나 엔터를 누르면 이렇게 써짐. Alt + Shift + F : 자동 정렬 Ctrl + B : 사이드바 열고 닫기 Ctrl + P : 파일 찾기 Ctrl + W : 탭 닫기 Ctrl + PageUp : 이전 편집기 열기 (좌측 창으로 전환) Ctrl + Shift + P : 바로 가기 키 Ctrl + \ : 편집기 분할 Alt + Shift + ↓ : 아래로 복사 Shift + Tab : 내어쓰기 - Code Formatter (Beautify vs Prettier) Prettier은 강제적으로 코드를 변경시키고, Beautify는 좀더 자유롭게 놔두는 편이라고 한다. ( 출처 : https:/..