UI UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템 GUI(Graphical User Interface, 그래픽 사용자 인터페이스) GUI는 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경 프론트엔드 개발자로서의 UI는 대부분 이 GUI를 의미 UX UX(User Experience, 사용자 경험)의 사전적 의미는 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험 제품, 서비스 그 자체에 대한 경험은 물론, 홍보, 접근성, 사후 처리 등 직간접적으로 관련된 모든 경험을 사용자 경험 UX에 영향을 주는 이 많은 요소 중에 프론트엔드 개발자에게 가장 중요한 요소는 바로 UI UX는 UI를 포함 UI 디자인 ..

재귀함수는 자기자신을 반복호출하는 함수이다. 반복적인 작업을 해야하는 문제를 좀 더 간결한 코드로 작성할 수 있도록 해준다. 재귀로 문제를 해결하는 과정 1. 문제를 작게 쪼개기 arrSum([1, 2, 3, 4, 5]) === 1 + arrSum([2, 3, 4, 5]) arrSum([2, 3, 4, 5]) === 2 + arrSum([3, 4, 5]) ... 2. 문제를 더 이상 쪼갤 수 없는 상태에 도달 ... arrSum([3, 4, 5]) === 3 + arrSum([4, 5]) arrSum([4, 5]) === 4 + arrSum([5]) arrSum([5]) === 5 + arrSum([]) 3. 문제 해결 arrSum([]) === 0; // function arrSum (arr) { //..

side effect -> 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 ex) 전역 변수 선언으로 상위 선언한 변수가 바뀜 순수함수 -> 함수의 입력만이 함수의 결과에 영향을 주는 함수 => 순수 함수에는 네트워크 요청과 같은 Side Effect가 없음 => 어떤 전달 인자가 주어져도 항상 동일한 값 리턴 function upper(str) { return str.toUpperCase(); // toUpperCase 메소드는 원본을 수정하지 않습니다 (Immutable) } upper('hello') // 'HELLO' React 애플리케이션을 작성할 때에는, AJAX 요청이 필요하거나, LocalStorage 또는 타이머와 같은 React와 상관없는 API를 사용하는 경우가 발생할 수 있..

React 데이터 흐름 컴포넌트 단위로 만들고, 페이지 조립 -> 상향식 앱 개발 => 테스트 쉽고, 확장성 좋음 단일 기능 컴포넌트 구성하여 계층구조 만들기 컴포넌트는 컴포넌트 바깥에서 props 이용해 데이터를 전달인자 or 속성처럼 전달받을 수 있음 부모 컴포넌트가 데이터 전달하는 하향식 데이터 흐름(단방향 데이터 흐름) State 끌어올리기 단방향 데이터 흐름 -> 하위 컴포넌트는 상위 컴포넌트로부터 받은 데이터가 어떤 형태, 타입인지만 알 수 있음 상위 컴포넌트의 '상태를 변경하는 함수' 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행 function ParentComponent() { const [value, setValue] = useState("날 바꿔줘!"); con..

CRUD에 따른 REST 성숙도 모델 2단계 멱등성 - 한번을 보내도 여러번 보낸 것 같은 효과 => side effect 없음 GET, HEAD, PUT, DELETE가 멱등성 가지고, POST, PATCH는 없음 GET 특정 리소스를 가져오도록 요청/ 데이터를 가져올 때만 사용 GET요청에 본문이나 페이로드를 담지 않는 것이 바람직 GET /pageX HTTP/1.1는 멱등성을 가집니다. 여러 번 연속해서 호출해도 클라이언트가 받는 응답은 동일 POST 서버로 데이터 전송 멱등성 x => 서버에 전송되어 변경사항 만듬 POST /add_row HTTP/1.1는 멱등성을 갖지 않습니다. 여러 번 호출할 경우, 여러 열을 추가 ex) 기존 리소스에 주석달기 게시판, 뉴스 그룹, 메일링 리스트나 이와 유사..

HTTP, 네트워크 클라이언트 - 서버 아키텍처 상품 정보 같은 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것을 2티어 아키텍처, 또는 클라이언트-서버 아키텍처라고 함 리소스를 사용하는 앱이 바로 "클라이언트", 리소스를 제공(serve)하는 곳은 "서버" 클라이언트와 서버는 요청과 응답을 주고받는 관계 클라이언트-서버 아키텍처에서는 요청이 선행되고 그 후에 응답 일반적으로 서버는 리소스를 전달해 주는 역할만 담당합니다. 리소스를 저장하는 공간을 별도로 마련해 두는데 이 공간을 "데이터베이스" 기존 2티어 아키텍처에 데이터베이스가 추가된 형태를 3티어 아키텍처 클라이언트는 보통 플랫폼에 따라 구분 브라우저를 통해 주로 이용하는 웹(Web) 플랫폼에서의 클라이언트는 웹사이트 또는 웹 앱 파일 ..