분류 전체보기 (397) 썸네일형 리스트형 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.. 리엑트 이미지, 폰트 loader문제 해결 리엑트를 사용하여 나만의 프로젝트를 하는중 아래와 같은 에러를 만났다. ERROR in ./src/img/timeTable.jpg 1:4 Module parse failed: Unexpected character '�' (1:4) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders 요약하면 이미지를 사용하기위해서는 loader가 필요하다는 것이다. 어떻게 문제를 해결해야 할지 gpt에게 물어 보았고 그 결과는 아래와 같았다. 이에 따라 "리엑트 이미지 loader" 라.. 리엑트 이미지, 폰트 loader문제 해결 리엑트를 사용하여 나만의 프로젝트를 하는중 아래와 같은 에러를 만났다. ERROR in ./src/img/timeTable.jpg 1:4 Module parse failed: Unexpected character '�' (1:4) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders 요약하면 이미지를 사용하기위해서는 loader가 필요하다는 것이다. 어떻게 문제를 해결해야 할지 gpt에게 물어 보았고 그 결과는 아래와 같았다. 이에 따라 "리엑트 이미지 loader" 라.. React is not defined 에러 해결 참고: https://velog.io/@sooyun9600/React-is-not-defined-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0 기존의 문서를 리엑트 형식으로 일일히 변환하는 과정에서 React is not defined라는 에러를 만났다. react 변환해주는 과정에서의 문제는 bable-loader에서 문제가 있다는 것을 의미한다는 것을 알게 되었다. 아래의 코드를 다음과 같이 변형하였더니 문제는 해결되었다. //문제의 코드 { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use : { loader: 'babel-loader', options:{ presets: [ "@babel/preset-env",.. HTML, CSS 잡다하지만 꼭 알아야 할 것 여기다 정리 웹에서 개발자 도구 켜놓고 화면에서 ctrl+shift+c 하면 해당 화면에 대응되는 코드 블럭 처리되어 알려줌 title앞에 나오는 아이콘 그림을 파비콘(favicon)이라고함 오류해결!) React에서의 npm install typescript에서 발생한 오류 아래와 같이 명령어로 npm install typescript 라고 명령하니 오류가 떳다. 검색결과 원인은 위의 두가지 해결방안을 모두 적용하여 기존의 package.json에 있는 react-custom-scrollbars을 삭제하고 https://www.npmjs.com/package/react-custom-scrollbars-2 으로 들어가 npm install react-custom-scrollbars-2 --save 을 터미널에 입력해 주어 해결하였다. 어떠한 라이브러리(여기서는 typescript)설치시 문제가 발생한다면 기존의 라이브러리와의 호환성 문제를 생각해 볼 필요가 있다. [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와 관련된다. 이전 1 ··· 16 17 18 19 20 21 22 ··· 50 다음 목록 더보기