일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 14658
- queryset
- QuerySetAPI
- Javascript
- SSAFYcial
- 머신러닝종류
- SSAFY
- 싸피10기
- 백준
- git
- 리액트
- 데코레이터
- db
- SQL
- 알고리즘
- 플로이드워셜
- sqld
- PWA
- pwa적용하기
- react
- unionfind
- VITE
- js
- 싸피
- Django
- TypeScript
- 셀프넘버
- Python
- vitepwa
- 싸피셜
- Today
- Total
목록FrontEnd (64)
Meme's IT
# 동기(Synchronous) 프로그램의 실행 흐름이 순차적으로 진행 즉, 하나의 작업이 완료된 후에 다음 작업이 실행되는 방식 # 비동기(Asynchronous) 프로그램의 실행 흐름이 순차적이지 않으며, 작업이 완료되기를 기다리지 않고 다음 작업이 실행되는 방식 → 작업 완료 여부를 신경 쓰지 않고, 동시에 다른 작업들을 수행할 수 있음 기다려주지 않는 것일 뿐, 앞에 일을 안하는게 아님! 비동기의 특징 병렬적 수행 당장 처리를 완료할 수 없고 시간이 필요한 작업들은 별도로 요청을 보낸 뒤, 응답이 빨리 오는 작업부터 처리 JavaScript는 Single Thread언어 → 한번에 한개밖에 못 함, 그럼 어떻게 여러개를 한번에 할 수 있나? # JavaScript Runtime JavaScript..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/q0IwD/btszrJ3SzTV/Rw5hOAJu7He8PVFKnzIBc0/img.png)
# 웹에서의 이벤트란? 무언가 일어났다는 신호, 사건 버튼을 클릭했을 때 팝업 창이 출력되는 것 마우스 커서에 위치에 따라 드래그하는 것 웹은 이벤트를 통해 특정 동작을 수행 모든 DOM 요소는 이벤트를 만들어 냄 event object DOM에서 이벤트가 발생했을 때 생성되는 객체 종류 매우 많음 → mdn 찾아서 쓰기 더보기 https://developer.mozilla.org/ko/docs/Web/API/Event DOM요소는 event를 받고, event handler를 이용해서 event를 처리한다. # event handler 이벤트가 발생했을 때 실행되는 함수 .addEventListenr() :대표적인 이벤트 핸들러 EventTartget.addEventListener(type, handl..
JS는 우선 원시 타입빼고는 다 얕은 복사 # 얕은 복사 1. 함수로 사용할 때 function fun(arr) { arr[5] = 10 arr[0] = 0 } let arr = [1, 2, 3] fun(arr) console.log(arr) // [0, 2, 3, 비어 있음 × 2, 10] 2. 그냥 복사하기 let numbers = [1, 2, 3] let newNumbers = numbers// 얕은 복사 newNumbers[0] = 10 console.log(numbers)// [10, 2, 3] console.log(newNumbers)// [10, 2, 3] 주소를 참고해 오기 때문에 다 얕은 복사가 된다 그렇다면.. 깊은 복사는 어떻게 하지? # 깊은 복사 1. 배열 스프레드 연산자를 사용해..
'this' keyword 함수나 메서드를 호출한 객체를 가리키는 키워드 함수 내에서 객체의 속성 및 메서드에 접근하기 위해 사용 파이썬의 self (인스턴스 자기자신)와 비슷함 const user = { name: 'Yongbok', geeting: fun () { return `hello, ${this.name}` } } // 호출 console.log(user.greeting())// hello, Yonngbok 근데.. JavaScript에서 this는 함수를 호출하는 위치에 따라 가리키는 대상이 다름 → 호출될 때 결정됨(동적 할당) 단순 호출: 전역 객체 // 전역 객체 const myFun = function () { return this } console.log(myFun())// wind..
# 스코프? 함수, 변수에 접근할 수 있는 범위 외부에서는 접근 불가능한 범위 스코프의 종류로는 전역, 로컬(블록, 함수) let scope1 = 10 { console.log(scope1)// 10, 위에서 찾아옴 } let scope1 = 10 { console.log(scope1)// 오류남 let scope1 = 20 } 왜 오류..? → 자신의 스코프 안에서 먼저 찾는데, 밑에서 선언을 하니까 오류부터 남 # 블록 스코프? if, for, 함수 등의 중괄호 내부를 가리킴 블록 스코프를 가지는 변수는 바깥에서는 접근 불가능 let x = 1 if (x == 1) { let x = 2 console.log(x) // 2 } console.log(x) // 1 지역 변수가 없다면 상위로 가서 찾음 l..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/VoXFJ/btszbMt2MEv/TuPo59uH8HWqS3c8he6AEK/img.png)
# 배열이란? Object 중에서 순서가 있는 collection 순서가 있는 데이터 집합을 저장하는 자료구조 서로 관련있는 데이터들을 하나의 변수에 할당 대괄호를 이용해 작성 배열 요소 자료형: 제약 없음 length 속성을 사용해서 몇개가 있는지 알 수 있음 음수 인덱스는 없음 → 마지막 요소는 length - 1 인덱스 사용 JS에서는 명시적 타입이 없기때문에 여러자료형을 가질 수 있음 많은 method들이 내장되어있음 # 배열의 메서드 1. 기본적인 method push / pop: 배열의 끝 요소를 추가 / 제거 + 반환 unshift / shift: 배열의 앞 요소를 추가 / 제거 + 반환 join: 파이썬에서의 join과 비슷한 역할, array의 요소들을 구분자로 이어줌 const arr1..
# JSON = JavaScript Object Notation Key-Value 형태로 이루어진 자료 표기법 형식이 있는 문자열임 → Object로 변경해야 함 Object → JSON는 JSON.stringify(json) JSON → Object는 JSON.parse(obj) # JavaScript의 this 함수를 하나만 만들어서 여러 객체에서 재사용할 수 있다는 장점이 있지만 실수가 빈번하므로 동작 방식을 이애하고, 실수를 피하는 것에 집중해서 사용해야 한다.
# Object 키로 구분된 데이터 집합을 저장하는 자료형 (객체지향 프로그래밍에서 쓰는 객체와는 다름) 객체의 구조 중괄호를 이용해 작성 중괄호 안에는 key: value 쌍으로 구성된 속성을 여러개 작성 가능 key는 문자형만 value는 모든 자료형 가능 const user = { name: 'Yongbok', 'key' : true, geeting: fun () {// 함수도 가능 return 'hello' } } 속성 참조 점이나 대괄호로 객체 요소 접근 key 이름에 띄어쓰기 같은 구분자가 있다면 대괄호만 가능 // 조회 console.log(user.name)// Youngbok console.log(user['key'])// true // 추가 user.type = 'cute' // 수정 ..