FrontEnd/React (38) 썸네일형 리스트형 React의 css적용 styled와 Emotion 라이브러리 (@emtion/styled에 관한 자세한 내용은 https://www.inflearn.com/course/lecture?courseSlug=%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9-%EC%8B%A4%EC%8B%9C%EA%B0%84%EC%B1%84%ED%8C%85&unitId=71103&tab=community 에서 확인할수 있음) ( styled, Emotion라이브러리를 알아보기 전에!!! 물론 리엑트에서도 지금 배우려는 css in js의 방식과는 달리 1. 컴포넌트의 속성을(style) 인라인형식으로 아래와 같이 할수도 있습니다(가장 기본적인 html에 css적용하는 방식). 2. 다음으로는 css모듈을 활용하여 css라이브러리를 import하여 컴포넌트의 속성에 clas.. [Node] Sequelize 사용과 DB 연결, 회원가입 예시 출처: https://tadaktadak-it.tistory.com/181#--%--%ED%-A%-C%EC%-B%--%EA%B-%--%EC%-E%--%--%EC%--%--%EC%-B%-C Sequelize 란? - 객체와 관계형 DB를 연결하는 ORM (Object Relational Mapping)의 한 종류 - SQL문을 사용하지 않아도 명령문만으로도 DB 관리가 가능 - 필요에 따라 Row Query(SQL 쿼리문)도 사용 가능 그밖의 이해하기 쉽고 유용한 정보 많음 npm run에 대해서 npx webpack = 웹팩으로 빌드 npm run dev = dev 서버 시작 & 핫리로드 npm run 은 package.json에 있는 scripts에 있는 키를 실행하는 명령어이다. 만약 scripts에 build라는 명령어가 없다면 npm run build는 실행되지않는다. 이것은 npm run dev도 마찬가지다. npm run dev를 해서 서버가시작되고 hot reload될 수 있는 것은 wepback.config.js와 관련된다. webpack dev server와 hot raloading하는 설정 출처: https://www.youtube.com/watch?v=RCb0UF7Lu90&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=20 Hot module replacement 알아야함 핫 리로딩(hot reloading)해주는 두 개의 패키지 1. react-refresh 2. @pmmmwh 위의 2개 패키지를 업데이트 해주는 터미널에 입력하는 명령어 1. npm install react-refresh @pmmmwh/react-refresh-webpack-plugin -D 이를 위해 개발용 서버도 필요함. 아래는 이를 위한 터미널에 입력하는 명령어 2. npm install -D webpack-dev-server 3. package.json에서 scripts 명령어.. React Router Dom v6 (중요) 출처:https://velog.io/@kim98111/Routing (글에 오타는 많지만 좋은 글)아래는 글에서 중요 부분만 표시한것(그냥 윗글을 보는게 효과적). 동적 라우팅에 관해서는 아래 내가 정리한 글 보기.컴포넌트를 랜더링하는 것을 라우팅(routing)이라고 한다.path 어트리뷰트Route 컴포넌트에는 path 어트리뷰트를 설정해야 합니다. path 어트리뷰트에는 "특정 URL의 경로값"을 작성해줍니다.Routes 컴포넌트 내 작성된 Route 컴포넌트의 path 어트리뷰트 값을 현재 URL 경로값과 일치하는지 확인하고, 정확히 일치하는 하나의 Route 컴포넌트를 활성화시키게 됩니다.기존 react-router-dom v5에서 exact라는 어트리뷰트 작성한 것과 동일하게 매칭되는 Rou.. hook과 클래스 컴포넌트 각각에서 url의 쿼리스트링을 가져오는 방법 react router 6에 들어오면서 더 이상 자식컴포넌트에서 부모를 통해 얻은 props를 통해 history, location, match 에 관한 정보를 얻을 수 없다. 그리고 클래스 컴포넌트에서는 아래와 같이 코딩하면 search에 접근할 수 없다며 오류가 발생한다. hook에서 url의 쿼리스트링을 가져오는 방법은 아래서 설명하겠지만 클래스에서 그렇다면 어떻게 url의 쿼릴스트링을 가져올까? 의외로 문제는 이상하리만치 쉽게 풀렸다. 바로 window객체를 사용해서다. 코드는 아래와 같다. 너무 간단하게 풀려서 정말 window객체를 써도 되는가 걱정이 남는다. 이에 대한 추가정보는 다음에 알아보기로 한다. 2. hook을 이용한 url 쿼리스트링 가져오기. react router v6로 변경되.. URL에서 쿼리스트링 값 가져오기 참고: https://velog.io/@kim_unknown_/React-React-Router-Dom-v6 아래와 같은 방식으로 URL에서의 ? 뒤에 있는 queryString(search값)값을 가져올 수 있다. const GameMatcher = () => { const location = useLocation(); const navigate = useNavigate(); // let urlSearchParams = new URLSearchParams(location.search.slice(1)); // console.log(urlSearchParams.get('hellow')); // console.log(urlSearchParams.get('query')); // console.log(urlSe.. useCallback에 관하여(fetch예시 나옴) 요약: useCallback은 2개의 인자를 취한다. 첫번째인자는 함수이고 두번째 인자는 배열이다. 그리고 배열의 값중 어느 하나라도 변경되었을때만 첫번재 인자로 전달된 함수 자체가 다시 반환된다. (우선 React.memo 예시는 제외하고 봄) 출처: https://www.daleseo.com/react-hooks-use-callback/#google_vignette React Hooks: useCallback 사용법 이번 포스팅에서는 useMemo() 함수와 더불어 성능 최적화에 사용되는 React의 useCallback() hook 함수에 대해서 알아보겠습니다. 함수 메모이제이션 useCallback()은 함수자체를 메모이제이션(memoization)하기 위해서 사용되는 hook 함수입니다. 첫번째.. 이전 1 2 3 4 5 다음
