개발공부일지

목차 1. 서버란? 2. 호스팅 3. 호스팅과 클라우드 비교 4. AWS 5. PuTTY 6. FileZilla 1. 서버란? - 외부에서 접속이 가능한 컴퓨터로 서비스를 배포할때 필요한 - 하나의 컴퓨터에 여러의 유저가 접속하는 것 - 로컬서버도 있지만 외부에서도 가능해야한다. - 만약, 집에서 공유기 연결하고 80포트 열고 서비스를 제공한다고 하면! - 컴퓨터를 항상 켜두어야한다. - 외부에서 많은 사람이 몰릴 경우 인터넷 자체에 제한이 걸린다. - 병목현상이 일어나지않게 서버구축을 해야한다. → 그래서 호스팅을 사용한다! 2. 호스팅 (웹 호스팅) - 파일을 올려두면 서버 구축을 다 해준다. - 유료이지만 자체 세팅이 되어있어서 편리하다. - 단점 : 유동적으로 맞출수없어서 최대치로 시작하면 접속량..

목차 1. 리눅스(Linux)란? 2. 우분투(Ubuntu) 3. CLI (Command Line Interface) 4. 디렉토리 구조 5. 다운로드 1. 리눅스(Linux)란? - 유닉스라는 운영체제를 기반으로 오픈소스 OS이다. - 뛰어난 안정성, 보안성, 높은 신뢰성이 특징이다. - "멀티 유저"와 "멀티 태스킹" 지원 ★ 멀티 유저란? - 컴퓨터를 키면 '계정명'과 '패스워드'를 입력하고 로그인을 하듯 멀티유저에도 디렉토리가 분리되어 로그인을 한다는 뜻! - 'user' 끼리 디렉토리가 제한되어있고, 공용으로 사용하는 디렉토리가 있다. → 권한설정을 따로 지정할수있다. (파일권한으로 세부적으로도 가능) 2. 우분투(Ubuntu) - 리눅스가 오픈소스로 파생되어 여러가지 제품군들이 생겨났는데 그중..

