728x90 반응형 자바스크립트11 [디자인패턴] 자바스크립트로 옵저버패턴(Observer pattern) 구현하기 옵저버 패턴은 Subject라 불리는 객체가 옵저버라 불리는 디펜던트들을 유지하고, 상태 변화가 생겼을 때 이들에게 상황을 알리는 경우를 의미한다. 이 패턴은 한 객체의 액션을 다른 객체에 업데이트시켜야하는 상황에서 특히 유용하다. 아래는 자바스크립트로 구현한 예시이다. UI나 로그 시스템 객체는 Character 객체의 변화를 알고 싶어한다. Character의 HP가 바뀌면, 옵저버인 UI가 이에 대해 알아야하고, 변경된 HP를 보여줘야 한다. 1. Subject 인터페이스를 만들고, 이걸 사용해서 Character 클래스로 만든다class Subject { addObserver(observer) { throw new Error("You must implement addObserver met.. 2024. 6. 24. [디자인패턴] 자바스크립트로 전략 패턴(Strategy Pattern) 구현하기 1. 전략패턴(Strategy Pattern)이란?전략 패턴(Strategy Pattern)은 객체의 행위를 바꾸고 싶은 경우 직접 수정하지 않고 전략(알고리즘)을 객체화하여 동적으로 행위를 변경할 수 있게 해주는 디자인 패턴이다. 이 패턴은 여러 알고리즘을 하나의 추상적인 인터페이스로 묶어 알고리즘군을 정의하고, 각 알고리즘을 구체적인 전략 클래스로 캡슐화하여 필요에 따라 서로 교체 가능하게 만든다. 이를 통해 클라이언트는 알고리즘의 내부 구조를 알 필요 없이 유연하게 알고리즘을 변경할 수 있다. 알고리즘군이란?- 동일한 기능을 수행하지만 다른 방식으로 구현된 알고리즘들의 모음 예)- "정렬"이라는 동일한 문제를 해결하는 알고리즘 군 안에는 버블정렬, 삽입정렬, 퀵정렬, 병합정렬 등이 있다.- 이 알.. 2024. 6. 11. [JS] 즉시실행함수(IIFE)란? 자바스크립트에서 함수는 가장 중요한 핵심 개념이다. 이러한 함수에도 여러 형태가 있는데, 이번에 다시 "초심으로 돌아가 개념들을 살펴보자!!"는 마음가짐으로 찾아보다가 즉시 실행 함수라는 것을 처음으로 알게 되었다. 역시 보면 볼수록 모르는게 계속 툭툭 튀어나오니 공부할 맛이 나는 것 같다. 각설하고, 이렇게 요상하게 생긴 아이를 처음 보았기 때문에 호기심이 생겼다. 아래는 즉시 실행 함수에 대해 찾아본 내용을 정리한 것이다. 그래서, 도대체 즉시 실행 함수는 뭘까?! Immediately (즉시) Invoked (실행되는) Function Expression (함수 표현) 말 그대로, 즉시 실행 함수는 정의됨과 동시에 즉시 호출되는 함수를 뜻한다. 영어로 IIFE라고 표기하며, 발음은 "iffy"로 불.. 2021. 8. 19. [JS] event loop이란? 자바스크립트의 큰 특징 중 하나는, 바로 싱글 스레드(single-threaded) 방식으로 동작한다는 것이다. 그런데 실제로 브라우저가 동작하는 방식을 보면, 마치 여러 작업이 동시에 진행되는 것 같은 느낌을 받을 때가 있다. 싱글 스래드이기 때문에 한번에 하나의 작업이 진행되어야 할 것 같은데, 어떻게 여러개가 동시에 진행될 수 있을까? 이렇듯 자바스크립트가 마치 동시에 여러가지 일을 하는 것처럼 보이게 해주는데엔, 브라우저 및 런타임 환경에 내장되어 있는 기능 중 하나인 이벤트 루프(event loop)가 큰 기여를 한다. 이벤트 루프(Event loop)란 브라우저/런타임 환경(e.g. Node.js)에 내장되어 있는 기능 중 하나로, (1) 콜 스택(call stack)에 현재 실행 중인 실행 .. 2021. 8. 18. [JS] Javascript (ES6+) 자바스크립트 vs. ECMAScript ECMAScript란 정보 통신 표준화 연구 기관인 Ecma International이 정의하는 표준화된 스크립트 프로그래밍 언어를 뜻한다. Ecma International은 정보 기술의 발전과 보급을 위해 표준화를 지향하는 국제기구로, 그러한 표준화의 대상엔 스크립트 프로그래밍 언어의 데이터 종류에서부터 네이티브 API 함수, 예약어, 에러 핸들링 등 문법적인 요소들이 모두 포함되어 있다. 이렇듯 Ecma International이 제공하는 규격에 맞춰진 언어들을 ECMAScript 언어라고 부르며, 자바스크립트 또한 그러한 언어들 중 하나이다. 즉, EcmaScript는 언어 명세(language specification)인 반면 자바스크립트는 그 명세를 따른.. 2021. 8. 10. [JS] num++과 ++num의 차이 코드들을 들여다보다가, 우연히 이와 같은 것을 발견했다: let num = 0 return ++num 내가 배운 increment, decrement는 항상 변수 뒤에 붙었던 것이어서, 앞에 쓰면 뭐가 다른지 찾아보았다. 우선 결론부터 말하자면, num++와 ++num은 동일한 효과를 가진다. 둘다 변수에 1을 더하는 일을 한다. let num = 0 num++ console.log(num) // 1 let num = 0 ++num console.log(num) // 1 하지만 다른 점은, 그들의 리턴값에 있다. num++ 같은 경우, increment를 한 이후의 결과값을 리턴한다. 반면 ++num은 increment 하기 이전 값을 리턴한다. let num1 = 0 console.log(num1++).. 2021. 4. 10. [CSS] 개발자를 위한 가시성(visibility) 올리는 디자인 꿀팁! (두가지 컬러 조합 추천 사이트 + 크롬 개발자도구 Contrast 참고 방법) 디자인 백그라운드가 없는 개발자들에겐 디자이너의 서포트 없는 개인 작업은 굉장히 어렵게 느끼질 수 있다. 특히, 개인 프로젝트를 만들어야 할 때 아무리 아이디어가 좋아도 디자인이 영 이상하다면 그 누구도 좋게 보지 않을 것이 뻔하기 때문에 디자인에 대한 부담은 배로 다가올 수밖에 없다. 그러다보면 각종 특이한 것들을 마구잡이로 가져다가 쓰게 될 수가 있는데, 강약조절에 실패한 디자인은 정말 보는 이의 마음을 아프게 한다. 예를 들면... 2가지 컬러 조합 추천 사이트 이런 무시무시한 경우를 최대한 피하기 위해서 여러 조언들을 찾아보셨을탠데, 그 조언들 중 자주 들었던 것 중에 너무 여러 색깔을 한번에 사용하지 말라는 것도 분명히 있었을 것이다. 그래서 이번에 아주 좋은 색깔 조합 사이트 하나를 추천하려고.. 2021. 4. 8. [JS] Rest 파라미터 vs. 스프레드 문법(Spread syntax) Rest parameter와 스프레드 문법은 모양이 똑같아서 ( ... ) 굉장히 혼돈하기 쉽다. 하지만 둘은 엄연히 다른 것이다. 사실, 그 의미를 살펴보면 서로 반대의 개념을 갖고 있다고 볼 수 있다. Rest parameters는 함수에 전달된 인수들의 목록을 하나의 배열로 전달받기 위해서 매개변수 이름 앞에 ...을 붙이는 것인 반면, 스프레드 문법은 여러개의 값이 하나로 뭉쳐있는 이터러블(iterable. e.g. 배열)을 펼쳐서 개별적인 값들의 목록을 만드는 것이다. Rest parameters: 값들을 뭉쳐서 만드는 것 스프레드 문법: 뭉쳐있는 값들을 펼치는 것 Rest 파라미터 Rest 파라미터는 매개변수 이름 앞에 점 3개를 붙여서 정의한 매개변수를 의미한다. 이때 함수에 전달된 인수들은.. 2021. 3. 23. 자바 스크립트 두번째 과제, 반응형 FAQ 카드 만들기! 그리고 받은 결과 리포트 프론트엔드 멘토(Frontend Mentor)에서의 두번째 JavaScript 과제를 제출했다. 첫번째로 도전했던건 HTML과 CSS만 사용하는 과제였고, 이번에 처음으로 자바 스크립트를 이용해야하는 걸 해보았다. (사실 튜토리얼 등을 보면서 따라한 것 외에 처음으로 어떠한 가이드 없이 혼자 자바 스크립트를 사용해본 경우였다!) 아직 HTML/CSS/자바 스크립트를 독학한지 한 달밖에 되지 않아서 이 과제도 너무나 어렵게 느껴졌다 ㅠ_ㅠ.. 직접 코드를 계속 짜봐야 된다는게 정말 맞는 말인 것 같다. 2020/12/24 - [Learn to Code] - HTML, CSS, 자바스크립트 배운 뒤 프로젝트 하라고?! 어..어떤 프로젝트? 과제 리소스로 다운받은 zip파일 안에는 디자인 리소스가 담긴 ima.. 2020. 12. 26. 프론트엔드 멘토(Frontend Mentor), 과제 결과 리포트! 자, 그렇다면 Frontend Mentor에서 제출한 과제에 대해 어떤 자동 보고서를 받을 수 있을까? 2020/12/24 - [Learn to Code] - HTML, CSS, 자바스크립트 배운 뒤 프로젝트 하라고?! 어..어떤 프로젝트?2020/12/24 - [Learn to Code] - Frontend Mentor, 과제 제출하기! Frontend Mentor 홈페이지에서, 우측 상단 메뉴들 중 가장 오른쪽의 가장 위에 있는 사진 아이콘이 나(me)를 가리킨다. 그걸 누르면, "Profile", "Settings", Sign out"이 나오는데, 이중 Profile을 선택하자. Profile 창으로 들어가면 기본으로 보여지는 곳이 Overview이다. 그 옆에 Solutions, Comments가.. 2020. 12. 24. HTML, CSS, 자바스크립트 배운 뒤 프로젝트 하라고?! 어..어떤 프로젝트? 요즘 열심히 JavaScript와 ReactJS를 공부하고 있다. (맨날 공부를 하다가 블로그 글이 뜸해진 것도 사실이다)그런데 벽을 만나 엄청 큰 고민을 했다. 그 벽이란게, 언어가 어렵다거나 이해가 안된다거나 하는 벽이 아니라 아주 뜬금 없게도 그 다음 무엇을 해야하냐는 것이었다. "So... what's next?!"도대체 그 다음 뭘 해야할지 감이 잡히지 않는다! ㅜㅜ 검색을 왕창 해보았는데, 결국 다른 튜토리얼로 스며들어가거나 아니면 '프로젝트를 시작해라'와 같은 조언과 맞닥트리게 된다. 그런데 이러한 결론은 실제로 나의 코딩 능력을 향상시키는데 전혀 도움이 되지 않을 것 같았다. 다른 튜토리얼을 또 보게 되는 것? 실제로 JavaScript를 이미 다 공부를 하였을 때, 거기서 추가로 무언가 .. 2020. 12. 24. 이전 1 다음 728x90 반응형
