posts

이벤트 전파로 인해 외부영역이 아닌 팝업창을 클릭해도 팝업창이 닫히는 문제가 발생했다. stopPropagation() 을 사용하려고 했지만 각 자식엘리먼트에서 따로 막아줘야 하는 것 같아 다른 방법을 사용했다.

캡슐화는 관련된 여러가지 정보를 하나의 틀안에 담는 것을 말하는데, 중요한 것은 정보의 공개여부이다. C 언어나 Java 에서는 public, private 등을 선언 함으로써 정보 노출 여부를 결정하는데 자바스크립트에서는 지원하지 않는다.

이번에는 클래스 기반의 상속을 확인해보자. 이전의 프로토타입을 이용한 상속과 비슷하지만 객체 리터럴 방식이 아닌 클래스 역할을 하는 함수를 만들어 상속을 구현한다.

자바스크립트의 프로토타입 체인을 이용해 상속을 구현할 수 있는데, 클래스 기반의 상속 방식을 흉내내는 방법과 클래스 개념 없이 프로토타입으로 상속을 구현하는 방법이 있다. 이를 프로토타입을 이용한 상속이라 하는데 객체 리터럴을 중심으로 상속을 구현해 낸다.

예전에 공부했던 객체지향 프로그래밍의 여러 특성 - 클래스, 생성자, 메서드, 상속, 캡슐화 등을 자바스크립트로 구현하는 방법을 공부해 보자.

클로저는 앞서 말했듯이 너무 남발하여 사용하면 안된다. 아래는 클로저를 사용할 때 주의해야 할 점들이다.

클로저를 활용할 때 주의점은 성능, 자원적인 면에서 약간 손해를 볼 수 도 있다는것이다. 클로저 활용에 있어서는 경험이 가장 중요하다 하니 계속 만들어 보는 수 밖에 없을 것 같다.

클로저란 쉽게 말하면 ‘이미 생명 주기가 끝난 외부함수의 변수를 참조하는 함수’ 를 클로저라고 한다.

실행 컨택스트

자바스크립트는 C 나 자바의 객체지향 언어와는 다른 프로토타입 기반의 객체지향을 지원한다. 자바 등의 객체지향 프로그래밍에서는 클래스를 정의 후 객체를 생성하지만 자바스크립트는 객체 리터럴이나 생성자 함수로 객체를 생성한다. 이때 생성된 객체의 부모객체가 프로토타입 객체이다. es6 에서 클래스 개념이 추가되긴 했지만 그래도 프로토타입 기반 언어라는 것은 바뀌지 않는다.

자바스크립트 this 바인딩을 다시 보려고 한다.

함수는 어떤 작업을 수행하기 위해 필요한 문들의 집합을 정의한 코드블록이다.

자바스크립트에서 제공하는 타입은 이전에 공부한 객체 타입과 원시 타입으로 나누어진다.

자바스크립트는 객체(object) 기반 언어이다. 함수, 배열, 정규식 등 원시타입을 제외한 나머지 값들은 모두 객체이다. 객체는 키(key) 와 값(value) 로 구성된 프로퍼티의 집합인데 프로티의 값으로는 자바스크립트에서 사용 가능한 모든 값을 사용할 수 있다.

자바스크립트 또한 다른 언어와 마찬가지로 모든 값에 타입이 있는데 이는 개발자에 의해 의도적으로 변환하거나 자바스크립트 엔진에 의해 암묵적으로 변환이 가능하다.

표현식

변수는 값을 저장하고 참조하기 위해 사용한다. 변수에는 값 자체가 아닌 값의 위치가 저장되는데 이때 위치란 값이 위치하고 있는 메모리상의 주소를 뜻한다.

브라우저에서 이벤트를 감지하는 방식은 두 가지 방식으로 구분되는데 버블링( bubbling )과 캡쳐링( capturing ) 이다.

클라이언트에서 서버로 요청시, 보내는 데이터를 HTTP 패킷이라고 한다. HTTP 패킷은 크게 헤더와 바디로 이루어져있는데, 헤더에는 클라이언트 정보등이 들어있고 바디는 비어있다. 이때 바디에도 특정 데이터를 담아 서버에 요청이 가능하다.

자바스크립트에서 함수를 호출할 때 arguments 객체와 this 가 함수 내부에 전달된다. 이때 this 바인딩 ( this 가 가리키는 값 ) 은 함수 호출방식에 의해 동적으로 결정된다.

프로그래밍 언어를 공부하다보면 객체지향 프로그래밍이라는 말이 많이 나온다. 나도 항상 봐오기는 했는데 아직도 이런 느낌인가 정도만 알고 있다.

