CORS란 CORS 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다 출처는 접근할 때 사용하는 URL의 프로토콜(스킴) + 도메인(호스트) + 포트를 말하는 것인데, 두 출처의 프로토콜, 호스트, 포트가 모두 일치하는 경우 같은 출처를 가졌다고 할 수 있다. 서비스 및 프로젝트가 모든 출처의 접근을 허락한다면 이러한 보안성이 현저히 낮아지고, 해킹의 위험에 그대로 노출되게 됨으로 모든 도메인을 허용해서는 안 되고, 특정 도메인을 허용하도록 구현해야 한다. 프론트엔드 개발자가 백엔드 개발자에게 프론트엔드..

개발 프로세스 소프트웨어 개발 프로세스 모델은 소프트웨어 개발 생명주기(SDLC, Software Develpment Life Cycle)을 기반으로 만들어졌다 (1) 요구사항 분석 기능과 제약 조건, 목표 등을 정의 (2) 설계 수행 방법을 논리적으로 결정 (3) 구현 프로그래밍 언어를 사용하여 실제 프로그램을 작성 프로그래밍 언어, 기법, 스타일, 순서 결정 (4) 테스트 검사 및 평가 (5)배포 및 유지보수 시스템이 인수되고 설치된 후 일어나는 모든 활동(비용이 가장 많이 소요된다. -수정형 유지보수 : 사용 중에 발견한 프로그램의 오류 수정 작업을 진행. -적응형 유지보수 : 시스템과 관련한 환경적 변화에 적응하기 위한 재조정 작업 -완전형 유지보수 : 시스템의 성능을 향상하기 위한 개선 작업...

최적화란 최소한의 데이터로 가장 빠른 시간에 사용자가 불편함을 느끼지 않는 최적의 화면을 띄워야 한다. 성능 최적화를 하게 되면 곧 사용자 경험의 개선으로 이어지고 기업의 실적으로도 이어진다 최적화의 필요성 및 효과 1) 이탈률 감소 : 화면을 불러오는 시간이 길어지면 사용자가 페이지를 이탈할 확률이 높아진다. 2) 전환율 증가 : 웹 사이트를 방문한 사용자 중 실제 서비스 이용자로 전환되는 비율이 증가한다. 3) 수익 증대 : 이탈률 감소, 전환율 증가는 트래픽 증대 및 회원 수 증가로 이어지고, 곧 수익 증대를 의미한다. 4) 사용자 경험(UX) 향상 : 최적화는 효과적인 UX 개선 수단이다. 최적화 기법 1.HTML, CSS 코드 최적화하기 DOM 트리 가볍게 만들기 :DOM 트리가 깊을수록, 자식..

Fragment 리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환한다. 리액트를 사용하기 위한 문법인 JSX 를 쓸 때, return 문 안에는 반드시 하나의 최상위 태그가 있어야 한다( 리액트가 하나의 컴포넌트만을 리턴할 수 있기 때문) => fragment를 사용하면 dom에 별도의 노드를 추가하지 않고 여러자식을 그룹화 할 수 있다. const Table= ()=> { return ( ); } const Columns { return ( hi bye ); } Table 컴포넌트가 유효하려면 가 여러 엘리먼트를 반환해야 하는데 가 를 로 감싸서 반환한다면 실제 dom tree는 아래와 같이 구성된다 hi bye =>이렇게 구성된 html은 유효하지 않다. Fragment 사용예시 const ..

코드를 작성하기 전에 테스트를 쓰는 소프트웨어 개발 방법론이다. TDD를 통해 소프트웨어를 개발한다는 것은 작은 단위의 테스트 케이스를 작성하고, 이를 통과하는 코드를 작성하는 과정을 반복하는 것을 의미한다. TDD 개발주기 Red 단계에서는 실패하는 테스트 코드를 먼저 작성한다. Green 단계에서는 테스트 코드를 성공시키기 위한 실제 코드를 작성한다. Blue 단계에서는 중복 코드 제거, 일반화 등의 리팩토링을 수행한다. 실패하는 테스트 코드를 작성할 때까지 실제 코드를 작성하지 않는 것과, 실패하는 테스트를 통과할 정도의 최소 실제 코드를 작성해야하는 것이다 =>실제 코드에 대해 기대되는 바를 보다 명확하게 정의 함으로써 불필요한 설계를 피할 수 있고, 정확한 요구 사항에 집중할 수 있다. TDD ..

GraphQL 페이스북에서 만든 오픈 소스로 제공된 어플리케이션 레이어 쿼리 언어다 SQL이 데이터베이스 시스템으로부터 데이터를 가져오는 목적을 가진다면, GraphQL은 클라이언트가 데이터를 서버로부터 가져오는 것을 목적으로 한다. GraphQL은 HTTP를 통해 API 서버로 요청을 보내고 응답을 받는다 응답을 받을 시, 데이터 결과를 JSON 형식으로 받는다. GraphQL은 서버 개발자가 작성한 각 필드에 대응하는 resolver 함수로 각 필드의 데이터를 조회할 수 있다 GraphQL은 GraphQL 라이브러리가 조회 대상 schema가 유효한지 검사한다 하나의 엔드포인트 REST API는 보통 여러 엔드포인트를 가지며 각각의 엔드포인트가 동일한 응답을 반환한다. 하지만 GraphQL은 보통 하..