안나오는 사진과 대신에 alt 속성의 내용이 표시되는 이유는 URL.createObjectURL() 함수에 잘못된 인자가 전달되고 있기 때문입니다. URL.createObjectURL() 함수는 Blob 객체를 인자로 받으며, 해당 Blob은 이미지 파일이어야 합니다. 하지만 여기서는 contractUri라는 문자열을 전달하고 있습니다. 따라서 잘못된 결과가 발생하고 사진 대신 alt 속성의 내용이 보여지는 것입니다. 이런 상황에서는 contractUri를 직접 사용하여 이미지를 표시하면 됩니다. contractUri는 이미지의 URL이기 때문에 다음과 같이 src 속성에 바로 할당해주면 됩니다: src={URL.createObjectURL(new Blob([contractUri], { type: "ap..
preproject를 시작하게 되면서 프론트엔드 나까지 포함해서 3명과 백엔드 3명 총6명이서 같이 preproject를 하게 되었다. 주제는 스택오버플로우 클론 코딩! 생각보다 복잡하고 할게 너무나도 많이 있었다. 그동안 팀원들과 인사도 하고 회의도 하였다. 또한 , 사용자 정의서와 화면 정의서를 작성하느라 정신없이 보낸것 같다. 4개월동안 지금까지 섹션1~섹션4까지 배우고 이를 응용하여 기다리고 기다렸던 preproject를 직접 하게 되니 걱정도 되었지만 설레기도 하였다. 2주동안 preproject를 하면서 많은 것을 배울수도 있다는 생각에 기쁘기도 하였다. 내 주어진 시간에 최선을 다해볼려고 한다! github를 통해 main브랜치 ,dev브랜치 , 각 자기 아이디 브랜치로 작업을 하기로 했다...
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; 리액트의 ..
스택오버플로우를 제작한다. SRS(=종합 설계도): 우리가 개발하고자 하는 소프트웨어(제품)가 무엇을 하는 것이고 어떻게 작동할지를 예상하는 문서의 집합 비즈니스 관점에서의 개발 프로젝트 이해 과업 발생 :즉 니즈가 발생하는 발주처에서 진행되어야 할 과업(프로젝트)이 그 집단의 니즈에 맞게 발생 사업자 선정 및 계약 : 발주처는 선정된 사업장에 명확한 요구사항과 일정, 사업 비용 등을 명시할 필요가 있다. RFP(Request For Proposal, 제안 요청서)로 작성하여 문서화 기획/분석:진행할 프로젝트의 계약을 포함한 모든 사전 처리가 완료되었다면 프로젝트를 총괄하는 PM (Project Manager)은 프로젝트를 성공적으로 수행하기 위해서 일해야한다. 설계:기획된 SRS의 목표에 따라 그에 맞..
칸반이란? 칸반은 팀과 조직이 작업을 시각화하고, 업무의 병목 현상과 리소스 낭비를 해결하는 업무 관리 방법 백로그 할일 진행중 완료 로딩 속도 개선 CSS수정 Todo 컴포넌트 리팩토링 WIP는 현재 진행하고 있는 작업을 의미 각 업무 단계에 WIP 제한(WIP limit)을 둘 수 있다. ex ) WIP limit 업무 흐름 관리 원활한 업무흐름을 위해 WIP를 둔다. 진행중인 업무제한 맥락 전환(context switching)이 없이 집중할 수 있어야 업무 효율이 증가 *맥략전환? 한 작업에서 다른 작업으로 전환하는 과정 명확한 팀 정책 설정 합의한 정책은 향후 업무 진행 상황에 따라서 팀원들이 모여서 언제든지 다시 조정 할수 있다. 회의 시간 및 해당 회의에서 논의할 내용 팀원 간 소통 원칙 칸..
서버와 클라이언트의 개념 서버는 ‘제공하는 주체’ 클라이언트는 ‘제공 받는 대상 서버의 종류 웹 서버 웹 서비스를 제공하기 위한 서버 컴퓨터 웹 애플리케이션 서버 웹 애플리케이션을 제공하기 위한 서버 컴퓨터 데이터베이스 서버 데이터베이스를 제공하기 위한 서버 컴퓨터 파일 전송 서버 대용량의 파일을 빠르게 주고 받기 위한 서버 컴퓨터 메일 서버 메일 서비스를 위한 서버 컴퓨터 인쇄 서버 공간의 제약을 극복하고 인쇄를 할 수 있도록 하는 서버 컴퓨터 프론트 개발자는 개발 웹 서버에 개발 내용을 적용하고 백엔드 개발자는 개발 웹 애플리케이션 서버에 개발 내용을 적용 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 엔드포인트와 통신하여 데이터를 가져..