콘요맘떼 개발일지

타입스크립트의 never 타입은 일반적으로 함수의 반환형으로 사용되며 '절대 아무것도 리턴해서는 안된다'는 의미로 사용된다. 함수에서 반환형으로 never 타입이 사용될 때는 오류를 출력하거나 리턴값을 절대 내보내지 않을 때에 해당합니다. 여기서 리턴값을 절대 내보내지 않는 때는 무한루프로 이해하면 된다. never과 void는 다른 타입이다. 따라서 return문을 작성하지 않았더라도 never을 반환형으로 사용하는 함수가 위 두 경우에 해당하지 않는다면 에러가 발생한다.

자바스크립트의 원시타입에는 boolean, string, number, null, undefined, Symbol 이렇게 총 6가지가 존재한다. 그 중 Symbol은 ES6에서 새롭게 추가된 원시타입으로 변경 불가능하며 다른 값과 중복되지 않은 고유한 값을 가진다. Symbol은 Symbol 생성 함수를 통해 만들어줄 수 있으며 선택적 인자로 문자열을 넣어줄 수 있다. 이 문자는 해당 Symbol을 표현하는 description으로 활용된다. Symbol의 description은 .description을 통해 다시 확인할 수 있다. ex) const a = Symbol( ); const b = Symbol("this is symbol for b") b.description => "this is symbo..

1. 타입스크립트는 자바스크립트의 슈퍼셋이다. (따라서 자바스크립트에서 이용하는 기능들을 모두 이용할 수 있다.) 2. 타입스크립트는 정적 타입 언어이다. 그렇기 때문에 컴파일 단계에서 타입이 결정되며 보다 안전한 프로그래밍을 구현할 수 있다. (반면 자바스크립트는 동적 타입 언어이다. 자바스크립트에서 타입은 런타임에서 결정된다. 그렇기 때문에 코드를 이해하는 데 어려움이 있으며 프로그램을 작성하는 과정에서 오류를 발견하기 어렵다.) 3. 타입스크립트는 자바스크립트보다 객체지향프로그래밍(OOP)에서 강력한 모습을 보여준다. ES6부터 자바스크립트 역시 클래스의 기능이 제공되기는 했지만 자바스크립트는 본질적으로 프로토타입 기반 언어이기 때문에 완벽한 객체지향을 구현하지는 못한다. 프로토타입 기반 언어는 클..

지금 진행하고 있는 Todo 어플리케이션의 상태관리 코드를 짜다가 non-serializable type에 대한 경고를 받았다. 해당 부분을 조사하다가 관련된 리덕스의 세 가지 원칙에 대해서 간략하게 기록을 남기려고 한다. 1. 시스템의 모든 상태는 하나의 저장소 안에 하나의 객체 트리 구조로 저장된다. 리덕스는 store의 일관성 유지, 복원, 시간여행 디버깅 등이 방해되는 것을 방지하기 위해서 Non-serializable 타입을 저장하는 것을 추천하지 않는다. 우선 serialize(직렬화)는 객체에 저장된 값을 연속적인(serial) 데이터로 변환하는 것을 말한다. 그 반대 개념이 역직렬화(deserialize)이다. 직렬화는 다양한 환경에서 데이터의 사용이 보존되기 위한 목적에서 필요하다. 예를..

