WEB 기초지식(React/html/css/JavaScript)

React란?

• 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리
• 페이스북에서 개발중, 현재는 개발자 커뮤니티에서 유지보수중
• React는 컴포넌트 기반 아키텍처를 사용하여 interactive, 동적인 웹 애플리케이션을 쉽게 만들 수 있도록 도와준다.

JSX란?

• JavaScript XML :자바스크립트의 구문확장. React에서 자주 사용
• JSX를 사용하면 JS 코드 내에 HTML과 유사한 코드 작성 가능 -> React 컴포넌트의 구조와 외형을 정의하기 더 쉬워진다.

const element = <h1> 안녕하세요. </h1>:

• JSX는 브라우저에서 실행 전 일반 JS코드로 변환

 

React 컴포넌트란?

• 사용자 인터페이스의 일부분을 캡슐화한 재사용 가능하고 독립적인 빌딩 블록
• 버튼, 폼과 같은 UI요소부터 내비게이션 바, 전체페이지와 같은 더 복잡한 구조까지 표현 가능
• 컴포넌트는 함께 조합되어 더 크고 복잡한 애플리케이션을 만들 수 있다.
• 함수형 컴포넌트: JSX를 반환하는 JavaScript 함수. 주로 UI 요소를 표시하는 데 사용.
  • 여기서 UX : user experience, 사용자 경험, 사용과정 초점 /  UI : user interface, 제품의 시각적 요소와 상호작용에 중점

function MyComponent(){
	return <div> 안녕하세요. React! </div>
    }

• 클래스 컴포넌트: React.Component 클래스를 확장하는 ES6 클래스. 상태와 생명주기 메서드 추가 사용 가능

class MyComponent extends React.Component {
	render(){
    	return <div>안녕하세요. React! <\div>:
        }
        }

 

함수형 컴포넌트와 클래스 컴포넌트의 주요 차이점

• 함수형 컴포넌트와 클래스 컴포넌트는 React 컴포넌트를 만드는 두 가지 기본적 방법. 
• 주요 차이점:
  • 문법: 함수형 컴포넌트는 JSX를 반환하는 JavaScript 함수로 정의, 클래스 컴포넌트는 React.Component를 확장하는 ES6 클래스로 정의.
  • 상태: 클래스 컴포넌트는 상태를 가질 수 있어, 시간이 지남에 따라 데이터 변화 관리 가능. 함수형 컴포넌트는 자체적으로 상태를 관리할 수 없었으나 React 훅이 도입되며 가능
  • 생명주기 메서드 : 클래스 컴포넌트는 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 생명주기 메서드를 사용 가능. 함수형 컴포넌트는 useEffect와 같은 훅을 사용하여 비슷한 기능 구현 가능
  • 가독성 : 함수형 컴포넌트는 간결하고 읽기 쉽기 때문에 단순 UI 표현에 적합. 클래스 컴포넌트는 다소 장황할 수 있다.
  • 성능 : 함수형 컴포넌트는 가벼워서 성능이 약간 더 좋다. 클래스 컴포넌트는 더 많은 오버헤드를 가진다.
  • HOOK : 함수형 컴포넌트는 상태와 사이드 이펙트를 관리하기 위해 React 16.8에서 도입된 훅을 사용할 수 있다.

React 상태

• 상태(state)는 React 컴포넌트의 내부 데이터 저장 메커니즘.
  • 시간이 지남에 따라 변경될 수 있는 정보를 추적할 수 있게 한다.
  • 상태는 데이터, 사용자 입력, 기타 이벤트의 변경사항을 나타내고 이에 반응할 수 있게 해 준다.
  • React 컴포넌트는 상태를 가질 수 있으며 상태가 변경되면 React는 컴포넌트를 다시 렌더링하여 사용자 인터페이스를 새 상태로 업데이트한다.

 

HOOK의 대표적인 종류

• useState : 가장 자주 사용되는 훅. 함수형 컴포넌트에서 상태(state)를 관리할 수 있게 해 주는 훅, 상태값을 변경하고 업데이트할 수 있다.
• useEffect: 컴포넌트 렌더링 이후 특정 작업(data fetching, DOM 조작 등)을 수행할 수 있게 해 준다.
• useContext: 리액트의 Context API를 활용하여 컴포넌트 트리 안에서 전역적 상태 공유를 돕는다.
• useCallback: 함수를 메모이제이션하여 성능 최적화를 돕는다. 부모 컴포넌트가 리렌더링되어도 함수를 새로 생성하지 않고 재사용해야 할 경우 사용
  • 메모이제이션(memoization): 컴퓨터 프로그램이 복잡한 함수 호출의 결과값을 함수에 저장해놓고, 같은 입력이 반복될 때 저장한 값을 반환하도록 하여 속도를 높이는 최적화기술. 동적 계획법의 핵심이 된다.
• useMemo: 값을 메모리제이션하여 성능 최적화를 돕는다. 계산비용이 큰 연산을 수행하거나 동일한 값을 여러 번 계산하지 않도록 할 때 사용

 

API란?

