분류 전체보기 검색 결과

해당 글 251건

프론트엔드 개발환경의 이해 : Webpack

웹팩이 필요한 이유 모듈 모듈 패턴 export/ import가 있기 전에는 어떻게 모듈을 사용했을까? 간단한 예시를 보자 인자 두 개를 받아서 더한 값을 반환하는 sum 함수를 가지고 있는 math 모듈 math 모듈을 받아서 사용하는 app.js 그리고 index.html로 이루어져있다 // math.js function sum(a,b){ return a+b; } // app.js console.log(sum(1,2)); export/import에 익숙해진 나는 이게 어떻게 돌아가는지 이해가 되질 않았다 app에서 import하질 않았는데 어떻게 sum을 쓸 수 있지? 답은 html에 있었다 자바스크립트를 차례로 로드하면서 전역 객체 window에 sum이 할당된 것 그래서 app에서 window에 ..
Frontend 2021. 3. 10. 14:02

프론트엔드 개발환경의 이해 : NPM

inflearn 김정환님의 프론트엔드 개발환경의 이해와 실습을 보며 공부한 내용을 기록 node.js가 단순히 서버 사이드 언어라 백엔드 개발자가 아닌 나에게는 그다지 필요하지 않다고 생각했는데 공부를 하다보니 또 그렇지만은 않은 것 같다 프론트엔드 개발에 Node.js가 필요한 이유 최신 스펙으로 개발할 수 있다 자바스크립트 언어의 발전 속도는 빠르게 발전하고 있지만 브라우저의 발전 속도는 그에 비해 느리다 그런 자바스크립트의 최신 스펙인 ES6, 타입스크립트, sass등은 바로 브라우저에서 동작하지 않고 바벨같은 트랜스 파일러들의 도움을 받아서 작동한다 이러한 트랜스 파일러들은 모두 node위에서 움직인다 빌드 자동화 자바스크립트로 개발을 마쳤다면 개발 이후에 해야할 후속작업들이 있다 파일을 압축하고..
Frontend 2021. 3. 9. 12:16

baekjoon. 큐 2

문제 문제 링크 풀이 말 그대로 큐를 구현하면 되는 문제 코드 const input = `15 push 1 push 2 front back size empty pop pop pop size empty pop push 3 empty front`.split('\n').map(v=>v.split(' ')).slice(1); // const input = require("fs").readFileSync("/dev/stdin").toString().trim().split('\n').map(v=>v.split(' ')).slice(1); class Node { constructor(number, prev=null, next=null) { this.number..
Algorithm/문제 2021. 3. 8. 11:21

baekjoon. 괄호

문제 문제 링크 9012번: 괄호 괄호 문자열(Parenthesis String, PS)은 두 개의 괄호 기호인 ‘(’ 와 ‘)’ 만으로 구성되어 있는 문자열이다. 그 중에서 괄호의 모양이 바르게 구성된 문자열을 올바른 괄호 문자열(Valid PS, VPS)이라고 www.acmicpc.net 풀이 스택을 이용해서 풀면 될 것 같았다 문자열의 앞부분 부터 하나씩 스택에 넣으면서(push) 괄호가 유효한 쌍이 되면 그 쌍을 빼버리고(pop) 문자열이 끝났을 때 스택이 비어있게된다면 그 문자열은 VPS가 된다 VPS가 되지 않는 경우를 생각해보면 스택에 닫는 괄호 ')'가 남아있으면 그 문자열은 vps가 될 수 없다 문자열을 다 돌았을 때 스택에 문자가 남아있으면 그 문자열은 vps가 될 수 없다 두 가지만 ..
Algorithm/문제 2021. 3. 7. 14:31

MVC 패턴

디자인 패턴 디자인 패턴이란 개발자들이 개발을 하면서 겪는 문제, 난항들을 해결하는 방법들을 정리해놓은 뒤에 각 문제들이 발생하거나 문제가 일어나기 전에 예방하기 위해 편리하게 사용할 수 있게 만든 문제 해결 방식이다 이렇게 문제 해결 방법들을 패턴화시켜서 사용하면 사용하는 사람도 어느정도 틀이 정해져있기 때문에 적용하기 쉽고 다른 사람이 봐도 왜 이 패턴을 사용하는지 이해하기가 쉽다 MVC 패턴이란? Model, View, Controller 약자로 애플리케이션을 개발할 때 역할을 3가지로 분할해서 개발하는 패턴이다 유저는 컨트롤러를 조작하고 컨트롤러는 유저의 조작에 따라서 모델과 뷰를 수정한다 이것이 MVC패턴의 기본적인 골자이다 Model 모델은 데이터를 관리하는 역할을 담당하고 있다 데이터가 저장..
Frontend 2021. 3. 6. 15:26