1. 반응형 웹 (Responsive Web) - 하나의 HTML 파일과 하나의 URL로 각 기기 혹은 환경에 최적화된 웹페이지를 제공하는 것 - 모바일 기기 발전 초기에는 별도의 모바일 페이지를 운영하였는데 PC/모바일 두 가지 웹을 동시에 제작/관리해야 하는 문제가 발생해야 함에 따라 반응형 웹이 등장하였다. - 장점 (1) 유지보수가 간편하다 : 모바일, 태블릿, 데스크톱 등 다양한 환경에 대한 디자인을 하나의 파일에서 관리 (2) 마케팅에 용이하다 : 웹 마케팅에서는 접근성이 중요하기 때문 (3) SEO에 유리하다 : 반응형 웹은 하나의 주소와 하나의 파일만을 가지기 때문에 검색 엔진에 더 많이 노출되고 광고 비용을 줄일 수 있다. (PC/모바일 웹을 각각 운영하는 경우 무슨 정보가 정확한지 판단..

React Component props를 input으로 하고 UI가 어떻게 보일지 정의하는 React Element를 output으로 하는 함수이다. 1. React Component의 생명 주기 (1) Mount (생성) : 컴포넌트의 인스턴스가 생성되어 DOM 상에 순서대로 호출된다. (2) Update (갱신) : props 혹은 state가 변경되었을 때 일어난다. (3) Unmount(소멸) : 컴포넌트가 DOM 상에서 제거될 때 2. React Component의 인스턴스 속성 → UI 데이터를 관리 (1) props (속성값) - 할당된 후 값을 변경할 수 없다. (불변변수) - 컴포넌트 간에는 무조건 props를 통해 데이터를 주고받는다. - 부모 컴포넌트가 렌더링될 때마다 자식 컴포넌트들..

1. UI (User Interface) - 사용자가 제품/서비스를 사용할 때 마주하는 면이다. (둘이 상호작용할 수 있는 매개체) - UI 디자인은 폰트, 칼라, 레이아웃 등 사용자가 마주하는 시각적 디자인을 말한다. 2. UX (User eXperience) - 사용자가 어떠한 서비스/제품을 직간접적으로 이용하면서 느끼는 종합적인 만족. - UX 디자인은 사용자에게 만족스러운 경험을 제공하는 디자인을 의미한다. - UX 기획자는 사용자의 행동을 분석하고 서비스에서 개선할 부분을 발견한다. (ex. 특정 메뉴를 사람들이 이용하지 않는다) (1) 정량적 분석 : 주로 순 방문자 수(UV), 페이지의 뷰 수(PV)를 지표로 활용한다. (2) 정성적 분석 : 초점집단 인터뷰 방법 혹은 전화·인터넷으로 접수된..

1. 자바스크립트는 객체 기반 스크립트 언어이다. 클래스를 이용하여 호출한 후에 객체가 생성되는 자바와 달리 자바스크립트는 클래스가 필요없이 호출과 동시에 객체가 생성된다. 2. HTML은 웹의 내용을 작성하고 CSS는 그를 꾸며주며 JS는 웹의 동작을 구현한다. 3. 자바스크립트는 주로 웹 브라우저에서 사용되나 Node.js와 같은 프레임워크를 활용하면 서버 프로그래밍과 같이 브라우저 밖에서도 사용이 가능하다. 4. 현재 컴퓨터나 스마트폰 등의 대부분 웹 브라우저에는 자바스크립트 인터프리터가 포함되어 있다. 5. 자바스크립트는 동적이며 타입을 명시할 필요가 없는 인터프리터 언어이다. 컴파일 언어 - 컴파일러를 통해 고급 언어를 기계어로 변환하는 언어 - 컴파일된 후의 기계어는 실행 속도가 빠르다. - ..

1. css의 한계 (1) 클래스명을 작성하는 번거로움 (2) 방대한 스타일 정보로 인한 파일의 크기 → scss, styled-components의 등장 2. Scss - Sass 버전3에서 등장하였으며 Saas의 모든 기능을 구현하면서 CSS 문법과 완전히 호환된다. - 그 자체로 웹에서 돌아갈 수 없기 때문에 전처리기로 작성된 후 CSS로 컴파일 되어야 한다. (Gulp, Webpack, Parcel 등) - 변수 사용이 가능한다. - 연산자가 사용 가능하다 : +, -, /, *, %, ==, != (단 +, -는 단위를 통일시켜서 사용해야 한다.) - Nesting이 가능하다. (상위 요소를 참조할 때는 &를 사용한다.) - Mixin을 사용할 수 있다. (선언 : @mixin, 사용 : @in..

1. 브라우저 저장소 (Web storage) - 브라우저 내에 키-값 쌍을 저장하게 해준다. (키 기반으로 데이터 조회) - localStorage와 sessionStorage가 있다. - 해당 도메인과 관련된 데이터를 서버가 아닌 클라이언트 웹브라우저에 저장하게 해준다. - 사이트의 도메인 단위로 접근이 제한된다. 따라서 서로 다른 도메인끼리 데이터를 공유할 수 없다. - HTML5부터 제공되었다. (1) 로컬 스토리지 (localStorage) - 데이터를 영구적으로 보관할 수 있다. (브라우저 종료해도 데이터 지속) - 페이지 프로토콜 별로 분리해 자료 저장한다 → 동일 페이지여도 HTTP에서 접속하였을 때랑 HTTPS로 저장되었을 때 데이터 다르게 저장된다. - 도메인만 같으면 전역적으로 데이터..