웹 프로그래밍 (22) 썸네일형 리스트형 [React] withRouter를 이용한 링크 이동시 메뉴변경 링크 이동으로 메뉴 변경 react를 이용하여 특정 링크로 이동하여 상단 메뉴 콘텐츠 내용을 변경하는 작업을 해보겠습니다. 우선 리액트 앱을 만들어줍니다. yarn create react-app withrouter-ex 그리고 scss와 react-router-dom을 사용할 예정이니 라이브러리들을 설치해줍니다. yarn add react-router dom node-sass@5.0.0 다 완료가 되었다면 src 폴더 안에 containers와 components폴더를 만들어줍니다. containers 폴더에는 Default.js, Home.js, Menu.js, Profile.js 를 생성해줍니다. Home.js Menu.js Profile.js Default.js는 나중에 작업을 하도록 하겠습니다. .. [JavaScript] 무한 스크롤 구현하기 오늘은 무한 스크롤 구현에 관하여 기록해보겠습니다. 스크롤이 제일 아래로 내려가면 js를 이용하여 새로운 콘텐츠를 생성 및 추가되는 방식으로 구현을 했습니다. HTML section 태그에 class="box"인 div가 있습니다. 현재는 4개의 div가 있지만 스크롤을 내리면 계속 추가되게 할 예정입니다. css css는 간단하게 h1 태그는 position: fixed를 사용하여 스크롤을 내려도 고정된 위치에서 보이게 하였고 html을 실행하게 되면 기본적으로 보이게되는 스타일은 다음과 같습니다, js 윈도우의 높이와 현재 스크롤 위치의 값을 더한 뒤 문서의 높이와 비교하여 같거나 크다면 콘텐츠를 추가하는 방식입니다. 위의 코드들을 실행하여 작성하고 실행해보면 정상적으로 무한스크롤 기능이 작동하는 것.. Rest API Rest API란? REST 아키텍처의 제약조건을 준수하는 애플리케이션 프로그래밍 인터페이스를 뜻한다. REST는 Resprsentational Transfer의 줄임말이다. 1. REST란? 웹에 존재하는 모든 자원에 고유한 URL을 부여하여 활용하는 것 2. API란? API는 Application Programming Interface의 줄임말로 애플리케이션 소프트웨어를 구축하고 통합하는 정의 및 프로토콜 세트이다 3. REST의 특징 REST의 특징은 다음과 같다. 1. Uniform (유니폼 인터페이스) > URI로 지정한 리로스에 대한 조작을 통일되고 한정적인 인터페이스로 수행하는 아키텍처 스타일 Stateless (무상태성) REST는 무상태성 성격을 갖는다. 작업을 위한 상태정보를 따로 저.. STRAPI 구현 STRAPI 란? STRAPI는 DB와 쉽게 연동해서 RESTful 또는 GraphQL 방식으로 데이터를 받고 내주는 백엔드 역활을 해주는 툴이라고 볼 수 있다. headless CMS CMS는 저작물 관리 시스템(Content Management System)의 약자로 글이나 사진등의 컨텐츠를 CRUD하면서 관리하는 시스템을 말한다. CMS는 DB, 백엔드, 프론트 엔드를 모두 갖추고 있는 하나의 완성된 시스템이라면, Headless CMS는 프론트엔드를 뺀 CMS라고 볼 수 있다. 즉 STRAPI가 Headless CMS구조의 백엔드를 책임진다. STRAPI 설치 방법 STRAPI의 구현 방법은 간단하다 YARN과 NPM, 몽고DB가 설치되어 있다면 쉽게 가능하다. yarn create strapi-.. [웹 프로그래밍] 스토리지와 쿠키 쿠키란? 쿠키란 클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 파일을 의미한다. 쿠키는 클라이언트의 브라우저 메모리 혹은 하드디스크에 저장이되고, 매번 서버에 전송되므로 크기가 크다면 서버에 부담이 갈 수 있다. 대략 4KB까지의 데이터를 저장할 수 있으며 유효기간이 존재하며 대부분의 브라우저가 지원을 한다. 웹 스토리지란? 웹 스토리지는 데이터를 저장할 수 있도록 HTML5 부터 지원하는 저장소이다 Key, Value 쌍 형태로 데이터를 저장하며 쿠키와 달리 서버에 전송되지 않으므로 서버에 부담이 가지 않는다. 또한 필요한 경우에만 꺼내 쓰는 것이므로, 자동 전송의 위험이 없고 5MB까지의 데이터를 저장할 수 있으며 유효 기간이 존재하지 않는다. 브라우저가 HTML5를 지원하지 않는다면 사.. package.json의 역할 package.json이란? package.json 파일은 프로젝트 루트에 포함되어있다. package.json 파일에는 프로젝트와 관련된 메타데이터가 담겨 있는 패키지에 대한 상세 설명서라고 볼 수 있다. 그 안에는 패키지의 이름, 버전 등이 담겨있다. package.json에 담겨 있는 내용들을 살펴보면 name은 프로젝트의 이름, version은 설치된 패키지의 버전, description은 패키지에 대한 설명 main은 최상위 js 파일, script는 명령어를 설정하는 부분, keywords는 프로젝트의 키워드를 배열로 저장하는 부분, dependencies는 패키지 배포시 포함될 의존성 모듈, devDependencies는 패키지 개발 시 사용되는 의존성 모듈(배포시 포함되지 않음)이다. [ReactJS] JSX JSX란? 자바스크립트의 확장 문법으로 XML과 매울 비슷하게 생겼으며, 이런 형식으로 작성한 코드는 브라우저에서 실행되기 이전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형식으로 변환된다. -JSX 예제 ● JSX의 장점 - 가독성이 좋고 익숙하다. HTML코드와 비슷하기때문에 가독성도 좋으며, 읽기도 쉽다. - 높은 활용도 HTML 태그 뿐만이 아니라 컴포넌트 또한 JSX 안에서 작성할 수 있다 ex) [ReactJS] Virtual DOM ReactJS 리액트는 자바스크립트 라이브러리로 UI를 만드는 데 사용한다. 구조가 MVC(Model-VIew-Controller), MVVM(Model-View-ViewModel)등인 프레임워크와 달리 오직 V(View)만을 신경 쓰는 라이브러리이다. Virtual DOM 이란? 리액트의 주요 특징 중 하나는 가상 문서 객체 모델(Virtual DOM)을 사용하는 것이다. 우선 문서 객체 모델(DOM) 이란 Document Object Model의 약어로 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML을 이용하여 작성한다. 웹 브라우저는 DOM을 이용하여 객체에 자바스크립트와 CSS를 적용하고 DOM은 트리 형태로 특정 노드를 찾거나 수정하거나 제거하고, 원하는 곳에 삽입이 가능하다. Virt.. 이전 1 2 3 다음
