TODAY I LEARNED

JAVA 복습 (변수와 타입, 연산자, 조건문/반복문)자주 쓰지 않아 잊어버렸던 사소한 내용들 몇 가지를 다시 상기할 수 있었다.정수 타입의 산술 연산은 int 타입으로 변환 후 int 타입으로 산출된다.break문은 기본적으로 가장 가까운 반복문을 탈출하는데 사용하지

JAVA 복습 (참조 타입)참조 타입은 클래스나 인터페이스를 저장참조 변수는 JVM 스택 영역에 저장되고, 힙 영역에 저장되는 참조 타입 객체의 주소를 값으로 갖는다(참조한다)Garbage Collector는 힙 영역의 객체가 어느 참조 변수에 의해서도 참조되지 않는

JAVA 복습 (Chap 06. 클래스)메소드의 매개 변수의 수를 모를 경우 매개 변수 타입을 배열로 선언하거나 "..."로 선언한다.작성중

JAVA 복습 (chap07-08. 상속, 인터페이스)@Override 어노테이션은 메소드가 정확히 오버라이딩됐는지 컴파일러가 체크하게 한다.작성중

JAVA 복습 (chap08. 인터페이스)작성중

JAVA 복습 (chap09. 중첩 클래스, 중첩 인터페이스)중첩 인터페이스를 사용한 UI 프로그램 버튼 이벤트 처리JAVA 복습 (chap10. 예외 처리, chap11. 기본 API 클래스 일부분)

JAVA 복습 (chap10. 예외처리, chap11. 기본 API 클래스 전반부)예외(exception)는 일반 예외(컴파일러가 체크), 런타임 예외(개발자가 미리 예상해야 함)로 나뉜다.try-catch문에서 catch할 예외 클래스는 하위 예외 클래스들부터 나열해

JAVA 복습 (chap11. 기본 API 클래스)String 객체는 내용 변경이 불가능하다. 내용을 변경하는 메소드나 연산자를 사용한 경우 원본 객체의 내용이 변경되는 것이 아니라 변경된 내용의 새로운 객체가 만들어지는 것이다.따라서 연산자 "+"를 너무 많이 사용하

JAVA 복습 (chap12. 멀티스레드)작업 스레드 생성 및 사용(Runnable 객체 구현 / Thread 익명 객체)동기화(synchronized) 메소드/블록: 다른 스레드로부터 현재 사용중인 객체를 보호여러 개의 동기화 메소드/블록 중 하나를 어떤 스레드가 실

JAVA 복습 (chap12. 멀티스레드 후반부)스레드 그룹의 생성과 일괄 interrupt()스레드풀(ThreadPool): 작업 큐(Queue)에 들어오는 작업들을 제한된 개수의 스레드가 하나씩 맡아서 처리함으로써 갑작스런 병렬 작업의 폭증으로 인한 스레드 폭증을

JAVA 복습 (chap13,14. 제네릭, 람다식)제네릭의 사용 이유: 컴파일 시의 강한 타입 체크, 불필요한 타입 변환(Casting) 제거제네릭을 사용하지 않고 리턴타입이나 파라미터 타입을 최상위 클래스인 Object 타입으로 할 수도 있지만 타입 변환의 번거로움

JAVA 복습 (chap15. 컬렉션 프레임워크)java.util 패키지의 Collection FrameworkCollectionㄴ List (ArrayList, Vector, LinkedList)ㄴ Set (HashSet, TreeSet..)Mapㄴ HashMap,

