728x90 프로젝트캠프8 [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 리엑트 기초2 Node.js - 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 - Node.js는 이벤트 기반, 논블로킹 I/O 모델을 사용해 가볍고 효율적이다. NPM - NPM(Node Package Manager) : Node.js 패키지 관리자 - 노드가 자바스크립트 프로그램을 컴퓨터에서도 실행할 수 있게 해준다. - Node.js 기반 100만개 이상의 패키지(모듈) - npx를 사용하여 다운로드하지 않고 패키지를 실행할 수 있다. - 여러 버전의 코드 및 코드 종속성 관리가 가능하다. - 유사한 문제와 프로젝트를 진행 중인 다른 개발자를 찾을 수 있다. npm - package.json으로 패키지 관리 npx 명령어 - npm 설치 : npm install 패키지명 - 전역 설치한 패키지는 pa.. 2023. 6. 23. [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 리엑트 기초1 리액트 탄생 배경 리액트 사용 이유 - UI 컴포넌트를 만들고 재사용 하는데 매우 용이합니다. 1. UI 컴포넌트를 만들기 2. 만들어진 컴포넌트를 통해 사용자와 인터렉션 3. 화면을 업데이트 하는데 최적화 과제 1. vanilla js로 할 일 목록 만들기 우선 index.html 입니다. 할 일 목록 추가 이것은 기본적인 코드로 뼈대를 잡았습니다. 다음은 강사님의 코드를 참고했지만 최대한 혼자 이해하고 하나씩 console 찍어보면서 해본 script.js // 할 일 목록 만들기 // 내가 생각한 프로세스 // input칸에 입력 -> 추가 버튼을 누르면 입력한 목록값이 안에 생성 -> // 목록값에 삭제버튼도 같이 생긴다. -> 삭제버튼을 누르면 가 사라진다. // 각 id별 변수 설정 const.. 2023. 6. 21. [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - JavaScript 기본 JavaScript HTML,CSS,JS 작동 순서 DOM( Document Object Model) - DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미 - 문서 객체가 생성되는 방식 1. 정적으로 문서 객체를 생성: 웹 브라우저가 HTML 페이지에 적혀 있는 태그를 읽으면 생성 하는 것 2. 동적으로 문서 객체를 생성: 원래 HTML 페이지에 없던 문서객체를 JavaScript를 이용해서 생성 innerHTML 사용 document.getElementById("demo").innerHTML = 5+6; console.log()사용 console.log(5+6); 변수와 상수 JavaScript 함수 구문 - JavaScript 함수는 function 키워드, 이름, 괄호() .. 2023. 6. 16. [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - CSS 활용 CSS - Cascading Style Sheets의 약자 - 한 번에 여러 웹 페이지의 레이아웃을 제어 할 수 있다. - Cascading: 연속화 (cascade:폭포) CSS 작성방법 CSS Selector CSS 삽입 - HTML이 웹 문서의 뼈대를 만드는 것이라면, CSS는 색상이나 크기, 이미지 등 디자인 요소 담당 1. 내부 스타일 시트에 삽입 방법 2. 외부 스타일 시트를 import하여 사용 3. 인라인 스타일 시트: html 파일에서 스타일 직접 지정 This is a heading CSS 우선 적용 순위 안녕하세요. 서지원입니다. 우선순위 1 : 속성값 뒤에 important가 붙어 있는 속성 우선순위 2: 인라인 스타일로 적용되어 있는 속성 우선순위 3: 선택자에 id가 쓰인 속성 .. 2023. 6. 15. 이전 1 2 다음 728x90
