분류 전체보기 147

리액트 + json-server) db 실행 명령어 스크립트에 넣기

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

리액트) 폰트 설정 방법 - 글로벌스타일이 아닌 index.css 파일에

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..

React) .eslintrc.js 에 Unexpected token ':' 에러 해결하기

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

React 기초) 페이지를 나누고 싶을 땐 react-router-dom 라이브러리 사용하자

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 파일로..

멋쟁이사자처럼 프론트엔드스쿨 3기 14주차 회고록

이번 회고는 일기장입니다. 학습적인거는 뭐 맨날 똑같아서...ㅎ ✅Hi 25조 팀프로젝트 모임(11.29 화) - 프로젝트 조들 중 아마..우리가 오프라인으로 젤 먼저 만나지 않았을까 싶다. - 홍대,인천 다 서쪽사람들이라..위치운이 좋았다. - 특히, 조원중에 학교 선배님(무려 함께 아는 대학친구 9명...), 같은동네 친구와 팀원이 되었기에... 어떻게 이런 인연이 있을수 있을까 싶었다...나를 위한 팀배정인가?싶었다 - MBTI N과 TJ의 조합.. 그냥 생각이 나면 던지는 N. 빨리빨리 정하길 원하는 TJ...꾸물꾸물거리는거 싫어.. 쪽팔려도 일단 아이디어 던져~~~ 팀명정하고, 노션 커버이미지 디자인 시안 제안하고, 천하제일 간판디자인 대회도 열었다~~ ㅋㅋㅋㅋ 아이디어1 아이디어2 하지만 내 ..

프로그래머스 lv0-자바스크립트) 문자열 안에 문자열

1. 문제 문자열 str1, str2가 매개변수로 주어집니다. str1 안에 str2가 있다면 1을 없다면 2를 return하도록 solution 함수를 완성해주세요. 2. 정답 및 해설 function solution(str1, str2) { return str1.includes(str2)? 1:2 } function solution(str1, str2) { if (str1.indexOf(str2) === -1){ return 2 } return 1 } 2-1) 배열에 특정 요소가 존재하는지 확인하는 메소드 (결과값 : true/false) [1,2,3,4].includes(1) //true [1,2,3,4].includes(5) //false 2-2) 문자열을 검색하고 싶을때 indexOf() - 주..