WEB Dev/Javascript | REACT | Node.js(29)
-
[React] 컨텍스트 Context 알아보기
해당 내용은 SOAPLE 님의 처음 만난 리액트(React) 강좌에서 발췌하였습니다. 📌 들어가며 리액트에서 상태관리를 할 수 있는 방법은 다양하게 존재한다. 상태관리 라이브러리를 쓰기 전에 리액트 내장 훅으로 사용할 수 있는 Context API에 대해서 공부해보고자 한다. 📌 context란 리액트 개별 컴포넌트들은 props를 통해 데이터를 전달한다. (부모 ➡️ 자식) props를 통해 데이터를 전달하게 되면 다수의 컴포넌트에서 필요한 데이터는 Props Chain(Drilling) 현상이 일어난다. 이를 해결하기 위해 Context가 발전했다. 📌 context의 원리 리액트를 props 방식으로 운영할 때는 아래 그림과 같이 props를 props가 위치한 컴포넌트에서 필요한 컴포넌트까지 컴포..
2023.03.22 -
[Javascript] <script>의 실행 순서를 결정하는 속성 aysnc와 defer
카페24로 일하다 보면 다양하게 스크립트 태그를 적용해야 하는 경우가 있다. 나의 경우는 전역으로 뿌려줘야 하는 함수 등은 common.js로 layout 모듈에 적용을 해두었고 개별 페이지에 적용해야 하는 스크립트는 별도로 로 import를 해주는데 카페24는 나름대로 노코딩 툴이기 때문에 라는 카페24만의 문법이 존재한다. 카페24가 기본적으로 저 문법으로 스크립트를 넣고 있는데, 이 스크립트들의 순서가 꼬이게 되면 원하는 기능이 제대로 작동이 안 되는 경우가 있다. 특히 swiperJS와 같이 외부 스크립트 라이브러리를 불러오는 경우...! DOM은 DOM대로 불러오고 내가 만든 함수는 함수대로 적용되는데 갑자기 스와이퍼 적용이 안되는 경우가 있다. 그래서 가끔은 html 내에 를 직접 넣어서 스크..
2023.03.15 -
[Javascript] bind 알아보기
bind 알아보기 해당 예시는 코어 자바스크립트의 '함수 바인딩'을 참조하였습니다. 📌 들어가며 유데미 강의 중 bind에 대해 설명하며 'bind는 향후 실행을 위해 함수를 사전에 구성한다. 기본적으로 함수가 실행될 때 받을 인수를 미리 구성할 수 있다.'라고 설명하는데, bind에 사용법에 대해 추가로 더 알아본다. 📌 bind란 bind는 자바스크립트 메소드로 호출되면 함수처럼 호출 가능한 '특수 객체(exotic object)'를 반환한다. 이 객체를 호출하면 this가 참조하는 변수(context)로 고정된 함수가 반환된다. let exFunc = func.bind(context); 📌 사용하기 1. 먼저 객체에 변수와 함수가 존재할 때 객체 내의 함수를 다른 변수에 할당해 실행하면 예상한 대로..
2023.03.08 -
[React] 리액트 포탈 React Portal을 통해 모달 만들기
해당 내용은 Udemy | React 완벽 가이드 with Redux, Next.js, TypeScript 강의에서 일부 발췌하였습니다. 가독성을 위해 일부 코드삭제가 있어 그대로 따라하면 문제가 생길 수 있습니다. 📌 들어가며 유데미 리액트 강의를 들으면서 Portal 사용법을 익혀두면 좋을 것 같다고 생각해서 별도로 작성한다. 유데미 강의는 별도로 필기를 하면서 듣고 있는데, 포탈 강의때는 쉽네 하고 넘겼다가 혼자서 못하겠어서 다시 한 번 복습 겸 정리! 📌 리액트 포탈이란 Portal은 JSX를 새 창이 아니라 화면 최상단으로 띄워야 할 때, 리액트가 렌더링되는 div#root 내부가 아닌 그 위로 렌더링 할 수 있게 해주는 방법이다. 보통 우리가 흔하게 아는 모달, 그러니까 정보를 가진 JSX를 ..
2023.03.05 -
[React] npm 대신 yarn으로 create-react-app 시작하기
yarn 으로 create-react-app이 익숙하지 않아서 터미널 명령어 복습 겸 기록! ♪(´▽`) yarn으로 create-react-app 설치하기 1. yarn 이 설치되지 않은 경우 yarn 을 npm을 통해 설치한다. (-g는 글로벌 global이란 뜻으로 붙이면 로컬 전역에 설치한다) npm install -g yarn * 만약 npm도 설치되어 있지 않다면 별도로 설치해야함! node 설치 바로가기 2. 터미널을 열어 아래 명령어를 입력하여 create-react-app을 yarn으로 설치한다. yarn create react-app 새폴더명 * npm은 npx install create-react-app을 입력하면 되지만 yarn은 create를 명령어로 사용해서 설치한다는 점을 기억..
2023.02.26 -
[Javascript] 별점 만들기
회사에서 원래 rateit.js 라이브러리를 사용해서 리뷰 기능을 구축했는데, 제이쿼리 충돌로 인해 (하.. 카페24) 바닐라로 별점 기능을 급하게 구성하게 되었다. input type 중 range를 사용했는데, range 사용도 처음이거니와 이 것과 CSS를 이용해서 0.5개 별점을 만들 수 있다는 점에서 다양한 곳에서 다양한 디자인으로 사용할 수 있을 것 같아서 적어본다. 알고보니 rateit.js 라이브러리도 동일한 방법으로 리뷰 기능을 만드는 것이었다. 보통 별점 기능은 0.5개 단위로 5점까지 표시되게 된다. 0점 부터 시작하는 곳도 있고, 0.5점부터 시작하는 곳이 있는데 우리는 0점부터 시작하되, 0점이면 리뷰 입력이 안되는 UX를 가지고 있다. HTML, CSS, JAVASCRIPT 로 ..
2022.11.26