분류 전체보기
-
[React] Udemy 강의 노트 3-4WEB Dev/StudyNote 2022. 11. 28. 20:26
컴포지션의 개념 chlidren prop - 리액트에서는 컴포넌트가 가장 중요하다. 이런 컴포넌트에 추가할 수 있는 기능에 대해 배운다. - 컴포넌트는 아주 중요하다. - 컴포넌트 안으로 데이터를 전달하기 위한 props도 중요하다. - 컴포넌트는 JSX 코드를 결합한 사용자 정의 HTML이고 스타일링이다. - 원한다면 자바스크립트 로직을 추가할 수 있다. - props를 통해 모든 것을 설정하는 컴포넌트가 아니라 열고 닫는 태그 사이에 컨텐츠를 전달하고 싶을 때가 있다. - 사용자 지정 컴포넌트를 일종의 컨텐츠를 감싸는 래퍼Wrapper로 사용할 수 없다. - 내장된 HTML 요소인 div나 h2는 사용 가능하다. - chlidren은 예약어이다. - props.children의 값은 사용자 지정 컴포..
-
[React] Udemy 강의 노트 3-3WEB Dev/StudyNote 2022. 11. 26. 21:12
JSX에서 동적데이터 출력 및 표현식 작업하기 - 컴포넌트와 HTML이 정의되면 그것을 재사용하려고 한다. - 일반적으로 만드는 컴포넌트의 데이터들은 고정되어 있지 않다. - 어떤 데이터는 고정될 수 있지만 제목, 양, 날짜 등은 동적인 것으로 변화하기 때문에 HTML 코드로 고정되면 안된다. - 컴포넌트는 HTML과 CSS, 자바스크립트의 조합이다. - 컴포넌트에서 자바스크립트 코드는 함수의 return 전에 입력한다. - 보통은 HTML에 데이터를 고정 코드로 입력하지 않는다. - 대신 동적 데이터 출력을 위해 JSX 코드 안에서 중괄호를 사용해서 기본적인 자바스크립트 코드를 실행할 수 있다는 것이다. - 예를 들어 1+1이나 math.random()같은 메소드나, 변수, 반복문, 조건문을 사용할 수..
-
[Javascript] 별점 만들기WEB Dev/Javascript | REACT | Node.js 2022. 11. 26. 17:15
회사에서 원래 rateit.js 라이브러리를 사용해서 리뷰 기능을 구축했는데, 제이쿼리 충돌로 인해 (하.. 카페24) 바닐라로 별점 기능을 급하게 구성하게 되었다. input type 중 range를 사용했는데, range 사용도 처음이거니와 이 것과 CSS를 이용해서 0.5개 별점을 만들 수 있다는 점에서 다양한 곳에서 다양한 디자인으로 사용할 수 있을 것 같아서 적어본다. 알고보니 rateit.js 라이브러리도 동일한 방법으로 리뷰 기능을 만드는 것이었다. 보통 별점 기능은 0.5개 단위로 5점까지 표시되게 된다. 0점 부터 시작하는 곳도 있고, 0.5점부터 시작하는 곳이 있는데 우리는 0점부터 시작하되, 0점이면 리뷰 입력이 안되는 UX를 가지고 있다. HTML, CSS, JAVASCRIPT 로 ..
-
[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] 상품 프로모션 기간 타이머처럼 움직이게 하기StartUP/카페24 2022. 10. 11. 11:31
카페24 상품 모듈 중 할인 기간을 보여줄 수 있는 모듈이 있다. 보통의 타임 세일처럼 날짜와 시간을 yyyy-mm-dd hh:mm:ss로 표시해주고 있다. 기간 판매 혹은 공동구매 등에 활용하기 위해 해당 모듈을 상품에 넣어보았는데 카운트다운처럼 초나 분이 줄어드는 것이 보이지 않고 해당 페이지에 접속한 시간을 기준으로 멈춰있다. 그럼 초를 왜 넣어놓은거지... 할인 기간을 좀 더 선명하게 보여주기 위해서 할인 기간을 카운트다운 형식으로 변경해보았다. 우선 상품 detail 페이지나 메인 진열에 아래 변수를 사용해서 표시해주면 상품 등록 - 프로모션에서 설정한 기간을 볼 수 있다. 할인 시작 : {$product_promotion_start_date} 할인 종료 : {$product_promotion_..