목차 1. storage.js에서 저장한 데이터에서 마지막 아이템 가져오기, 초기값 설정하기 2. 게시글 마다 고유한 키값 부여하기 (id) 1. storage.js에서 저장한 데이터에서 마지막 아이템 가져오기, 초기값 설정하기 ★ storage.js 더보기 import { INITIAL_STORAGE, STORAGE_NAME, INITIAL_ID, INCREMENT_STEP, } from "./constants.js"; class Storage { name; storage; constructor(StorageName = STORAGE_NAME) { this.name = StorageName; // 'board' : string this.storage = localStorage.getItem(this.n..

목차 1. html 작성하기 (board 폴더 - index, write, view, list, modify html파일) 2. css 작성하기 3. js 작성하기 (public 폴더 - js파일) 1. html 작성하기 ★ write.html - script type="module", write.js - form안에 ul - li 안에 input 사용하기 - 작성하기 버튼 type="submit" - h2, form, ul, button에 id와 class 지정하기 Logo 글쓰기 제목 작성자 작성하기 ★ view.html - write.html과 똑같은 코드지만 input 삭제 - 목록가기, 수정하기, 삭제하기 태그로 만들기 ★ modify.html - write.html과 똑같은 코드 - 수정하기 ..

목차 1. 짤막한 네트워크와 브라우저 (browser) 2. 로컬스토리지 (localStorage) 3. 모듈(Module) 1. 짤막한 네트워크와 브라우저 (browser) - URL 주소로 요청과 응답을 하면서 데이터를 주고 받는것 (데이터 통신) - 브라우저는 요청을 쉽게 해주는 도구로 요청을 한 다음 응답을 받은 결과를 쉽게 볼수있다. - 파일을 보내는것이 아니라 html이라는 텍스트 전체를 보내서 그걸 브라우저가 읽는것! - 프로세스끼리는 공유가 안된다. - 브라우저는 주소창이 중요하다! - HTML에서도 태그사용할때도 src로 주소를 입력하는것도 같다.(css, js파일들도 마찬가지) 2. 로컬스토리지 (localStorage) - 저장한 데이터는 브라우저에 저장된다. - Key(파일)과 Va..

목차 1.callback 2. 프로미스 객체 (Promise) 3. 프로미스 체이닝 4. Async / Await 1. callback ★ 어제(8/7) 자동차 경주 문제 이어서 - 결과 const 아반떼 = ( ) => { } const 소나타 = ( ) => { } const 제네시스 = ( ) => { } 1초 뒤에 제네시스 go 2초 뒤에 소나타 go 3초 뒤에 아반떼 go 아반떼가 go가 되었으면 마지막에 끝이라는 출력도 나오게하기 3초 뒤에 제네시스 go 2초 뒤에 아반떼 go 1초 뒤에 소나타 go 소나타 go 되면 마지막에 끝이라는 출력도 나오게하기 const 아반떼 = (callback) => { console.log("아반떼 시작"); setTimeout(() => ..

목차 1. runtime 2. 호이스팅 3. 이벤트 루프 4. setTimeout 5. 문제 ① 6. 결과(console창과 그림) 7. 문제 ② 1. runtime - 코드를 실행해주는 것 - runtime이 돌아가는 2가지 환경 : 브라우저, Nodejs (어떤것을 조작하고 싶은지에 따라 용도가 다름) - 브라우저는 브라우저 안에 js runtime이 포함되어있으며, 한계가 있다. (파일을 열수없음) - Nodejs의 경우 브라우저에서 안되는 것을 포함하고있다. (파일을 열수있음 → 내 컴퓨터를 조작할 수 있다! → 그래서 통신을 구현할 수 있다!) const a = 10; function fn() { console.log(c); let c = 10; } let b = fn(); const c = 1..

목차 1.class 2. 게시판 만들기 1.class - 추상을 만들고 실체를 만드는것 - new 라는 인스턴스를 생성 (인스턴스화) class 의자 { 다리가 있다. 앉을수 있다. 등받이가 있다. //추상 } const chair = new 의자(); //인스턴스화, 실체화한다 ★ 직업이라는 사람의 정보를 class로 만들때 function Job(_job) { // this = {} this.job; console.log(_job); // return this } const job = new job("senior"); - Job에 this가 빈 객체이고, 리턴으로 this가 생략되어있다고생각하면 된다. class Job { job; //쓸거라고 미리 지정 constructor(_job, _career..

목차 1. 함수 선언식과 표현식 2. 함수를 사용하는 방법 2-1 일반함수로 사용 2-2 생성자 함수로 사용 2-3 객체 메서드 할당 3. this 바인딩 1. 함수 선언식과 표현식 - 선언식 function a(){ console.log('a') } - 표현식 const b = function (){ console.log('b') } 2. 함수를 사용하는 방법 2-1 일반함수로 사용 function foo(a, b) { console.log(this); // window객체 return [a, b]; } const a = foo(1, 2); console.log(a); //[1,2] 2-2 생성자 함수로 사용 function foo() { // this={} console.log(this); // re..

목차 1. 참조타입 2. 얕은 복사와 깊은 복사 3. 과제 4. 과제 결과 5. job의 메모리 주소 그림 1. 참조타입 - 원시타입을 제외한 배열, 객체, 함수를 말한다. ※ 원시타입 : string, number, boolean, null, undefined, symbol 2. 얕은 복사와 깊은 복사 - 얕은 복사 : 원본의 내용을 수정해 (메모리 주소를 복사해) 사용하는것 - 깊은 복사 : 원본의 내용을 새로 만들어 사용하는것 const a = { name: "ingoo" }; const b = a; b.name = "web7722"; console.log(a); const a = { name: "ingoo" }; const b = { ...a }; b.name = "web7722"; console..