본문 바로가기

main

[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().. 더보기
Github Profile에 간단하게 나를 소개하기 🤗 기술스택(+ICON) 기입 Github 예쁘게 해놓은 주변 사람들 보면서 나도 계속 해봐야지.. 하곤 있었지만 이제야 건드려 보게 됐다. 먼저 내 아이디로 repository를 생성한다. 비밀을 찾았다니?! 귀엽군 ㅎㅎ README.md 를 처음부터 생성해주면, 이렇게 Hi there이라고 인사해준다. 먼저 기술스택을 추가해주기 위해 simple icons 사이트를 활용한다. Simple Icons 2024 Free SVG icons for popular brands. simpleicons.org 이 Simple Icons 사이트는 진작 알았더라면....... PPT 만들 때 유용하게 썼을텐데.... 매번 구글에 기술스택 검색하고 배경 투명한 걸로 골라서 다운받기 힘들었었는데 ㅠ_ㅠㅋㅋㅋㅋㅋㅋ 다 옛날 얘기 ㅎ 그리고 README.. 더보기
[TypeScript] REST API로 받아온 데이터 일부만 Props로 넘겨주기 API로 받아온 데이터가 뭉탱이라 컴포넌트별로 분리해서 Props를 보내주고 싶었다. 근데 타입스크립트 문법을 아직 잘 몰라서 계속 에러 발생..,, Type 'PlayInfo | undefined' is not assignable to type 'PlayInfo'. Type 'undefined' is not assignable to type 'PlayInfo'.ts(2322) PlayList.tsx(22, 3): The expected type comes from property 'info' which is declared here on type 'IntrinsicAttributes & IProps' Type '{ props: PlayInfo | undefined; }' is not assignable.. 더보기
[Node] 회원가입 시 이메일 발송하기 - 구글 계정으로 nodemailer 사용 mail.transport.js const nodemailer = require('nodemailer') const fromuser = '구글아이디 (이메일ㄴㄴ)' const password = '구글비밀번호'; const transport = nodemailer.createTransport({ service: 'gmail', host: 'smtp.gmail.com', port: 465, secure: true, auth: { user: fromuser, pass: password } }) module.exports = transport 이메일을 보낼 모듈을 생성한다. 사용할 계정의 아이디와 비밀번호를 입력해 준다. router.js exports.sendEmail = (req, res) => { tra.. 더보기

티스토리툴바