월드스토리의 코딩 나라

Event Handling의 차이 Event 적용 방법의 차이형식 사진HTML에서 사용하던 형식React에서 사용하던 형식1. React의 이벤트는 소문자가 아닌 카멜 케이스(camelCase) 이용2. JSX를 사용해 이벤트 핸들러 전달하며, 직접 만든 컴포넌트에는 이벤트가 아닌 Props로 전달해야 함.3. 즉, 전달 후 컴포넌트 내 기본 컴포넌트에 연결하는 것  React 합성 이벤트• Synthetic Event ( 합성 이벤트 )•  React에서 사용하는 이벤트는 브라우저의 기본 이벤트가 아니다!• 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 Wrapper(래퍼) 객체합성 이벤트(SyntheticEvent) – React  클래스 컴포넌트에서의 이벤트 • 클래스형 컴포넌트에서는 this를..

props란?• properties 를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소 • props는 컴포넌트끼리 값을 전달하는 수단 • 상위 컴포넌트에서 하위 컴포넌트로 전달 (단방향 데이터 흐름) 함수형 컴포넌트 props // 부모 컴포넌트에서의 모습const Funccomponent = (props) => { return ( 안녕? {props.name} 반가워! );} //자식 컴포넌트에서의 모습Funccomponent.defaultProps = { name : '홍길동'} //자식 컴포넌트에서 기본값 설정• 부모 컴포넌트에서 전달한 props는 함수형 컴포넌트에서 함수의 파라미터 로 전달받으며, JSX 내부에서 { } 기호..

JSX•  JavaScript + XML의 합성어• 자바스크립트 확장 문법으로 XML 과 유사• 바벨을 이용해 일반 자바스크립트 코드로 변환  JSX 문법 정리1. 전체는 하나의 태그로 html 태그는 항상 return 이후에, 반드시 하나의 부모 요소가 전체 요소를 감싸는 형태로!html with JShtml를 작성하다가 중간에 js문법을 사용하고 싶을 때는 {중괄호}로 감싸야 합니다.단, for문과 if 문은  return 내부에서 사용할 수 없고, 삼항 연산자를 사용해야 함인라인 style 적용• CSS 를 인라인 형태로 적용할 때는 {object}형태로 저장해야 함• CSS 속성은 dash-case →camelCase • 그 덕분에 인라인으로 작성된 정보를 따로 {} 객체 형태로 빼내어 변수화하는..

Component• React의 꽃이라 불리는 React의 핵심이자 화면을 구성하는 하나의 부품• 내부의 데이터만 변경해서 전체적인 틀(UI)을 재사용 가능• UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으 로 나누어 분리 가능 Component 트리 구조React 컴포넌트 종류 클래스형 컴포넌트 (Class Component)• render 함수를 반드시 사용해야 함 • lifecycle 기능 • 컴포넌트를 만들 때 기존 Components 클래스에서 상속받아서 사용 함수형 컴포넌트 (Functional Component)• 짧고 직관적이며, 사용방법이 더 간단함 • 메모리 사용에 이점이 있음   클래스형 컴포넌트 vs.함수형 컴포넌트React 초창기에는 함수형 컴포넌트에는 현..

create-react-app를 이용한 React 프로젝트 생성하기• 리액트 앱(프로젝트)은 대문자는 사용 불가능이며, 단어 여러개 사용시 하이픈 기호로 구분함•  npx create-react-app [React App name] 해당 명령어를 사용하면 손쉽게 React프로젝트의 기본 뼈대를 생성할 수 있음npx는 npm의 자식 명령어로 npm보다 가볍게 패키지를 구성함npm버전이 5.2 이상일 때, node 버전이 14 이상일 때 사용 가능npm start 명령어를 이용하여, 만들어놓은 리엑트 구조를 실행할 수 있음 create-react-app으로 생성한 프로젝트의 구조   /node_modulesnpm 을 시작하면 생기는 폴더, 내부에 모듈과 관련된 정보가 들어있음/publicindex.html ..

