Chansol's Tech Blog

GitHub - airbnb/javascript: JavaScript Style Guide JavaScript Style Guide. Contribute to airbnb/javascript development by creating an account on GitHub. github.com 위 링크에 명시되어 있는 JS 코드 스타일과 ESLint 및 Prettier가 로컬에서 적용될 수 있도록 설정하는 방법이다 * ESLint: Linter로 소스 코드에 문제가 있는지 검사하여 문제가 있는 부분에 flag를 달아주는 소프트웨어 도구 * Prettier: Formatter로 소스코드를 일관된 스타일로 작성할 수 있게 코드를 변환해주는 소프트웨어 도구 * Visual Studio Code IDE 기준 1...

1. 아래 링크에 들어가서 NVM 설치: nvm-setup.zip 다운로드 Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com 2. 터미널 열기 3. 원하는 버전 설치 # nvm install 18.17.1 nvm install 원하는 버전 4. 설치된 버전목록 확인 nvm list 5. 버전 변경 # nvm use 18.17.1 nvm use 원하는 버전 6. Node.js 버전 확인 node -v 출처 https://velog.io/@qkrtnfks128/Node.js-%EB%B2%84%EC..

코딩테스트 최신 출제 경향 - 2~5시간 가량의 시간을 주어 여러 개의 정해진 알고리즘 문제들을 풀도록 함 - 구현, DFS/BFS(탐색), 탐욕 알고리즘 유형이 출제 빈도가 높은 편 코딩테스트 준비방법 - 알고리즘 유형별로 이론 및 핵심 문제를 10개 이상 풀어보기 - 대표적인 알고리즘 유형: 정렬, DFS/BFS, 구현, 완전 탐색, 탐욕 알고리즘 - 원하는 기업의 기출(혹은 유사한) 문제 풀기 알고리즘 설계 Tip - Javascript를 기준으로 1억 번의 연산을 처리하기 위해 1~5초 가량의 시간이 소요됨 - 코딩 테스트 문제에서 시간 제한은 통상 1~5초 가량이다 - 문제에 명시되어 있지 않은 경우 대략 5초 정도라고 생각 - 시간제한이 1초인 문제를 만났을때, 일반적인 기준음 다음과 같다 N..

GitHub - jinmidnight01/powersell_frontend Contribute to jinmidnight01/powersell_frontend development by creating an account on GitHub. github.com 본 내용의 코드는 전부 위 링크에 있으니 참고바랍니다 Netlify 배포 Netlify는 React앱과 같이 GitHub에 있는 웹프로젝트를 배포할 때 더욱 쉽게 배포할 수 있도록 도와주는 Hosting 사이트다 때문에 Git/Github에 대한 기본적인 사전지식은 있다는 가정하에 배포를 진행해볼 것이다 우선 리디렉션 세팅을 위한 파일(netlify.toml)을 package.json 파일과 동일한 위치에 생성해준다 # netlify.toml [[..

AWS S3 + CloudFront + Route53 배포 Route53를 사용하는 상황들은 다양할 수 있기에 특정 상황을 상정하고 배포를 진행할 것이다 가정 상황은 백엔드 개발팀이 메인 AWS 계정으로 Route53에서 커스텀 도메인을 등록한 상황이다 프론트 개발팀에는 AWS S3와 CloudFront를 관리하는 서브 AWS 계정이 있다 즉, 프론트/백엔드 개발팀은 AWS 계정을 2개로 분리하여 각각의 포지션에 맞게 배포하고 있다 때문에 프론트 개발팀 입장에서는 백엔드 개발팀이 등록한 Route53에서 하위 도메인을 받아와야 한다 우선 Route53로 접속한다 https://us-east-1.console.aws.amazon.com/route53/v2/home us-east-1.console.aws.a..

AWS S3 + CloudFront 배포 이전 (8)-1에 이어서 배포를 진행한다 버킷의 Properties 탭 맨 아래 파트 Static website hosting를 편집해 Disabled 상태로 되돌려놓는다 Permissions 탭에서는 Block public access 파트의 Edit 버튼을 클릭해 Block all public access를 클릭하여 변경사항을 저장한다. 이로써 퍼블릭 엑세스 차단이 다시 활성화되었다 CloudFront 페이지로 이동한다 https://us-east-1.console.aws.amazon.com/cloudfront/v3/home us-east-1.console.aws.amazon.com 우측의 Create distribution을 클릭한다 Origin domain..

AWS S3 배포 IAM 페이지로 이동 https://us-east-1.console.aws.amazon.com/iamv2/home us-east-1.console.aws.amazon.com 좌측 메뉴에서 Users을 클릭한다 우측 상단의 Create user 버튼을 클릭한다 유저 이름을 작성해준다 Attach policies directly를 클릭하여 AmazonS3FullAccess와 CloudFrontFullAccess를 체크해준다 그렇게 체크하고 오른쪽으로 계속 가다보면 Create User 버튼이 있다 해당 버튼을 클릭하면 User가 만들어진다 생성된 User에 들어가보면 우측 상단에 Create access key가 있는데 이것을 클릭한다 사용 용도를 적절한 선택지로 골라주고 넘어가다보면 Cr..

GitHub - jinmidnight01/powersell_frontend Contribute to jinmidnight01/powersell_frontend development by creating an account on GitHub. github.com 본 내용의 코드는 전부 위 링크에 있으니 참고바랍니다 관리자 페이지: 상품/후기 목록 (ProductListPage.js) 전 상품 정보 GET - useEffect를 통해 최초 렌더링 시에만 작동 - useState를 통해 products 상태를 GET한 전 상품정보로 set - useState를 통해 전 상품정보를 GET할 경우 loading 상태 false로 변경 ... // REST API 2-1: get all items useEffect..

GitHub - jinmidnight01/powersell_frontend Contribute to jinmidnight01/powersell_frontend development by creating an account on GitHub. github.com 본 내용의 코드는 전부 위 링크에 있으니 참고바랍니다 로그인 페이지 (LoginPage.js) 로그인 POST - URL에 /admin 입력시 자동으로 /login의 LoginPage로 이동 - ID와 PW가 승인될 경우 response.status 값 200과 함께 AdminPage로 이동 - 제어 컴포넌트로 로그인 객체 생성 및 POST ... // ID, PW const [inputs, setInputs] = useState({ id: "",..

GitHub - jinmidnight01/powersell_frontend Contribute to jinmidnight01/powersell_frontend development by creating an account on GitHub. github.com 본 내용의 코드는 전부 위 링크에 있으니 참고바랍니다 주문인증 페이지 (AuthenticationPage.js) useRef를 통해 Input focus - 전화번호 중 지역번호는 2~3자리, 둘째 칸은 4자리, 마지막 칸은 4자리 형식으로 작성하면 다음 Input으로 focus - 비밀번호는 4자리 형식으로 작성하면 제출버튼으로 focus - 지역번호, 전화번호 둘째 칸, 전화번호 마지막 칸, 비밀번호, 제출버튼에 ref 속성 추가 ... // ..