분류 전체보기

working directory = working tree staging area = index repository = commit하면 staging area에 있는 파일들의 모습이 스냅샷처럼 저장됨 1. Git 기본 git init : 현재 디렉토리를 Git이 관리하는 프로젝트 디렉토리(=working directory)로 설정하고 그 안에 레포지토리(.git 디렉토리) 생성 git config user.name 'codeit' : 현재 사용자의 아이디를 'codeit'으로 설정(커밋할 때 필요한 정보) git config user.email 'teacher@codeit.kr' : 현재 사용자의 이메일 주소를 'teacher@codeit.kr'로 설정(커밋할 때 필요한 정보) git add [파일 이름..

1. 함수 - 명시적 this 타입, 오버로딩 // 함수 - 명시적 this interface Cat { name: string age: number } const cat: Cat = { name: 'lucy', age: 3 } // 명시한 this는 cat 타입이라는 의미 function hello(this:Cat, message: string) { console.log(`hello ${this.name}, ${message}`) } // hello 함수를 cat 객체 데이터의 메소드처럼 호출 hello.call(cat, 'you are pretty awesome!') // 함수 - 오버로딩 // 1) function add1(a:string, b:string) { return a+b } functio..

1. 타입 종류 1 - 문자, 숫자, boolean, 배열, 객체, 함수 // 타입 종류 // 문자 let str: string let red: string = "red" let myColor : string = `my color ${red}` // 숫자 let num: number let float: number = 3.14 let nan: number = NaN let infinity: number = Infinity console.log(infinity) // boolean let isBoolean: boolean let isDone : boolean = false // null(명시적) / undefined(암시적) // 배열 let nul : null let und: undefined conso..

웹 사이트 동작 원리 1) 현재 호스팅 서버에 프로젝트 업로드 2) 서버는 사용자가 요청하면 브라우저에 응답(html, css, js) - 서버는 파일만 주고 받아서 연산, 컴퓨팅 기능은 존재하지 않음 3) 검색을 통해 OMDb API 서버에 영화 정보 요청 - 사용자가 호스팅 서버에서 영화정보를 가져오는 게 아니라, 따로 호스팅 서버를 통해서 받은 JS 코드를 통해 OMDb API 서버에 직접 요청 4) OMDb API에서 json 응답 -> 문제 발생!!! - OMDb API가 자신이 가지고 있는 DB에서 영화 정보를 추려서 다시 사용자에게 우리가 볼 수 있는 JSON 포맷으로 응답 문제 발생 과정 1) 호스팅 서버의 index.html 파일 전달 - Vercel, Netlify와 같은 호스팅 서버에..

상태관리 (스토어) 상태 관리 : 데이터(상태)를 통신할 수 있는 관리 개념 상태 관리 패턴 : 상태를 관리 스토어 : 상태가 저장된 공간 CORE.JS // 컴포넌트, 라우터, 스토어(컴포넌트와 컴포넌트의 데이터 통신 기능) 기능 포함 /* =========== Component ============ */ // tagName을 받거나, el 속성에 요소를 메모리 상에만 하나 추가하고, // 사용되는 부분에서 정의되는 render 함수 부분을 실행 export class Component { // payload : App.js에서 요소 생성에서 필요한 태그 인수인데, 객체 데이터를 payload에 저장 constructor(payload = {}) { // 객체 구조 분해 할당 // payload 객체..

해시 라우터 관리 HTML MAIN.CSS body { height: 3000px; } header { position: fixed; top: 0; width: 100%; background-color: rgba(255,255,255,.5); } CORE.JS // 컴포넌트, 라우터, 스토어(컴포넌트와 컴포넌트의 데이터 통신 기능) 기능 포함 /* =========== Component ============ */ // tagName을 받거나, el 속성에 요소를 메모리 상에만 하나 추가하고, // 사용되는 부분에서 정의되는 render 함수 부분을 실행 export class Component { // payload : App.js에서 요소 생성에서 필요한 태그 인수인데, 객체 데이터를 payload에..

1. 컴포넌트 생성 및 클래스 작성 - 컴포넌트 : 재사용 가능한 각각의 독립된 기능의 모듈(화면에 보여지는 각각의 UI 단위) EX) HEADER, 제목, 설명 부분, INPUT 요소+검색 버튼, 영화 정보 카드 부분(사진, 연도 포함) HTML MAIN.JS import App from './App.js' const root = document.querySelector('#root') root.append(new App().el) APP.JS // export default class App { // constructor() { // this.el = document.createElement('div') // this.el.textContent = 'Hello, world!' // } // } imp..

1. 정규식 생성 // 정규표현식 (RegExp, Regular Expression) // - 문자 검색 // - 문자 대체 // - 문자 추출 // 생성자 // new RegExp('표현', '옵션(플래그)') // new RegExp('[a-z]', 'gi') const str = ` 010-22134-125 test@gmail.com hello world! https://test.com/?tset=123 the test is test hello@naver http://234:234 동해물과 asdfsaew ` // const regexp = new RegExp('the', 'gi') // // match() : 문자 데이터에서 정규식을 기준으로 특정한 문자를 매칭 // console.log(str...