데굴데굴

참고 React Redux Tutorial for Beginners A complete React Redux tutorial for beginners: Learn how to build React Redux applications from scratch by following this step by step implementation of an example application ... www.robinwieruch.de In-Depth Overview | Flux Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable vi..

UI 분석: 어떤 디자인 컴포넌트가 사용되었는가? 무신사의 모바일 웹페이지는 흔히 쓰이는 UI 디자인 패턴이 대부분 적용되어 있었다. 1. 모달 모달 바깥을 클릭하면 자동으로 닫힌다. 2. 캐러셀 오른쪽 아래 컨트롤러는 작동하지 않는다. 모바일 특성 상 작은 영역을 클릭하는 것이 어렵기 때문에 가로 스크롤로 이동되는 것이 마땅해 보인다. 3. 탭 탭은 여기 말고도 정말 곳곳에 있었다. 4. 무한스크롤 스냅 탭에 무한스크롤이 적용되어 있다. 5. 자동완성 검색어 자동완성 기능을 제공한다. 6. 태그 스냅의 게시물을 보면 사용자가 자유자재로 태그를 작성한 것을 볼 수 있다. 그리고 그 태그를 기반으로 이렇게 분류하여 보여준다. 7. 페이지네이션 상품 탐색 페이지, 리뷰 페이지 아래에 페이지네이션이 있다. 8..

UI User Interface 사람들이 컴퓨터와 상호 작용하는 시스템 그래픽 요소 뿐만 아니라 물리적 요소도 UI라고 볼 수 있음. 컴퓨터와 상호 작용하기 위한 시스템이기 때문. 점점 그래픽 요소가 차지하는 영역이 많아지면서 현대에서는 GUI가 굉장히 중요한 역할을 하게 되었음. UX User Experience 사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험 가능하면 좋은 UX를 가져갈 수 있는 UI를 제공하기 위해 노력해야 함. UX는 UI를 포함하는 개념이다. 좋은 UX가 좋은 UI를 의미하지 않으며, 좋은 UI 또한 좋은 UX를 보장하지 않음. UI 디자인 패턴 자주 반복되어 나타나는 문제점을 해결하고자 과거의 다른 사람이 해결한 결과물을 재사용하기 좋..

다른 예시를 들어보려했는데 너무 헷갈림..! 학습하면서 자주 써왔던 Array로 설명해보자 Array로 이해해보기 nums라는 배열을 리터럴 방식으로 정의했다. let nums = [4, 5, 6]; nums 자체에는 메소드 함수가 정의되어 있지 않다. 하지만 우리는 nums.sort, nums.map, nums.filter, nums.reduce 등의 메소드를 자유롭게 사용할 수 있다. 그 이유는 무엇일까? 배열은 이렇게 new 키워드를 이용하여 만들 수도 있다. let nums = new Array(4, 5, 6); nums; // [4, 5, 6] 자세히 보니 어디서 많이 본 것 같다. 클래스로 인스턴스 객체를 만들 때에도 new 키워드를 쓴다! nums는 Array라는 클래스로 새롭게 만든 일종의..

MDN 등 여러 곳에서 자바스크립트를 '프로토타입 기반의 동적 언어'로 설명하고 있다. 프로토타입은 자바스크립트를 설명할 때 빠지지 않는 개념이기에 잘 이해하는 것이 중요하다. 모든 객체는 자신의 부모와도 같은 프로토타입을 가지고 있으며 이것과 연결되어 있다. 객체가 생성될 때 그 객체의 생성 방식에 따라 prototype 객체도 같이 생성된다. class Student { constructor(name, grade, gender) { this.name = name; this.grade = grade; this.gender = gender; } study() { console.log(this.name + '가 공부를 시작합니다.'); } } // 클래스를 이용해 생성한 인스턴스 let chulsoo = ..

객체 지향 프로그래밍 (Object Oriented Programming, OOP) 초기의 C와 포트란 같은 언어는 절차적 언어이다. 절차적 언어는 순차적인 명령의 조합으로 작성된다. 절차 지향 관점에서는 프로그램을 명령어 또는 함수의 목록으로 본다. (딥다이브 260페이지) 객체 지향은 사람이 세계를 보고 이해하는 방법을 흉내낸 방법론이다. 현실 세계의 사물들은 각각의 속성과 기능을 가지고 있으며, 이는 각 사물을 구분하는 단서가 된다. 객체 지향 관점에서는 프로그램을 객체의 집합으로 표현하며, 클래스에 데이터와 기능을 한 곳에 묶어서 처리한다. 객체 지향 언어에는 Java, C++, C# 등이 있다. 자바스크립트는 객체 지향 언어는 아니지만, 객체 지향 패턴으로 작성이 가능하다. 객체 지향에는 네 가..

클래스(class)는 일종의 청사진이고, 청사진을 이용해 만든 새로운 객체가 인스턴스(instance)이다. 코드로 보기 // ES6 문법을 기반으로 작성한 Student 클래스 class Student { constructor(name, grade, gender) { this.name = name; this.grade = grade; this.gender = gender; } study() { console.log(this.name + '가 공부를 시작합니다.'); } } // 클래스를 이용해 생성한 인스턴스 let chulsoo = new Student('김철수', 3, 'male'); chulsoo; // Student {name: '김철수', grade: 3, gender: 'male'} chul..

이번 유닛에서 배운 자바스크립트 주요 문법들을 복습하기 위해 Koans라는 파일로 페어분과 실습을 진행했다. 실습을 하며 새롭게 알게 된 내용들을 정리해보았다. (정확하지 않은 내용이 있을 수 있습니다) expect 함수 expect(테스트하는값).기대하는조건 expect('1' + '2').to.equal('12') expect('a' === 'a')to.be.true // 기대하는 조건 = matcher // 다양한 matcher가 존재함 코플릿에서 문제를 풀고 제출할 때 테스트코드를 어떻게 작성하나 궁금했는데 expect 함수를 이용한 것이었다. 하나하나 맞을 때마다 KoansRunner파일에 체크표시가 생기는데 거기서 엄청난 희열을 느낄 수 있었다 .deep.equal 과 .equal .deep...