프론트엔드 (17) 썸네일형 리스트형 [ HTML ] Referrer 관리 Referrer Referrer 메타태그를 활용하면 자신의 홈페이지에서 온 요청인지 다른 검색엔진이나 다른 페이지에서 온 요청인지를 알 수 있고 차단도 할 수 있다. Referrer 정보를 제한하고 싶을 때 Referrer 메타태그도 있지만 Apache 또는 Nginx 등에서 설정도 가능하다 또 한 요즘 웹웨일이나 크롬이나 보안관련 해서 업데이트가 되어서 cross 문제나 same-origin 문제등 때문에 자동으로 데이터를 차단한다 같은 프로젝트의 통신 일 때는 문제가 될거는 없지만 다른 프레임워크나 결제모듈이나 등등 다른 도메인에 데이터를 보내야 할 경우 문제가 생긴다 그래서 해당 태그로 조절을 한다. 사용 예 Referrer 를 다 제거 한다. Referrer 기본값 https://itjava.ti.. [ React ] [Chapter 16] 리액트의 리덕스 란 리덕스 란 리덕스는 상태 관리 라이브러리 이다. 1.리덕스를 사용 하면 애플리케이션의 전체 상태를 관리할 수 있다.(리덕스 같은 라이브러리를 사용하지 않아도 리액트 만으로도 물론 가능하다.) 2. 컴포넌트 코드로부터 상태 관리 코드를 분리할 수 있다. 아무래도 컴포넌트에서 상당히 많은 코드를 작성하게 되는데 그러다 보면 컴포넌트 쪽 코드가 많아져서 가독성이 떨어지는 경우가 있다. 그래서 상태 관리 코드를 분리해주면 컴포넌트 쪽 코드가 좀 더 가벼워 집니다. 3.미들웨어를 활용한 다양한 기능 추가가 가능하다. 데이터를 처리하는 중간과정에서 어떤 로직을 넣어서 필요한 기능을 추가할 수 있다. 4.서버사이드(SSR) 렌더링 시 데이터 전달이 간편하다. 5.리액트 context api 보다 효율적인 렌더링이 가.. [ React ] [Chapter 15] prop-types 속성값 타입 정의하기 prop-types 속성값 타입 정의 prop-types 패키지는 속성값의 타입 정보를 정의할 때 사용하는 리액트 공식 패키지이다.일단 prop-types 패키지를 배우기 이전에type을 왜 지정 하는지에 대해 알아보겠습니다.일단 자바스크립트는 동적 타입 언어이다. 타입에 대한 고민을 안 하고, 코드를 작성할 수 있고, 바로 작성한 코드로 어플리케이션을 실행 시킬 수 있죠 그래서 배우기 쉽고 간단한 어플리케이션을 작성할 때는 생산성이 좋기도 합니다. 그런데 큰 규모의 어플리케이션을 작성할 때는 오히려 생산성이 떨어집니다. 그래서 리액트의 정적 타입 언어를 배워두는것이 좋습니다. 간단한 어플리케이션만 작성할건 아니니깐요 사용 예 function Home({ name, age, memberState, onN.. [ React ] [Chapter 14] 쉽게 하는 불변성 관리 쉽게 하는 불변성 관리 immer 라이브러리 리액트에서는 배열이나 객체를 업데이트 해야할 때 직접 수정 하면 안되고 불변성을 지켜주면서 업데이트를 해야한다. 안그러면 리액트에서 해당 데이터 값으 무엇인지 몰르기 때문에 불변성을 지켜주면서 업데이트를 해야한다. const jsonTest = { a : 1, b : 2 }; jsonTest.b = 3 이와 같이 하면 안된다는거죠. 그런대 대부분 불변성을 지켜주면서 업데이트를 한다면 const jsonTest = { a : 1, b : 2 }; const nextJsonTest = { ...jsonTest, b : 3 }; 이와 같이 하죠(...jsonTest는 비구조 할당이라고 합니다 해당 같이 하면 해당 객체를 비구조로 할당할 수 있습니다.) 그런데 이와 .. [ React ] [Chapter 13] 리액트 내장 Hook 내장 Hook 종류 1.useState 배웠던거죠 하지만 한번 더! 상태값을 반환해줍니다. 첫번째 요소는 상태의 초기값을 두번째는 set함수를 const [ text, setText ] = useState(''); 2.useEffect 이것도 배웠죠 부수효과 함수 컴포넌트가 사라질때 혹은 생겨날 때 그러한 부수효과가 나면 호출되는 훅 useEffect(() => { // 부수효과 후 처리 작업 }); 3.useContent 이것도 배웠죠 Content를 생성 한다. 해당 props를 자식 컴포넌트한테 전달할때 거리가 긴 자식 컴포넌트한테 값 전달할 때 사용된다. const TextContext = createContent('디폴트값'); return ( ); // 자식 return ( {(it) => {.. [ React ] [Chapter 12] ref 속성값 ref 속성 리액트로 작업하다보면 실제 DOM 요소에 직접 접근해야 할 때가 있다.예를 들어 DOM이 10개 이상이 있는데 어떤 특정 DOM을 지울때 스크롤은 유지가 되어야 한다던지, 어떤 특정 DOM 요소에 포커스를 주거나, DOM 크기를 알고 싶거나 등등 그럴 때 사용 됩니다.ref 속성을 이용하면 자식 요소에 직접 접근을 할 수 있다. ref 간단 사용 예 import React, { useEffect, useRef } from "react"; function App() { const inputRef = useRef(); useEffect(() => { inputRef.current.focus(); }, []); return ( 확인 ); } export default App; ref 속성값을 사용.. [ React ] [Chapter 11] 커스텀 Hook 제작 커스텀 Hook 리액트가 제공하는 훅을 이용해서 커스텀 훅을 제작할 수 있다.그리고 커스텀 훅을 이용해서 또 다른 커스텀 훅을 제작할 수도 있다.훅을 직접 만들면 쉽게 로직을 재사용할 수 있다.어떠한 언어이든 (특히 java) 코드중복은 죄약이다 라는 말이 있습니다.그러하든 이 재사용성이 큰 장점이 됩니다.리액트 내장 훅 처럼 커스텀 훅도 use로 시작하는게 좋습니다 관리에 유용합니다.전 챕터인 10의 코드를 재사용 할 겁니다. 그 코드에서 필요한 즉 커스텀 할 훅은 const [ member, setMember ] = useState(null); useEffect(() => { serverApi(memberIdx).then(it => setMember(it)); return () => { console.. [ React ] [Chapter 10] Hook의 기초 알기 Hook 챕터 8 useState 편에서 훅에 대해 잠깐 설명 했습니다.이 챕터에서는 훅의 기초를 알아가는 시간을 가지겠습니다.Hook(훅) 컴포넌트에 기능을 추가할 때 사용 하는 함수이다. 예를 들어 컴포넌트에 상태값 추가나 자식 요소에 접근 하거나 할 때 사용하죠리액트 16.8버전 이후 부터 기능이 추가가 되었습니다. 그 전에는 클래스형 컴포넌트를 사용 했습니다. 그러나 이제 훅이 나오면서 많은 개발자들이 함수형 컴포넌트로 바꾸기 시작했습니다. 클래스형 컴포넌트보다 장점이 많고, 리액트 팀에서도 훅에 많은 집중을 하고 있습니다. 그래서 리액트 훅으로 작성 하는것을 추천한다.리액트에서 제공하는 대표적인 두 가지 기능이 있다. 1.useState 상태값 추가 2.useEffect 부수적인 기능들 처리 할.. 이전 1 2 3 다음
