TIL (15) 썸네일형 리스트형 JavaScript의 이벤트 루프란? 흔히 자바스크립트를 배우다 보면 비동기 함수를 배울 때 처음 듣게 되는 자바스크립트의 이벤트 루프. 이번엔 이벤트 루프가 뭔지 설명해보려고 한다. 난 하나씩 처리하지 자바스크립트는 싱글 스레드 언어이다. 스레드? 나는 컴퓨터 조립을 몇 번 하면서 CPU를 구매할 때 처음 알게된 단어이다. 지금 검색창에 cpu를 쳐서 아무 cpu나 들어가 보길 바란다. 가보면 스레드 표시를 볼 수 있다. 스레드는 쉽게 말해 일꾼이다. 일을 처리할 수 있는 일꾼의 수라고 생각하면 된다. 그 말은 일을 처리할 일꾼이 많으면 많을 수록 한 번에 많은 양의 일을 처리 할 수 있다는 뜻이다. 자바스크립트는 싱글 스레드라고? 그럼 한 번에 한 개만 가능하다는 것인가? 그렇다. 왜 그렇게 만들어졌을까? 자바스크립트는 웹 페이지에서 보.. 리액트 hook처럼 생긴 상태 관리 라이브러리 recoil 사용하기 왜 recoil 을 썼는가? 간단하게 다양한 상태를 관리하고 싶었다. 예전 프로젝트에서 props drilling이 일어나는 것을 보면서 상태 관리를 해야 겠다는 필요성을 느꼈지만 내 프로젝트에 빨리 도입 해 볼 수 있는 기술을 찾다가 recoil을 도입하게 되었다. https://recoiljs.org/ko/docs/introduction/getting-started Recoil 시작하기 | Recoil React 애플리케이션 생성하기 recoiljs.org 공식 recoil 튜토리얼 페이지에 들어갔을때 너무 놀랐다. 배워야 할 양이 너무 적었기 때문이다. 그리고 모양 조차 함수형 컴포넌트에 익숙한 나에게 hook처럼 보였기 때문에 더 친화적이었다. 그 밖의 이유들 수업 때 들었던 redux는 상대적으.. 이벤트 전파 ( 이벤트 버블링과 이벤트 캡처링 ) 이벤트 객체는 이벤트를 발생시킨 DOM요소를 시작으로 DOM트리를 통해 전파된다. 이때 이벤트가 하위에서 상위로 전파되는 것을 이벤트 버블링. 상위에서 하위 요소 방향으로 전파되는 것을 이벤트 캡처링이라고 한다. 우리는 이런 개념을 통해 공통된 이벤트를 각자 주는 것이 아닌 일종의 위임을 할 수 있는데, 이를 이벤트 위임(event delegation) 이라고 한다. 공통 조상에 하나의 핸들러로 여러 요소를 다룰 수 있는 것이다. 하지만 이것이 매번 필요한 것은 아닐것이다. 그럴 때는 방법이 있다. 이벤트 전파를 막기 위해서는 e.stopPropagation()을 사용하면 된다. function logEvent(event) { event.stopPropagation(); } 이것을 통해 우리는 이벤트 버.. 모던 자바스크립트 Deep Dive 9장 타입 변환과 단축 평가 9.1 타입 변환 명시적 타입 변환 VS 암묵적 타입 변환 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환, 자바스크립트 엔진에 의해 변하는 것을 암묵적 타입 변환이라고 한다. 이때 암묵적 타입 변환은 새로운 타입의 값을 만들어 단 한 번 사용하고 버린다. 타입 변환을 알아야 하는 이유 => 결과를 예측할 수 있어야 오류를 생산할 가능성이 줄이들기 때문에. 항상 명시적 타입 변환이 좋은 것은 아니다. 자바스크립트를 잘 이해하고 있는 개발자는 암묵적 타입 변환이 더 가독성이 좋을 수도 있기 때문이다. 중요한 것은 코드를 예측할 수 있어야 한다는 것! 9. 2 암묵적 타입 변환 9.2.1 문자열 타입으로 변환 - 자바스크립트 엔진은 문자열 연결 연산자 표현식을 평가하기 위해 피연산자 중에서 .. 모던 자바스크립트 Deep Dive 8장 제어문 제어문 ( 조건문 , 반복문 ) 의 단점 코드의 흐름을 이해하기 어렵게 만들어 가독성을 해치는 단점이 있다. => 처음 안 사실. 가독성이 좋지 않은 코드는 오류를 발생시키는 원인이 됨. = > forEach , map , filteh , reduce 같은 고차 함수를 사용한 함수형 프로그래밍 기법에서는 복잡성을 해결하려고 노력한다고 함. 조건문 if문의 조건식은 불리언 값으로 평가되어야 한다. 따라서 불리언 값이 아닌 값으로 평가되면 자바스크립트 엔진에 의해 암묵적으로 강제 변환되어 평가된다. 이를 암묵적 타입 변환이라고 함. if ... else 문과 삼항 조건 연산자 - 조건에 따라 단순히 값을 결정해 변수에 할당하는 경우 삼항 조건 연산자가 가독성이 좋다. - 나는 삼항으로 쓸 수 있으면 그렇게 .. Sass란 무엇이고 왜 쓰는가? 간단하게만 알아보자! Sass = Syntatically Awesome Style SheetsS Sass? 나는 styled component 같은 css in js 들은 코디너리에서 많이 봐서 들어봤는데 사실 Sass는 생소했다 쉽게 말하면 Sass는 CSS 전처리기! 그랬다 난 전처리기가 뭔지 몰랐다. ㅎ 전처리기(Preprocessor): 컴퓨터의 처리에 있어서 중심적인 처리를 수행하는 부분을 위해 사전 준비적인 계산을 행하는 프로그램입니다. 그래서 더 쉽게 말하자면 Scss는 css 수행 전 사전 준비 계산을 하는 프로그램! 그럼 뭐가 좋은건데? - 변수, 네이스팅, 믹스인, 가져오기, 상속, 내장기능 등 css에는 없는 편의 기능들 => 시간을 절약 - 코드 재사용이 가능 보다시피 전처리기 중 Sass의 순위는 꽤 .. CSR(Client Side Rendering)과 SSR(Server Side Rendering) 공부 일지 CSR와 SSR을 알려면 먼저 SPA (Single Page Application) 와 MPA (Multiple Page Application)를 알아야 한다. ( 난 두개씩 영어라서 같은 건줄..) SPA와 MPA SPA (Single Page Application) 하나( 싱글 ! ) 의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식의 웹 어플리케이션이다. MPA (Multiple Page Application) 사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션이다. 전통적인 방식을 이용한다면, SPA가 사용하는 렌더링 방식은 CSR이고, MPA가 사용하는 렌더링 방식은 SSR이다. 각 .. 함수 표현식 vs 함수 선언문 난 함수를 선언문 먼저 배웠기 때문에 선언문이 편해서 그냥 다 선언문으로 코드를 작성하곤 했다. 오늘 모던 JS 튜토리얼로 공부하는데 그게 굉..장히 잘못된 방법이란걸 알게됐다...너무 충격 방법이 잘 못됐다고 말해도 되나? 여튼... 내가 몰랐던 차이들이 있었다. 좀 창피 ㅠ 둘의 차이는 여러 가지가 있다. 내가 오늘 배운건 3가지! 차이 1. 문법 함수 선언문: 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재합니다. // 함수 선언문 function sum(a, b) { return a + b; } 함수 표현식: 함수는 표현식이나 구문 구성(syntax construct) 내부에 생성됩니다. 아래 예시에선 함수가 할당 연산자 =를 이용해 만든 “할당 표현식” 우측에 생성되었습니다. // 함수.. 이전 1 2 다음
