영프로 개발

Float Float은 특정한 요소를 왼족 혹은 오른쪽에 정렬하고자 할때 쓰는 속성입니다. 특이하게 다음 요소가 줄바꿈이 되지 않는다는 특징이 있습니다. Flex Flex를 사용하면 원래 세로로 있던 요소들을 가로로 배치할 수도 있고 여러요소들을 한번에 중앙에 배치할 수도 있습니다. flex는 자기 자신에게 적용하는 것이 아니라, 정렬하고자 하는 요소들을 감싸는 부모요소에 적용해야 합니다 Grid Grid는 말그대로 격자형태로 요소들을 배치할 수 있게 도와줍니다! 한 요소가 몇개의 칸을 차지랄지 임의로 선택할수 있는데요 잘 활용한다면 다양한 모양의 요소 배치를 손쉽게 할 수 있습니다.

Image Lazy Loading이란? 페이지 안에 있는 실제이미지들이 화면에 보여질 필요가 있을때 로딩 할수 있게끔 하는 기술입니다. 1. 성능 향상 페이지 초기 로딩시 필요한 이미지의 수, 용량을 줄일 수 있다. - 초기 보여지는 이미지를 placeholder를 적용하거나 압축된 이미지를 사용 How to use? HTML JS document.addEventListener("DOMContentLoaded", function() { let lazyImages = [].slice.call(document.querySelectorAll("img.lazy")) let active = false const lazyLoad = function() { if (active === false) { active = ..

: 요소들을 구분하기 위한 태그 : 표 요소, Row와 Column의 집합 : pargraph (문단) 을 표현하기 위한 태그 : 제목을 표현하기 위한 태그 , : 강조하기 위한 태그 : Table Row ( 행 ) : Table Data ( 열 ) Huey Dewey Louie 위의 html은 drone이라는 그룹에 속해있습니다. 요소를 어떤 요소로 묶어주는걸 Wrapping 이라고 합니다.

JS 객체를 함수를 통해 넘길때 call by value 형식을 취하기 때문에 메모리의 이점을 노리지 않는 이상 deep copy를 통해 원본객체를 안전하게 복사하는것이 좋다. 스프레드 연산자와 Object.assign 위의 2가지 방법 ex) ...a , Object.assign 으로는 1단계 까지는 원본 객체를 건드리지않고 복사가 잘되나 Depth가 2단계 이상인 객체는 원본객체가 수정됩니다. 1. 재귀함수 const copy = o =>{ let out = {} let value, key for(key in o){ value = o[key] out[key] = (typeof value === "object" && value != null)? copy(value) : value } return out..

태그안에 있는 정보 meta : HTML문서의 제작자, 내용, 키워드 같은 여러 정보를 검섹엔진이나 브라우저에 제공 title : HTML 문서의 제목을 정의 link : 외부 문서를 가져와 연결할 때 사용 script : JS파일을 가져오는 경우, JS를 직접 HTML문서 안에서 작성하는 경우 사용 style : CSS를 HTML 문서 안에서 작성하는 경우에 사용 상대경로와 절대경로 상대경로 ../ ( 상위 폴더 ) ./ (주변) 절대경로 http / 브라우저 스타일 초기화 reset-css CDN을 이용하여 태그안에 복사하여 사용한다. 각각의 브라우저마다 스타일이 조금 다를 수 있기 때문에 웬만하면 초기화 한 후 코드 작성하는것이 좋다. Emmet Emmet은 CSS 선택자를 활용해 사용하는 기능이다.

HTML/CSS/JS HTML 페이지의 제목, 문단, 표. 이미지, 동영상 등 웹의 구조를 담당. CSS 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당. JS 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당 웹앱의 동작 원리 1. Request 2. Response ( HTML ) 3. 추가 Request 4. 추가 Response ( CSS, JS, JPG, ... ) 크로스 브라우징 - 여러 브라우저에서, 동일한 사용자 경험을 줄 수 있도록 제작하는 기술 웹 이미지 Raster - .jpeg .gif .png 정교하고 다양한 색상을 자연스럽게 표현 Vector - .svg 정교한 이미지를 표현하기 어려움

용어 설명 이터러블 이터레이터를 반환하는 [Symbol.iterator]() 라는 키를 가진 값이자 반복할 수 있는 순차적이고 순회적인 객체 Ex) 단순 객체는 [Symbol.iterator]()라는 키가 없기 때문에 이터러블 하지 않습니다. 하지만 Array, Map, Set, String의 경우 [Symbol.iterator]() 라는 키가 있기 때문에 이터러블 합니다. 이터레이터 { value, done} 객체를 반환하는 next() 메서드를 가진 값. 이터러블의 요소를 순회하기 위해 존재하는 하나의 포인터 이터러블/ 이터레이터 프로토콜 이터러블 프로토콜이란 for of spread 연산자, 구조분해 할당을 통해 동작할 수 있는 약속이며 이터레이터 프로토콜은 next 메서드를 통해 다음 로직으로 갈..

I/O Bound 작업 DB, 파일시스템, 네트워크 등을 다루는 작업 CPU Bound 작업 CPU 자원을 사용하는 일을 다루는 작업 기본적으로 자바스크립트(이하 JS) 의 함수는 콜스택(Call Stack)에 쌓였다가 pop이 되면서 동기적으로 실행된다. 하지만 web APIs의 setTimeout 함수, I/O Bound작업은 콜스택에 쌓인 다음 바로 web APIs의 백그라운드 공간으로 넘어간 후 비동기적으로 완료가 되면 콜백큐(Callback queue)에 쌓이고 이벤트 루프(Event loop)를 이용해 다시 콜스택에 쌓여 호출된다. http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpI..

트랜잭션 DB의 상태를 변경하는 작업 또는 한번에 수행되어야 하는 연산들 begin, commit를 자동으로 수행 예외 발생 시 rollback 처리를 자동으로 수행 원자성, 일관성, 격리성, 영속성 한 트랜잭션 내에서 실행한 작업들은 하나의 단위로 처리한다 (원자성) 트랜잭션은 일관성 있는 DB상태를 유지한다 (일관성) 동시에 실행되는 트랜잭션들이 서로 영향을 미치지 않도록 격리한다 (격리성) 트랜잭션을 성공적으로 마치면 결과가 항상 저장되어야 한다. (영속성)

RED : 항상 실패하는 테스트를 먼저 작성 GREEN : 테스트에 통과하는 프로덕션 코드 작성 REFACTOR : 테스트가 통과하면 프로덕션 코드를 리팩토링 (반복되는 코드, 긴 메소드, 큰 클래스, 긴 매개변수 목록 등등 코드를 좀 더 효율적으로 바꾸기) 테스트 코드 작성 이유 개발 초기에 문제를 발견하게 해줌 나중에 리팩토링하거나 업그레이드 등을 해도 올바르게 작동하는지 확인 가능