call, bind, apply 는 javascript 함수의 기본 메소드 중 하나이다. 보통 함수를 호출할 때는 함수 뒤에 괄호 ()를 붙이거나 call, apply, bind 를 붙이는 방법이 있는데 먼저 call 과 apply 를 확인해보자.

호이스팅이 어떤 건지는 알겠는데 정리해서 말하려니 잘 안되 정리해보려고 한다.

브라우저 아래와 같은 구조로 구성되어있다.

HTTP(HyperText Trasfer Protocol) 는 이름과 같이 인터넷에서 하이퍼텍스트를 전송하기 위해 사용되는 통신 규약이다. HTTP 서버는 80번 포트에서 서비스를 대기 하며 클라이언트에서 TCP(전송제어 프로토콜)80번 포트를 연결하면 서버는 요청에 응답하며 정보를 전송한다. 이때 정보를 택스트로 보내는데 이 때문에 데이터 유출에 있어 취약하다.(크롬으로 HTTP 에 접속하면 주의 요함 표시가 뜬다.)

이전에 작성했던 saga 를 조금 더 쉽게 사용하기 위해 유틸함수를 만들어보자.

saga 사용을 위해 먼저 설치해준다.

이번에는 조금 더 깔끔하게 리팩토링을 해보자.

이전 포스트에 이어서 컴포넌트를 만든다.

깃 api 를 통해 특정 사용자의 정보를 받아오는 작업을 typescript 로 해보려고 한다.

자바스크립트에서 오늘 날짜를 불러오기 위해서 new Date() 를 사용한다.

이전에 작성했던 counter.ts 와 todos.ts 는 모두 한파일에 작성 되있는데 지금은 상관 없지만 후에 액션 타입등이 늘어나게 되면 관리하기가 매우 버거워진다고 한다.

typesafe-actions 는 리덕스를 사용한 프로젝트에서 액션 생성 함수와 리듀서를 더욱 쉽고 깔끔하게 작성 할 수 있도록 도와주는 라이브러리이다.

문제 설명

문제 설명

문제 설명

javascript 로 만드는 ToDoList 와 크게 다른 점은 없다.

문제 설명

문제 설명

문제 설명

문제 설명

padStart() 는 문자열의 시작부분을 기준으로 원하는 문자열의 길이만큼 문자열을 채워넣어준다. 첫번째 파라미터로 원하는 길이를, 두번째 파라미터로 원하는 문자열을 넣어주면 된다.

문제 설명

문제 설명

문제 설명

문제 설명

문제 설명

프로젝트를 해보면서 Context, redux 등이 아직 모자라 복습의 필요성을 느꼇다. 먼저 정적인 상태에서 사용법을 다시 한번 익혀보자.

문제 설명

문제 설명

문제 설명

문제 설명

문제 설명

문제 설명

문제 설명

문제 설명

include 메서드는 배열이 특정요소를 가지고 있는지 판별하는데 boolean 값을 리턴한다.

문제 설명

알고리즘 문제를 풀다가 알게된 메서드인데 기억해두려고 다시 한번 정리한다.

문제 설명

문제 설명

문제 설명

문제 설명

라이브러리에서 타입스크립트를 자체적으로 지원하는지, 아니면 따로 무언가를 설치해줘야 하는지 알아보려면 node_modules -> 설치한 라이브러리 -> src 안에 index.d.ts 라는 파일이 있는지 확인해 보면 된다.

문제 설명

TypeScript 로 상태관리를 하는 법을 알아보기 위해 Counter 를 만들어 보자.

useState 를 사용했던 걸 useReducer 로 바꿔보자.

타입스크립트에서 ContextAPI 를 사용해보자. ContextAPI 를 사용할 때도 Context 안에서 관리할 값을 위한 타입을 설정해줘야 한다.

문제 설명

리액트에서 타입스크립트를 사용하기 위해서는 처음 리액트 앱을 만들때 하나의 명령어를 추가해줘야한다.

문제 설명

타입스크립트를 연습해보자.

interface

Genrtics 는 타입스크립트에서 함수, 클래스, TypeAlias, interface 를 사용할 때 여러 종류의 타입에 호환을 맞춰야 할 때 사용하는 문법이다.

문제 설명

먼저 타입스크립트를 사용하기 위해 전역으로 설치를 해줘야 한다.

문제 설명

thunk 를 사용해 비동기 작업을 할 때 특정 파라미터가 필요하다면 thunk 를 생성하는 함수에서 파라미터로 받아와 사용했다.

history 사용

문제 설명

문제 설명

redux-saga 는 redux-thunk 다음으로 많이 사용되는 라이브러리이다.

비동기 카운터 구현

이전에 만들었던 post 리덕스 모듈에서는 아래와 같은 방식으로 사용하고 있었다.

