코드메모장

웹 접근성(Web Accessibility) 란 장애인, 고령자 등이 웹사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것 이다. 접근성이 왜 중요할까? 웹 접근성은 능력이나 장애에 관계없이 모든 사람이 웹에 접근해서 사용할 수 있도록 보장하기 때문에 중요하다. 또한 정보와 기술에 대한 장벽을 제거하여 포용성, 다양성, 평등을 증진하는 데에도 도움이 됩니다 라고 설명을 하긴 하지만.. 크게 와닿지 않는다. 해외같은 경우 웹 접근성을 지키지 않는다면 어마무시한 벌금을 낸다고 한다. 만약 해당 프로젝트가 해외 수출을 하게될때 접근성을 지키지 않는다면 무슨일이 벌어지게될까.. 우리나라도 잘 지켜지진 않지만 웹 접근성을 지키지 않으면 해당 기관 또는 사업주에게 권고 후 벌금을 ..

흔히 Redux 와 Vuex 에서 사용하는 디자인패턴이다. 등장배경 MVC (Model, View, Controller) 패턴의 단점을 보완하고 대규모 애플리케이션에서 데이터 흐름을 일관성 있게 관리함으로써 프로그램의 예측가능성을 높이기위함 구조 Action 사용자 측에서 Action의 Type 과 새로운 데이터 payload 를 묶어서 dispatcher 에 전달하는 역할 Dispatcher 데이터들의 중앙허브 라고 할 수있다. Dispatcher는 들어오는 Action 객체 정보를 받아 실제로 어떤 행동을 할지 결정하는 곳이다. React Hook 중 useReducer 로 간단하게 dispatcher 를 사용할 수 있다. Store Store는 애플리케이션의 모든 상태와 관련 로직을 가지고 있다. ..

이터러블이란 순회가능한 데이터를 말한다. 이터러블은 Symbol.iterator 를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체이다. ( = 이터러블 프로토콜 ) ES6 이전의 순회 가능한 데이터 컬렉션들은 통일된 규약없이 각자 나름의 구조를 가지고 다양한방법으로 순회가 가능했다. ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하였다 배열,문자열,Map,Set 등은 이터러블인데 콘솔로 찍어보면 프로토타입 체인을 통해 심볼.이터레이터 메서드를 상속 받고있다. 이터러블객체는 for..of문 뿐만아니라 스프레드 문법과 배열디스트럭처링 할당이 가능하다. const array = [1,2,3]; // 배열은 Array.prototype..

Symbol 은 Javascript 의 원시형 데이터 타입이며 ES6버전에 새롭게 추가되었습니다. '심볼(symbol)'은 유일한 식별자(unique identifier)를 만들고 싶을 때 사용합니다. 보통 객체 프로퍼티에 키를 고유하게 설정함으로써 프로퍼티키의 충돌을 방지하기 위해서 사용한다. 객체의 하위호환성을 유지하면서 표준을 확장한다든지, 고유한 상수값을 만드는 데 사용할 수 있다. 서드파티코드나 라이브러리등에서 객체의 값을 추가할때 심볼을 통해서 프로퍼티를 추가하게되면 충돌걱정 없이 값을 추가할수 있다. 심볼을 만들때 심볼이름이라 불리는 설명을 붙일 수 있습니다. // 심볼 id에는 "hi"라는 설명이 붙습니다. let hi = Symbol("hi"); console.dir(hi); // Sym..

Map 이란? : Key, Value 형식으로 저장할 수 있는 참조형 데이터 타입 객체만으로 해결하기 힘든 부분들을 위해서 ES6 에서 새롭게 Map 등장하였다. const user = new Map([ ['name', 'ho'], ['age', 10], ['major', '컴퓨터'], ]) console.log(user); // Map(3) {'name' => 'ho', 'age' => 10, 'major' => '컴퓨터'} 주요 메서드 및 프로퍼티 new Map() // map을 만든다 map.set(key, value) // key를 이용해 value를 저장한다 map.get(key) // key에 해당하는 값 반환. key가 존재하지 않다면 undefined를 반환 map.has(key) // k..

