WEB Dev
-
[React] Udemy 강의 노트 3-2WEB Dev/StudyNote 2022. 11. 25. 00:49
JSX소개 - JSX는 자바스크립트 XML를 의미한다. - 자바스크립트 안에 HTML을 가지고 있다. - 백그라운드에서 변환 과정을 가지고 있다. - 개발자 도구의 Source 탭에서 static/js 폴더에서 같은 자바스크립트 파일을 볼 수 있는데 리액트가 지원하는 많은 기능의 소스 코드를 포함한다. - 전체 리액트 패키지 코드를 bundle.js, main.chunk.js에서 확인할 수 있다. - 브라우저에서 사용할 수 있도록 우리의 코드를 변환해서 보여준다. - 우리는 JSX 구문을 사용하고 (브라우저에서는 지원되지 않는) 자동적으로 변환된다. - 기본적인 자바스크립트를 알고 있어야 한다. - 리액트 작동방식 - 자체 HTML요소인 컴포넌트를 구축한다. - 리액트로 목표 상태를 정의하고 리액트는 화..
-
[React] Udemy 강의 노트 3-1WEB Dev/StudyNote 2022. 11. 23. 00:37
섹션 3 : 리액트 기초 및 실습 컴포넌트 모듈 소개 - 컴포넌트 중심의 사용자 인터페이스 구축하는 방법 - 리액트를 구성하는 기능과 문법, 구성, JSX - 컴포넌트를 구축하는 방법과 사용 방법 - 데이터를 이용하기 컴포넌트란 무엇인가? 왜 리액트는 컴포넌트가 전부라고 하는가 - 사용자 인터페이스를 구축하는 자바스크립트 라이브러리 - 리액트 - 좀 더 간단히 사용자 인터페이스를 만들 수 있다. - 핵심 비즈니스 로직에 집중 - 컴포넌트라는 개념 - 리액트는 컴포넌트가 전부 - 모든 사용자 인터페이스는 컴포넌트로 구성된다. - 재사용성 Reusablilty - 우려 상황의 분리 Separation of Concerns - 프로그래밍에서 중요하다. - 코드를 여러 단위로 분해하고 유지 관리하기 쉽도록 코드..
-
[React] Udemy 강의 노트 2WEB Dev/StudyNote 2022. 11. 13. 18:21
섹션 2 : 자바스크립트 새로고침 모듈 소개 - 리액트 앱은 자바스크립트 ES6와 차세대 기능을 사용 - 좀 이상해 보일 수 있음 - 자바스크립트는 아주 빠르게 진화 중 변수 let과 const 이해하기 - 변수를 생성하는 방식 - 변하지 않은 변수를 상수라고 함 - var 대신 let, const 권장 - let 수정할 수 있는 변수 - const 수정할 수 없는 (절대 변하지 않는 상수) 변수 - const에는 새로운 값을 할당할 수 없음 constant variable 화살표 함수 - 생성자 함수 - 자바스크립트를 생성하는 또다른 구문 - const 선언 - const myFunction = () => { } - this로 인해 생성된 문제를 해결 - this는 항상 원하는 객체를 보지 않지만 화살..
-
[Javascript] fetch에서 HTTP 헤더 사용하기WEB Dev/Javascript | REACT | Node.js 2022. 11. 12. 14:38
최근 일하면서 fetch로 백엔드랑 API 통신할 일이 엄청 많아졌는데, fetch를 잘 모르고 통신하다보니 불필요하게 서버에 자주 요청을 보내는 일이 많아졌다 (테스트 하기 위해) 조금이나마 fetch를 알고 사용하기 위해 공부차 기록하기! fetch - 서버에 네트워크 요청을 보내고 정보를 받아오는 일을 한다. - fetch는 AJAX(Asynchronous Javascript And XML)이라는 기술로 서버에서 정보를 '비동기적'으로 가져올 수 있게 해주는 방식 - 페이지의 새로고침(유저 입장에서는 깜빡임) 없이 정보를 브라우저에 표시 - XMLHttpRequest라는 오래된 통신 방식에서 비롯되었다. - fetch는 모던 자바스크립트에서 지원되기 시작한 통신 메소드로 구식 브라우저에서는 폴리필을..
-
[React] Udemy 강의 노트WEB Dev/StudyNote 2022. 11. 8. 23:07
빠르게 요점만 리액트는 무엇일까? - 자바스크립트 라이브러리 - 컴포넌트 기반의 UI 라이브러리 - 사용자 인터페이스를 만드는데 사용 - 자바스크립트는 사용자에게 뭔가 다른 것들을 보여주기 위해 새로운 HTML 페이지를 요청하지 않아도 되게 한다. - 클라이언트 자바스크립트를 작성하는데 도움 - 웹사이트를 위한 최신의 반응형 사용자 인터페이스를 구축 - 복잡한 사용자 인터페이스를 쉽게 구축 - 응용 프로그램을 작은 블록과 작은 컴포넌트들로 분할 - 유지보수가 쉽도록 만듦 - 복잡한 사용자 인터페이스를 더 쉽게 구축 - 화면에 표시되는 내용을 제어하는 싱글 페이지 애플리케이션 리액트 대신 - 앵귤러 - 컴포넌트 기반의 UI 프레임워크 - 리액트보다 많은 내장 기능 - 타입스크립트 내장 - 뷰 - 컴포넌트 ..
-
[Javascript] DOM의 변화를 감시하는 MutationObserver 사용하기WEB Dev/Javascript | REACT | Node.js 2022. 10. 28. 00:17
리액트에서는 useEffect처럼 DOM의 변화를 인식해서 재렌더링을 해주는 기능이 있지만 바닐라 자바스크립트에서는 누가 데이터의 변화를 감지하고 있지 않기 때문에 여러가지 방법으로 DOM에 변화를 일으켜줘야 한다. 그럴때 사용하는게 바로 Observer 기능인데 이번에는 회사에서 일을 하면서 Observer을 이용해서 여러가지 기능을 만들게 되었다. Observer에는 InterSectionObserver와 MutationObserver 두 가지가 있는데 자세한 설명은 링크한 MDN을 살펴보면 된다. InterSectionObserver는 무한 스크롤을 만드는데 사용했는데 MutationObserver로 어떤 Node가 추가되었을 때 다른 Node의 변화를 주는 기능을 구현하여 간단하게 정리해보려고 한..
-
[카페24] 카페24 디자인 버전관리와 함께 자동 배포하기WEB Dev/GIT | GITHUB 2022. 9. 20. 19:43
*회고 겸 작성하기 때문에 엄청 길어요. 필요하신 분들은 하단의 방법만 참고하세요. 카페24를 호스팅으로 이용하는 커머스의 개발자로서 카페24는 그야말로 구원자이자 장애물인데 그 중 가장 해결해보고자 했던 것이 바로 '배포'라는 행위이다. 일단 카페24를 서버로 쓰는 것이 아니라 쇼핑몰 호스팅을 이용해서 솔루션 자체를 이용하는 경우 카페24의 페이지들은 전부 FTP를 통해 카페24 서버에서 돌아가게 된다. 그렇기 때문에 FTP가 가능한 배포 라이브러리들을 사용할 수 있는데, 말이 쉽지 실제로는 여러가지 문제가 있었다. 리액트 배포도 깃헙 배포 밖에 안해본 나로서는 '배포'라는 행위를 회사 시스템에 도입한다는데 큰 의의를 두었다. 대부분의 카페24 스킨은 디자인관리의 PC용 레이아웃과 모바일쇼핑몰 의 모바..
-
[CSS스터디] 3회 - flex와 gridWEB Dev/StudyNote 2022. 9. 15. 21:28
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스터디] 2회 - CSS 레이아웃WEB Dev/StudyNote 2022. 9. 1. 21:57
CSS 흑마법사가 되어봅시다. CSS 레이아웃 - 레이아웃은 뭘까? 어떠한 것들을 어떠한 위치에 배치 (Layout) - 어떤 요소가 어떤 위치에 있을 것인지 - Flex & Grid Layout - 이 두 개만 가지고도 대부분의 레이아웃 구성 가능 - 전통적인 방식 (IE를 기준으로)에서는 Float 레이아웃 사용 - 특수한 레이아웃 (table, ruby) CSS Box Model - 하나의 요소가 박스를 이루는 모델 - 모든 요소는 박스 형태를 취하고 있는데, 그 박스가 어떻게 생겼는지를 나타내는것 - Model은 여러가지 속성들이 합쳐진 개념을 말하는 것 - 박스 - 콘텐츠 박스contents-box (사각형) - 특정한 요소가 본인의 콘텐츠를 담고 있는 영역, 전체 박스(+border, marg..
-
[CSS스터디] 1회 - CSS란?WEB Dev/StudyNote 2022. 8. 25. 21:52
CSS 흑마법사가 되어봅시다. CSS란? 캐스캐이딩 스타일 시트 시트는 데이터가 나열된 공간 논리적인 결과물을 만들지는 않는다. 캐스캐이딩은 폭포 라는 영단어로 폭포같은 특성을 지님 버전이 의미있지 않음 특정한 스타일에 대한 표준이 만들어지고 표준을 관리한다. 모듈 단위로 관리 된다. 셀렉터 101 CSS는 Style의 나열 Style을 HTML 요소를 선택해서 적용 요소 셀렉터 클래스 셀렉터 콤비네이터 콤비네이터 101 셀렉터의 조합은 이론상 무제한 특정한 요소의 자손 요소에 스타일을 주고싶은 경우 자손 콤피네이터 공백 조상 요소공백자식 요소 { } ex) .box .title { } 자식 요소에 관계 없이, 자손 요소 중 해당 요소가 있다면 적용 특정한 요소의 자식 요소에 스타일을 주고싶은 경우 자식..