json-server

먼저 만들어 놓은 것들을 modules/index.js 의 rootReducer 에 적용해주자.

먼저 만들어 놓은 것들을 modules/index.js 의 rootReducer 에 적용해주자.

먼저 리덕스 연습을 위해 프로젝트를 만들고 틀을 만들었다.

redux-thunk 는 액션 객체가 아닌 함수를 디스패치 할 수 있도록 도와준다.

먼저 api 를 가짜로 만들어 받아와서 연습을 해보려고 파일을 하나 작성했다.

문제 설명

대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 ‘p’의 개수와 ‘y’의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. ‘p’, ‘y’ 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다.

기본적으로, useSelector 를 사용해서 리덕스 스토어의 상태를 조회 할 땐 상태가 바뀌지 않았다면 리렌더링 하지 않는다.

리덕스 기본 모듈 만들기에서 만든 모듈들을 이용해 여러가지 기능들을 구현해본다.

리덕스 모듈이란 액션 타입, 액션 생성 함수, 리듀서가 모두 들어있는 자바스크립트 파일을 말한다. 세가지다 모두 다른 파일에 작성해도 된다.

리덕스의 기본적인 기능을 연습해보기 위해 먼저 프로젝트를 만든 후 리덕스를 설치했다.

리덕스를 사용할 때 꼭 지켜야할 규칙들이 있다.

리덕스

history 객체

react-router 을 통해 리액트 SPA를 만들 수 있다. 여기서 SPA 란 Single Page Application 의 약자로 페이지가 1개인 어플리케이션을 뜻한다. 나는 이전에 .NET 을 사용했기 때문에 react 를 공부하면서 처음 접해본 개념이었다.

react 로 가계부를 만들어 보던 도중 콘솔창에 아래와 같은 에러가 떳다.

이전에 공부했던 TodoList 를 응용하여 가계부를 만들어봤다.

react-router 을 통해 리액트 SPA를 만들 수 있다. 여기서 SPA 란 Single Page Application 의 약자로 페이지가 1개인 어플리케이션을 뜻한다. 나는 이전에 .NET 을 사용했기 때문에 react 를 공부하면서 처음 접해본 개념이었다.

가끔씩 특정 데이터들을 여러 컴포넌트에서 사용하게 될 때, (예: 현재 로그인된 사용자의 정보, 설정 등) 그럴 때 Context 를 사용하면 개발이 편해진다.

이전에 작성한 UsersContext.js 의 반복되는 코드를 줄여보자.

먼저 API 연동을 위해 axios 를 설치해준다.

공부했던 내용들을 토대로 ToDoList 를 만들어보려고 한다. 먼저 styled-components 랑 react-icons 를 깔자.

Dialog 만들기

자바스크립트 ES6 부터 추가된 ... Spread 연산자는 배열, 문자열, 객체 등 반복 가능한 객체를 개별 요소로 분리할 수 있다. MDN 문서를 살펴보면

JS 안에서 CSS 를 작성할 수 있는 기술이 있는데 이를 CSS in JS 라고 한다. 관련 라이브러리는 여러개가 있는데 그중 가장 인기있는 styled-components 를 사용해 보려고 한다.

재사용성 높은 버튼 컴포넌트를 styled-components 로 구현할 수있다. 예전에 퍼블리싱을 할때는 공용 CSS 파일을 만들고, 각 사이즈별로 .btnL, .btnM 등의 클래스를 만들어 사용했었다.

React 프로젝트에서 컴포넌트를 스타일링 할 때 CSS Module 을 사용하면 CSS 클래스가 중첩되는 것을 방지할 수 있다. 사용법은 간단한데 CSS 파일 확장자를 .module.css 로 하면 된다.

npm start 를 하니 아래와 같은 오류가 떳다. 현재 3000 포트를 사용하는 중이라는 소리다.

scss 를 설치하고 사용하는데 아래와 같은 오류가 발생했다.

immer 를 사용하면 불변성을 해치는 코드를 작성해도 대신 불변성을 유지해준다.

React 에서 배열, 객체를 업데이트 할 때 아래와 같이 값을 직접 바꾸는 행위는 불변성을 깨드리는 것이다.

문제 설명

String형 배열 seoul의 element중 Kim의 위치 x를 찾아, 김서방은 x에 있다는 String을 반환하는 함수, solution을 완성하세요. seoul에 Kim은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다.