• 프로그래머를 위한 운영체제나 프로그램의 인터페이스. 
• Application Programming Interface
• 유저 인터페이스와 연동하여 클라이언트(IT 서비스 이용자의 디바이스)와 서버 사이에서 필요로 하는 데이터가 서로 오갈 수 있도록 해 주는 도구
• 소프트웨어 애플리케이션 간 상호작용을 가능하게 만드는 도구와 규칙의 집합
  • 서로 다른 소프트웨어가 데이터를 주고받거나 기능을 공유할 수 있도록 돕는 "소통 창구 or 설명서"
    • 식당의 메뉴판 역할 (이 식당에서 주문할 수 있는 음식은 무엇이고, 어떻게 주문하면 되는지 알려준다.
    • 날씨 앱이 현재 날씨 정보를 가져오고 싶은 경우, 날씨 서비스를 제공하는 서버의 API에 요청을 보낸다.
• 사용방법
  1. 제공자가 공급하는 API문서를 읽고 원하는 기능을 호출하기 위한 요청을 작성해야 한다.
     1. 인증을 필요로 하는 키 발급
     2. 필요한 데이터를 전달하는 요청
     3. 응답
     4. 받은 데이터를 처리
• Open API : 이를 설계하고 문서화하는 표준 방식
  • 네이버에서 운영하는 웹 사이트가 아님에도 네이버로 로그인을 할 수 있는 기능 가짐 -> 네이버에서 제공해 준 로그인 Open API를 활용해 개발한 기능
  • 개발한 '온라인 IT 서비스를 다른 온라인 IT 서비스 사이'에서 필요한 데이터를 주고받는 형태로 활용하는 API

HTTP(HyperText Transfer Protocal)

• 클라이언트와 서버 사이에 이루어지는 요청 및 응답 프로토콜(통신규약)
• 클라이언트인 웹 브라우저가 HTTP를 통해 서버로부터 웹 페이지의 정보를 요청하면, 서버는 이 응답에 응답하여 필요한 정보를 해당 사용자에게 전달.
• HTTP를 통해 전달되는 자료는 http:로 시작하는 URL로 조회 가능

html과 JSP의 차이점

• JSP: Java Server Page
• html은 자바코드를 사용할 수 없지만 jsp는 자바코드를 사용할 수 있다.(Servlet 변환) 
  • JSP가 실행되면 자바 서블릿(Servlet)으로 변환되며 웹 어플리케이션 서버에서 동작되며 필요한 기능을 수행하고, 그렇게 생성된 데이터를 웹페이지와 함께 클라이언트로 응답

 

쿠키/ 세션/ 캐시 의 차이점

• 쿠키:
  • 웹 페이지들 사이의 공유정보를 사용자 PC에 저장해놓고 필요할 때 여러 웹 페이지들이 공유해서 사용할 수 있게 하는 매개 역할
  • 사용자가 특정 사이트에 접속할 때 생성되는 정보를 담아두는 임시 파일, 4KB 이하의 용량만 저장 가능
  • 정보가 사용자 PC에 저장되어 사용. 해당 사용자의 컴퓨터를 사용한다면 누구나 쿠키에 입력된 값을 쉽게 확인 가능 -> 보안에 취약
  • ex) 사이트 접속 내역, 검색기록 내역, 팝업 보지않기 등
• 세션: 
  • 웹페이지들 공유 정보를 서버의 메모리에 저장. 즉 서버에 저장되는 일종의 쿠키
  • 브라우저 단위로 저장. 브라우저 종료 시 정보 삭제
  • 사용자 로컬이 아닌 서버에 직접 저장 -> 보안에는 유리 but 서버에 부하 줄 수 있음
  • ex) 로그인 상태 유지, 쇼핑몰 장바구니 기능
• 캐시:
  • 서버 지연을 줄이기 위해 사용자가 이전에 호출한 정보를 자동복사해 저장하는 임시저장소
  • 사용자가 웹사이트에 접속할 때 정적 컨텐츠(리소스파일, 이미지 등)을 특정 위치에 저장
  • 웹 사이트 서버에 해당 컨텐츠를 매번 요청해서 받는 것이 아닌, 정보가 저장된 특정 위치에서 불러옴 -> 사이트 응답시간을 줄이고 서버 트래픽 감소 효과를 볼 수 있다.
    • 즉 홈페이지 접속 시 css, js, 이미지 파일 등을 사용자의 PC에서 로드하며 서버를 거치지 않는다.
• 웹 표준접근성지침
  • 웹 접근성
    • 인식가능(장애를 가진 사람드링 웹 콘텐츠 인지 가능해야 함 - 보거나 듣기)
    • 작동가능(편리하게 사용 가능 - 타이핑, 음성인지)
    • 이해가능
    • 견고성 : 다른 보조 기술을 함께 사용할 수 이써야 함(자동완성기능, 스틱마우스, 색상대비 디자인, 자막, 스크린리더)
  • 웹 표준
    1. 기기, 브라우저별로 동일한 내용 서비스 제공
    2. 표준화 단체 W3C가 권고한 표준안에 따라 웹사이트 작성(HTML, CSS, JS에 대한 규정 참고)
    3. 웹 표준 준수는 웹 접근성 준수를 위함
    4. 페이지는 로딩이 빨라야 함(2초 안에 로딩되도록) / 서버 부담을 줄이는 방향
    5. 유지보수를 항상 생각하기(HTML, CSS, JS 분리하여 작업)
    6. 호환성 생각
• Json
  • JavaScript Object Notation이라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환형식.
  • JSON 문서형식은 자바스크립트 객체의 형식을 기반으로 만들어짐
  • 자바스크립트의 문법과 굉장히 유사 BUT 텍스트 형식일 뿐
  • 특정언어에 종속되지 않으며 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링할 수 있는 라이브러리 제공