STUDY/React (52) 썸네일형 리스트형 React | Next.js 사용해보기 (2) - Assets, Metadata 1. Assets static assets 이미지같은 정적인 리소스들은 public 폴더 하위에 둔다. public폴더 하위에 images폴더를 생성한 뒤, 이미지를 넣어줬다. 그리고 index.js에서 불러오기! 2. Metadata HTML의 나 태그는 Head 컴포넌트를 통해 수정할 수 있다. 페이지별로 title을 다르게 할 수 있다..!! 그냥 리액트만 사용할 땐 못했었던 것.. index.js에서 Head 컴포넌트를 import 한다. import Head from "next/head"; Head 컴포넌트를 정의해준다 태그와 태그를 Head 컴포넌트로 감싸주는 형식! React | Next.js 사용해보기 (1) - 생성 및 실행, navigation 공식 문서를 보며 차근차근 따라해보기로 한다... Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org 👀 Next.js Next.js는 리액트 프레임워크로, 리액트가 가지고 있는 여러 문제점(?)들을 해결해준다. ✔️page-based routing system ✔️SSG / SSR ✔️Fast Refresh 특히 SSR과 SEO때문에 사용해보고자 함... 0. Node.js 설치 Node.js가 설치되어있지 않다면 설치.. React | SVG 사용 1. img에 src로 사용하기 일반적으로 이미지 불러오기와 방법 동일함 import heart_img from "../images/heart.svg"; 2. 컴포넌트로 불러오기 svg파일 수정 변경하고 싶은 부분의 값을 current로 바꾸기 컴포넌트로 불러와 사용 import { ReactComponent as HeartImg } from "../images/heart.svg"; props를 이용해 width값, height값, fill(색상)을 변경할 수 있음 React | 환경 변수 설정하기 (create-react-app) 👀create-react-app? 리액트로 웹 애플리케이션을 만들기 위한 환경을 빠르게 구축해주는 CLI 바벨(babel), 웹팩(webpack), 테스트 시스템(jest), HMR(hot-module-replacement), ES5+, CSS 후처리 등 필수적 개발환경을 한 번에 구축해줌 빌드 시점에 환경 변수를 코드로 전달할 수 있고, 개발 / 테스트 / 배포 환경별로 다른 값을 적용할 때 유용합니다. NODE_ENV라는 환경 변수를 기본으로 제공하며, 직접 등록하는 것도 가능합니다. 환경 변수는 코드에서 process.env.{환경 변수 이름} 으로 접근할 수 있습니다. // 환경변수 확인하기 console.log(`NODE_ENV = ${process.env.NODE_ENV}`); 환경 변수 설정.. React | Hooks 함수형 컴포넌트와 클래스형 컴포넌트 함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기 편하고, 메모리 자원도 덜 사용하며 빌드 후 배포시에도 함수형 컴포넌트의 결과물 파일의 크기가 더 작다. state와 라이프사이클 API를 사용하지 못한다는 단점이 있었으나, 리액트 v16.8업데이트 이후 Hooks라는 기능이 도입되면서 해결되었다. 리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때 함수형 컴포넌트와 Hooks를 사용하도록 권장하고 있다. (출처: 리액트를 다루는 기술 | 김민준 저) useState, useEffect 외 다른 Hook들을 정리해보고자 함. useReducer useState의 대체 함수 (state, action) => newState의 형태로 reducer를 받고 dispatch메서.. React | 이미지 여러 장 미리보기 (preview multiple images) * 이미지 한 장 미리보기는 이전 글 이미지 업로드 후 미리보기 (on Change / image preview) 1. input file 태그 생성 multiple설정을 해야 파일 여러 장 첨부 가능 2. onChange 함수 작성 e.target.files에 첨부한 여러 개의 파일들이 배열로 담겨온다. setState해주는 부분이 reader.onload밖에 위치하면 빈 배열값만 들어옴.. onload안에서 스프레드연산자로... 넣어주면 잘 들어간다... const handleImageUpload = (e) => { const fileArr = e.target.files; let fileURLs = []; let file; let filesLength = fileArr.length > 10 ? 10 .. React | react-facebook-login ( + 차단된 URI... 화이트리스트... ) 0. npm install $ npm i react-facebook-login 1. 페이스북 app id발급 페이스북 개발자 사이트에서 발급받을 수 있습니다. Facebook for Developers Facebook for Developers와 사용자를 연결할 수 있는 코드 인공 지능, 비즈니스 도구, 게임, 오픈 소스, 게시, 소셜 하드웨어, 소셜 통합, 가상 현실 등 다양한 주제를 둘러보세요. Facebook의 글로벌 개발 developers.facebook.com 2. import후 사용하기 커스텀한 버튼을 사용하고자 한다면 아래처럼 from값을 주어야 함 import FacebookLogin from "react-facebook-login/dist/facebook-login-render-prop.. React | iframe띄우기 ( + JSP, postMessage ) 본인인증 모듈을 연결하면서 팝업으로 띄웠다가 아이프레임으로 변경했다. 팝업도 나쁘지는 않았지만 사파리에서 window.close가 안 먹히는지 몰랐다. 사파리 누가써...?ㅠ iframe컴포넌트 생성 일단 아이프레임을 작성해준다. 모달처럼 띄워줬음. 이 때 서버측 주소를 src주소로 설정했는데, X-Frame어쩌구 에러 발생.. + Spring Boot | 스프링 시큐리티 X-Frame-Option 설정 import React from "react"; const IdentityAuthiFrame = () => { return ( ); }; export default IdentityAuthiFrame; 일단 잘 띄워지기는 하는데, 본인인증이 완료되고 난 결과값을 어떻게 알아내지 싶었다. window.par.. 이전 1 2 3 4 5 6 7 다음