Javascript 의 데이터 타입는 크게 두가지로 나뉜다. 기본형 (원시형) Number (8 byte) String (글자당 / 영문 1 byte, 한글 2byte) Boolean (1 byte) null undefined Symbol 참조형 ( Object ) Object 의 하위 분류 Array Function Date RegExp (정규표현식) Map, WeakMap Set, WeakSet 왜 Javascript 의 숫자타입은 다른 정적언어 (Java, C 등) 과 다르게 데이터타입이 하나밖에 없을까? (Java 의 경우 short , int , long 등 정수형타입 뿐만아니라 float 등 다양한 숫자타입이 있음) Java와 C 같은 언어가 나왔을시기엔 메모리 용량이 부족했던 시절이였기에 타..

토이프로젝트에서 planetscale 의 서버리스 데이터베이스를 사용중이였다. DB를 생성하고 DB의 key(url) .env 파일안에 넣어서 관리중이였는데 간헐적으로 Authentication failed against database server at `aws.connect.psdb.cloud`, the provided database credentials for `url` are not valid. key 가 유효하지않다고 에러가 나는것이였다. 생성한 DB에서 새로운 key 를 발급한후 변경해주면 다시 잘 동작하였다. 이유는 .env 파일을 github에 push 했기때문이였다. .gitignore 파일에 .env 를 제외파일로 선언했지만 프로젝트 초기 생성당시 이미 .env 가 올라가있기때문에 변..

next.js 공부겸 토이프로젝트 진행중 window is not defined 에러를 맞닥뜨렸다 next.js 는 기본적으로 서버사이드 랜더링이기때문에 window 같은 클라이언트 전역객체는 참조할수가없다 그래서 로컬스토리지같은 기능을 사용할때 서버사이드에선 실행되지않고 클라이언트에서만 실행되게끔 typeof 로 타입체크를 해주는방법이 있다. 그 런 데 ScrollMagic 이라는 라이브러리를 사용하려고 보니 라이브러리 자체에서 window 객체를 사용한다 라이브러리를 import 해올때부터 window is not defined 에러가 나왔다 위의 타입체크 방법과 Dynamic import 를 같이사용해서 해결하였다. 타입체크로 window 객체가 undefined 가 아닐시 즉 클라이언트랜더링일시에..

프로젝트에서 공통으로 사용하는 Layout 안에 특정 page 에서만 다른 공통 Layout 을 사용하고싶을때 Ex: 공통 Header 를 사용중인데 특정 page 에서는 Header + SubHeader 를 사용하고싶을때 사용할수있다. SubPage SubPage.getLayout 안에 함수를 정의한다 기존 Header 안에 사용할 SubHeader 추가 subHeader 서브헤더안에는 내려받을 children 정의 _app 들어온 컴포넌트 안에 getLayout 이 있으면 geyLayout을 리턴하는 정의를 해주고 없다면 기존 Header 만 리턴하게 정의해준다

유투브 api 를 이용해서 프로젝트를 진행중이였다 동영상 리스트를 조회해오는 api 안에 동영상을 게시한 채널의 id는 있지만 채널img 정보가 없기때문에 동영상리스트 api 를 호출 후 받아온 동영상 id 들로 채널정보 api 를 호출한뒤 기존 동영상리스트 api data 에 채널 img 정보를 넣어야 했다. 초기 랜더링시 한번 실행된다. 문제는 초기랜더링이후 두번째 검색때부터 발생한다 호출부 getVideoSearch 라는 이름의 동영상리스트 api 를 호출하고 받아온 response 로 채널의 정보를 가져오는 api 를 호출한다 (unwrap()을 사용하면 redux 의 리턴값을 받을수있다) 동영상 list 를 받아오는 api 이다. 동영상 리스트에서 추출해낸 id 를 직렬화시켜서 채널 정보를 받아..