일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Redux
- styled-component
- react
- 웹팩
- socket.io
- sequelize
- docker
- 정규표현식
- 웹크롤링
- 반응형웹
- javascript animation
- AWS
- Recoil
- route
- Modal
- go
- 회고
- graphql
- component
- CDN
- 포트포워딩
- npx
- cicd
- scrapping
- 성능최적화
- typescript
- express
- Today
- Total
목록Web/[JS] Common (47)
프로그래밍 공부하기

JavaScript 코드의 성능에 대해 웹 서핑을 하던 중 Hidden Class라는 개념을 알게되었다. 1. Dynamic Typing JavaScript의 특징 중 하나는 동적 타이핑 언어라는 점이다. 변수를 선언할 때 다른 언어에서 int, char 등의 타입을 함께 지정해주는 것과 달리 Javascript는 특정한 타입을 지정해주지 않는다. 또한 JavaScript는 객체의 속성을 코드 중간에 추가하거나 삭제하여 객체의 속성을 동적으로 변경할 수 있다. 이러한 특징은 코드를 작성할 때 프로그래머를 자유롭게(?) 해주지만 코드 실행 시에는 성능이 감소되는 단점이 있다. 정적 타이핑 언어의 객체의 경우 객체의 속성과 속성 값의 저장 위치가 코드 실행 전에 지정이 되므로 객체의 속성에 접근할 때 미리 ..

1. Boolean 값 논리연산자는 보통 Boolean 값(True/False)과 함께 쓰이며 그 결과는 다음과 같다. 2. 그 외의 값 Boolean값이 아닌 다른 값이 Input으로 들어오면 결과는 어떻게 될까? 사실 ||와 &&는 피연산자 중 하나의 값을 반환하는 연산자이므로 Boolean 타입이 아닌 다른 값이 반환될 수 있다. 2-1. OR OR의 경우 a || b 연산을 하였을 때 a가 true로 변환할 수 있으면 a를 반환, 그렇지 않으면 b를 반환한다. console.log(-1 || 1) //-1 console.log(1 || -1) //1 console.log(0 || 1) //1 console.log(-1 || 0) //-1 위 예시에서 -1과 1은 truthy한 값이고, 0은 fal..
1. filter filter는 말 그대로 배열의 요소들을 걸러주는 역할을 한다. filter의 경우 내부함수의 인자로 사용 방법은 다음과 같다. arr = [10, 11, 12, 13, 14]; arr.filter(function(element){ return element > 12; //값이 12초과인 요소만 }); //[13, 14] arr.filter(function(element, index){ return index % 2 === 0; //index가 짝수인 요소만 }); //[10, 12, 14] arr.filter(function(...params){ return params[2][2] > params[0]; //arr[2]보다 작은 값인 요소만 }); //[10, 11] filter의 인..
호이스팅은 Javascript의 특징으로 함수선언 혹은 변수선언을 위로 끌어올린다는 의미이다. 즉, 코드가 내 의도와 다르게 실행될 수 있다는 의미이므로 호이스팅이 되는 코드를 작성하는 것은 지양해야 한다. 1. 변수 호이스팅 function foo() { console.log(a); // undefined var a = 100; console.log(a); // 100 } foo(); 위의 코드에서 변수 a는 첫 번째 콘솔로그 출력 때 선언되어있지 않으므로 오류가 나야한다. 그러나 호이스팅으로 인해 console.log(a) 위에 var a; 라는 변수 선언문이 있는 것처럼 실행이 되어 결과는 undefined가 나온다. function foo2() { console.log(a); // Referenc..
할당과 얕은 복사, 깊은 복사는 헷갈리는 개념이므로 한 번 정리해본다. 1. Assignment vs Copy 할당과 복사의 차이는 무엇일까. 처음에는 reference type을 할당하면 얕은 복사가 된다고 생각했었다. reference를 참조하게 되었기 때문이다. 하지만 엄밀히 말해서 이는 다른 의미이다. let originObj = { pro1: 'AA', pro2: 'BB', pro3: ['C', 'CC', 'CCC'], pro4: { 'D': 'E', 'DD': 'EE' }, }; let assignObj = originObj; let copiedObj = Object.assign({}, originObj); //얕은 복사 위 코드처럼 originObj, assiginObj, copied Obj..
오늘 레슨에서 Closure라는 개념을 새로 배웠다. Java, C#에도 클로저라는 개념이 있었지만 써본 적이 없어서 한 번 정리해보려 한다. Closure란 함수와 함수가 선언된 어휘적 환경의 조합이다. 이해하기 쉽게 말하자면 내부함수에서 외부함수의 문맥에 접근할 수 있는 것. 그러한 내부함수를 클로저 함수라 부른다. Scope Chaining에 의해 외부함수의 문맥에 접근하기 때문에 어휘적 환경의 조합이라 부른다. (스코프는 선언할 때 발생하기 때문이다.) [예시1] function OuterFn() { let num = 123; console.log("num(outer)>>" + num); function InnerFn() { num++; console.log("num+1(inner)>>" + nu..
Javascript문서를 보다보면 ...arg라는 표현이 있다. 이 것이 무엇을 의미하는지 정리해본다. ...arg라는 표현이 나오면 2가지 경우로 나누어 해석해야 한다. 1. Rest Parameter 파라미터로 넘어오는 것들을 배열로 묶는다. value1, value2... -> 배열 function printArgs(...args) { console.log(args[1]) // -> 30출력 } printArgs(10, 30, 40) 2. Spread syntax 배열 값을 펼친다. 배열 -> value1, value2... function printArgsPlus(x,y){ console.log(x+y) // -> 7출력 } let arr = [3,4]; printArgsPlus(...arr)