JS/React (11) 썸네일형 리스트형 11. react-responsive 사용하기 반응형 웹을 만들 때 미디어쿼리만을 사용한다면 한계가 발생한다. 예를 들어, 아래와 같이 완전히 레이아웃이 바뀌어야 하는 상황에는 미디어쿼리를 사용할 수 없다. 이런 경우 react-responsive 를 사용한다면 간단히 레이아웃을 변경할 수 있다. 1. react-responsive 설치 npm install react-responsive --save 2. useMediaQuery Hook 사용 import { useMediaQuery } from 'react-responsive' const Responsive = () => { const pc = useMediaQuery({query:"(min-width: 1024px)"}); const tablet = useMediaQuery({query:"(mi.. 10. localStorage에 데이터 저장하기 localStorage는 웹 브라우저에서 제공하는 웹 스토리지 기능 중 하나로 다음과 같은 특징을 가지고 있다. 1. 5MB의 문자 데이터를 저장할 수 있다. 2. key : value 형태로 저장이 된다. 3. 저장된 데이터는 브라우저를 닫아도 유지된다.(직접 삭제하지 않는 이상 영속적으로 유지 가능) 4. 숫자를 저장하더라도 문자로만 저장이 되며 array, object는 저장이 불가하다. 그러나, JSON을 사용한다면 저장이 가능하다. localStorage.setItem으로 데이터의 저장이 가능하고, getItem으로 불러오기가 가능하다. 또한 사진과 같이 숫자 20으로 저장한 데이터도 문자 '20'으로 저장되어 불러와 진 것을 확인할 수 있다. .removeItem(key) 혹은 .clear().. 9. Redux를 사용한 상태관리 Redux는 상태(State)를 관리하고 상태 변경을 예측 가능한 방식으로 처리하기 위한 상태 관리 라이브러리이다. 컴포넌트들이 props 없이도 상태의 공유가 가능하기 때문에 복잡한 프로젝트에서 관리하기 간편해진다. 주요 개념 1. Store: 앱의 상태를 저장하는 중앙 저장소로, Redux 상태는 읽기 전용으로 상태 변경은 Action을 통해 이루어진다. 2. Action: 상태 변경을 하는 트리거 객체. { type:'ACTION_TYPE', payload:... } 형태로 정의되며, type은 액션의 종류 payload는 변경할 데이터를 포함할 수 있다. 3. Reducer: 이전 상태와 액션을 받아와 새로운 상태를 반환하는 함수로, 상태 변경을 실제로 처리하는 로직이 이루어진다. 5. Dispa.. 8. 라이브러리 사용하여 AJAX 요청하기 AJAX를 사용하기 위해 외부 라이브러리인 axios를 사용해보자. VSCode 터미널에 npm install axios 를 입력하여 설치해주고 import 후 axios.get()으로 요청할 수 있다. import axios from "axios"; { axios.get('url').then((data)=>{ console.log("ajax data: ", data) })}}> AJAX 요청 axios.get('서버 요청 url').then((가져올 데이터 변수명) => { 코드 입력 }); 이렇게 데이터를 가져올 수 있다. ( 변수명.data로 하면 핵심 데이터만 확인할 수 있다. ) 만약, 요청한 url에 문제가 있을 경우 확인하고 싶다면 .catch(()=>{})를 사용하여 확인할 수 있다. { .. 7. 페이지 라우팅 라우터와 라우팅 네트워크에서 정보를 주고 받기 위해서는 여러 개의 네트워트 간에 데이터를 전달하는 방법과 경로를 정해주어야 한다. 중간에서 이러한 역할을 수행하는 장치가 '라우터(Router)'이다. 라우터는 여러 개의 네트워크 사이에서 데이터를 적절하게 전달하고 길을 안내하는 역할을 한다. 라우터는 네트워크 간에 데이터 패킷을 전송하는데 사용되며, 각 패킷은 목적지의 IP주소를 가지고 있다. 라우터는 이 목적지의 IP주소를 확인하여 해당 패킷을 어떤 인터페이스로 전송해야하는 지 결정한다 이를 위해 라우터는 라우팅 테이블을 유지하고, 이 테이블에 따라 패킷을 최적의 경로로 안내한다. 이때 라우터가 데이터 패킷을 적절하게 전달하고 길을 안내하는 모든 일련의 과정을 '라우팅(Routing)'이라고 한다. 즉.. 6. React 프로젝트 만들기 React에서 사용 가능한 다양한 패키지가 들어가 있는 패키지를 다운받을 수 있다. npx create-react-app 만들 폴더 이름 --use --npm 그럼 이렇게 폴더가 생성된다. 1. node_modules : 다운 받은 패키지에 포함되어 있는 모듈들을 모아둔 폴더 (용량이 크고 다시 다운을 받을 수 있기 때문에 깃이나 드라이브에 올릴 시에는 제외하고 올리는 것이 좋다.) 2. public: 프로젝트의 빌드 결과물이 위치하는 디렉토리로, 웹 앱의 정적 파일을 포함하며 브라우저에 의해 직접 접근될 수 있다. - ~~.ico : 브라우저 탭에 나타나는 로고 - index.html : React의 컴포넌트들을 위치할 html파일 - manifest.json: 사용자 홈 화면의 추가될 때의 아이콘, .. 5. React? React(React.js) 클라이언트 사이드의 JS코드의 작성을 도와 최신 반응형 사용자 인터페이스를 쉽게 구현할 수 있다. * 왜 React가 추가적으로 더 필요할까? JS는 모든 단계를 작성해야 한다.(명령형 접근 방식) React는 응용 프로그램을 작은 빌딩 블록과 작은 컴포턴트로 분할하는 것으로 모든 빌딩블록과 컴포넌트는 정확한 테스크를 가진다.(선언형 프로그래밍) 즉, 유지보수나 관리가 용이하고 재사용이 가능하여 반복을 피할 수 있으며, 우려사항을 분리할 수 있어 작고 관리 가능한 단위로 유지할 수 있다. 그러나, React도 많은 JavaScript의 라이브러리 중 하나일 뿐이다. React는 컴포넌트 기반의 UI라이브러리로 컴포넌트에 집중하고 다른 기능은 많지 않다. 즉, third par.. 4. Node.js Node.js JavaScript를 실행할 수 있는 환경(runtime) JavaScript는 주로 브라우저(클라이언트) 측에서 실행되는 스크립트 언어로 사용되었으며 이는 브라우저의 JavaScript 엔진에 의해 해석되고 실행되었다. 그렇기 때문에 서버 측에서는 JavaScript를 사용하기 위해선 JavaScript 엔진을 내장한 소프트웨어나 플러그인을 필요로 했다.(ex: Chrome-V8, Firefox-SpiderMonkey, Safari-Nitro ...) 하지만, 이러한 방식은 제한적이기 때문에 JavaScript 엔진이 서버 측에서 동작하는 독립적인 런타임 환경이 필요하였고 이를 실현한 것이 Node.js이다. Node.js는 Chrome의 V8 엔진을 기반으로 개발된 것으로 JavaScr.. 이전 1 2 다음
