PMF와 애자일• PMF(Product Market Fit): 제품이 시장 요구를 충족시키는 정도• 애자일 방법론: 유연하고 반복적인 개발 프로세스• 워터폴 vs 애자일: 전통적 방식과 현대적 방식의 비교UX 설계와 문제 해결• UX(User Experience) 중요성: 사용자 맥락, 행동, 요구, 태도, 동기 이해• 문제 해결 과정으로서의 UX• '5 Whys' 기법: 근본 원인 파악 방법MVP(Minimum Viable Product)• 정의: 최소한의 기능으로 제품의 핵심 가치 검증• 린(Lean) 스타트업 방법론의 핵심 요소페르소나와 사용자 스토리• 페르소나: 대표적 사용자 프로필 작성• 사용자 스토리: 기능 개발 우선순위 설정 및 팀 소통 도구• 사용자 스토리 작성법: "As a [user],..
소프트웨어 테스트란?개발자 입장에서 바라본 테스트의도한 대로 정상동작하는지 검사하는 것 프론트엔드 테스트 수행하기: 테스트 케이스기반 테스트QA(Quality Assurance, 품질보증): 제품 품질을 보증하기 위한 전반적인 프로세스와 활동. 테스팅은 QA의 중요한 부분이지만 QA는 이보다 더 광범위한 개념 만약 시나리오 테스트를 마치면 끝이날까? No기능이 잘 되지 않는지 세부적으로 문제가 되는 지점을 찾기 어려움테스트 시간적 비용 고려, 리소스 소비가 크다그럼, 조금더 작은 단위의 기능을 테스트 해보자 조금 더 세부적인 테스트 작성하기 : 로직 하나 하나의 정삭적인 동작 테스트예) 회원등록 페이지의 이메일 입력 관련아주 세부적인 테스트로 갈 수록 문제가 생겼을 때, 어떤 문제인지 발견/추적하기 ..
HTTP를 기본으로 하는 프로토콜 HTTP의 병목현상을 해소하는 SPDY(스피디) - 사실상 사장된 기술 SPDY의 발전과 HTTP/2로의 전환:SPDY는 2010년 구글이 발표한 이후 웹 성능 향상에 큰 영향을 미쳤음그러나 SPDY 자체는 더 이상 활발히 사용되지 않음SPDY의 핵심 개념과 기술은 HTTP/2의 기반이 됨HTTP/2의 도입:2015년 HTTP/2가 공식적으로 표준화 됨HTTP/2는 SPDY의 많은 특징을 계승하여 개발 됨대부분의 주요 웹 브라우저와 서버는 HTTP/2를 지원 1. HTTP의 병목현상병목현상: 시스템의 전체 처리 능력이 가장 성능이 낮은 부분에 의해 제한되는 현상 연결 제한 (Connection Limit):HTTP/1.1은 일반적으로 브라우저당 도메인별로 동시 연결 수를..
인증을 무엇으로 할까?등록된 본인만이 알고 있는 정보등록한 본인만이 가지고 있는 정보 등패스워드, 원타임토큰, 전자증명서, 바이오매트릭스, IC카드HTTP에서 사용하는 인증방법BASICDIGESTSSL ClientForm Base1. BASIC 인증HTTP/1.0에 구현된 인증방식클라이언트: 리퀘스트 송신서버:상태코드 401로 응답해서 인증이 필요하다는 것을 전달유저가 ID와 패스워드를 입력하면, 브라우저가 자동적으로 Base64 로 변환클라이언트: 유저ID와 패스워드를 Base64형식으로 인코드 한 것을 송신서버: 인증 성공 시에는 상태코드 200 응답. 실패했을 경우 다시 상태코드 401로 응답서버는 인증정보가 정확한지 여부를 판단함단점: Base64라는 인코딩 형식을 사용하고 있지만, 암호화는 아님..
HTTP 약점평문(암호화 하지 않은) 통신이기 때문에 도청 가능통신 상대를 확인하지 않기 때문에 위장 가능완전성을 증명할 수 없기 때문에 변조 가능 1. 평문이기 때문에 도청 가능TCP/IP는 도청 가능한 네트워크암호화로 도청 피할 수 있다통신을 암호화 : HTTP + SSL/TLS 조합SSL(Secure Socket Layer)TLS(Transport Layer Security)SSL 등을 이용해 안전한 통신로를 확립 후, 그 통신로를 사용해 HTTP 통신SSL을 조합한 HTTP => HTTPS(HTTP Secure) / HTTP over SSL콘텐츠 암호화: 콘텐츠 내용 자체를 암호화(HTTP메시지에 포함되는 콘텐츠만 암호화)메시지 헤더는 암호화되어 있지 않음메시지 바디에 들어가는 콘텐츠를 암호화(통..
리퀘스트 HTTP 메시지HTTP 메시지 헤더클라이언트와 서버 처리에 필요한 주요정보 거의 다 여기 있다개행문자 HTTP 메시지 바디사용자와 리소스를 필요로 하는 정보가 있다 HTTP 헤더 필드 구조헤더필드 명: 필드 값일반 헤더 필드: 리퀘스트 메시지와 리퀘스트 메시지 둘 다 사용 됨리퀘스트 헤더 필드: 리퀘스트 부가정보와 클라이언트 정보, 리스폰스의 콘텐츠 관련 우선순위 등 포함리스폰스 헤더 필드: 리스폰스의 정보와 서버경로, 클라이언트 추가 정보요구 등 포함엔티티 헤더 필드: 콘텐츠 갱신시간 등 엔티티 관련 정보 포함HTTP/1.1 이외의 헤더 필드(비표준 헤더 필드)쿠키와 Set-Cookie, Content-DispositionEnd- to-end 헤더와 Hop-by-hop 헤더HTTP 헤더필드는..
React는 Component를 호출하고, Component는 React에게 HTML을 준다.그럼 React는, 컴포넌트가 리턴한 HTML로 VDOM을 만들고, VDOM은 DOM을 만든다. React이 Component를 호출했을 때 비동기 작업이 있다면, Component 안에서 비동기(async) 호출을 한다비동기 호출은 Server에 요청을 하고, Server는 컴포넌트에게 응답(Data)을 준다 응답을 주는데 100ms의 시간이 걸린다면?React가 Component를 호출했을 때, Component는 함수이기 때문에 호출 후 바로 리턴을 해야 하는데,Component에서 HTML을 리턴하는데는 5ms가 걸린다면? React가 Component를 호출하고 Component가 HTML을 Reac..
컴포넌트(Component)UI를 구성하는 독립적이고 재사용 가능한 코드 단위버튼, 입력 필드, 네비게이션 바컴포넌트 특징재사용성: 동일한 컴포넌트를 여러 곳에서 재사용할 수 있어 코드의 중복을 줄임(DRY) 독립성: 각 컴포넌트를 독립적으로 개발하고 테스트할 수 있음컴포넌트는 내부 상태와 외부에서 전달받은 데이터를 통해 동작을 제어하고 UI를 렌더링 함컴포넌트는 생명주기를 가지며, 생성, 업데이트, 제거의 과정을 거친다 리액트 컴포넌트함수형: React Hooks를 사용하여 생명주기 메서드를 구현클래스형(ES6 클래스): `componentDidMount`, `componentDidUpdate` 같은 메서드를 사용
JSX 코드 내에서 JavaScript 표현식을 사용하는 방법(Escape into JavaScript from JSX attributes)JSX는 JavaScript 코드 내에 마크업(HTML) 코드를 포함할 수 있게 해줌이때, 중괄호 { }를 사용하여, JSX 코드 내에서 JavaScript로 "탈출(이스케이프)"하여 변수나 표현식을 사용할 수 있음 return ( {user.name} // 자바스크립트로 이스케이프 한 부분 ); 중괄호{ } 안에 JavaScript 표현식(변수를 속성값으로 전달)을 넣으면, 그 값이 해당 위치에 렌더링 됨return ( ); src 속성에 user.imageUrl 변수의 값을 전달하여 이미지의 경로를 설정반면에 className="avatar"는 단순히..
함수 컴포넌트가 어떤 순서로 업데이트 되는지(재렌더링 되는지) 보면import { useState } from 'react';function MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( Clicked {count} times );} count = 0 인 상태로 버튼이 보이고,버튼을 클릭했을 때 handleClick 함수를 호출하면, setCount함수에 count + 1을 넘겨주며 실행이때, 리액트는 업데이트 해야 하는 것을 알아차리고 다시 렌더링 한다.setCount함수에 count + 1을 넘겨주며, 실행되는 ..
