Beginner Developer

주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴이다. export class Store { constructor(state) { this.state = {}; this.observers = {}; for (const key in state) { Object.defineProperty(this.state, key, { get: () => state[key], set: (val) => { state[key] = val; if (Array.isArray(this.observers[key])) { this.observers[key].forEach(observer => observer(val)); } } }) } }..

스크롤이 가능한 리스팅 페이지 만들기 전체 페이지 데스크탑-모바일 반응형 페이지로 개발 프로필 페이지 (상세 페이지) 만들기 데이터 및 사진을 등록, 수정, 삭제가 가능하게 만들기 로딩 애니메이션 넣기 검색 기능 넣기 무한 스크롤 넣기 LocalStorage 사용하기 CSS : 상대수치(rem, em) 사용, 애니메이션 구현 DOM event 조작 유저플로우 제작하기 기술 스택 : HTML, CSS, JavaScript, Firebase, .env, Vercel, Git 그리고 결과물은 아래와 같다. 나는 디즈니 캐릭터 관리 페이지를 만들었다. https://disney-character-teal.vercel.app/ 디즈니 캐릭터 리스트 disney-character-teal.vercel.app 아쉬움..

다른 말로는 정책 패턴이라고도 하며 알고리즘 부분을 캡슐화하여 교체가 용이하게 만드는 패턴이다. 예를 들어 네이버페이, 카카오페이 등 다양한 방법으로 결제가 가능한 기능을 구현할 경우 결제 방식의 '전략'만 바꿔서 두 가지 방식으로 결제하도록 하는 패턴이다. 먼저 이해를 돕기 위해 전략패턴을 사용하지 않는 결제 시스템을 만들어보자. function payment (type, amount) { let result = ''; if (type === 'kakaopay') { result = amount + '원을 카카오페이를 통해 결제 하였습니다'; } else if (type === 'naverpay') { result = amount + '원을 네이버페이를 통해 결제 하였습니다'; } else if ( t..

팩토리 패턴이란 객체를 사용하는 코드에서 객체 생성 부분을 떼어내 따로 관리를 하는 것을 말한다. 상속관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고 하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴이다. 먼저 이해를 돕기 위해 자바스크립트에서 팩토리 패턴을 사용하지 않고 커피를 주문하는 코드를 생성해보자. class Latte { constructor() { this.coffeeName = "라떼"; } createCoffee() { return this.coffeeName; } } class Espresso { constructor() { this.coffeeName = "에스프레소"; } createCoffee() { return this.coffeeName; } } ..

클래스 : 설계도의 개념이다. 동작을 어떻게 처리 할 것인지가 서술 되어 있다. (예: 붕어빵 틀) 인스턴스 : 클래스를 실제로 사용하기 위해서는 "new 클래스명()" 을 통해 인스턴스화 시키면 된다. 인스턴스화 된 객체는 실제 코드에서 쓰이게 된다. (예: 만들어진 붕어빵) TDD (Test Driven Development) : 테스트 주도 개발. 단위테스트 (주로 클래스 단위) 를 실행하고 통과되는 코드를 추가하는 단계를 반복하여 구현하는 것을 말한다. 싱글톤 패턴이란 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴이다. 붕어빵틀을 가지고 하나의 붕어빵만 만들어서 여러사람이 공유하며 먹는다는 개념으로 생각해보자. 당연히 그렇게 하면 비용이 적게 들어간다. 이 말은 메모리를 덜..

디자인 패턴의 의미 디자인 패턴이란 무엇인가, 일단 그것부터 알아보자. 디자인 패턴이란 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 '규약' 형태로 만들어 놓은것을 의미한다. -면접을 위한 CS 전공지식 노트 에서 발췌. 뭔가 말이 어려워보인다. 풀어 말하자면 프로그램 설계시 자주 발생한 문제들의 각각의 해결방법을 패턴으로 만들어 놓은 것이다. 바꿔말하자면 패턴을 따라서 설계를 하면 문제가 발생할 확률이 줄어든다는 말이다. 그러면 왜 우리가 이 패턴들을 왜 공부해야 하는건지 감이 오는가? 디자인 패턴의 종류 싱글톤 패턴 (Singleton Pattern) 팩토리 패턴 (Factory Pattern) 전략 패턴 (Strategy Pattern) 옵저..

이번에 HTML/CSS 와 약간의 JS 을 사용하여 사이트를 클론하여 패캠 부트캠프 과제를 제출하였다. 사실 처음 해보는거라 시작은 굉장히 조심스러웠지만 곧 그럴 시간이 없다는걸 깨닫고(-_-) 어떻게든 해나갔다. 먼저 내가 고른 사이트는 모나미 http://www.monami.com/index.php MONAMI 어쩌면 삶은 인생이라는 종이 위에 써 내려가는 펜의 기록 같습니다. 그중에서도 지우고 싶지 않은 기록이 있습니다. 모나미는 언제나 당신의 행복한 기록과 함께 합니다. www.monami.com 일단 깔끔해서 좋았고, 온라인 강의때 배운 내용을 활용할 수 있는 점도 맘에 들었다. 클론이라는 이름답게 정말 최대한 최대한 똑같이 만드려고 노력했다. 결과물 사이트 (Netlify를 통해 배포 URL ..

PDU 는 Protocol Data Unit 의 약자이며, 네트워크의 어떠한 계층에서 계층으로 데이터가 전달될 때 PDU를 사용하여 정보를 통신하고 교환한다. 헤더(프로토콜 제어 정보) 데이터(=페이로드)로 구성되어 있고 각 계층마다 부르는 이름이 다르며 그 각각의 이름은 다음과 같다. 애플리케이션 계층 : 메시지 전송 계층 : 세그먼트(TCP), 데이터그램 인터넷 계층 : 패킷 링크 계층 : 프레임(데이터 링크 계층), 비트 (물리 계층)

인라인 요소란? 글자를 만들기 위한 요소들 인라인 요소의 특징은 아래와 같다. 요소가 수평으로 쌓인다. 요소에 가로세로 너비를 지정할수 없다. 이것의 의미는 width나 height을 지정해줘도 소용이 없다는 뜻이다. 요소의 외부 여백인 margin이나 내부여백인 padding을 지정해도 위아래에는 정상적으로 적용되지 않는다. 인라인 요소에는 블럭 요소를 넣을수 없다. 대표적인 인라인 요소인으로 위의 특징들을 하나하나 살펴보자. inline 요소 위를 codepen에서 실행해보면 위와 같이 출력 되는 것을 볼수 있다. 이는 인라인 요소가 글자 요소로서 수평으로 요소가 쌓이기 때문에 옆으로 표시되는 것이다. 두번째 특징인 가로 세로 여백이 적용되지 않는 특징을 알아보자. 인라인 요소 마찬가지로 위 소스코드..

코드를 작성하고 손 쉽게 확인 할 수 있는 서비스를 제공하는 codepen을 사용해보자. https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 먼저 위 사이트로 가면 화면을 볼수 있다. 왼쪽 위 "Start Coding" 버튼을 클릭하면 아래 화면이 뜨는데 코드를 입력하면 출력되는 내용을 바로 확인 할수 있다. 자 그럼 즐코