Ella 프론트엔드일지

0. 글을 쓴 이유 - 구글 웹폰트를 글로벌스타일에 적용하려니까 어떤 방법을 해도 안됨. 수많은 게시글을 보았으나 실패.... - 아래 블로그 처럼 구글 폰트 파일을 직접 다운받아서 하는건 적용이 되었으나, 구글 웹폰트 적용은 되지 않았음..ㅜㅜ (직접 다운받아서 적용하는 건 아래 블로그에 아주 자세히 설명되어있으니 참고) - 현재 하고 있는 프로젝트 규모가 작다보니 굳이 폰트 다운받을 필요는 없을 것같아서 웹폰트 적용하는 방법이 절실했음!! https://flamingotiger.github.io/frontend/react/react-add-font/#%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-%EC%A7%81%EC%A0%91-%EC%A0%81%EC%9A%A9%E..

✅json-server db 실행명령어 쓰기 귀찮을 때 - 리액트를 이용해 간단한 게시판 만드는 프로젝트를 하고 있음 - mysql과 같은 데이터 베이스를 다루기에는 시간적 제한으로, json-server를 이용해서 데이터를 저장하려고 함. - json-server를 실행하기 위해서는 아래와 같은 명령어를 계속 쳐줘야 한다. 매번 명령어를 터미널에 쳐주기엔 귀찮다. 나는 db의 port 를 3001로 해주었기에 매번 아래와 같이 긴 명령어를 쳐줘야한다. json-server --watch db.json --port 3001 ✅해결 방법 : package.json 파일에 가서 scripts 부분을 수정한다. 아래와 같이 수정한다. 그러면 이제, 실행명령어를 계속 칠 필요 없이 터미널에 npm run db ..

1. 문제 상황 - assets -> fonts 폴더에 다운받은 폴더를 저장했다. - 글로벌 스타일에 아래와 같이 폰트를 설정했다. import { createGlobalStyle } from 'styled-components'; import reset from 'styled-reset'; const GlobalStyled = createGlobalStyle` @font-face { font-family: 'Spoqa Han Sans Neo'; src: url('../../assets/font/SpoqaHanSansNeo-Light.woff2') format('woff2'), url('../../assets/font/SpoqaHanSansNeo-Light.woff') format('woff'); font..

0. 에러의 원인 - 팀원들과 협업하기 위해 prettier 와 eslint를 설정하고 있었다. - .eslintrc.js 아래와 같이 설정하였지만 빨간줄이 그어지면서 에러가났다. - 문법적인 문제일까? 하고 봤는데... 에러메세지 : ';'이(가) 필요합니다. json 데이터 형식을 무슨... : 가 아니라 ; 로 바꾸라는 것이다. 나한테 왜그러니 대체.... 1. 해결방법 - .eslintrc.js 파일은 config를 export 해줘야 한다. 이건 자바스크립트 파일이기 떄문이다. json 파일일경우에는 export를 안해줘도 된다. 객체 앞에 module.exports = 를 붙이면 해결이된다!!! 출처 : https://github.com/AtomLinter/linter-eslint/issues..

0. 인프런 사이트로 보는 라우터 - 인프런이 리액트 기술을 사용하는지는 모르겠지만, 라우터 개념을 설명하기 위해 참조했다. - 메인페이지를 들어가니 url : https://www.inflearn.com/ 이 이렇게 나왔다. - 강의 페이지로 들어가니 url : https://www.inflearn.com/courses 이 이 이렇게 나왔다. 1. 리액트 라우터 - 위 예시와 같이 /를 통해서 페이지를 나누고 싶을때 라우터를 사용한다. (url 경로마다 다른 페이지를 보여주고 싶을 때 사용한다) - 리액트의 외부 라이브러리인 react-router-dom 을 설치하자 2. 리액트 라우터 셋팅 과정 1) 터미널 창에 npm install react-router-dom@6 입력 2) index.js 파일로..

- 정말 쉬운 예제코드라서 초보자들도 무리없이 이해할수있습니다. 1. 오늘의 삽질 원인 - props 실습을 하다가, props는 state와 문자,숫자 종류만 자식에게 물려줄 수 있는 줄 알았다. - 하지만, setState 함수도 물려줄 수 있었다. - 그런데, 알고있기로 props를 통해서 state를 물려줄때에는 state를 변경 불가능하다고 알고있었다. 즉, readonly라고만 알고있었는데... setState함수를 쓰니...자식의 값을 바꿔버리니 부모의 값도 바뀌는 것이었다... 또르르... 나는 자식의 값만 바꾸고 싶었는데, 부모의 값도 같이 바꿔버렸다... 1-1) 예제코드 - App.js 파일에 Main 자식 컴포넌트 안에 setState함수를 물려줄 이름을 이름변경이라고 짓고, 스테이..