프로젝트를 진행하며 개발도 하고 서류도 작성하다보니 시간이 너무 빠듯하다ㅠㅠㅠ
오늘도 공부한 내용을 간단하게나마 정리한다.
👉 오늘 한 일
- React로 프로젝트 개발을 했다.
- 회의 자료를 준비하기 위해 자료 조사를 하고 간단하게 서류를 작성했다.
👉 공부한 내용
- ESLint를 적용해 프로젝트를 개발하는데 참고하는 블로그, 유튜브 영상들을 보면서 작성해도 에러가 날 때가 많다. 그런 부분을 해결하면서 많은 것을 배우고 있다.
- React에서 이미지를 태그를 사용하는데는 2가지 방법이 있다.
// 1번
imoprt imgA from './images/testA.png';
<img src={imgA}/>import 이름 from '경로';로 이미지를 import하여 변수로 사용하는 방법이다.
다음으로 require()를 사용하는 방법이다.
// 2번
<img src={require('./images/testA.png')}/>require(이미지 파일 경로)로 이미지를 불러온다.
추가 검색자료
webpack을 쓸때<img src={'./images/testA.png'} />가 아니라require()를 써야한다고 한다.
create-react-app을 쓴다면 public 폴더에 images 폴더를 만들어 image를 넣고<img src="/images/logo.png" />로 쓸 수 있다고 한다. 하지만 컴파일 타임 때 존재하지 않는 파일을 불러오면 404 에러를 사용자에게 보여줄 수도 있다.
import와 require의 사용에 대해 검색을 해봤는데 누구는 import 방식을 추천하고 어떤 사람은 코드가 지저분해지므로 require를 사용하라고 하는데 여러 글을 본 결과 이미지가
재사용되면import를해서 변수로 작성하고 그게 아니면require을 사용하는게 import 구문이 많지 않아 괜찮을 것 같다!
eslint를 사용할 때require에서Unexpected require().eslintglobal-require에러가 나온다면require를function안에 쓰는게 권장되지 않아서 그런 것이다. 즉,require를 top level에 쓰는게 권장되는 방식이다.
그래서 나는const imgUrl = require('이미지 경로')로 작성했는데 맞는 방식인지 잘 모르겠다,,,!
- 카카오 소셜 로그인을 구현했다. 아직 세션 문제 등 여려 가지 해결해야하는 문제들이 있다 ㅠㅠ
- git squash를 공부했다.(엄밀히 말하면 rebase -i를 했다.)
☕️ 잡담
프로젝트를 진행하는데 제대로 모르고 eslint를 적용해서인지 해결하는 속도가 너무 느리다 ㅠㅠ 클론 코딩 강의만 듣고 바로 프로젝트로 가려니 아직 익숙하지도 않고 얼른 개발 실력을 키우고싶다...! 블로그에 포스팅 예정인 글도 많은데 언제 할 수 있을지 모르겠다😢
그리고 자료 조사를 하면서 취업 시장을 조사했는데 취준생이 엄청 많은 것을 알게 되었고 힘들다는 것을 더욱 느끼게 되었다,,,! 취준생 모두 화이팅!💪 여러분은 충분히 잘하고 있어요 :)
오늘의 팁은 공부한 것을 상세히 썼으므로 넘어가겠다,,,!😅
📑 참고 사이트
- React 프로젝트에서 이미지 import하는 방법 - 글쓰는 개발자님 블로그
- How do I reference a local image in React - 스택오버플로우 질문
- Correct path for img on React.js - 스택오버플로우 질문
- adding assets and using public folder - Create React App 사이트
