프론트엔드 4

[WIL] 행동대장 프로젝트 5주차 회고

프로젝트 강점 정리 Refresh Token 적용 AWS CloudFront 배포 github-action을 활용해 배포 자동화 구축 Cloudinary로 이미지 등의 asset 관리 ReactQuery InvalidateQueries를 활용해 무효화 적용(필요한 곳에 항상 최신 상태 유지) FormData로 서버에 이미지 전송 debounce를 이용한 최적화된 검색기능 구현 infinity-query를 이용한 인피니트 스크롤 react-hook-form으로 효율적으로 form을 관리 react-toastify로 토스트 알람 구현 Styled-components에서 제공하는 Global Style을 활용해 global theme, media query 구현 범용적으로 사용되는 Button, modal 등..

Programming 2023.09.17

[WIL] 행동대장 프로젝트 3주차 회고

중간 점검 서비스 아키텍쳐 기술적 의사결정 Github Actions Github를 사용하기 때문에 효율적으로 관리할 수 있다. 초기 비용이 없다. CodeDeploy codedeploy는 AWS의 다양한 서비스와 연동되어 신속한 자동배포가 가능하다. 개발과 배포 속도가 높아져 안정적인 개발 환경을 유지할 수 있게한다. MySQL 사용하기 쉽고 오래되어서 버그가 적다. 안전하고 안정적인 트랜잭션 처리와 데이터 저장이 보장된다. S3 데이터 양에 따라 자동으로 확장되고 용량이 무제한이다. 데이터를 객체 형태로 저장하고 관리하기 때문에 서버의 부하를 줄이고 내구성이 좋다. recoil 전역상태관리할 복잡한 데이터가 많지 않아 리덕스보다 상대적으로 가벼운 recoil 선택 보일러 플레이트 코드를 줄일수 있음 ..

Programming 2023.09.12

[JS] 호이스팅(Hoisting)

호이스팅이란 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미, 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것. 쉽게 말하면 선언되지 않은 변수나 함수를 끌어올려서 사용해버리는 것. catName("클로이"); function catName(name) { console.log("제 고양이의 이름은 " + name + "입니다"); } /* 결과: "제 고양이의 이름은 클로이입니다" */ (이 경우 호이스팅이 발생했다고 한다) 위 코드는 에러가 나와야 정상이지만 Javascript에서는 동작한다. Javascript는 느슨한 제약을 가진 언어이다. 호이스팅이 발생한 코드는 가독성이 떨어지고 유지보수를 어렵게한다. 특히 var을 사용하면 호이스팅이 일어날 확률이 높다...

Programming 2023.06.26

[개발 환경] Node.js , VS Code (+ extension)

1. Node.js 설치 https://nodejs.org/ko/download Node.js는 JavaScript로 브라우저 밖에서 서버를 구축하는 등의 코드를 실행할 수 있게 해주는 런타임 환경 /* Node.js 버전 확인 */ node -v 2. VS Code 설치 https://code.visualstudio.com/ VS Code Extension 1. ESLint JavaScript, JSX의 정적 분석 도구로 오픈 소스 프로젝트 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 작성하도록 도움 2. Live Server 코드 수정으로 웹사이트의 변화를 실시간으로 확인 가능 3. Prettier 사용자 옵션에 따라 코드를 정렬 4. open in browser 웹페이..

Programming 2023.06.26