코드를 위한 기록

React : JavaScript 오픈소스 라이브러리 UI에 집중한 라이브러리 3가지 특징으로 프론트엔드 개발을 효율적으로 할 수 있게 해줌 컴포넌트를 먼저 개발(Bottom-up 개발 방식) 장점 1. 복잡한 UI를 이전보다 쉽게 구현 2. JS문법을 사용하여 따로 공부할 문법이 적음 3. 많이 사용되기 때문에 참고할 레퍼런스가 많음 4. 컴포넌트 기반이라 재사용 용이 5. React-Native와 문법이 같아서 모바일 개발도 가능 특징 1. 선언형 JSX(HTML과 JS가 결합한 문법)을 기반으로 명시적으로 코드를 작성 코드만 보고도 실제 웹 애플리케이션의 모습과 기능을 상상할 수 있음 2. Component Based 컴포넌트 기반 컴포넌트 : 하나의 기능 구현을 위해 여러 종류의 코드를 묶어놓은 ..

비동기 요청의 대표적인 사례: 네트워크 요청 JSON에서 데이터를 문자열로 다루는 이유는(객체, 배열도) 주고받는 과정에서 데이터가 변하지 않길 바라기 때문 fetch API : url로 네트워크에 요청할 수 있게 해주는 API (API: Application Programming Interface. 요청과 응답을 사용하여 두 애플리케이션이 서로 통신하는 방법) axios 라이브러리 : 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 fetch API보다 사용이 간편하고 추가 기능이 있음 axios fetch api 3rd-party 라이브러리 built-in API JSON데이터 자동 변환 .json() 메서드 사용해야함 response -> data r..

"나쁜 코드에 주석을 달지 마라. 새로 짜라" -브라이언 W. 커니핸, P.J. 플라우거 잘 달린 주석은 그 어떤 정보보다 유용 경솔하고 근거 없는 주석은 코드를 이해하기 어렵게 만듦 오래되고 조잡한 주석은 거짓과 잘못된 정보를 퍼뜨림 주석은 필요악 프로그래밍 언어 자체가 표현력이 풍부하거나 개발자가 프로그래밍 언어를 치밀하게 사용해 의도를 표현할 능력이 있다면 필요하지 않음 코드로 의도를 표현하지 못해 실패를 만회하기 위해 주석을 사용(주석 = 실패) Good: 코드로 의도를 표현 주석을 다는 것 = 표현력이 없는 것 코드는 변화하고 진화하지만 주석은 유지보수하지 않기 때문에 오래될수록 코드에서 멀어짐 부정확한 주석은 주석이 아예 없는 것보다 나쁘다 : 지킬 필요 없는 규칙이나 지켜서는 안 될 규칙을 ..

