본문 바로가기

전체 글

 (132)
Linux 기초 - 기본개념 및 directory, CLI 1) Linux 1-1) Linux 구조 1-2) Linux 특징 1-3) Ubuntu 1-4) directory 구조 1-5) CLI 2) CLI 실습 1) Linux 1-1) Linux 구조 OS 종류는 크게 네 가지로 "Windows", "MacOS", "Linux", "Unix"가 있다! (Mobile OS의 경우, Android와 iOS가 있다!) - 하드웨어 : 눈으로 보고 만질 수 있는 것 → ex) 마우스, 키보드 등 - 소프트웨어 : 사용자가 직접 못 보고 만질 수 없는 것 → ex) OS, zoom, VSCode, LOL(게임) 등의 프로그램 하드웨어를 조작하는 소프트웨어를 "OS"라고 한다! 즉, 우리가 많이 사용하는 스마트폰, 데스크탑(PC)의 경우 하드웨어만 존재한다면 컴퓨터 전원..
DOM 기초(10) - 게시판 구현(CRUD) 정리 및 배열 메서드 1) 코드 실습 1-1) 게시판 구현(CRUD) 1-2) 배열 메서드 1) 코드 실습 1-1) 게시판 구현(CRUD) 게시판 흐름 (1) list page - localStorage(로컬 스토리지)에 데이터가 이미 존재하는 경우와 없는 경우를 구분해야 함!! (즉, 처음 접속한 사람과 두번째 접속한 사람을 구분하여 데이터 case를 나눈다!!) // 처음 접속한 사람인지 아닌지를 구분하기 위한 코드 let item = localStorage.getItem("boards"); if (item === null) { const initialState = []; const state = JSON.stringify(initialState); localStorage.setItem("boards", state); i..
DOM 기초(9) - 댓글 구현 기능 보강(CRUD), 게시판 기초 1) 코드 실습 1-1) 댓글(CRUD) - 총 댓글 개수 표시 및 Update 기능 보강 1-2) 게시판 기초 1) 코드 실습 1-1) 댓글(CRUD) - 총 댓글 개수 표시 및 Update 기능 보강 댓글 구현 - submitHandler >> state(데이터 타입: 배열): [] 위의 "state" 배열에 데이터를 쌓는 것이 전부이다!! - instance 변수(데이터 타입: Object): >> new Comment(value) >> value : TEXT 입력폼에 입력한 값 const state= []; const instance = { userid: 'web7722', Content: content, updated: false, updateValue: '', now: '....', } add..
DOM 기초(8) - 댓글 구현(CRUD) 1) 댓글 구현(CRUD) 1-1) update 1-2) delete 1-3) try / catch 1-4) 코드 실습 1) 댓글 구현(CRUD) // 함수 선언문 function comment1() { } // 생성자 함수와 class는 객체 리터럴 문법과 더불어 객체를 찍어낼 때 사용하는 방법임!! // 생성자 함수 // 생성자 함수의 경우, new 키워드를 써서 새로 객체를 생성할 시 아래와 같이 "this = {}", "return this"가 생략되어 있다고 보면 됨!! function Comment2() { // this = {}; // return this; } // class class Comment() { constructor() { } } new Comment() // 생성자 함수와 c..
DOM 기초(7) - 숫자 증감기, 댓글(Create / Read) 구현 1) 코드 실습 1-1) 숫자 증감기 1-2) 댓글(Create / Read) 1) 코드 실습 1-1) 숫자 증감기 코드 설계 /* Counter 예제 처음에는 "0"으로 값이 설정(초기화)되어 있어야 함 "+" 버튼을 생성해야 함 "-" 버튼을 생성해야 함 "+" 버튼을 누르면 1씩 증가하도록 이벤트를 걸어줘야 함 "-" 버튼을 누르면 1씩 감소하도록 이벤트를 걸어줘야 함 1. 화면 그리기(html 구성 작업) 2. 어떻게 구성할지 고민 3. 입력값이 무엇인지 살펴볼 계획 */ // 첫번째 형태 const display = document.querySelector("#counter"); const incrementBtn = document.querySelector("#increment"); const ..
DOM 기초(6) - 메뉴 / 서브메뉴, 이미지 슬라이드, 로또 1) 코드 실습 1-1) 메뉴 / 서브메뉴 1-2) 이미지 슬라이드(미완성) 1-3) 로또 번호 뽑기 1) 코드 실습 1-1) 메뉴 / 서브메뉴 index.html logo menu1 menu1-1 menu1-2 menu1-3 menu1-4 menu2 menu2-1 menu2-2 menu2-3 menu2-4 menu3 menu3-1 menu3-2 menu3-3 menu3-4 menu4 menu4-1 menu4-2 menu4-3 menu4-4 1234 index.css * { margin: 0; padding: 0; } ul, li { list-style: none; } a { text-decoration: none; } #wrap { width: 100%; } #header { display: flex;..
DOM 기초(5) - 이미지 슬라이드, preview / next 버튼 구현 1) visual 영역 구현 1-1) 이미지 2개 슬라이드 구현 1-2) 이미지 3개 슬라이드 및 preview / next 버튼 구현 1-3) 실행 순서 1) visual 영역 구현 1-1) 이미지 2개 슬라이드 구현 (중요!!) classList와 className의 차이점 classList는 add와 remove를 써서 기존 class가 있다면 해당 class 이름은 그냥 둔 상태(즉, 기존에 이미 존재하던 class 이름을 수정하지 않는다는 것이 point임!!)에서 새로운 이름을 추가(add)하거나 삭제(remove)할 수 있음!! className은 기존에 이미 class 이름이 존재한다면 해당 class 이름을 새로 할당한 이름으로 바꿔줌(즉, 기존에 이미 존재하던 class 이름을 완전히 ..
DOM 기초(4) - setTimeout, setInterval, single thread, event loop 1) Javascript 동작방식 1-1) setTimeout / setInterval 1-2) single thread / event loop 1-3) 동기와 비동기 2) 코드 실습 1) Javascript 동작방식 1-1) setTimeout / setInterval setTimeout, setInterval의 경우, 엄밀히 따지면 DOM이 아니다!! setTimeout, setInterval은 window(전역객체)에 포함되어 있다(window 객체 안에 있다)!! 즉, setTimeout, setInterval은 자바스크립트의 기본 스펙이 아니라 브라우저가 만들어 놓은 메서드(브라우저가 제공해주는 기능)이다!! window.setTimeout window.setTimeout(callback, 10..

티스토리툴바