```javascript //App.js import React, { useRef, useState, useMemo, useCallback, useReducer, } from “react”; import CreateUser from “./CreateUser”; import useInputs from “./UseInputs”; import UserList from “./UserList”;

리액트를 사용하다 보면 반복적인 로직들이 발생하는 경우들이 있다. 예를 들어 input 을 관리하는 이런 코드는 상당히 자주 쓰이게 되는 경우가 많다. 아래와 같이 보통 input 안의 name 값과 value 값을 e.target 으로 받아 사용해야 하기 때문이다.

상태를 관리하는 방법에는 이전에 공부한 useState 말고도 useReducer 라는 것이 있다.

useMemo

Hooks 는 리액트 v16.8 에 새로 도입된 기능인데, 앞서 공부했던 함수형 컴포넌트에서 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공한다.

React.memo 는 컴포넌트에서 리렌더링이 불필요할 때 이전의 컴포넌트 값을 그대로 사용하는 함수이다. React.memo 를 사용하면 컴포넌트의 props 가 바뀌지 않는다면 리렌더링을 하지 않는다. 이 함수 사용으로 컴포넌트에 리렌더링 성능을 최적화 시킬 수 있다.

배열 항목 추가

리액트에서 배열을 렌더링하는 방법을 알아보자.

useState 를 통해 가장 기본이 되는 버튼을 눌렀을때 값이 변경되는 것을 만들어 본다.

useRef 로 돔 선택하기

하나의 인풋관리

리액트에서 조건에 따라 결과를 다르게 보여줄 수 있는데 이를 조건부 렌더링이라 한다. 먼저 props 로 true 값을 보내준다.

props 는 properties 의 줄임말로 리액트 컴포넌트를 속성을 설정할 때 사용하는 요소이다. props 의 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다. 아래 예제에서 부모 = App, 자식은 Hello 가 된다.

propType를 이용해 컴포넌트의 필수 props 를 지정하거나 props 의 타입을 지정할 수 있다. 방법은 deafaultProp 와 비슷한데 사용전 import 구문을 통해 불러와야 한다.

문제 설명

길이가 n이고, 수박수박수박수….와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 수박수박을 리턴하고 3이라면 수박수를 리턴하면 됩니다.

문제 설명

수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다.

문제 설명

단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다.

cookie 의 경우 예전에 재직중일때 자주 사용했지만 Web Storage 는 사용해 본적이 없었다.

Promise 로 연속된 처리를 할 때와 async 로 처리할 때의 차이점을 알아보자. 먼저 Promise 객체를 리턴하는 함수를 하나 생성해줬다.

async await 는 es2017에서 추가되었는데 MDN 문서를 살펴보면 async 에 대해 이렇게 설명하고 있다.

promise 객체 사용시 new 를 사용하지 않고 만드는 방법들이 몇가지 있다. 그 중 처음은 Promise.resolve(value) 를 사용하는 방법인데 resolve의 인자로는 일반 객체와 promise 객체 두가지를 모두 보낼 수 있다. 먼저 promise 객체를 넣는 방법부터 알아보자.

promise 객체 사용시 fulfilled 되거나 rejected 된 후 최종적으로 실행할 것이 있다면, .finally() 를 이용하는데 이때 인자로 함수를 넣어준다.

es6에 들어오며 promise 객체가 JavaScript 표준내장객체로 추가 되었다. MDN 문서를 보면 Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다 라고 설명되 있다.

es6이전까지는 prototype을 이용해 다른 언어의 상속과 비슷하게 사용했었는데 es6에서 Class 개념이 들어오며 상속이 가능하게 되었다.

JavaScript가 es6에 들어오면서 class가 추가되었다. 이전에 c#을 공부할 때 맛보기로 봤었는데 다시 한번 개념을 정리해보려고 한다. es6이전에는 prototype을 이용해 타언어의 class와 비슷한 방식으로 사용했었다.

자바 스크립트 객체 object 는 함수 혹은 클래스로 틀을 만들고 그 틀로 만들어낸다.(인스턴스) 여러 강의에서 붕어빵틀-Class, Function 과 붕어빵 -instance 으로 설명하는 경우가 많았다.

자바스크립트에서 함수 호출 시 함수를 만들어 리턴할 수 있다. 먼저 변수에 함수를 담을 때 첫번째 인자를 넣어준 후 그 변수를 호출하며 return 함수에 필요한 인자를 넣어준다.

```javascript function Person(name, age) { console.log(this); //Person{} this.name = name; this.age = age; }

JavaScript의 경우 다른 언어와 달리 자료형이 유동적으로 변화된다. = 변수가 가지는 고정타입이 없다.

JavaScript는 es6부터 화살표 함수를 지원한다. 당연하게도 익스플로러는 지원되지 않는다.

es6부터 사용된 const와 let은 var과 비교했을 때 변수의 유효범위에 차이가 있다. 기존 var이 함수단위 스코프였다면 const와 let은 {} 단위이다.