FE

22.10.20-22.11.07 FE 4명, BE 3명으로 구성된 팀 메인 프로젝트 전 진행한 스택오버플로우 클론 프로젝트 1. 프로젝트 설명 StackOverFlow Clone (github) 목적 Stack Over Flow 페이지 클론 프로젝트 질문 리스트 페이지, 로그인/회원가입, 글 작성 & 수정, 질문 페이지 & 답변 기능을 구현하였다. 구현하고자 했던 기능 질문 리스트 페이지 로그인/회원가입 페이지 글 등록 & 수정 페이지 질문 페이지 & 답변 기능 사용 스택(FE) React.js, javaScript, react-router-dom, Recoil, Styled-components, Axios, ESLint, Prettier 협업 툴 GitHub, Figma, Discord 역할 [프론트엔..

이번에는 정말 더 빨리 지나갔던 section 4였다. 이렇게라면 프로젝트기간도 금방금방 시간이 지나갈 것 같다. 내일부터는 pre-project한다는게 안믿긴다. 두려움반 설렘반인데 남은 시간 최선을 다해서 마무리하도록 노력해야겠다. 1. 목표 📍 코드 스테이츠 수료 후 3개월 이내에 복지 좋은 회사에 들어가기 📍 내가 만들어 보고 싶은 웹사이트 만들어서 배포해보기 2. Keep & Problem Keep 👍 좀 빠진 날도 있었지만 아침 스터디 참여하면서 강의 시작 전에 여유를 가진 것 👍 무리하지 않고 잘 잔 것 Problem 👎 규칙적인 생활을 하지 않은 것 👎 하다가 안되면 노트북 덮은 것 👎 오후에 7시에서 8시 사이 공부를 시작하지 않은 것 3. Try 1순위 아침 스터디 시간에 알고리즘 아니..

[keyword] cors error, proxy proxy는 대리라는 뜻을 담고 있으며, cors error등의 문제를 피하기 위해서 CRA에서는 라이브러리로 활용이 가능한 cors정책 우회 방법이다. 일단 기존에 전통적인 api 요청의 흐름이다 이 흐름은 외부의 위험한 요소를 막기 위해 동일한 출처의 리소스 공유만 가능하게 하는 SOP정책에서부터 나오게 되었다. 1. 클라이언트에서 요청 2. 브라우저에서 서버로 필요한 리소스 요청 3. 서버 응답 4. 브라우저에서 cors정책 주소 유출의 위험도 존재한다. ✔️이 때 CRA 개발 시 사용할 수 있는 유용한 라이브러리가 있다 Proxy라고 cors 정책을 우회하는 방법이다. 클라이언트가 주소를 입력한다기 보다는 proxy라는 대리 라이브러리를 사용해 서..

[keyword] 클라이언트 배포, CI/CD, github action으로 클라이언트 CI/CD를 구축한 배포 링크 github action을 통한 aws 배포 1. github repository로 폴더 remote연결 2. 연결 후 github workflows폴더 안에 작성파일.yml 파일 만들기 3. yml문서에 테스트 적기 -> 성공하면 빌드해서 배포 # .github/workflows/작성파일이름.yml # 꼭 : 다음 공백 있어야 함 name: 테스트 이름 on: push: branches: - 브랜치이름 jobs: build: runs-on: ubuntu-버전적기 steps: #이 순서대로 테스트 진행 - name: 테스트 네임 uses: actions/checkout@v2 - name:..

✔️ Lighthouse 사용해서 Performance의 Opportunities 항목 확인 후 해결 방안을 확인 사이트 : 시몬스 모바일로 검사했을 때의 모습이다. Opportunities : 이 제안들은 페이지를 더 빠르게 로드하는 방법을 제시한다. 🔴 Serve images in next-gen formats ➡ 차세대 형식의 이미지 제공 🔴 Efficiently encode images ➡ 이미지를 효율적으로 인코딩 🔴 Reduce unused JavaScript ➡ 안쓰는 JS 줄이기 🔴 Eliminate render-blocking resources ➡ 랜더링 방해되는 자원 제거 🟠 Preconnect to required origins ➡ 필요한 원본에 미리 연결 🟠 Minify JavaSc..

[keyword] webpack, entry, output, 번들링, loader, plugin 번들링 : 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위 Webpack : 현재 프론트엔드 애플리케이션 배포를 위해 가장 많이 사용하는 번들러(22.07), 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러 모듈 번들러 : HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구 → Webpack은 주요 구성 요소인 로더(loader)를 통해 다양한 파일도 번들링 가능 → 빌드 : 개발 완료된 앱 배포를 위해 하나의 폴더(directory)로 구성하여 준비하는 작업(ex. React앱 기준 npm run build를 ..

리액트로 작업하다 콘솔창에 이런게 생겼다면 index.html 파일로 들어간다 index.html파일에 manifest를 찾은 뒤에 앞에 / 를 넣어준다 // 에러 // 해결 이렇게 그러면 콘솔창이 깨끗해졌다!!

이 에러는 react-router-dom 버전이 바뀌면서 자주 발생되는 에러인데 나의 경우에는 2가지 방법으로 해결할 수 있었다. 1. 버전 낮추기 일단 v.6.3.0에서 리액트 라우터 사용하는 코드는 밑에 코드와 같은데 이렇게 사용해서 에러가 해결된다면 굳이 버전을 낮출 필요 없다. (이거 쓰고도 버전 낮추기 싫은데 에러 생기신 분은 2번 방법 먼저 확인해주세요!!) import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 그냥 리액트 라우터 버전이 바뀌면서 사용법이 바꼈다. 이 버전을 공부해서 사용하기 편하다면 그대로 사용하면 된다. 근데 swich나 이전 버전의 라우터가 익숙하다 싶은 사람, 이전 버전의 라우터를 꼭 사용하..