JAVA 복습 (chap16. 스트림과 병렬 처리)스트림(Stream) : 컬렉션의 요소를 하나씩 참조해서 람다식으로 처리할 수 있도록 해주는 반복자스트림의 특징람다식으로 요소 처리 코드를 제공함 (람다식이나 메소드 참조를 이용해서 요소 처리 내용을 매개값으로 전달 가

JAVA 복습 (chap18. IO 입출력 및 네트워킹 中 IO 입출력)입출력 스트림 : 바이트 기반 스트림(그림, 멀티미디어, 문자 등 모든 데이터), 문자 기반 스트림(문자 데이터)으로 나뉜다.바이트 기반 스트림: InputStream, OutputStream 및

JAVA 복습 (chap18. IO 입출력 및 네트워킹 中 네트워킹)TCP 네트워킹 : 연결 지향적 프로토콜. 클라이언트와 서버 간 연결 요청/수락 후 데이터를 정확하고 안정적으로 전달TCP 서버의 ServerSocket은 클라이언트의 연결 요청을 기다리다가 수락한 후

JAVA 복습을 마쳤고 이제 학기중에 하다가 바빠서 잠시 중단했던 웹 프론트엔드 공부를 다시 시작하기로 계획하였다.공부에 참고할 강좌: Build Responsive Real-World Websites with HTML and CSSHTML, CSS 기초 복습 (HTM

웹 프론트엔드 공부Layouts: Floats, Flexbox, and CSS Grid FundamentalsFlexbox: 1-dimentional layoutCSS Grid: 2-dimentional layout세로(vertical) 정렬: align-items,

웹 프론트엔드 공부Web Design Rules and Framework 전반부사용자가 보기 좋은 웹페이지를 디자인하기 위해 사용되는 규칙들을 공부하였다.Typography, Colors, Images, Icons를 사용하여 보기 좋은 웹페이지를 디자인하는 방법들글꼴,

웹 프론트엔드 공부Web Design Rules and Framework 후반부Shadows, Border-radius, Whitespace, Visual Hierarchy rules for web design웹사이트 성격(personality)에 따른 framewor

웹 프론트엔드 공부Components and Layout Patterns 후반부CSS를 활용하여 Accordion component (접었다 폈다 할 수 있는 컴포넌트), Carousel component (슬라이더 컴포넌트), Table component 만들기Tar

웹 프론트엔드 공부Components and Layout Patterns 마무리Omnifood Project - Setup and Desktop Version css를 활용한 웹페이지 layouting 실습vh (viewport height) 단위를 사용하면 브라우저

웹 프론트엔드 공부Omnifood Project - Setup and Desktop VersionResponsive Design을 위한 4가지Fluid Layouts : 웹페이지가 현재 화면 크기에 adaptive하게 표시되도록 하기 위해px 단위 대신 %, vh, v

웹 프론트엔드 공부Omnifood Project - Setup and Desktop Version이미지에 CSS3에서 제공하는 여러 필터 효과 입히기 (filter 속성)링크 텍스트 컬러와 같은 컬러의 밑줄 생성하기 (밑줄은 border 사용) - currentColo

웹 프론트엔드 공부Omnifood Project - Setup and Desktop Version가격 카드 우측 상단에 리본 만들어보기::after overflow: hidden; position: absolute; transform: rotate(45%);:not()

웹 프론트엔드 공부Omnifood Project - Setup and Desktop Version 마무리부모 element의 속성을 물려받기 : inherit웹 프론트엔드 공부Omnifood Project - Responsive Web Design

웹 프론트엔드 공부Omnifood Project - Responsive Web DesignMedia QueryBreakpoint는 popular devices를 기반한 것이 아니라, 모바일, 태블릿, 랩탑 등 여러 폼팩터의 screen ranges를 기반으로 선정하거나

웹 프론트엔드 공부Omnifood Project - Effects, Optimizations and Deploymenthtml에서 링크의 href를 href="- JavaScript를 사용하여모바일에서 메뉴 버튼을 눌렀을 때 Navigation Bar가 표시되도록 하는

웹 프론트엔드 공부Omnifood Project - Effects, Optimizations and Deploymentcss property의 브라우저 지원 여부 확인하기 (ex. caniuse.com)브라우저 개발자 도구의 Lighthouse를 사용하여 웹페이지 성능

모던 자바스크립트 Deep Dive 01.프로그래밍 ~ 06. 데이터 타입자바스크립트: 웹페이지를 동적으로 꾸미기 위한 인터프리터 언어이자 스크립트 언어.정식 명칭은 ECMAScript(ES)이다.자바스크립트는 브라우저, 서버 등 다양한 환경에서 실행될 수 있다. 단,

모던 자바스크립트 Deep Dive 07.연산자 ~ 12.함수숫자가 NaN인지 조사하려면 === 이 아닌 빌트인 함수 Number.isNaN을 사용한다.null 타입 여부 확인은 typeof 연산자가 아닌 === 을 사용하자논리 연산자를 사용한 단축 평가옵셔널 체이닝

모던 자바스크립트 Deep Dive 스코프전역 변수의 문제점let, const 키워드와 블록 레벨 스코프프로퍼티 어트리뷰트생성자 함수에 의한 객체 생성스코프: 식별자가 유효한 범위자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야하는지 결정함스코프를 통해 식별자인

모던 자바스크립트 Deep Dive함수와 일급 객체프로토타입함수 객체 고유의 프로퍼티: arguments, caller, length, name, prototypeproto는 접근자 프로퍼티이며, 함수 객체 고유의 프로퍼티가 아니라 Object.prototype 객체의

오늘 한 일 모던 자바스크립트 Deep Dive 프로토타입 배운 것 생성자 함수로서 호출할 수 있는 함수(=constructor)는 함수 정의가 평가되어 함수 객체를 생성하는 시점에. 프로토타입도 더불어 생성된다 따라서 객체가 생성되기 이전에 생성자 함수와 프로토타입

모던 자바스크립트 Deep Dive빌트인 객체this자바스크립트의 객체 분류표준 빌트인 객체(전역 객체의 프로퍼티로서 제공됨, 환경 상관없이 사용 가능, 별도 선언 필요없이 전역 변수처럼 참조 가능)호스트 객체(자바스크립트 실행 환경에서 추가로 제공하는 객체, 브라우저

오늘 한 일 모던 자바스크립트 Deep Dive 프로토타입 배운 것 instanceof 연산자 : 우변의 생성자 함수의 prototype에 바인딩된 객체가 좌변의 객체의 프로토타입 체인 상에 존재하는지 확인 정적 프로퍼티/메서드 : 생성자 함수가 가진 프로퍼티/메서드

모던 자바스크립트 Deep Dive실행 컨텍스트실행 컨텍스트 : 식별자(변수, 함수, 클래스 등의 이름)을 등록하고 관리하는 스코프와 실행 순서 관리를 구현한 내부 메커니즘렉시컬 환경(식별자와 스코프 관리)실행 컨텍스트 스택(코드 실행 순서 관리)렉시컬 환경 : 식별자

모던 자바스크립트 Deep Dive클로저렉시컬 스코프 : 렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할 참조값, 즉 상위 스코프에 대한 참조가 함수 정의가 평가되는 시점에 함수가 '정의'된 위치에 의해 결정됨함수는 자신의 내부 슬롯 \[Environment]에

모던 자바스크립트 Deep Dive클래스클래스 선언문도 호이스팅이 발생한다. 단, let, const 키워드로 선언한 변수처럼 선언문 이전에 일시적 사각지대에 빠지기 때문에 호이스팅이 발생하지 않는 것처럼 동작한다JS 클래스 몸체에서 정의할 수 있는 메서드는 const

모던 자바스크립트 Deep Dive클래스ES6 함수의 추가 기능상속 클래스의 인스턴스 생성 과정서브클래스의 super 호출 (서브클래스는 자신이 직접 인스턴스를 생성하지 않고 슈퍼클래스에게 인스턴스 생성을 위임한다. 따라서 서브클래스의 constructor에서 반드시

오늘 한 일 모던 자바스크립트 Deep Dive ES6 함수의 추가 기능 배열 배운 것 > 화살표 함수 내부의 this, super, arguments를 참조하면 (화살표 함수가 아닌) 상위 스코프의 것을 참조한다 Rest 파라미터: 함수에 전달된 인수 목록을 배열로

모던 자바스크립트 Deep Dive배열배열 메서드가급적 원본 배열을 직접 변경하지 않는 메서드가 좋다Array.isArray, indexOf, push, pop, unshift(배열 선두에 추가), shift(첫 번째 요소 제거), concat, splice(중간 요소

모던 자바스크립트 Deep DiveNumberMathDateRegExpString7번째 데이터 타입 SymbolNumber 메서드Math 메서드Date 메서드정규 표현식 (패턴+플래그) 메서드String 메서드Symbol심벌은 변경 불가능하고 다른 값과 중복되지 않는

모던 자바스크립트 Deep Dive이터러블스프레드 문법디스트럭처링 할당Set과 Map브라우저의 렌더링 과정이터러블이터러블 프로토콜 (Symbol.iterator 구현)을 준수한 객체를 이터러블이라고 하며, 이터러블은 for...of 문으로 순회할 수 있으며 스프레드 문

모던 자바스크립트 Deep DiveDOMDOM: HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API (메서드, 프로퍼티)를 제공하는 트리 자료구조. HTML 요소마다 노드 객체로 구성요소 노드는 어트리뷰트 노드와 자식 노드인 텍스트 노드로 구성D

모던 자바스크립트 Deep Dive이벤트이벤트 핸들러: 이벤트가 발생했을 때 호출할 함수이벤트 핸들러 등록: 이벤트가 발생하면 브라우저에게 이벤트 핸들러의 호출을 위임한다다양한 이벤트 타입(마우스, 포커스, 키보드, 폼, 뷰 등등)이벤트 핸들러 등록방법이벤트 핸들러 어

모던 자바스크립트 Deep Dive타이머호출 스케줄링: 타이머 함수를 사용하여 일정 시간이 경과된 이후에 함수가 호출되도록 예약setTimeout / setInterval: 일정 시간이 경과한 이후 콜백 함수가 호출되도록 타이머를 생성setTimeout: 한 번 호출,