Promise : 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냄 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환 Promise의 상태 - 대기(pending) : 이행/ 거부하기 전 초기 상태 - 이행(fulfilled) : 연산 성공 - 거부(rejected) : 연산 실패 Promise의 callback 함수의 매개변수 resolve, reject : 성공할 경우 then으로 받은 resolve 함수 실행 실패(에러)할 경우 catch로 받은 reject 함수 실행 에러 전달(혹은 then의 두번째 인자) then 메서드는 onFulfilled, onRejected(성공, 실패)를 인자로 받음 catch(failureCallback) === then(null, ..

어떤 프로그램에서든 가장 기본적인 단위: 함수 안 좋은 함수 : 길이가 긺 중복된 코드 괴상한 문자열(이름) 추상화 수준이 너무 다양 함수를 잘 만드려면(읽고 이해하기 쉽게) 1. 작게 만들 것 - 블록과 들여쓰기 if/ else/ while 등에 들어가는 블록은 한 줄(= 함수 호출)이어야 함 : 이를 감싸는 함수가 작아질 뿐만 아니라, 내부 함수 이름을 적절히 짓는다면 코드를 이해하기 쉬워짐 2. 한가지만 할 것 여러 기능을 수행하는 것이 아닌 한 가지만 잘 할 것 - 함수 내 섹션 섹션이 자연스럽게 나눠진다면 여러 작업을 하는 것. 한 가지 작업만 하는 함수는 섹션으로 나누기 어려움 3. 함수 당 추상화 수준은 하나로 함수가 한가지 작업만 하려면(2) 함수 내 모든 추상화 수준이 동일해야 함 한 함..

setTimeout(callback, millisecond) : 밀리초(1/1000) 이후에 콜백함수 실행. 임의의 타이머 ID 리턴 clearTimeout(timerId) : 타이머 ID를 받아 setTimeout 타이머를 종료. 리턴값 없음 setInterval(callback, millisecond) : 밀리초의 주기로 콜백함수 실행. 임의의 타이머 ID 리턴 clearInterval(timerId) : 타이머 ID를 받아 setInterval 타이머를 종료. 리턴값 없음 22.11.22 코스 S2U3 타이머API 진행중

동기적 synchronous : blocking. 앞 작업이 완료되어야 뒷 작업을 시작할 수 있음 요청 후 응답이 올 때까지 멈춰있어야 함 비동기적 asynchronous : non-blocking. 앞 요청의 응답이 오지 않은 상태여도 계속해서 요청 다양한 작업을 동시에 시작하고 작업이 완료되는 순서로 응답하여 작업 완료 순서를 예상할 수 없음 => callback 함수로 순서 제어(handle) promise, async/ await // synchronous 동기적 예시 // 함수 시작 시간에서 현재 시간의 차이가 ms를 넘으면 종료되는 함수 function waitSync(ms) { var start = Date.now(); var now = start; while(now - start < ms)..

좋은 이름을 지으려면 시간이 걸리지만, 좋은 이름으로 절약하는 시간이 더 많다. 그러므로 이름을 주의깊게 살펴 더 나은 이름이 떠오르면 개선 코드 작성의 목표: 이해하기 쉬운 코드(집중적인 탐구가 필요한 것이 아닌 대충 봐도 이해할 코드) 이름을 잘 짓는 규칙 1. 의도를 분명히 밝힐 것 - 존재 이유 - 수행 기능 - 사용 방법 // 주석으로 설명하려하지 말고 이름에 담기 => 코드 이해와 변경이 쉬워짐 2. 그릇된 정보를 피할 것 - 널리 쓰이는 의미가 있는 단어를 다른 의미(혹은 줄임말)로 사용하지 말 것 - 비슷한 변수 이름을 사용하지 말 것 - 유사한 개념은 유사한 표기법 사용(일관성이 떨어지지 않도록) // 아래와 같이 혼란을 주는 변수명을 사용하지 말 것 l 1 // 알파벳 L 숫자 1 O ..

프로토타입 체인(Prototype Chain) 프로토타입을 상속하는 방법(ES5. class 키워드가 없었음) 1. 부모 클래스에서 필요한 전달인자를 받는 자식 클래스 함수 생성 - call 함수로 부모 클래스 호출 2. Object.create(부모class)로 메서드까지 전달 3. 생성자 함수 자식 클래스 함수로 다시 선언하기 // 부모 class가 될 Person 함수 function Person(first, last, age, gender, interests) { this.name = { first, last }; this.age = age; this.gender = gender; this.interests = interests; }; Person.prototype.bio = function() ..

Clean Code 애자일 소프트웨어 장인 정신 로버트 C. 마틴 * 애자일:처음부터 끝까지 계획을 수립하고 개발하는 폭포수(Waterfall) 방법론과는 달리 개발과 함께 즉시 피드백을 받아서 유동적으로 개발하는 방법 세 파트로 나눠짐 - 깨끗한 코드를 작성하는 원칙, 패턴, 실기 - 사례 연구(복잡하기 때문에 집중력 필요) - 결말(사례 연구를 만들면서 수집한 냄새와 휴리스틱 열거) * 휴리스틱: 발견법. 합리적인 판단을 할 수 없거나 필요하지 않은 상황에서 빠르게 사용할 수 있게 구성된 간편추론의 방법(단순화) 킬러앱을 개발한 회사가 망한 이유: 나쁜 코드 킬러앱 : 주로 컴퓨터 프로그래밍 소프트웨어 제품 중에 그 인기나 유용성이 아주 높아서 그 제품을 사용하기 위해서 필요한 하드웨어나 운영체제 등..