✍ 공부

[ 모던 자바스크립트 Deep Dive ] 동등/일치 비교 연산자

1. 비교 연산자 비교 연산자는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다. 2. 동등/일치 비교 연산자 동등 비교 연산자(loose equality)와 일치 비교(strict equality)연산자는 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환한다. 그러나 둘은 비교 엄격성의 정도가 다르다. 동등 비교 연산자 : 느슨한 비교 일치 비교 연산자 : 엄격한 비교 비교 연산자 의미 사례 설명 부수 효과 == 동등 비교 x == y x와 y의 값이 같음 x === 일치 비교 x === y x와 y의 값과 타입이 같음 x != 부동등 비교 x != y x와 y의 값이 다름 x !== 불일치 비교 x !== y x와 y의 값과 타입이 다름 x 동등 비교 연..

[ 모던 자바스크립트 Deep Dive ] 변수와 값의 재할당

0. 용어 정리 런타임 : 소스코드가 순차적으로 실행되는 시점 호이스팅 : 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 특징 재할당 : 이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는 것 가비지 콜렉터 : 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제하는 기능. 더 이상 사용되지 않는 메모리란, 어떤 식별자도 참조하지 않는 메모리 공간을 의미. 자바스크립트는 가비지 콜렉터를 내장하고 있는 매니지드 언어로서 가비지 콜렉터를 통해 메모리 누수(memeory leak)을 방지한다. 매니지드 언어 : 메모리의 할당 및 해제를 위한 메모리 관리 기능을 언어 자체가 담당한다. 개발자의 직접적인 메모리 제어가 불허된다. 개 언매니지..

[ 모던 자바스크립트 Deep Dive ] 들어가며

모던 자바스크립트 Deep Dive는 진작 사놓고 찔끔찔끔 읽던 책이었다. 약 900쪽이라는 두께가 주는 압박이 생각보다 컸는지 읽기가 너무 어려웠던 책. 두껍고 무겁고, 접근하기 어렵게만 느껴지는 책은 후루룩 읽는 것이 좋다는 것을 알고 있다. 처음부터 모든 것을 이해하려 하지 않고, 빠르게 접근하고 눈에 익힌 후 이해를 시작하는 것. 두꺼운 책과 싸우는 내 스킬이다. 딥 다이브도 같은 방식으로 후루룩 읽어내려갔다. 재미있는 부분이나 잘 모르는 부분을 표시해두면서 1회독을 했으니, 이제는 내가 표시해둔 부분을 다시 보면서 블로그에 기록해봐야지! 그래서 기록이 책의 내용처럼 술술 읽히거나 이어지는게 아니라 단편적인 정보들만 담고 있을 수도 있을 것 같다. 예를들어 변수 값의 재 할당에서 일어나는 메모리 ..

CORS에러란? (CORS와 SOP, CORS header)

VUE랑 Django를 함께 사용해보고있는데... 너어어무재밌잖아!?!!?! 별 생각 없이 프론트가 재밌어보여~ 프론트해야지!! 하고 시작했는데 알고보니 웬걸 백엔드도 너무너무 재밌어요ㅎㅎ 여유가 생기면 백엔드도 조금 더 깊게 들어가봐야겠습니당 무엇보다 싸피에서 함께 공부하는 백엔드분이 자신의 전문분야에 대해서 너무 신나게 말씀하시는게 좋아서 더 배워보고 싶어요 서두가 너무 길다..! 0. CORS 에러란? 프론트 : API 줄 수 있니? 백 : ㅇㅇ 기다려봐 여기!! 브라우저 : 둘이 뭐하냐? -- 차단! 간단히 말하면 이런 내용입니다. 브라우저가 요청을 보내고 서버의 응답은 브라우저까지 다시 도착하지만(200) 브라우저가 보안상의 위주로 CORS 에러를 발생시키는 것입니다 CORS에러는 SOP를 기반..

[Vue] Vue의 특징과 기본 구조

