본문 바로가기

main

eslint: command not found 에러 | .eslintrc.js bash: eslint: command not found 책을 보고 따라하고 있었는데 명령어 eslint --init 에서 만난 에러 eslint는 자주 사용되니 -g 를 붙여 글로벌로 설치하라고 해서 했는데, 뭐 경로 문제인지 eslint를 찾지 못하는 거 같음? 공식문서를 보니 그냥 -g 없이 설치하길래 했더니 별 문제 없이 잘 되었다.. 그래서 일단 쓰는 중 $ npm install eslint --save-dev $ ./node_modules/.bin/eslint --init eslint An AST-based pattern checker for JavaScript. www.npmjs.com .eslintrc.js eslint --init하면 만들어준다. module.exports = { env:.. 더보기
[MySQL | Javascript] query return값 받아서 저장하고 사용하는 방법 const getArchive = (req, callback) => { connection.query(selectQuery, function (selectErr, userRows) { if (userRows.length > 0) { return callback(JSON.parse(JSON.stringify(userRows[0]))); } else { return callback(false); } }) } connection.query를 통해 userRows에 어떤 결과를 받아 온다. 하지만 그 결과값을 return했을 때 console.log()를 찍어 보면, 데이터가 return되지 않고 undefined를 출력한다. 근데 위 코드처럼 callback을 리턴하면 이 값을 받아낼 수 있다. JSON.함수.. 더보기
[React] Context API, 전역 상태 관리하기, 두 개 이상의 Context 사용하기 유저의 정보나 헤더 등 전체 페이지에서 상탯값을 사용해야하는 요소들을 관리하기 위해 ContextAPI를 사용해보았다. 먼저 폴더구조는 다음과 같다. 1. createContext 먼저 context를 만든다. Header.context.js에 헤더의 context를 만듦 import { createContext } from "react"; // 관리할 state 정의 const HeaderContext = createContext({ view: false }); export default HeaderContext; 2. Provider state를 모아두는 provider를 만든다. state와 setState 동작을 정의한다. createContext를 받아와서 Provider로 return한다. p.. 더보기
[CentOS 7 | Apache] React 배포 시 Rewrite 설정 React로 만들어진 프로젝트를 배포하면 웹팩으로 빌드하여 나온 결과물인 main.js를 사이트에서 보여주게 된다. 하지만 이 main.js를 부르는 곳은 "/" 주소 뿐, 만약 "/login"이라던가 "/user" 등의 경로가 붙으면 main.js를 보여주지 않는 현상이 발생한다. 이를 해결하기 위해, 서버 측에서 이 상황을 인식하고 main.js를 반환해줄 수 있도록 Rewrite 설정을 해줄 수 있다. - Rewrite를 적용할 수 있는 범위 Server Config, Virtual Host, Directory, .htaccess 즉 필요한 곳에 사용하면 됨. 나는 VirtualHost 내에서 쓰면 될 것 같아서 여기에다 입력했다. ServerName ProxyRequests Off ProxyPre.. 더보기
[CentOS 7] Apache httpd.conf 파일 알고 쓰기 Apache 주요 디렉터리 /var/www 웹페이지 콘텐츠 기본 디렉터리 /usr/share/httpd 테스트, 에러페이지 등 기본 콘텐츠 /usr/share/doc/httpd 웹 서버 관련 문서파일 /etc/httpd/conf 주 설정파일 /etc/httpd/conf.d 추가 설정파일 /etc/httpd/conf.modules.d 웹서버와 함께 설치된 모듈 설정 관련 파일 ServerRoot Apache가 설치되어있는 디렉터리, conf 및 logs 디렉터리의 위치를 찾기 위해 사용 ServerRoot "/etc/httpd" DocumentRoot 웹 서버가 웹 서비스를 통해 표시할 디렉터리 지정, 웹 페이지의 루트를 지정하는 지시자 경우에 따라 가상 호스트로 구성된 웹 서버에서는 htdocs 밑에 각.. 더보기
User Agent Stylesheet 갑자기 만들던 웹사이트의 UI에 뜬금없는 margin이 추가되었다. 무엇이 문제인가 찾아보다 보니, 해당 html element에는 "position"이라는 영역이 들어와 있었다. 해당 요소를 클릭했을 때 보이는 css속성에는 8px이 적용된 속성이 어떠한 것도 없었기에 한참을 여기저기 찾아봤다. 그랬더니 코드의 body에서 margin: 8px;이 적용되고 있더랬다. 이것을 User Agent Stylesheet라고 하고, 각각의 브라우저별 기본 태그 속성 셋팅인데, 개발자가 태그의 속성을 설정해주지 않으면 브라우저에서 기본적으로, 임의로 넣어줘버리는 속성을 말한다! 왜! 주는건지는 모르겠지만, 브라우저별로 다른 것 같다. 크롬 기준, body 태그에 margin: 8px; 이 들어갔음. 예전에 다른 .. 더보기
[Webpack] robots.txt 추가 검색엔진에게 보여줄 robots.txt를 만들어 주자. 일단 나는 프론트에서, 백에서 둘 다 적용해 봤는데.. 네이버 서치어드바이저에서 인식하는데 시간이 좀 걸리는 바람에 어떤 방법이 먹힌지는 잘 모르겠다.; 1. React 프로젝트 Root에 robots.txt 파일 추가 프로젝트의 루트에 robots.txt를 생성한 후 내용을 입력하여 저장한다. User-agent: * Allow: / 나는 일단 모두 허용할 것이기 때문에 위와 같이 작성해 주었다. 어떤 검색엔진이 와도 허용할 것이라는 의미 2. robotstxt-webpack-plugin 설치 robotstxt-webpack-plugin A webpack plugin to output a robots.txt file www.npmjs.com npm.. 더보기
[React] Webpack 환경 설정에서 (.env) 환경 변수 사용하기 예전에 CRA로 만들어 개발했던 프로젝트에서는 환경변수를 따로 설정해주지 않아도 .env 파일을 만들어서 REACT_APP_* 변수를 사용하면 사용할 수 있었던 것 같다! 하지만 Webpack에서는 내가 환경변수를 사용하겠다는 것을 webpack.config.js에 알려줘야 한다. npm install dotenv 먼저 .env 설정을 위해 dotenv 라이브러리를 설치해준다. `.env` SERVER_URL="http://127.0.0.1:3000" 루트 폴더 내에 .env 파일을 만들고, 사용할 변수를 입력해준다. `webpack.config.js` const webpack = require('webpack'); const dotenv = require('dotenv'); dotenv.config().. 더보기

티스토리툴바