본문 바로가기

전체 글

(69)
191202(월) TIL-1. Interaction With Server [CODESTATES im16] Interaction With Server API를 활용해서 UI를 만드는 스프린트 웹개발을 하는 것에 대한 기본적인 flow를 익히는 스프린트 1. Web Architecture API: Application Programming Interface 프로그래밍되어있는 애플리케이션과 의사소통 가능한 매개체 UI: User Interface 유저와 의사소통 가능한 매개체 1-1. Interface 사물과 사물, 사물과 인간간의 의사소통이 가능하도록 만든 객체 [wiki] 인터페이스(컴퓨팅) 사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템 client: 서버에 데이터를 요청하고 받아서 보여줌 Ajax: 서버에 필요한 정보를 요청. JS로 DOM만 바꿈. server: 클라..
191128(목) TIL-1. CSS [CSS] 자료 1. 웹의 구성을 재미있게 해주는 HTML/CSS 효과들 http://rwdb.kr/interestedeffects/ 여러 유용한 CSS들을 CODEPEN을 이용해 소개한 사이트. rainbow effect와 hover effect가 필요해서 찾다가 발견한 사이트이다. [CODEPEN] Material Navigation Pure CSS [CODEPEN] CSS Hover Effects for Links [CODEPEN]Rainbow Effect Button 2. Rainbow Gradient Border https://codepen.io/unnegative/pen/dVwYBq 말 그대로 무지개 테두리를 만드는 codepen 3. 마우스 오버 버튼 CSS3 효과 https://codepe..
[JS] Object(객체)의 깊은 복사 1. JS에서의 복사 다른 언어에서 값은 사용하는 구문에 따라 값-복사(Value-Copy) 또는 레퍼런스-복사(Reference-Copy)의 형태로 할당/전달한다. C++을 예로 들자면, #include using namespace std; void foo(int& myNum) { myNum = 100; return; } int main() { int x = 10; cout
191125(월) TIL-1. N-Queens [CODESTATES im16] N-Queens 숫자 오름차순 순서로 수도코드를 짰음. 정리하다 보니 더 나은 방법이 떠올랐기 때문에 현재로써는(내가 짤 수 있는 로직 기준) n queens가 가장 효율적임.(n rooks도 그 방법으로 할 예정) 1. findNRooksSolution() : returns a single solution to the n-rooks problem 2. countNRooksSolutions() : returns a count of the total number of solutions to the n-rooks problem 3. findNQueensSolution() : returns a single solution to the n-queens problem 4. coun..
191122(금) TIL-2. Inheritance & Polymorphism [CODESTATES im16] Sprint Office Hour 1. Inheritance & Polymorphism Inheritance(상속): 상위 객체의 특징을 하위 객체에게 넘겨주는 것 Polymorphism(다형성): 동일한 조작방법으로 동작을 시키지만, 작동 결과는 다른 것 2. Prototype 2-1. Prototype Object prototype 객체: constructor에 의해 생성될 각각의 인스턴스에게 공유. 프로퍼티를 제공하기 위해 사용 함수.prototype, 객체.__proto__(dunder proto)로 접근 가능하다. dunder proto덕분에 프로토타입 체이닝이 가능해짐 프로토타입 객체가 뭔지. 프로토타입 프로토타입 체이닝, 왜 가능해지는지 2-2. Prototy..
191120(수) TIL-3. Understanding Prototype Chain [CODESTATES im16] Understanding Prototype Chain 1. 자바스크립트? prototype기반의 언어. ES5까지는 class가 없었음. > pseudo-classical ES6부터 calss 지원(하지만 그렇다고 해서 JS가 프로토타입 기반의 언어인 것은 변하지 않았음.) 2. prototype 상속 2-1. __proto__: 프로토타입을 확인할 수 있다. function Human(name) { this.name = name; } let steve = new Human('steve'); steve.__proto__ === Human.prototype; //true Q1. 아래 코드가 실행되는 이유는? var Human = function(name) { this.nam..
191120(수) TIL-2. Start Inheritance patterns [CODESTATES im16] Start Inheritance patterns 1. Prototype 자바스크립트는 Java, C++과 같은 클래스 기반 객체지향 프로그램이 아니고 프로토타입기반의 객체지향 언어이기 때문에 프로토타입이 매우 중요하다. ES5까지는 class가 없었음. > class구현을 위해 sudo-classical 등장 ES6부터 calss를 지원하기는 하지만 모양만 class같은것 뿐이지 다른 언어의 class들과는 작동 방식이 다르다.(JS는 prototype기반의 언어이기 때문에!) 자바스크립트의 모든 객체는 [[Prototype]]이라는 인터널 슬롯(internal slot)를 가진다. [Prototype]]의 값은 null 또는 객체이며 상속을 구현하는데 사용된다. [[Pr..
191120(수) TIL-1. Solution9-10, ES6기능 [CODESTATES im16] Solution9-10, ES6 기능 1. Solution9-10 1-1. Deep copy & Shallow copy 1) Deep copy 원시 타입(primitive type) String, Boolean, Number 등 구조가 비교적 단순한 타입 복사가 일어날 때 독립적이고 새로운 메모리 공간을 확보하여 값을 저장. 2) Shallow copy 참조타입이 독립적인 값을 저장하지 않는 이유: 비효율을 방지하기 위해서 참조 타입(reference type) Object, Array, Function 등 구조가 비교적 복잡한 타입 복사가 일어날 때, 메모리 어딘가에 객체 그 자체가 아닌 객체의 위치 값을 저장 2. ES6 기능(개인적으로 알아봄) 2-1. ES6: 추가..