매일매일
article thumbnail
리액트로 달력만들기
React 2023. 4. 8. 13:20

1. 완성 모습 2. 작성 코드 import React, { useState } from 'react'; function Calendar() { // 기준이 되는 오늘 날짜를 date에 담아준다 const [date, setDate] = useState(new Date()); // 오늘의 날짜를 기준으로 년, 월, 일 만들기 const year = date.getFullYear(); const month = date.getMonth(); const firstDay = new Date(year, month, 1); // 마지막 일은 매달 다르므로 다음달의 0일로 지정 // new Date(2023, 3 + 1, 0); => Sun Apr 30 2023 00:00:00 GMT+0900 (한국 표준시) con..

알고리즘 연습문제
CS/알고리즘 2023. 4. 8. 09:43

5. [중복순열] 가위바위보 가위바위보 게임은 2인 이상의 사람이 동시에 '가위, 바위, 보'를 외치고 동시에 가위, 바위 또는 보 중에서 한 가지를 의미하는 손 모양을 내밀어 승부를 결정짓는 게임입니다. 세 판의 가위바위보 게임을 할 경우, 한 사람은 세 번의 선택(예. 가위, 가위, 보)을 할 수 있습니다. 세 번의 선택으로 가능한 모든 경우의 수를 구하는 함수를 작성합니다. 입력 없음 출력 - 2차원 배열(arr[i])을 리턴해야 합니다. - arr[i]는 전체 경우의 수 중 한 가지 경우(총 세 번의 선택)를 의미하는 배열입니다. - arr[i]는 'rock', 'paper', 'scissors' 중 한 가지 이상을 요소로 갖는 배열입니다. - arr[i].length는 3 주의사항 최종적으로 리..

article thumbnail
알고리즘 연습문제
CS/알고리즘 2023. 4. 5. 23:42

1. [Greedy] 짐 나르기 김코딩과 박해커는 사무실 이사를 위해 짐을 미리 싸 둔 뒤, 짐을 넣을 박스를 사왔다. 박스를 사오고 보니 각 이사짐의 무게는 들쭉날쭉한 반면, 박스는 너무 작아서 한번에 최대 2개의 짐 밖에 넣을 수 없었고 무게 제한도 있었다. 예를 들어, 짐의 무게가 [70kg, 50kg, 80kg, 50kg]이고 박스의 무게 제한이 100kg이라면 2번째 짐과 4번째 짐은 같이 넣을 수 있지만 1번째 짐과 3번째 짐의 무게의 합은 150kg이므로 박스의 무게 제한을 초과하여 같이 넣을 수 없다. 박스를 최대한 적게 사용하여 모든 짐을 옮기려고 합니다. 짐의 무게를 담은 배열 stuff와 박스의 무게 제한 limit가 매개변수로 주어질 때, 모든 짐을 옮기기 위해 필요한 박스 개수의 ..

article thumbnail
Proxy
React 2023. 4. 4. 23:35

1. CORS CORS는 Cross-Origin Resource Sharing의 줄임말로, 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 보통 웹 사이트는 동일한 출처의 리소스는 자유롭게 접근할 수 있지만, 다른 출처의 리소스는 보안상의 이유로 접근이 제한된다. 이를 해결하기 위해 웹 서버에서는 Access-Control-Allow-Origin 헤더를 사용하여 허용된 출처의 목록을 설정하고, 웹 브라우저는 이 헤더를 확인하여 해당 출처에서만 리소스에 접근할 수 있도록 제한한다. 이를 통해 보안상의 문제를 예방할 수 있다. 출처 웹 콘텐츠의 출처(origin)는 접근할 때 사용하는 URL의 스킴(..

article thumbnail
CI/CD
CS 2023. 4. 3. 22:54

1. 전통적인 개발 프로세스 VS 모던 개발 프로세스 워터폴(전통적) 애자일(모던) 장점 - 프로세스가 길고 순서가 잡혀 있으므로 팀의 규모에 상관 없이 따르기 쉬움 - 개발 주기가 정해져 있으므로 새로운 프로젝트를 안정적으로 시작 가능 - 요구 사항이 확정되어 있으므로 프로젝트를 실행하기 수월하며, 개발 목표를 자주 변경하지 않아도 됨 - 프로젝트의 전 과정에 필요한 예산 및 자원이 초기에 확정되어 예상 결과와 리스크를 통제하기 훨씬 쉬움 - 빠르면서 유연한 개발 과정 - 짧고 반복적인 스프린트로 구성되어 있어 품질에 초점을 맞출 수 있으므로 빠르게 결함을 인지하고 수정 가능 - 스프린트를 통한 짧은 반복 과정으로 개발 과정 중에 신속히 제품 변경 가능 단점 - 개발이 순차적으로 진행되므로 앞 단계가 ..

article thumbnail
S3 배포 실습
CS 2023. 4. 2. 22:57

1. client폴더 최상위에 .env 파일 생성하기 `EACT_APP_API_URL`의 값으로 EC2 서버의 주소를 넣어준다. 주의할 점은 따옴표나 끝에 / 가 포함되지 않게 한다. 2. `npm install`과 `npm run build`를 실행한다. 완료되면 build 폴더 생긴다. 3. build 폴더에 있는 모든 파일은 버킷에 업로드해준다. build 폴더 자체를 넣지 않도록 주의한다. 업로드 성공 시 닫기 버튼을 눌러 다시 버킷으로 돌아간다. 4. 버킷의 속성 탭에서 정적 웹 사이트 호스팅 확인하기 버킷 웹 사이트 엔드포인트가 생성되어 있는 걸 확인할 수 있다. 해당 링크로 접속하면 업로드한 정적 웹 확인 할 수 있다. 참고) 코드스테이츠 유어클래스