🍀 Vue를 쓰는 이유 Vue는 React나 Angular과 마찬가지로 web-app을 만들 때 사용합니다. Vue는 React나 Angular보다 러닝커브가 짧습니다. Angular은 TypeScript가 필수적으로 사용되어야 하고 React는 JavaScript 문법을 기반으로 작동하지만 Vue는 간단한 Vue 문법을 이용해서 상대적으로 쉽게 학습할 수 있다고합니다 특징 Angular의 양방향 데이터 바인딩을 이용합니다 컴포넌트 간 통신은 React처럼 단방향 데이터 흐름을 따릅니다 Angular, React와 비교했을 때 상대적으로 가볍고 빠릅니다(코인 거래소에서 Vue를 선호한다는 이유가 이것 때문일까요?) 0.시작하기 npm npm install --global @vue/cli yarn yarn..

React는 어떻게 동작할까?_리액트가 동작하는 방식

React의 백그라운드 React는 일단 JS의 라이브러리라는 것을 잊지 말아야 한다 React의 핵심은 컴포넌트 => React는 컴포넌트를 통해 사용자 인터페이스를 효과적으로 구성하고 업데이트한다 React DOM? 사실 React는 웹에 관심이 없다. 컴포넌트를 어떻게 다루어야 하는지에 대해서는 알고 있지만 웹에 뭘 어떻게 보여주느냐는 별로 관심이 없음 이건 React DOM이 고려할 것들 React는 가상 DOM을 사용한다. 이 가상 DOM은 컴포넌트 트리를 결정한다. 각각 하위 트리를 갖고 있는 컴포넌트들은 JEX 코드를 반환하는데, 가상 DOM은 컴포넌트 트리의 현재 모양과 최종 모양을 결정한다. => 상태가 업데이트되면 가상 DOM을 통해 상태 변화를 판단. React는 컴포넌트를 관리하고 ..

(JavaScript) 자바스크립트 async / await / promise

0. 동기? 비동기? 자바스크립트에서 쓰는 일반적인 함수는 동기적으로 기능한다. 하지만 가끔은 비동기적으로 써야 할 때가 있다. 동기와 비동기는 어떤 차이가 있을까? 동기 한번에 한 작업만 수행할 수 있다 흐름을 예측하기 쉽다 (호출 순서대로 작동한다) 비동기 동시에 여러 작업을 수행할 수 있다 흐름을 예측하기 어렵다 (무엇이 먼저 완료될 지 보장이 불가능하다) ✍ 비동기 setTimeout의 동작 또한 비동기로 동작한다고 볼 수 있다. 함수를 호출하고, 설정 시간 동안 기다리는 시간은 다른 흐름에 영향을 주지 않기 때문이다 만약 console.log('사과')를 하는 함수의 설정 시간을 3초로 잡고, console.log('옥수수')를 하는 함수의 설정 시간을 1초로 잡은 후 사과를 찍는 함수 호출 옥..

함수형 컴포넌트로 ref 보내기 | forwardRef에 대해 알아보자

과제테스트 중 forwardRef라는 것을 발견하고(시험 내용 아님!! 그냥 코드에 적혀진걸보고 궁금해서 공부함!!) 이게 뭐지..? 하면서 알아보았다 ✍ forwardRef 함수 컴포넌트가 있다. 이 안에 있는 input에 포커스를 맞추기 위해서 우리는 useRef을 종종 사용한다. 하지만 일반적인 input이 아니라, Input Component라면? 이 때도 useRef을 사용해서 포커스를 줄 수 있을까? 정답은 불가능. 함수 컴포넌트는 ref를 받을 수 없다. = props.ref는 사용이 불가능하다. 이유가 뭘까 ❓ => 함수 컴포넌트는 인스턴스가 없기 때문에 => 따라서, forwrdRef가 필요하다 언제? React.forwardRef는 전달받은 ref을 하부 트리 내의 다른 컴포넌트로 전달..