Vanilla JS로 MVC 패턴 구현하기 1

inflean에 있는 김정환님의 강의 실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발 에서 파트1 격인 MVC패턴를 바닐라 자바스크립트로 구현하는 강의를 보고 공부한 내용을 기록했다 이 강의에서 구현하는 것은 쇼핑몰 검색 페이지이다 폴더 구조 MVC 패턴을 적용시키니 당연히 Model, View, Controller 3가지로 나누어서 개발을 진행한다 모듈 패턴도 적용시키기 때문에 기능별로 적절하게 js를 쪼개어서 개발을 진행하고 index.html에는 app.js 하나만 등록해서 구현할 예정 View index.html에서 html마크업은 DOM 뼈대만 작성하고 자세한 구현은 View 즉, js로 구현하게된다 views 폴더안에는 View.js라는 파일이 하나 존재한다 // in ..
JavaScript 2021. 3. 4. 15:02

클래스

프로퍼티 타입스크립트는 자바스크립트와 다르게 클래스 내에서 선언한 프로퍼티들만 사용할 수 있다 class Animal { constructor(name, age) { this.name = name; this.age = age; } } 이런 코드는 자바스크립트에선 아무런 문제 없이 돌아가지만 타입스크립트에서는 에러를 발생시킨다 class Animal { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } } 이렇게 클래스 내에서 선언해주어야 그 이후에 사용이 가능하다 상속 이미 존재하는 클래스를 이용해 상속 받아서 새로운 클래스를 만들 수 있다 class Vehicle { ..
JavaScript/TypeScript 2021. 3. 3. 13:23

인터페이스

인터페이스 이해 function printLabel (labelObj: {label:string}){ console.log(labelObj.label); } printLabel의 타입 검사를 보면 객체를 파라미터로 받은 뒤 객체 내부에 존재하는 label값이 string인지 검사하고 있다 function printLabel (labelObj: {label:string}){ console.log(labelObj.label); } let myObj = {label: "string in labelObj"}; printLabel(myObj); // "string in labelObj" myObj안에 string타입의 label 프로퍼티가 들어가 있기 때문에 정상적으로 출력되는 것을 볼 수 있다 만약 객체의 내부..
JavaScript/TypeScript 2021. 3. 2. 10:43

기본 타입

왜 타입스크립트를 사용해야할까? 자바스크립트는 동적 언어이다 ⇒ 컴파일 시점에 에러를 잡지 않고 런타임 환경에서 에러가 쉽게 발생할 수 있는 단점을 가진다 객체 지향 프로그래밍이 가능하다 ⇒ 인터페이스, 제네릭타입 등 으로 강력한 객체 지향 프로그래밍이 가능하다 자바스크립트의 기능들을 그대로 제공한다 기본 타입 기존 타입 원래 자바스크립트에서 자주 사용되는 원시 타입의 변수와 객체 // boolean let bool : boolean = false; // Number let num : number = 1; // String let str : string = 'string'; let template : string = `this is ${str}`; // Array let arr : number[] = [..
JavaScript/TypeScript 2021. 3. 1. 12:55

유효성 검사는 백에서? 프론트에서?

이번에 리액트와 노드를 사용해서 간단한 블로그를 구현했는데 하면서 한 가지 의문점을 느꼈다 서버쪽 개발을 할 때 분명히 로그인이나 회원가입 폼에서 들어오는 입력에 유효성 검사를 해서 올바르지 않은 데이터 형식을 걸러냈는데 프론트에서 입력 폼을 구현할 때 또 유효성 검사를 하다가 '아니 서버에서 검사하는데 왜 이걸 또 구현해야 하지?' 서버에서의 유효성 구현은 익숙하지 않은데다가 postman같은 걸로 테스트해야하니 자바스크립트로만 구현하면 편한데 대체 왜? 여기저기 찾아본 결과 정답은 백과 프론트 양쪽에서 다 해주어야 한다 였다 프론트에서만 검사 const onSubmit = (e)=>{ e.preventDefault(); const {username, password, passwordConfirm} =..
Frontend 2021. 2. 28. 13:20