WEB55 객체 객체란? 자바스크립트는 객체(object) 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 "모든 것"이 객체이다. 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체이다. 원시 타입은 단 하나의 값만 나타내지만 객체 타입(object/reference type)은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조data structure이다. 원시 타입의 값 - 변경 불가능한 값(immutable value) 객체 타입의 값 - 변경 가능한 값(mutable value) 객체는 프로퍼티의 집합 객체이 프로퍼티와 메서드 } 프로퍼티: 객체의 상태를 나타내는 값(data) 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(be.. 2023. 3. 10. DOM DOM(Document Object Model)이란? 문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다. 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작 할 수 있게끔 연결시켜주는 역할을 담당한다. DOM(문서 객체 모델)은 어떻게 생성되고 어떻게 보여질까? DOM은 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이다. 따라서 HTML DOM, 혹은 HTML DOM Tree로 부르기도 한다. 트리 자료구조는 노드들의 계층 구조.. 2023. 3. 8. JSX JSX란? const element = Hello, world!; - 위에 태그 문법은 문자열도, HTML도 아니다. - JSX라 하며 JavaScript를 확장한 문법이다. - JavaScript의 모든 기능이 포함되어 있다. - JSX는 React "엘리먼트(element)"를 생성한다. React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식)과 연결된다는 사실을 받아들입니다. JSX에 표현식 포함하기 function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper',.. 2023. 3. 7. State and LifeCycle(생명주기) element 렌더링을 이용한 째깍거리는 시계 예시 const root = ReactDOM.createRoot(document.getElementById('root')); function tick(){ const element = ( Hello, world It is {new Date().toLocaleTimeString()}. ); root.render(element); } setInterval(tick, 1000); Clock 컴포넌트를 만들어서 완전히 재사용 하고 캡슐화 하는 방법 const root = ReactDOM.createRoot(document.getElementById('root')); function Clock(props){ return( Hello, world! It is {prop.. 2023. 3. 7. 컴포넌트(Components) 함수 컴포넌트 - 컴포넌트를 정의하는 가장 간다한 방법은 JavaScript 함수를 작성하는 것이다. function Welcome(props){ return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 "props" (props는 속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트 이다. JavaScript 함수이기 때문에 말 그대로 "함수 컴포넌트"라고 호칭한다. 클래스 컴포넌트(ES6 class 사용) class Welcome extends React.Component{ render() { return Hello, {this.props.name}; } } 컴포넌트 렌더링 function Welcome(props) { .. 2023. 3. 4. element(엘리먼트) element(엘리먼트) - 엘리먼트는 React 앱의 가장 작은 단위 이다. - 엘리먼트는 화면에 표시할 내용을 기술 한다. const element = Hello, world; - 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체(plain object)이고 쉽게 생성 가능하다. - React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 한다. DOM에 엘리먼트 렌더링 하기 - HTML 파일 어딘가에 가 있다고 가정 - 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 "루트(root)" DOM 노드라고 한다. - React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다. - React를 기존 앱에 통합하려는 경우 원하는 만.. 2023. 3. 4. 자바스크립트 자바스크립트(JavaScript)란? - 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어이다. - 자바스크립트로 작성한 프로그램을 스크립트(script)라고 부른다. - 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행된다. - 스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성 할 수 있고, 실행 할 수있다. 왜 자바스크립트인가? - 처음 자바스크립트가 만들어졌을 대는 'LiveScript'라는 이름으로 불렸다. - 처음 만들어질 당시에 자바의 인기가 아주 높은 상황이었다. - 관련인들이 자바스크립트를 자바의'동생' 격인 언어로 홍보하면 도움이 될 것이라는 사결정을 내리고 이름을 교체했다. - 이름은 자바에서 차용해 왔지만, 자바.. 2023. 3. 2. 동기와 비동기 개념과 차이 동기(Synchronous : 동시에 일어나는) - 동기는 말 그대로 동시에 일어난다는 뜻이다. 요청과 그 결과가 동시에 일어난다는 약속이다. - 바로 요청을 하면 시간이 얼마나 걸리던지 요청한 자리에서 결고가 주어져야 한다. - A노드와 B노드 사이의 작업 처리 단위(Transaction)를 동시에 맞추겠다. 비동기(Asynchronous : 동시에 일어나지 않는) - 비동기는 동시에 일어나지 않는다를 의미한다. 요청과 결과가 동시에 일어나지 않을거라는 약속이다. - 요청한 그 자리에서 결과가 주어지지 않음 - 노드 사이의 작업 처리 단위를 동시에 맞추지 않아도 된다. 동기와 비동기 각각의 장단점 동기 방식 장단점 - 설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야 한다.. 2023. 2. 28. Framework vs Library 프레임워크(Framework)란? - 프레임워크는 뻐대나 기반구조를 뜻하고, 제어의 역전 개념이 적용된 대표적인 기술이다. - 소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합 - 완성된 어플리케이션이 아닌 프로그래머가 완성시키는 작업 - 가져다가 사용한다기 보다는 거기에 들어가서 사용한다는 느낌/관점으로 접근 - 객체 지향 개발을 하게 되면서 통합성, 일관성의 부족이 발생되는 문제를 해결할 방법중 하나 프레임워크의 특징 - 특정 개념들의 추상화를 제공하는 여러 클래스나 컴포넌트로 구성되어 있다. - 추상적인 개념들이 문제를 해결하기 위해 같이 작업하는 방법을 정의한다. - 컴포넌트들은 재사용이 가능하다. - 높은 수준에서 패턴들을 조작화 할 수 있다. 라이브러리(Libr.. 2023. 2. 10. Spring security 정리 1. 웹의 인증 및 인가 ● 인증(Authentication) : 사용자 신원을 확인하는 행위 - 회사 출입을 위한 출입증 확인 혹은 생체 정보, 인식 ( 너 누구누구 맞아?) - 아이디/패스워드, 각종 인증서 ● 인가(Authorization) : 사용자 권한을 확인하는 행위 - 주로 역할에 따른 사용 권한 관리 - 특정게시판 조회 권한 - 회사 건물 내 접근 권한 관리 I. 방문자 -> 회의실만 접근 가능 II. 직원 -> 회의실, 사무실 접근 가능 III. 관리자 -> 회의실, 사무실, 서버실, 물품보관실 접근 가능 2. 쿠키와 세션 ● HTTP(HyperText Transfer Protocol) : 웹 상에서 데이터에 대한 요청과 응답을 주고 받는 규칙 ● State(상태) : 클라이언트(사용자).. 2022. 11. 28. OAuth2 카카오 로그인 소셜 로그인 탄생 배경 - 모든 웹 사이트에서 회원가입 과정을 거치는 것은 사용자에게 부담이 된다. - 매번 번거로운 회원가입 과정을 수행해야 할 뿐 아니라, 웹 사이트마다 다른 아이디와 비밀번호를 기억해야 한다. - 또한 웹 사이트를 운영하는 측에서도 회원들의 개인정보를 지켜야하는 역할이 부담이 된다. - 이런 문제를 해결하기 위해 OAuth를 사용한 소셜 로그인이 등장함 OAuth 란? OAuth는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로 사용되는, 접근 위임을 위한 개방형 표준이다. 사용자가 애플리케이션에게 모든 권한을 넘기지 않고 사용자 대신 서비스를 이용할 수 있게 해주는 HTTP .. 2022. 11. 28. kafka 기본 2022. 10. 30. 이전 1 2 3 4 5 다음
