본문 바로가기

전체 글53

자바스크립트 환경 웹팩과 바벨 WebPack 웹팩은 자바스크립트 애플리케이션을 위한 정적 모듈 번들러라고 소개하고 있다. 그렇다면 번들러란 무었일까? 번들러는 의존성이 있는 모듈들을 하나의 파일로 통합시켜주는 도구이다. 그렇다면 왜 번들러를 사용할까? 번들러는 무엇일까? JS, CSS, 이미지 등의 파일을 묶어주는 작업을 '번들링(Bundling)'이라고 하고, 작업의 결과물은 '번들(Bundle)'이라고 한다. 웹팩 자체는 묶어주는 역할을 하기 때문에 '번들러(Bundler)'라고 한다, 번들링 과정이 끝나면 기존 스크립트에서 import/export가 사라지기 때문에 type="module"이 필요 없어진다. 따라서 번들링 과정을 거친 스크립트는 일반 스크립트처럼 취급한다. 웹팩은 왜 쓰는 걸까? 우선, 웹팩을 여러 개의 파일을 .. 2021. 11. 19.
MVC 패턴 작업을 하던중 최소한으로 지켜야 하는 규칙등을 알게되었다. 그중에 제일 기본이되는 규칙이 MVC패턴이다. 이제 MVC패턴에 대해 알아보자! *프론트 기준 M : Model 백그라운드에서 동작하는 로직을 처리한다. (데이터를 가진 객체, 파라미터로 주로 쓰인다.)DB의 테이블과 대응하는 경우가 많다.) V : View 사용자가 보게 될 결과 화면을 출력한다. (html/css/javascript를 모아둔 컨테이너) C : Controller 사용자의 입력처리와 흐름 제어를 담당한다. (사용자가 접근한 URL에 따라서 사용자의 요청사항을 파악한 후, 그 요청에 맞는 데이터를 Model에 의뢰하고, 데이터를 View에 반영해서 사용자에게 알려준다.) 5가지 지켜야할 규칙 1. Model 내부에 Controll.. 2021. 11. 19.
코드 리팩토링 처음에는 코드를 작동되게만 했지만 갈수록 코드 양도 많아져 무슨 기능을 하는지 까먹을떄가 있다 그럴떄 코드들이 지저분하게 되어있어 한번에 파악하기가 쉽지 않았다. 최근에 코드 리팩토링에 대해 배우게 되어 나의 프로젝트에 적용하기로 하였다. 1. 회원가입 페이지 리펙토링 전 if문이 submit안에 반복적으로 들어간다. alert창은 ui이 적으로 별로이기 떄문에 회원가입중 누락된 부분은 하단에 *필수정보라고 나오게 바꾸고싶다 const onSubmit = useCallback( (e) => { e.preventDefault(); if (mem_id === "") { alert("이메일을 입력해주세요"); return; } const formIdData = new FormData(); formIdData... 2021. 11. 18.
javascript 코드 리팩토링의 중요성 1. javascript 코드 리팩토링의 중요성 코드 리팩토링을 해야하는 이유와 중요성을 인지하지 못하고 지금 까지 그냥 생각대로 코딩을 하고있엇다. 하지만 프로젝트를 진행하던중 코드들을보면 코드들이 막 만들어지게 되는 모습들과 많은 중복되는 코드들이 우후죽순 생겨나기 시작했다. 시간이 지날수록 코드 유지보수도 힘들어지는 내 모습을보고 프로젝트 규모가 커질수록 리팩토링의 중요성을 인지하고 리팩토링에 알아보기로 했다 2. 리팩토링은 언제할까? 1. Rule of Three 삼진 아웃제와 비슷합니다. 비슷하거나 동일 코드가 두번 이상 발생하게 되면 세번째에는 리팩토링을 해야할 때인 겁니다. 2. 새로운 기능을 추가할 때 리팩토링은 다른 사람의 코드를 이해하는데 도움을 줄 뿐만 아니라 새로운 기능을 추가, 수.. 2021. 11. 15.
React 사용하는 이유 React React 공식 홈페이지에 보게되면 "React는 사용자 인터페이스(UI)를 만들기 위한 Javascript 라이브러리"라고 나와있다. 라이브러리이기 때문에 내가 컨트롤을 가지고 React를 활용하는 것이라고 볼 수 있는데, 관점에 따라 React를 Framework라고 보기도 한다고 한다. 1. React 를 사용하는 이유 React를 사용하는 이유는 아래의 이유들 때문인거 같습니다. 1. Virtual DOM의 존재 2. 수 많은 커뮤니티 3.Component를 사용한 재사용이 가능하고 유지보수의 용이함 1. Virtual DOM 리액트를 사용하는 큰 이유중에 하나인 vurtual DOM은 기존의 DOM은 페이지가 바뀔 때마다, 새 HTML를 로드하면서 DOM전체를 바꾸게 됩니다. Vir.. 2021. 10. 30.
TypeScript 제네릭 타입스크립트 제네릭 클래스나 함수의 목적중 하나는 '재사용성'에 있습니다. 이 제네릭을 이용하게되면 재사용성이 한층 더 증가합니다. 일종의 '틀' 이라고 생각하시면 됩니다. 타입스크립트에서 제네릭을 어떻게 쓰는지에대해 알아보도록 하겠습니다. 클래스에서의 제네릭 class NumberButton {} class TextButton {} class OprButton {} class ButtonContainer { private container: T[]; getButton(index: number) { return this.container[index]; } // ... } const numberContainer = new ButtonContainer(); const textContainer = new Bu.. 2021. 10. 16.
TypeScript 클래스 타입스크립트 클래스 자바스크립트는 애초에 프로토타입기반을 이용해 상속을 구현합니다. ES6 에 존재하는 class 키워드를 이용해 구현할 수 있습니다. 타입스크립트도 이와 동일하게 class 키워드를 이용합니다. 1. 클래스 키워드 ES6 를 다루어보셨다면 기존에 생각했던 것과 동일합니다. class 키워드 뒤에 클래스 이름을 적어줍니다. class Button { constructor() { // ... } } 2. 생성자 클래스 기반 언어들에서는 생성자를 통해 멤버들을 초기화시켜줬습니다. ES6 에서도 동일하게 this. 을 이용하였던것이 생각납니다. 타입스크립트도 동일한데 다만, 사전에 등록되지 않은 프로퍼티를 초기화하려하면 에러를 내뱉습니다. class Button { constructor(nam.. 2021. 10. 16.
TypeScript 인터페이스 타입스크립트 인터페이스 인터페이스란 간단하게 어떠한 두개의 시스템 사이에 상호작용할 수 있게 해주는 조건, 규약 같은 것입니다. 인터페이스는 프로퍼티와 메소드를 가질 수 있다는 점에서 클래스와 유사하나 직접 인스턴스를 생성할 수 없고 모든 메소드는 추상 메소드이다. 단, 추상 클래스의 추상 메소드와 달리 abstract 키워드를 사용하지 않습니다. 1. 인터페이스 사용 타입스크립트에서 인터페이스 사용 예제입니다. let person = { name: 'kikiki', age: 26}; function logAge(obj: { age: number }) { console.log(obj.age); // 26 } logAge(person); // 26 위 logAge() 함수에서 받는 인자의 형태는 age를 .. 2021. 10. 16.
TypeScript 인터페이스 와 type 인터페이스 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체를 접근하는 방식 클래스 인터페이스 interface User { age: number; name: string; } var person: User = { age: 30, name: "aa", }; function getUser(user: User) { console.log(user); } getUser(person); // age: 30, name: "aa" 옵션 속성 인터페이스를 사용할 때 인터페이스에 정의되어 있는 속성을 모두 다 꼭 사용하지.. 2021. 10. 14.

티스토리툴바