프로그래멍 언어

바닐라JS 프로젝트 개요 프론트엔드는 라이브러리, 프레임워크에 의존하여 프로젝트를 만들기에 내가 만든 JS 코드만으로 프로젝트를 만드는 것은 처음이었습니다. 항상 React, Next.js 를 이용하여 하다보니 외부라이브러리에 의존할 수 밖에 없었습니다. 그런데 이렇게 바닐라JS로 진행하는건 처음이라 걱정 반 기대 반 입니다. 엘리스 부트캠프 SW 8기에서 1차 프로젝트를 2/19(월) ~ 3/1(금) 부터 12일간 진행되는 바닐라 JS 프로젝트 입니다. 쇼핑몰에 맞는 요구사항을 줬으며, 시간이 남는다면 확장할 생각 입니다. 요구사항 사용자 관련 기능 상품 관련 기능 장바구니 관련 기능 ( Client LocalStorage, , sessionStorage Indexed DB 이용하 Client 에서 구..

react 에서 유용한 리액트 패턴 디자인 패턴은 3가지 패턴으로 분류된다. 생성 패턴 객체 인스턴스를 생성하는 패턴, 즉 클라이언트와 그 클라이언트가 생성해야 하는 객체 인스턴스 사이의 연결을 끊어주는 패턴. 구조 패턴 클래스와 객체를 더 큰 구조로 만들 수 있게 구성을 사용하는 패턴. 행위 패턴 클래스와 객체들이 상호작용하는 방법과 역할을 분담하는 방법을 다르는 패턴. 글로 설명하는 디자인 패턴 자바스크립트 디자인 패턴 (링크) constructor / builder pattern (생성자 / 빌더 패턴) 모든 언어에서의 Class 의 기능인 constructor(생성자) 의 기능이 디자인 패턴에 해당되는지 몰랐다. class Example { constructor(name, age, key) { t..

개요 타입스크립트를 사용하면서 편리한 기능들을 사용하면 좋을 것 같아 공부해봅니다!! 타입스크립트에서는 공통 타입을 변환을 용이하게 하기 위해서 유틸리티 타입을 제공합니다. 유틸리티 타입은 전역으로 사용 가능합니다. 종류 Partial , Readonly Record , Pick Omit, Exclue, Extract NonNullable, Parameters, ConstructorParameters ReturnType, Required Partial, ReadOnly Partial interface Todo { title: string; description: string; } // optional type을 쓰지 않고도 Partial 로 가능 function updateTodo(todo: Todo, ..

JavaScript 에 대한 이해도가 높지 않은 상태에서 참여하게 되었는데 이번에 이해한 Javascript 에 대해 새로 알게된 것들을 요약해드리겠습니다. 배열의 범위를 벗어난 인덱싱 input String의 특정 조건 충족 여부를 확인하는 boolean 함수를 작성 중 이었습니다. str[i] 와 str[i+1] 을 비교를 하는데 str.length 만큼 반복하는 건데 만약 i가 str 의 끝에 도달했을 때 str[i+1] 을 해버리면 오류가 뜨지 않나? 알아보니 Javascript 는 index error 가 나지 않습니다. undefined 가 떴습니다. function isIsogram(str) { str = str.toLowerCase(); str = str.split(''); str = st..

interface vs type interface 인터페이스는 자체적으로 병합이라는것을 지원해주는데 기본적으로 array 인터페이스는 lib.es5.d.ts 에 정의되어 있고 기본적으로 lib.es5.d.ts 에 선언된 인터페이스가 사용됩니다. 그러나 tsconfig.json의 lib 목록에 es2015를 추가하면 타입스크립트는 lib.es2015.d.ts에 선언된 인터페이스에 병합됩니다. 여기에는 ES2015에 추가된 또 다른 Array 선언의 find 같은 메서드가 포함됩니다. 이들은 병합을 통해 다른 Array 인터페이스를 가집니다. // type에는 없는 선언병합 interface IState { name: string; capital: string; } interface IState { popu..