FE

이번에는 정말 더 빨리 지나갔던 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를 ..

이번 Section3도 시간 너무 빨리 간다… BE부분에 대한 내용도 많았고, 재귀도 처음 접해봤는데 이해하기 어렵고 사용하기는 더 어려웠지만 몰랐을 때와 비교하면 아주 많이 배워간 섹션이라서 너무 즐겁고, 시간이 지나면 좀 더 잘 다루고 익숙해질 수 있도록 꾸준히 열심히 해야겠다. 1. 목표 📍 코드 스테이츠 수료 후 3개월 이내에 복지 좋은 회사에 들어가기 📍 내가 만들어 보고 싶은 웹사이트 만들어서 배포해보기 2. Keep & Problem Keep 👍 커밋 빼먹지 않고 한 것 👍 이번 섹션에서 좀 빠진 날도 있었지만 꾸준히 아침 스터디 참여한 것 👍 무리하지 않고 잘 잔 것 Problem 👎 운동을 하지 않은 것 👎 규칙적인 생활을 하지 않은 것 👎 어려운 내용 나온 날에 멍 때린 것 👎 강의 사..

[keyword] 웹 표준, 웹 접근성, WAI-ARIA 인터넷이 웹보다 포괄적인 개념 인터넷 : 전 세계적으로 연결되어 잇는 컴퓨터 네트워크 통신망(웹, 온라인게임, 메일 ,네트워크...) 웹 : 정보를 공유하는 공간 📍웹 표준 ➡️ 어떤 환경이든 동등하게 이용할 수 있는 웹페이지 ➡️ 웹 개발의 형식을 통일시킨 것 ➡️ W3C에서 권고하는 웹에서 표준적으로 사용되는 기술, 규칙 웹 개발에 사용되는 언어인 HTML,CSS,JS기술, 사용자가 어떤 운영체제나 브라우저를 사용하더라도 웹페이지를 동일하게 보이고 정상작동 할 수 있도록 하는 웹 페이지 기술 👍 장점 유지보수가 쉬워진다 : HTML,CSS,JS 각 영역 분리로 유지보수가 용이해지고 코드가 경량화 되어 트래픽 비용이 감소 웹 호환성 확보 : 운영..

[keyword] Redux, Redux 데이터 흐름, FLUX 패턴 Redux : 상태 관리 라이브러리 ⭐️ React에만 종속되는 것이 아님!! Redux의 데이터 흐름은 Action ➡️ Dispacth ➡️ Reducer ➡️Store 데이터가 단방향으로 흐른다. 번호가 action 생성 ➡️ 전달되는 순서이다. FLUX : Facebook이 클라이언트 측 웹 애플리케이션 구축에 사용되는 애플리케이션 아키텍처. 단방향 데이터 흐름을 활용하여 React의 구성 가능한 뷰 구성 요소 보완 프레임워크보다는 패턴에 가깝고 새 코드 없이 Flux 즉시 사용 가능 Flux 애플리케이션은 디스패처, 스토어, 뷰의 3가지 주요 부분으로 구성