기록저장소

React.js 소개1. 컴포넌트 기반 UI 표현 2. 화면 업데이트 구현이 쉬움 (선언형 프로그래밍, 컴포넌트)3. 화면 업데이트 처리가 빠름 : Virtual DOM (가상 DOM) 이용  React App 생성Vite : 기본 설정이 적용된 React App 생성 가능//vite 설치npm create vite@latest//package정보 기반 라이브러리 설치npm i//react 실행npm run dev//http://localhost:5173 에서 실행 가능 React App 구동원리 ㅇㅇ

Node.js웹브라우저가 아닌 곳에서도  JS를 실행시킬 수 있는 실행환경(구동기)2009년 출시, 웹서버/ 모바일웹/ 데스크톱앱 등을 만들 수 있게됨 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 npm (node package manager) 까지 잘 설치됐는지 확인node -vnpm -v Node.js 사용하기패키지 : Node.js에서 사용하는 프로그램 단위npm initpackage.json 생성됨 //node에서 실행시키고자하는 파일을 터미널에 입력node index.js..

Truthy & Falsy1. Falsy한 값 : undefined, null, 0, -0, NaN, "", 0n2.Truthy 한 값 : 7가지 Falsy 한 값들 제외한 나머지 모든 값function printName(person) { //if(person === undefined || person === null) //복잡한 조건문대신 falsy활용 if (!person) { console.log("person의 값이 없음"); return; } console.log(person.name);}let person = { name: "이정환" };printName(person); 단락 평가function printName(person) { const name = person && ..

한입리액트 완강후 수강예정https://smore.im/form/gIl1v0ftOn 사전등록 이벤트 | 한입 크기로 잘라먹는 Next.js사전등록자 전원 50% 할인 쿠폰 제공, 30명 추첨 100% 할인 쿠폰 제공 중smore.im

VSCode  확장자 추천1. prettier : 코드 정렬2. 파일 확장자별 아이콘 설정3. 오류 안내4. 수정사항 즉시 반영  변수와 상수1. 변수let age;age = 30;2. 상수const birth = "1997.01.07";3. 변수 명명규칙(네이밍 규칙)3-1. $, _ 제외한 기호는 사용할 수 없다.let $_name;3-2. 숫자로 시작할 수 없다.let name1;let $2name;3-3. 예약어를 사용할 수 없다.let if = a; (x)let const = 1; (x)4. 변수 명명 가이드let salesCount = 1;let refundCount = 1;let totalSalesCount = salesCount - refundCount; 자료형1. 숫자형  2. 문자형  ..

HTML을 다루는 사람이라면 들어봤을 Q. 그래서 그게 뭔데? A. 브라우저와 개발자 모두에게 의미를 명확하게 알리기 위한 의미를 지닌 요소 유지보수가 편리, SEO에 유리, 웹 접근성 등의 장점이 있음 : 소개 컨텐츠, 탐색 링크 집합에 대한 컨테이너 내부에 , , 올 수 없음 : 문서의 주요 내용 지정 하나의 html에 하나만 있어야함, , , , 내부에 들어갈 수 없음 : 일반적으로 제목이 있는 주제별 컨텐츠 그룹, 문서의 섹션 : 독립적이고 자체 포함된 컨텐츠, 자체의 의미 과 은 서로/자신을 포함할 수 있음 : 탐색 링크 세트, 항상 존재하지는 것은 아님 : 자신이 배치된 컨텐츠 외의 일부 컨텐츠, 주변 컨텐츠와 관련되어야 함 : 문서나 섹션의 바닥글 : 일러스트, 사진, 코드 목록 등 독립된 ..

자주 쓰일듯 한 css n번째 요소 선택 :nth-child(3)//3번째 하위 요소 :nth-child(n+3)//3번째 하위 요소부터 끝까지 모두 :nth-child(-n+3)//첫번째부터 3번째까지 모든 하위 요소 :nth-child(n+3):nth-child(-n+5)//3번째부터 5번째까지의 하위요소 :nth-child(2 of .highlight)//.highlight 클래스를 가진 하위 요소 중 두번째 요소 .highlight:nth-child(2) //두번째 요소이면서(and) highlight 클래스를 가진 요소 특정 요소 선택 @scope (.card){ img{ border-color: red; } } //card 클래스 내부에 있는 img 만 선택 @scope (.card) to (..

0. "카카오 지도" 검색 1. https://apis.map.kakao.com/ 접속 : 기본적인 사용방법, 옵션 확인 등 공식문서 사이트 2. https://developers.kakao.com/ 접속 : url 등록 및 KEY 발급받는 사이트 KEY발급받기, 지도 사용할 URL등록하기 1. https://developers.kakao.com/ 에서 [내 애플리케이션] 클릭 2. 카카오계정 로그인하기 3. [애플리케이션 추가하기] 클릭 4. 애플리케이션 정보 등록 : 앱 아이콘, 사업자명 등을 입력해야해서 흠칫했지만 그냥 폴더명이라 생각하고 간단하게 등록하면 됨 5. [저장] 하면 등록완료 (아직 남음) 6. 사용하고자하는 [애플리케이션] 클릭 -> [플랫폼 설정하기] 7. 플랫폼 등록하기 : [we..

css li { float: left; } /* one item */ li:first-child:nth-last-child(1) { width: 100%; } /* two items */ li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) ~ li { width: 50%; } /* three items */ li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li { width: 33.3333%; } /* four items */ li:first-child:nth-last-child(4), li:first-child:nth-last-child(4) ~ li { wid..

https://pim.cyberlogitec.com/docs/pages/viewpage.action?pageId=20096574