바닐라JS 프로젝트 개요 프론트엔드는 라이브러리, 프레임워크에 의존하여 프로젝트를 만들기에 내가 만든 JS 코드만으로 프로젝트를 만드는 것은 처음이었습니다. 항상 React, Next.js 를 이용하여 하다보니 외부라이브러리에 의존할 수 밖에 없었습니다. 그런데 이렇게 바닐라JS로 진행하는건 처음이라 걱정 반 기대 반 입니다. 엘리스 부트캠프 SW 8기에서 1차 프로젝트를 2/19(월) ~ 3/1(금) 부터 12일간 진행되는 바닐라 JS 프로젝트 입니다. 쇼핑몰에 맞는 요구사항을 줬으며, 시간이 남는다면 확장할 생각 입니다. 요구사항 사용자 관련 기능 상품 관련 기능 장바구니 관련 기능 ( Client LocalStorage, , sessionStorage Indexed DB 이용하 Client 에서 구..
프로그래멍 언어/JavaScript
react 에서 유용한 리액트 패턴 디자인 패턴은 3가지 패턴으로 분류된다. 생성 패턴 객체 인스턴스를 생성하는 패턴, 즉 클라이언트와 그 클라이언트가 생성해야 하는 객체 인스턴스 사이의 연결을 끊어주는 패턴. 구조 패턴 클래스와 객체를 더 큰 구조로 만들 수 있게 구성을 사용하는 패턴. 행위 패턴 클래스와 객체들이 상호작용하는 방법과 역할을 분담하는 방법을 다르는 패턴. 글로 설명하는 디자인 패턴 자바스크립트 디자인 패턴 (링크) constructor / builder pattern (생성자 / 빌더 패턴) 모든 언어에서의 Class 의 기능인 constructor(생성자) 의 기능이 디자인 패턴에 해당되는지 몰랐다. class Example { constructor(name, age, key) { t..
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..