본문 바로가기

개발인생다반사/TIL(Today i learned)

(43)
TIL 210812 - React SPA(Single Page App) 고차함수까지는 기본적인 내용이라면 React 부터는 실전에서 진짜로 사용하는 것들이다. 멈추어서는 안된다. egaging booster!! 부릉부릉 자 SPA 시작! React SPA Achievement Goals SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다. SPA의 장, 단점에 대해 이해하고 설명할 수 있다. 와이어프레임을 보고 어느 부분을 컴포넌트로 구분할 지 스스로 정할 수 있다. 전통적인 페이지는 사용자가 다른 웹페이지로 이동하면 이동할 때마다 HTML 파일 전체를 불러와서 보여줘야 했다. 전통적인 웹사이트는 페이지 전체를 로딩하고 SPA 사이트는 Menu나 Footer와 같은 중복되는 부분은 불러오지 않는다. 전통적인 웹사이트는 매번 HTML을 새로 불..
TIL 210811 - 기초 React 리액트는 vue.js와 동일한 자바스크립트 라이브러리이다. 그냥 자바스크립트 소스를 좀 더 편하게 구현할 수 있게 도와주는 함수들의 집합 뭐 이리 많노? React Intro Achievement Goals React의 3가지 특징에 대해서 이해하고, 설명할 수 있다. JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다. React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다. create-react-app 으로 간단한 개발용 React 앱을 실행할 수 있다. React SPA Achievement Goals SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다. //화면을 전환하지 않고 한 화면에서 콘텐츠 내용 변화 SPA의 장..
TIL 210810 - 고차함수(higher-order function) 벌써 3주차다. SE 분야는 배움에 끝이 없다는 느낌이다. 경영학 이론이 블루오션 전략에서 더 이상 나아가지 못하고 정체된 느낌을 받고 뒤이서 데이터 분석이나 AI와 같은 컴퓨터 과학으로 대체되는 인상을 받고 있다. 그런데 컴퓨터 과학은 그 기술 진화의 속도와 범위가 점차 확장되는 느낌이다. 코.스의 코스도 점차 심화되고 있다. 물론 시작의 시작일 뿐이지만. 넋두리가 길었다. 시작해 보자 고차함수 시작! 고차함수가 프로그래밍을 산 정상에서 보는 것과 같다고 한다. 복잡한 알고리즘 구현하라고 요구하네. Achievement Goals 일급 객체(first-class citizen)의 세 가지 특징을 설명할 수 있다. 고차 함수(higher-order function)에 대해 설명할 수 있다. 고차 함수를 ..
TIL 210809 - 이벤트 객체(해도해도 끝이 없구먼!) 지난 한 주를 마감하고 가장 난해하고 익히고 익숙해지는데 시간이 많이 필요한 CSS를 구현하고 있다. CSS도 재미있지만 이벤트 핸들러 처럼 사용자의 입력값에 따른 다양한 데이터의 변화가 조금 더 흥미를 불러 일으킨다. 백엔드인가? 자 오전과 오후의 절반을 알고리즘과 CSS학습으로 채웠다면 얼마남지 않은 시간을 이벤트 객체에 사용해 보자. 이벤트 객체 시작! Achievement Goals 기초적인 event를 알고, event handler를 element에 적용할 수 있다 onclick event onclick 에 직접 할당하는 것과 addEventListener의 차이 eventHandler 함수를 만들고, eventHandler의 첫번째 인자를 사용할 줄 안다. 클릭이나 드래그 하는 일을 프로그래..
TIL 210806- DOM, 유효성 검사 학습을 시작한지 15일 지났다. 오늘은 돔이다. 이 돔은 아니다. DOM 문서 객체 모델 문서를 객체로?? 웹에서 문서는 브라우저에 표시된 HTML을 언급하는 거니 HTML을 객체 모델로 표시? DOM 시작! DOM : Document Object Model DOM은 브라우저 환경에서 자바스크립트를 이용해 HTML을 조작할 수 있음 Achievement Goals DOM의 개념을 이해할 수 있다. DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 알 수 있다. HTML에서 Javascript 파일을 불러올 때 주의점에 대해서 이해할 수 있다. 태그가 적용되는 위치에 따라서 실행 결과가 달라질 수 있음을 이해할 수 있다. Advanced Challenge DOM과 JavaScript의 차이에..
TIL 210805 - Spread, Rest, 구조분해 spread 연산자 다루는 거 같고 Rest는 API Restful? 오늘은 오전에 1시간 30분 정도만 학습시간이고 나머지는 koans(한글 화두)를 푼다는데 프로그래밍을 페어랑 기본적인 문제를 심도있게 다루어 봐라라는 의미로 다가온다. Achievement Goals Spread/Rest 문법, 구조 분해 할당을 사용할 수 있다. Spread/Rest 문법 function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) // 6 배열을 풀어서 인자로 전달하거나(배열) 배열을 풀어서 각각의 요소로 넣을 때(객체) 사용 Rest 문법 function sum(...theArgs) { return theArgs.red..
TIL 210804 - 자료형, 스코프, 클로저(보지 마시오. 머리가.. 제목들을 보아하니 대충 변수 선언된 것들과 그 선언된 변수들이 유효한 구역 기능 함수의 종료점? DOM이라 함도 스코프와 연관이 있을 거 같은데 한번 살펴볼께요~ 자 시작! 원시 자료형과 참조 자료형 Achievement Goals 원시 자료형과 참조 자료형 원시 자료형(primitive type)과 참조 자료형(reference type)의 구분이 왜 필요한지에 대해서 영상을 보고 이해할 수 있다. 원시 자료형과 참조 자료형의 차이를 이해하고, 각자 맞는 상황에서 사용할 수 있다. 원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담기고, 참조 자료형이 할당될 때는 보관함의 주소(reference)가 담긴다는 개념을 코드로 설명할 수 있다. 참조 자료형은 기존에 고정된 크기의 보관함이 아니라,..
TIL 210803 - [CSS] 레이아웃, selector (불친절에 욕이 나오는...) 에피쿠로스 학파에 관하여 (아타락시아) 에피쿠로스 학파는 쾌락을 최고의 선으로 규정하고 그것을 추구한다. 그러나 인간의 욕망은 무한하기에 육체적 쾌락은 완전히 채울 수 없다. 육체적 쾌락은 채우면 채울수록 오히려 고통을 유발한다고 한다. 그래서 에피쿠로스 학파는 정신적 쾌락의 추구를 강조한다. 그러나 이것은 지적 욕구의 충족과는 다르다. 에피쿠로스는 쾌락의 최대화는 고통의 최소화라고 하고 고통의 최소화는 욕망의 최소화와 동일시된다. 그래서 욕망의 최소화는 쾌락의 최대화 상태이고 어떠한 욕망도 없는 상태가 최상의 쾌락의 상태고 이러한 상태를 '번뇌없는 평정' (ataraxia, 아타락시아)이라고 했다. 욕망이 없이 그리고 그 욕망의 성취없이 인간이 살아갈 수 있는가? 생존을 위한 최소한의 욕망만 추구하고 ..