React란?• 화면을 만들기 위한 자바스크립트 라이브러리• 현재 프론트엔드 개발 환경에서 가장 많이 활용되고 있는 라이브러리• 사용자와 상호 작용이 가능한 동적 UI 제작 가능 React의 특징 4가지특징 종류의미Data Flow• 양방향 X 단방향 O 데이터 흐름 • Angular JS 처럼 양방향 데이터 바인딩은 규모가 커질수록 데이터의 흐 름을 추적하기 힘들고 복잡해지는 경향이 있다. Component 기반 구조• Component : 독립적인 단위의 소프트웨어 모듈로 소프트웨어를 독립적 인 하나의 부품으로 만드는 방법 • React는 UI(View)를 여러 Component를 쪼개서 만들기에 코드 파악이 쉽다.• 한 페이지 내에서 여러 부분을 Component로 만들고 이를 조립해 화면을 구성하..

Angular JS • 구글에서 만든 JavaScript 기반의 오픈 소스 프레임워크• 양방향 데이터 바인딩으로 양방향 웹 애플리케이션에 적합• 2016년도 이후 점유율 하락 중• Ex) 유튜브, 페이팔, 구글, 텔레그램 등등  React JS• 동적 사용자 인터페이스를 만들기 위해 2011년 페이스북에서 만 든 오픈 소스 JavaScript 라이브러리• 데이터 변경이 잦은 복잡하고, 규모가 큰 라이브러리에 적합• Angular 보다 배우기 쉽다고 이야기 됨.• Ex) 페이스북, 인스타그램, 넷플릭스, 야후, 드롭박스 등등 Vue.js  • 2013년 출시된 JavaScript 프레임워크• Angular와 React의 장점을 수용한 프레임워크• 중국어 기반으로 Reference가 적음.• Ex) 샤오미,..

Socket.io• 클라이언트와 서버 간의 짧은 지연 시간, 양방향 및 이벤트 기반 통신을 실시간 으로 가능하게 하는 라이브러리• WebSocket 프로토콜 위에서 구축되었으며 통신 과정을 단순화하고 개선하 기 위한 추가 기능을 제공• 이벤트 기반이며, 연결이 끊어질 시 자동으로 재연결 시도를 한다는 특징이 있다. Socket.io의 기본적인 이벤트이벤트명의미connection• 클라이언트가 서버에 연결되었을 때 발생.• 클라이언트와의 상호작용을 초기화하거나 초기 데이터를 전달할 수 있 음disconnect클라이언트가 연결을 해제했을 때 발생disconnecting클라이언트가 연결을 해제하려는 경우에 함수를 실행하고 싶다면 발생error연결 중에 오류가 발생했을 때 발생 사용자 지정 이벤트룸 관련 함수 ..

TCP (Transmission Control Protocol)컴퓨터 네트워크에서 데이터 통신을 위한 프로토콜 하나로 데이터 교환을 가능하게 함TCP는 데이터를 신뢰성 있게 전송하기 위한 프로토콜 특징의미신뢰성데이터의 손실이나 손상을 최소화하고, 데이터의 순서를 보장연결 지향데이터를 주고받기 전에 송신자와 수신자 간에 연결흐름 제어데이터의 흐름을 제어하여 수신자가 처리할 수 있는 속도에 맞춰 데이터를 전송혼잡 제어네트워크의 혼잡 상태를 감지하고 조절하여 네트워크 성능을 유지 IP (Internet Protocol)인터넷상에서 데이터를 주고받기 위한 통신 규약(약속)특징의미패킷 기반데이터를 작은 패킷 단위로 나누어 전송하고, 각 패킷은 목적지 주소와 출 발지 주소 정보를 포함비연결성패킷은 독립적으로 처리되..

암호화 종류 - 단방향● 데이터 무결성을 검증하는 데 주로 사용되며, 패스워드 저장 등에서도 활용● 단방향이므로 원본 데이터를 복원하는 건 불가능● 동일한 데이터에 대해서는 항상 동일한 해시 값이 생성됨- 서로 다른 데이터에 대해서도 같은 해시 값이 나올 수 있음● 미세한 데이터 변화에서도 해시 값은 완전히 다르다.● 주로 해시 함수(MD5, SHA-1, SHA-256 등)을 사용하여 구현 해시(Hash)● 해시(Hash) : 해시 함수에 의해 얻어지는 값● 해시 함수(Hash Function) = 해시 알고리즘● 임의의 크기의 데이터를 고정된 크기의 데이터로 변환하는 함수● 키(key) : 매핑 전 원래 데이터 값● 해시 값(hash value) : 매핑 후 데이터 값● 해싱(hashing) : 매핑하..