이벤트 루프를 알아보기 전에 동기 처리 방식과 비동기 처리 방식에 대해서 알아보도록 하겠습니다.동기 처리 방식은 태스크를 순서대로 하나씩 처리 하는 방식 입니다.순서가 보장되는 장점을 가지고 있습니다. 하지만 현재 실행 중인 태스크가 종료되기 전까지는 다음 태스크는 대

개발을 하면서 응? 문제가 생겼습니다.그 문제는 input 태그로 입력받은 텍스트가 한글일때는 텍스트가 포함되어 있는 태그의 width 보다 길때 자동으로 줄바꿈이 되는데 영어는 줄바꿈이 되지 않고 텍스트가 포함되어 있는 태그의 width 보다 넘쳐서 삐져나오는 것 입

회원가입 페이지를 개발중에 아이디 중복확인, 닉네임 중복확인 버튼을 만들어 두 버튼을 클릭해서 중복확인 과정을 진행 해 중복되지 않아야만 회원가입 진행이 되는 회원가입 페이지를 만들었는데 form 태그 안에 중복확인 버튼이 있어 중복확인 버튼을 클릭하면 form 태그의

이미지 요소도 브라우저 화면의 크기에 따라서 변경 될 수 있습니다. 이미지 요소에도 em, rem, vw , %, px 등을 모두 적용할 수 있습니다. 브라우저에서는 이미지의 width 만 지정해주면 원본 이미지의 비율에 맞게 height 를 자동으로 결정해서 화면에

요번에는 redux 를 react 에서 사용해볼려고 합니다.먼저 를 통해서 redux, redux-react 라이브러리를 설치 해줍니다.react-redux 에서는 상태 값을 바로 접근 할 수 있는 hooks 를 제공 합니다.기존의 redux 에서는 스토어의 상태를 가

리덕스는 애플리케이션의 상태를 관리할 때 도움을 주는 라이브러리 입니다.보통 리액트와 같이 많이 사용하는데 리덕스는 리덕스 자체로 독립적이기 때문에 자바스크립트를 사용하는 모든 곳에서 리덕스를 사용 할 수 있습니다.이번 글에서는 redux 자체만 다뤄보겠습니다.먼저를

처음 개발을 배울 때 강의를 통해서 배우다보면 npm 명령어를 이용해서 뭐 이것저것 다운을 받아 보셨을 겁니다.근데 확실하게 알고 npm 명령어를 사용하셨나요? 일단 저는 아니었습니다. 그래서 npm 에 대해서 알아 보았습니다.npm 은 node package mana

애플리케이션을 구성하는 각각의 요소로서 재사용 가능한 코드 조각을 모듈 이라고 합니다.모듈은 기능을 기준으로 분리하여 각각의 파일에 작성 합니다.이때 모듈은 모듈 자신만의 파일(모듈) 스코프를 가져야 하고 모듈의 자산(모듈 내에 구성되어 있는 모든 코드) 은 다른 모듈

미디어 타입을 인식하고 콘텐츠를 읽는 기기나 브라우저의 물리적 속성을 감지하는 기능 입니다.미디어 쿼리는 미디어 타입, 조건에 대한 물음 두 가지 구성 요소를 가지고 있습니다.가장 많이 사용되는 미디어 타입과 조건에대한 물음 (쿼리) 은미디어 타입은 screen(화면)

레이아웃도 글꼴과 같이 브라우저의 화면 크기가 변하면 레이아웃의 크기도 비례하여 변경되어야 합니다.레이아웃이 변경되면 각각의 위치하고 있는 요소들의 크기도 변경되고 해당 요소의 자식 요소들도 비례하여 크기가 변경 됩니다. 이렇게 브라우저의 화면 크기에 따라서 레이아웃이

사이드 프로젝트를 만들면서 간단한 node.js express 라이브러리를 이용한 서버를 만들어야 했다. 나는 백엔드 분야 공부를 하지 않았고 node.js 는 더더욱 배워본적이 없기에 유튜브 강의를 보면서 따라하며 서버를 만들었다. 서버를 실행하니 에러를 만나게 되었

부모 컴포넌트의 변화로 자식 컴포넌트에 전달되는 prop 가 변경되지 않았는데 리 렌더링이 된다면 불필요한 렌더링이 발생하는 것 입니다.이것을 해결하기 위해 React 에서 제공하는 React.memo 를 사용 합니다.React.memo 는 React 에서 제공하는 고

여러개의 state 와 또 그 state 의 하위 값을 가지는 복잡한 state 를 관리해야 할 때 useReducer 를 사용하면 좀 더 효과적으로 state 를 관리 할 수 있고 코드를 깔끔하게 작성 할 수 있습니다.useReducer 을 사용하기에 앞서 Reduc

useCallback 은 useMemo 와 비슷하게도 memoization 합니다.useMemo 는 반환 값을 기억한다면 useCallback 은 콜백함수를 기억 합니다. useCallback 은 두개의 인자를 받습니다.첫번째 인자로는 memoiztion 해줄 콜백 함

프로토타입을 우리가 원하는대로 다른 객체로 변경 할 수 있습니다.아래의 코드를 확인 해 봅시다.위와 같이 SoccerPlayer 생성자 함수의 prototype 프로퍼티가 가리키는 프로토타입을 객체 리터럴로 변경하면 생성자 함수가 생성한 객체의 프로토타입은 해당 객체

오버라이딩이란? 자식이 부모가 가지고 있는 프로퍼티 또는 메서드를 재정의 해서 사용하는 것을 말합니다.아래의 코드를 봅시다.위와 같이 SoccerPlayer 생성자 함수로 tom 이라는 객체를 생성 하였습니다.tom 이 다른 팀으로 이적하고 싶다고 말한다고 가정 해 봅

Memoization ?자주 사용하는 값을 처음 코드가 실행될때 계산하고 그 값을 캐싱해 두었다가 필요할때마다 다시 계산하지 않고 캐싱해둔 값을 꺼내서 사용하는 기법을 말합니다.함수형 컴포넌트는 함수이기 때문에 렌더링이 될 때마다 함수형 컴포넌트를 다시 호출하고 컴포넌

자바스크리브는 객체의 프로퍼티, 메서드에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 있는지 검색 합니다. 만약 없다면 \[Prototype] 내부 슬롯에 할당되어 있는 프로토타입 객체의 프로퍼티를 순차적으로 검색합니다. 만약 여기에도 없다면 Object.pro

어떤 자바스크립트 강의에서든 항상 등장하는 프로토타입에 대해서 알아보겠습니다.그만큼 자바스크립트에서 중요한 개념이라는 뜻 이겠죠?프로토타입에 대해서 알아보기 전에 자바스크립트는 어떤 언어이며 객체란 무엇인지 간단하게 알아보도록 하겠습니다!자바스크립트는 다른 언어들과는

위와 같이 App 컴포넌트에서 데이터를 컴포넌트에게 전달 해줄려면 prop 으로 하위 컴포넌트를 따라 전달해 줘야 합니다. 이것을 prop drilling 이라고 합니다.보기만해도 피곤하고 깜빡하고 prop 를 엉뚱한 컴포넌트에게 전달하거나 전달해주는것을 깜빡할것만 같