분류 전체보기

[React] svg 파일 불러오기가 안 돼요!

2022.9.27 (화) 작성 1. 에러❗️ 리액트에서 svg 파일 자체를 import 시키면 파일을 불러오지 못한다. 2. 상황 svg 파일 링크를 img 태그의 src로 가져다 쓰는 것과, svg 코드 그대로 복사해 삽입하는 것은 문제가 없었다. 하지만 svg 파일을 자체를 import 시키고 싶을 때, 다음과 같이 작성하니 error 가 발생했다. import CancelIcon from '../images/cancel-icon.svg'; ... const Modal = () => { ... return ( ) } 3. 해결💡 다음과 같이 import 시키면 svg 파일을 리액트 컴포넌트처럼 사용할 수 있다. import { ReactComponent as CancelIcon } from '../i..

[React] styled-components에서 background-image 가 안 들어감

2022.7.27 (수) 작성 1. 에러❗️ styled-components에서 background-image로 이미지를 넣었는데 뜨지 않는다. 2. 상황 React 앱에서 styled-components 로 스타일링 중, 아래 같이 코드에 이미지 경로를 넣으면 배경 이미지가 안 뜬다. background-image: url('../images/roomDetail/02_rooftop_1x_w3000.png'); 3. 해결💡 styled-components에서 배경 이미지를 넣을 때는 두 방법 중 하나를 쓰면 된다. 1. src 폴더 안에 images 폴더가 있을 때 //이미지 임포트 시켜주고 import rooftopImg from '../images/02_rooftop_1x_w3000.png'; con..

[TIL] #6. CSS flexbox

2022.5.3. (화) 1. 오늘의 소감 flexbox 개구리 게임 재밌다. 확실히 flex 문제는 공부할 땐 복잡하고 어려운데 그만큼 어려운 문제를 맞추는 희열이 있다. 꿀잼! 이번 페어분은 귀엽고 상냥하신 분! 내 조금 어설픈 설명도 잘 알아들어주시고, 헷갈릴 때 중요한 부분을 집어주셔서 코딩이 편했다. 페어 프로그래밍을 시작 전에는 긴장도 많이 하면서, 막상 동기분을 만나고 나면 코딩하기도 즐겁고 힐링하는 기분이 드는게 신기하다. 낯선 사람 만나는 걸 두려워하던 ‘나’를 까먹을 정도이다. 처음 페어 프로그래밍 이야기를 들었을 때 엄청 걱정하던 나였는데 말이다. (물론 지금까지 만난 동기분들이 나를 편하게 잘 대해주신 덕분!) flex는 복잡해보이지만, 사실 실제로 쓸 때는 몇가지 속성만 쓰게되서...

[TIL] #5. CSS 셀렉터

2022.5.2. (월) 1. 오늘의 소감 CSS 셀렉터는 이전에 정리해둔 내용이 있어서 공부가 힘들지는 않았다. 처음보기엔 매우 복잡해보이지만, 막상 쓰다보면 쓰던 것 위주로 쓰게되고 자연스럽게 익혀진다는 걸 알기 때문이다. 다만 각 셀렉터를 지칭하는 이름을 알아두어야겠다. 내가 정리했던 자료랑 오늘 배운 내용에서 셀렉터 명칭이 달라서, 나중에 남에게 설명할 때 상대방을 헷갈리게 할 것 같다. 자꾸 6시 이후에 자리에 앉는 게 힘들어진다. 수업시간이 끝나면 개인 공부도 꼭 해야하는데... 내일은 1시간 만이라도 밥먹고 앉아있기를 실천하자. 2. 학습한 키워드 프론트엔드 개발자에게 CSS는 왜 중요한가, UI, 셀렉터, 선언블럭, 선언, 선언 구분자, 속성명, 속성값, 인라인 스타일, 내부 스타일 시트,..

[HTML] SVG 크기 조절은 어떻게 하죠?

2022.9.4 (일) 작성 1. 에러❗️ svg의 속성값으로 들어간 width와 height를 변경하니, 아이콘이 잘려서 표시된다. 2. 상황 1. 구글 아이콘에서 아이콘을 svg로 다운 받았다. 2. 그리고 코드에 삽입해주었다. (리액트) const OutIcon = () => ( ); //리액트 jsx 코드 ... // ( ); 3. 해결💡 viewBox 속성을 사용해주면 된다! viewBox MDN 참고. 사실 mdn 내용이 잘 이해되지 않았다. 그래서 실제 코드로 실험해보고, 내 식대로 뷰박스에 대해 설명해보자면... 👉 viewBox는 아이콘의 실제 크기와 위치(보이는 부분)를 정의한다. 👉 viewBox 속성은 min-x, min-y, width, height를 순서대로 써줘야 한다. 👉 즉..

[React] 리액트 build 폴더의 index.html 이 브라우저에서 안 떠요!

2022.8.26 (금) 작성 1. 에러❗️ 리액트 build 폴더의 index.html 이 브라우저로 열리지 않는다. 2. 상황 CRA(create-react-app)으로 리액트 앱을 만들었다. npm run build 로 build 폴더가 생겼다. build 폴더의 index.html 파일을 브라우저로 여니, 화면이 로드되지 않는다! 3. 시행착오 build 를 했을 때, 터미널에 다음과 같은 메시지가 떴다. The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json. The build folder is ready to be deployed. You ma..