웹 개발 (97) 썸네일형 리스트형 JSX) props 기본값 설정 : defaultProps 구글링을 하며 공부를 하다보니 지식이 너무 뒤죽박죽인 것 같아 정리하려고 책을 사서 읽고 있습니다 :) 책을 읽으며 그동안 정확하게 정리되지 않았던 내용들을 기록해두기 위한 목적으로 글을 작성합니다! 아래는 제가 읽고 있는 기술서 입니다. 리액트를 다루는 기술 - 교보문고 개정판이 나왔습니다. 리액트 16.8 버전에 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태 관리를 할 수 있게 되었습니다. 이에 맞춰 책에 사용된 주요 예시를 모두 함수형 컴포넌트 형 www.kyobobook.co.kr props 기본값 설정 : defaultProps 부모 컴포넌트에서 자식 컴포넌트를 불러올 때 전달하는 props의 초기값을 설정하는 방법입니다. import React from 'react'; const .. React에서 미디어쿼리 @media 사용하기 반응형 웹을 만들기 위해 반드시 필요한 @media를 React에서 사용하기 위한 방법입니다. material-UI로 쉽게 사용할 수 있기 때문에 우선 material-ui를 install 하셔야 합니다. 그리고 미디어 쿼리를 적용할 컴포넌트에서 import 해줍니다. import useMediaQuery from '@material-ui/core/useMediaQuery'; 그리고 min-width 보다 스크린이 줄어든 여부를 나타내는 변수를 선언합니다. 아래 min-width: *px 부분에 미디어 쿼리로 적용할 기준 width 사이즈를 입력해줍니다. const matches = useMediaQuery('(min-width:1000px)'); 그리고 matches 변수를 이용하여 미디어 쿼리를 다음.. React 에서 ScrollTo 사용하기 스크린의 특정 위치로 자동 스크롤 되는 기능을 추가하는 방법입니다. 하나의 페이지에 많은 정보를 나열하고, 메뉴 버튼을 누르면 페이지의 특정 부분으로 스크롤 되어 여러 페이지가 있는 것처럼 사용하거나 React router로 페이지를 이동할 때 이동한 페이지의 최상단에서부터 랜더링되게 하기 위해 사용할 수 있는 방법입니다. function Example() { const scrollTo = (x,y) => { window.scrollTo(x,y); } return( Scroll to x=0, y=50 ); } 컴포넌트를 클릭하면 scrollTo 함수에 스크롤 하고자 하는 x축 좌표 값과 y 축 좌표값을 전달하면 됩니다. router 이동시 항상 최상단으로 이동하기 위해선 x,y 값을 따로 전달하지 않고,.. [Django] 튜토리얼 Cheating Sheet 지금은 nodejs + React로 프론트엔드 개발을 주로 하고 있지만 이전에 Django 프레임워크를 사용하여 웹 개발을 한 적이 있었습니다. 처음 Django 프레임워크를 사용할 때 일단 튜토리얼을 따라하면서 시작했는데 그때 제가 참고하려고 만든 Cheating Sheet 입니다. 프레임워크가 완전히 익숙해지기 전에 초기 개발 환경 설정시 참고하기 좋은 아~주 기본적인 내용입니다. :) Django #1 환경설정 1) Vs code를 실행해서 프로젝트를 위해 만든 폴더를 열어준다. or ('code .' command in cmd ) 2) 가상환경 실행: $ source myvenv/Scripts/activate - 항상 myvenv(가상환경이름)이 있는 폴더 위치에서 실행 명령 ** 가상환경 설치:.. React) Localstorage를 활용하여 React 로그인 정보 유지하기 아래 블로그를 참고하여 데모 사이트에 간단한 로그인 기능을 구현하였습니다. 코드에 static하게 저장되어 있는 사용자의 이메일과 패스워드 정보가 일치하고, 로그인 형식이 올바르면 setUser를 통해 초기값이 null 이던 user 변수에 정보를 주고, 이 user 값이 null이 아니라면 authenticated 값을 true로 바꿔줍니다. authenticated 값이 true로 전달되면 로그인 정보가 필요한 컴포넌트들이 랜더링 될 수 있는 것이죠. React Router로 사용자 인증하기 (로그인/로그아웃) Engineering Blog by Dale Seo www.daleseo.com LocalStorage 활용하여 인증 정보 저장하기 제 데모 사이트의 경우 처음 로그인 페이지를 랜딩 페이지로 .. React Hook useEffect has a missing dependency: 'xxx'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps) 해결하기 API로 서버에서 데이터를 받아오기 위해 react-hook 중 useEffect를 사용했습니다. 여러 개의 데이터를 받아와서 여러 개의 데이터를 setState를 해야 했습니다. 그런데 일부 useEffect 외부에서 선언된 데이터를 사용하여 axios.get을 해야 하는 경우, 해당 컴포넌트 호출시 바로 렌더링 되지 않고, 새로고침을 한번 더 해야 랜더링 되는 문제가 발생했습니다. 처음에는 이런 문제점을 파악하지 못하고 그냥 서버 속도가 느린 줄만 알았습니다 ㅠㅠ 그러다 콘솔 에러들을 해결하던 중 exhaustive-deps 문제를 해결하니 위 문제가 해결됐습니다. 아래 블로그를 참고하였는데 이 블로그에서는 이 문제를 해결할 수 있는 방법으로 2가지를 제시하는데 제 문제는 이 중 1번 해결 방법을 통.. 개행 '\n'을 포함하여 하나의 긴 문자열 랜더링하기 같은 컴포넌트에 텍스트만 바꿔서 재사용하여 페이지 하나를 만들고 있었는데 props로 텍스트를 넘겨줄 때 긴 문자열을 하나의 변수로 넘겨주어 렌더링 하면 \n을 표시했음에도 불구하고 브라우저상에서는 개행이 포함되지 않는 문제가 있었습니다. 단순히 여러 변수로 나누어 전달하는 방법도 있지만 이는 나중에 컴포넌트 재사용 측면에서 매우 비효율적일거라 생각해서 구글링을 했습니다. 놀랍게도 아주 여러 실험을 통해 답을 찾아낸 분이 계신 덕분에 쉽게 해결할 수 있었습니다. 참고한 블로그 링크 입니다. Lab | React, 장문의 Text의 개행이 가능할까? 리액트에서 렌더를 하면 br 태그는 속성이 먹히지 않는다. 어떻게 줄바꿈을 해야할까?? 연구해보자 velog.io 개행 '\n'을 포함하여 하나의 긴 문자열 .. React-router 페이지 이동시 페이지 최상단으로 자동 스크롤 하는 방법 React-router 페이지 이동시 페이지 최상단으로 자동 스크롤 하는 방법 React은 기본적으로 상태(state)를 유지하는 매커니즘을 취하고 있습니다. 그래서 React-router를 이용하여 다른 페이지로 이동을 하였음에도 불구하고, 브라우저의 스크롤 위치가 페이지 최상단으로 초기화되지 않고, 이전의 스크롤 상태를 유지하는 문제가 나타나게 됩니다. 이러한 문제를 해결하기 위한 방법은 다음과 같습니다. 다음과 같은 컴포넌트를 하나 만들어줍니다. /* ScrollToTop.js */ import { Component } from "react"; import { withRouter } from 'react-router'; class ScrollToTop extends Component{ compone.. 이전 1 ··· 9 10 11 12 13 다음
