빠르게 요점만 리액트는 무엇일까? - 자바스크립트 라이브러리 - 컴포넌트 기반의 UI 라이브러리 - 사용자 인터페이스를 만드는데 사용 - 자바스크립트는 사용자에게 뭔가 다른 것들을 보여주기 위해 새로운 HTML 페이지를 요청하지 않아도 되게 한다. - 클라이언트 자바스크립트를 작성하는데 도움 - 웹사이트를 위한 최신의 반응형 사용자 인터페이스를 구축 - 복잡한 사용자 인터페이스를 쉽게 구축 - 응용 프로그램을 작은 블록과 작은 컴포넌트들로 분할 - 유지보수가 쉽도록 만듦 - 복잡한 사용자 인터페이스를 더 쉽게 구축 - 화면에 표시되는 내용을 제어하는 싱글 페이지 애플리케이션 리액트 대신 - 앵귤러 - 컴포넌트 기반의 UI 프레임워크 - 리액트보다 많은 내장 기능 - 타입스크립트 내장 - 뷰 - 컴포넌트 ..

리액트에서는 useEffect처럼 DOM의 변화를 인식해서 재렌더링을 해주는 기능이 있지만 바닐라 자바스크립트에서는 누가 데이터의 변화를 감지하고 있지 않기 때문에 여러가지 방법으로 DOM에 변화를 일으켜줘야 한다. 그럴때 사용하는게 바로 Observer 기능인데 이번에는 회사에서 일을 하면서 Observer을 이용해서 여러가지 기능을 만들게 되었다. Observer에는 InterSectionObserver와 MutationObserver 두 가지가 있는데 자세한 설명은 링크한 MDN을 살펴보면 된다. InterSectionObserver는 무한 스크롤을 만드는데 사용했는데 MutationObserver로 어떤 Node가 추가되었을 때 다른 Node의 변화를 주는 기능을 구현하여 간단하게 정리해보려고 한..

*회고 겸 작성하기 때문에 엄청 길어요. 필요하신 분들은 하단의 방법만 참고하세요. 카페24를 호스팅으로 이용하는 커머스의 개발자로서 카페24는 그야말로 구원자이자 장애물인데 그 중 가장 해결해보고자 했던 것이 바로 '배포'라는 행위이다. 일단 카페24를 서버로 쓰는 것이 아니라 쇼핑몰 호스팅을 이용해서 솔루션 자체를 이용하는 경우 카페24의 페이지들은 전부 FTP를 통해 카페24 서버에서 돌아가게 된다. 그렇기 때문에 FTP가 가능한 배포 라이브러리들을 사용할 수 있는데, 말이 쉽지 실제로는 여러가지 문제가 있었다. 리액트 배포도 깃헙 배포 밖에 안해본 나로서는 '배포'라는 행위를 회사 시스템에 도입한다는데 큰 의의를 두었다. 대부분의 카페24 스킨은 디자인관리의 PC용 레이아웃과 모바일쇼핑몰 의 모바..

Normal Flow 일반적인 위에서 아래로 쌓이거나, 텍스트가 텍스트처럼 쌓이는 구조 Flex Flex Container, Flex flow Flow를 바꾸는 것들, display 속성 중에 하나. (display는 이 요소를 화면에 어떻게 나타낼지 결정하는 것, flex-box는 옛날 문법) flex를 적용해주면 normal flow가 아닌 flex-flow로 적용되게 된다. *자손까지 제어하는 display는 현재 없다. flex도 자식에게까지만 적용된다. Flex Container를 생성하고, 자식요소들을 Flex box로 만드는 display 속성 Flex Flow란? - 내부에 있는 요소들이 어떤 방향으로 쌓이게 만들 것인가? - Flex는 기본적으로 1차원이며 축이 1개이다. 한 방향을 고려..

CSS 흑마법사가 되어봅시다. CSS 레이아웃 - 레이아웃은 뭘까? 어떠한 것들을 어떠한 위치에 배치 (Layout) - 어떤 요소가 어떤 위치에 있을 것인지 - Flex & Grid Layout - 이 두 개만 가지고도 대부분의 레이아웃 구성 가능 - 전통적인 방식 (IE를 기준으로)에서는 Float 레이아웃 사용 - 특수한 레이아웃 (table, ruby) CSS Box Model - 하나의 요소가 박스를 이루는 모델 - 모든 요소는 박스 형태를 취하고 있는데, 그 박스가 어떻게 생겼는지를 나타내는것 - Model은 여러가지 속성들이 합쳐진 개념을 말하는 것 - 박스 - 콘텐츠 박스contents-box (사각형) - 특정한 요소가 본인의 콘텐츠를 담고 있는 영역, 전체 박스(+border, marg..

CSS 흑마법사가 되어봅시다. CSS란? 캐스캐이딩 스타일 시트 시트는 데이터가 나열된 공간 논리적인 결과물을 만들지는 않는다. 캐스캐이딩은 폭포 라는 영단어로 폭포같은 특성을 지님 버전이 의미있지 않음 특정한 스타일에 대한 표준이 만들어지고 표준을 관리한다. 모듈 단위로 관리 된다. 셀렉터 101 CSS는 Style의 나열 Style을 HTML 요소를 선택해서 적용 요소 셀렉터 클래스 셀렉터 콤비네이터 콤비네이터 101 셀렉터의 조합은 이론상 무제한 특정한 요소의 자손 요소에 스타일을 주고싶은 경우 자손 콤피네이터 공백 조상 요소공백자식 요소 { } ex) .box .title { } 자식 요소에 관계 없이, 자손 요소 중 해당 요소가 있다면 적용 특정한 요소의 자식 요소에 스타일을 주고싶은 경우 자식..