본문 바로가기

전체 글139

Build 이후 흰 화면만 나오는 이유 (로컬 index.html 안열리는 이유, react-router, 파일 프로토콜, http 프로토콜) 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 이유를 알기 위해서는 생각보다 조금 더 깊게 학습이 필요했다. package.json에 homepage : "." 코드 한줄만 추가한다고 되는 게 아니었다. (사실, 이 건 필요가 없었다.) cli에서 빌드를 마치고 serve를 설치한 이후에 다음 명령어를 실행을 했어야 했는데, serve -s build 그 이유는 build시에 server에 대한 패키지는 빼고 빌드되기 때문이었다. (이렇게 static server.. 2021. 9. 16.
NPM 명령어 정리, package.json(+scripts) 생성 및 사용 방법 # NPM(Node Package Manager)이란? - Node.js 전용 패키지가 올라가 있는 서버이다. - 패키지 업로드/다운로드 및 버전관리 기능을 제공한다. - node.js를 설치할 때 함께 설치된다. * 패키지는 남들이 만들어 놓은 외부모듈로, 라이브러리 같은 개념이다. * NPM 공식 사이트: https://www.npmjs.com/ # package.json 생성 - 수많은 패키지를 다운받다보면 관리가 어려워진다. - 그래서 프로젝트마다 package.json 파일을 만들어서 패키지 목록 및 버전을 관리한다. * 프로젝트를 생성하자마자 package.json을 만들어주고 시작하길 권장한다. - 명령어: npm init 1) package name 등의 정보를 입력해준다. 필요 없는 항목.. 2021. 9. 15.
[Algorithm] 알고리즘 학습 순서 & 방법 & 참고자료 링크 기록 1. 프로그래밍 기본 문법 공부 (javascript) 2. 알고리즘 기본100제 -> 학습한 javascript 문법을 확인하는 차원부터 진짜 학습까지 https://www.notion.so/JS-100-94d97d294dd14c9b911a02c840fa9f2d 3. 문제풀기(그리디, 탐색, 기초 동적프로그래밍 50문제씩하면 좋음) -> 학습 순서만 참고할 것. javascript도 비슷한 문제는 많다. 프로그래머스로 학습하면 될 듯. 이후에는 javascript문제집을 사서 푸는 것도 괜찮을 듯... https://programmers.co.kr/learn/challenges 4. 기출문제 풀기(프로그래머스:카카오) -> 오히려 이 걸 먼저 해야 하는 것 아닐까? 출처 : 학습순서 안내 https:/.. 2021. 9. 9.
[React] cypress를 활용한 React 테스트 (feat. 시나리오 테스트, E2E Test) 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 개발을 마치자마자 문제라는 녀석이 끼어들기 시작한다 개발 자체가 긴급해서 테스트를 직접해가면서, 개발을 마쳤다. 마치고 나니까, Front-end 테스트가 누락됨에 따라, 컴포넌트를 추가/수정하는 과정에서 에러가 발생하는 경우가 있었다. 꼭 Front문제라기 보담은, Back-end 개발자가 api를 변경한 경우에도 종종 문제가 발생하는 경우가 있었다. 모든 문제를 육안으로 모두 체크할 수는 없다 최소 비즈니스 로직에.. 2021. 8. 25.
[React Router] 특정 경로 접속 시, 다른 경로로 변경 (리다이렉트) 하기 코드 자체는 매우 간단하다. (간단한 몇 줄이지만, 굉장히 자주 쓰이는 코드라서 기록해둔다.) ( {props.history.push( props.history.location.pathname.replace("/theme", "/donation") )} )} /> /theme 라는 경로는 과거에 사용하던 경로였다. 이른 donation 경로로 했으면, 아예 다른 라우터로 잡고, 과거의 경로로 접속할 경우, push로 새로 링크를 잡고 연결해주면 된다. 만약, props 정보로 history를 사용하지 못하는 경우는 useHistory를 연결하고나서 사용하면 되겠다. 그런 경우는 아마....router 컴포넌트는 아닐 것 같다. 2021. 8. 2.
리액트 SEO - 검색엔진(네이버, 구글)에서 검색되도록 고치는 방법 / robots.txt 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com robots.txt 고치기 public 폴더에 robots.txt 파일을 만든다. 아래와 같이 코드를 만든다. Sitemap: https://share.beautifulstore.org/sitemap.xml // 제작된 sitemap 경로 User-agent: * // 모든 검색엔진 (AdsBot 크롤러는 직접 입력해주어야 함) Allow: / // 모든 페이지 접근 허용 네이버, 구글 웹마스터 도구에 사이트 주소를 .. 2021. 7. 20.

티스토리툴바