sy의 코딩 개발일지

import { useState, useCallback } from 'react'; function useInputs(initialForm) { const [form, setForm] = useState(initialForm); // change const onChange = useCallback(e => { const { name, value } = e.target; setForm(form => ({ ...form, [name]: value })); }, []); const reset = useCallback(() => setForm(initialForm), [initialForm]); return [form, onChange, reset]; } export default useInputs; 리액트의 ..

서버와 클라이언트의 개념 서버는 ‘제공하는 주체’ 클라이언트는 ‘제공 받는 대상 서버의 종류 웹 서버 웹 서비스를 제공하기 위한 서버 컴퓨터 웹 애플리케이션 서버 웹 애플리케이션을 제공하기 위한 서버 컴퓨터 데이터베이스 서버 데이터베이스를 제공하기 위한 서버 컴퓨터 파일 전송 서버 대용량의 파일을 빠르게 주고 받기 위한 서버 컴퓨터 메일 서버 메일 서비스를 위한 서버 컴퓨터 인쇄 서버 공간의 제약을 극복하고 인쇄를 할 수 있도록 하는 서버 컴퓨터 프론트 개발자는 개발 웹 서버에 개발 내용을 적용하고 백엔드 개발자는 개발 웹 애플리케이션 서버에 개발 내용을 적용 CORS 정책 교차 출처 리소스 공유 브라우저는 SOP에 의해 기본적으로 다른 출처의 리소스 공유를 막지만, CORS를 사용하면 접근 권한을 얻을..

시간 복잡도 Big-O 표기법 O(1) : 입력값의 크기가 아무리 커져도 즉시 출력값을 얻어낼 수 있다. O(n):입력값이 증가함에 따라 시간 또한 같은 비율로 증가하는 것을 의미 O(log n): O(1) 다음으로 빠른 시간 복잡도 BST의 값 탐색도 같은 로직으로 O(log n)의 시간 복잡도를 가진 알고리즘(탐색기법) 비유: up & down O(n2): 입력값이 증가함에 따라 시간이 n의 제곱수의 비율로 증가 O(2n):Big-O 표기법 중 가장 느린 시간 복잡도 ex)피보나치 수열 공간 복잡도(Space Complexity) 프로로그램이 필요로 하는 메모리 공간을 산출 Algorithm의 유형 Greedy Algorithm Greedy Algorithm 문제 해결 단계 선택 절차(Selectio..

백엔드의 개발 서버 역할을 해줄 api cd api npm install 서버열기 npm run dev 프론트엔드의 개발 서버 역할을 해줄 my-app cd my-app npm install 서버 열기 npm start npm run dev 역할 과 npm run start 역할 npm run dev 명령어는 api 프로젝트의 개발 서버를 실행한다. 이 서버는 백엔드 개발에 사용된다. 백엔드 개발 서버는 API 엔드포인트를 제공하고, 데이터베이스와 연동하여 데이터를 응답한다. 반면에, npm start 명령어는 my-app 프로젝트의 개발 서버를 실행한다. 이 서버는 프론트엔드 개발에 사용된다. 프론트엔드 개발 서버는 사용자 인터페이스(UI)를 제공하고, 백엔드 API 엔드포인트와 통신하여 데이터를 가져..

Github Actions를 통한 배포 Flow (클라이언트) GitHub -> GitHub Actions -> Amazon S3 Build: github acitons의 YAML 파일에 적힌 명령어를 토대로 Webpack을 이용해 빌드 Deploy: github acitons의 YAML 파일에 적힌 명령어를 토대로 s3로 빌드 결과를 업로드 Source: Github reference 브랜치에 코드가 커밋 먼저 ,Setting > secret > action 탭을 클릭한후 , AWS_ACCESS_KEY_ID와 AWS_SECRET_ACCESS_KEY를 설정한다. AWS 액세스 키와 비밀 액세스 키를 환경 변수에 직접 저장하는 것은 보안적으로 좋지 않다. 따라서, 가능하다면 AWS Secrets Manag..

개발 프로세스란 소프트웨어 시스템이나 애플리케이션 개발 및 유지보수할 목적으로 수행되는 활동의 절차 개발 프로세스 즉 소프트웨어 개발 프로세스 모델은 소프트웨어 개발 생명주기(SDLC, Software Develpment Life Cycle)을 기반 요구분석 및 시스템 명세 작성 설계 구현(프로그래밍 기법 : 구조화 프로그래밍,모듈러 프로그래밍) 테스트 배포 및 유지보수(유지보수 : 수정형 유지보수 , 적응형 유지보수,완전형 유지보수,예방형 유지보수) 전통적인 개발 프로세스 폭포수 개발 방식:한 방향으로만 프로세스가 진행되는 개발 과정 개선을 위해 다양한 테스트 도입(시스템 테스트,알파 테스트,베타 테스트) 모던 개발 프로세스 애자일(Agile) 방식:스프린트(sprint)' 라고 불리는 짧은 주기의 개..

const handleCheckClick = (itemId) => { setCheckedItems((prevState) => ({ ...prevState, [itemId]: !prevState[itemId], })); }; ...prevState는 이전 상태 객체의 모든 속성을 새로운 객체에 복사한다. 그리고 그 뒤에 [itemId]: !prevState[itemId]를 추가하여, 해당 itemId의 속성 값만 새로운 값으로 변경한다. 이전 상태 객체의 모든 속성을 복사하고, 그 중에서도 itemId의 속성 값만 변경하는 이유는, 다른 항목의 체크 여부는 변경되지 않고, 현재 클릭한 항목의 체크 여부만 변경되기 때문이다. 즉, 이전 상태 객체를 복사하여 새로운 상태 객체를 만들어 업데이트하면, 현재 클릭..

백엔드 배포 EC2 인스터스 상에서 서버 실행 인스턴스 연결 - Session Manager 연결 Windows에서 터미널 bash 실행이 안돼서 가상 우분투로 연결을 하였다. 인스턴스 개발환경 nvm 설치 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash 또는 wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash sudo apt update nvm install node sudo apt install npm git을 통해 서버 코드 클론 clone하기전에 SSH등록을 한다. SSH 등록 방법 SSH 키 생성 ssh-key..