비전공자 개발일기

HTML: Hyper Text(문서를 서로 연결해주는 링크) Markup Language 시멘틱(의미가 통하는) 태그를 사용하여 만든 웹 문서 시멘틱 태그가 필요한 이유 웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목, 메뉴, 본문 내용 등 알 수 있음 문서 구조가 정확히 나눠지므로 PC, 스마트기기 등 다양한 화면에서 웹 문서를 표현하기 쉬움 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있음 시멘틱 태그의 종류 : 헤더 영역을 나타냄, 검색창이나 사이트 메뉴를 삽입 : 내비게이션 영역, 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크 : 핵심 콘텐츠, 웹 문서마다 다르게 보여주는 내용으로 구성, 1회만 사용 권장 : 독립적인 콘텐츠, 웹에서 ..

모듈: 자바스크립트 파일 하나, 복잡하고 많은 양의 코드를 기능에 따라 파일로 나눠서 관리하기 위함 모듈 스코프: 외부에서 자유롭게 접근하는 걸 막기위해 파일 안에서 독립적인 스코프를 가지고 있어야함 모듈 문법: export, import // printer.js export const title = 'Printer'; export function print(value) { console.log(value); }; // index.js import { title, print } from './printer.js'; print(title); // 이름 바꿔서 import import { title as printerTitle, print, printArr } from './printer.js'; impor..

1. node.js 설치 2. create-react-app로 리액트 프로젝트 생성 3. npm init react-app 또는 폴더를 VS Code로 열고 터미널에서 npm init react-app . 4. 개발모드 실행: npm run start 5. react 개발자 도구: chrome 확장프로그램 [react developer tools] JSX: 자바스크립트의 확장 문법 import ReactDOM from 'react-dom'; ReactDOM.render(안녕 리액트!, document.getElementById('root')); 속성명은 카멜 케이스로 작성 ex) onClick,,onBlur, onFocus, onMouseDown, onMouseOver, tabIndex import Re..

1. sort const letters = ['D', 'C', 'E', 'B', 'A']; const numbers = [1, 10, 4, 21, 36000]; letters.sort(); numbers.sort(); console.log(letters); // (5) ["A", "B", "C", "D", "E"] console.log(numbers); // (5) [1, 10, 21, 36000, 4] const numbers = [1, 10, 4, 21, 36000]; // 오름차순 정렬 numbers.sort((a, b) => a - b); console.log(numbers); // (5) [1, 4, 10, 21, 36000] // 내림차순 정렬 numbers.sort((a, b) => b - ..

1. 기명 함수 표현식 함수 표현식으로 함수를 만들때 선언하는 함수에 이름을 표현 const Hi = function () { console.log('Hi'); }; console.log(Hi.name); // Hi const Hi2 = function printHi() { console.log('Hi'); }; console.log(Hi2.name); // printHi 함수 내부에서 함수 자체를 가리킬 때 사용 let countdown = function(n) { console.log(n); if (n === 0) { console.log('End!'); } else { countdown(n - 1); } }; countdown(5); 재귀함수: 자기 자신을 부르는 함수 2. 즉시 실행 함수(익명 함..

let current = 1; let previous = 0; for(let i =1 ; i

IN'O Portfolio Make Hardware Soft IN'O is a hanger-type bluetooth speaker that does not merely focus on its audio features. It naturally blends into your life through lean UX and minimal design. VIEW MORE * { box-sizing: border-box; } body { margin: 0; font-family: 'Roboto', sans-serif; } .navbar { background-color: #353535; width: 100%; height: 60px; line-height: 60px; padding-left: 30px; paddi..