⚡리액트 핵심 요소 깊게 살펴보기 - 2.1 JSX란?javaScript XML의 줄임말로, 리액트(React)에서 주로 사용하는 JavaScript 확장 문법JavaScript 코드 안에서 HTML 태그처럼 보이는 코드를 쓸 수 있게 해주는 문법2.1.1 JSX의 정의JSX는 JSXElement, JSXAttributes, JSXChildren, JSXStrings 4가지 컴포넌트로 구성되어 있음.1. JSXElementJSX를 구성하는 가장 기본요소, HTML의 요소와 비슷한 역할을 함JSXOpeningElement : 일반적인 요소 ex) JSXClosingElement : JSXOpeningElement 가 종료되었음을 알리는 요소ex) JSXSelfClosingElement : 요소가 시작되..

⚡리액트 개발을 위해 꼭 알아야할 자바스크립트 - 1.7 타입스크립트1.7.1 타입스크립트란TypeScript is JavaScript with syntax for types기존 자바스크립트 문법에 타입을 가미한 것자바스크립트는 동적 타입의 언어이기 때문에 대부분의 에러를 코드를 실행했을 때만 확인할 수 있다는 문제점동적 타입 언어라는 점은 개발자에게 자유를 주기도 하지만 코드의 규모가 커질수록 오히려 발목을 잡는 경우도 많음타입스크립트는 타입 체크를 정적으로 런타임이 아닌 빌드 타입에 수행할 수 있게 해줌모든 함수와 변수에 타입 확인 연산자인 typeof를 적용해서 체크하는 것은 너무 번거롭고 코드의 크기를 과도하게 키움function test(a,b) { return a/b}test(5,2) // 2..

⚡리액트 개발을 위해 꼭 알아야할 자바스크립트 - 1.6 리액트에서 자주 사용되는 자바스크립트 문법1.6.1 구조 분해 할당🌚구조 분해 할당(Destructuring assignment)배열 또는 객체의 값을 분해해 개별 변수에 즉시 할당하는 것 주로 어떠한 객체나 배열에서 선언문 없이 즉시 분해해 변수를 선언하고 할당하고 싶을 때 사용함💡배열 구조 분해 할당useState(value,setter) : 2개짜리 배열을 반환하는 함수🌓 useState가 객체가 아닌 배열을 반환하는 이유는? 심플하고, 순서 기반으로 의미를 전달하기 위해서객체 구조 분해 할당은 원하는 이름으로 변경하는 것이 번거로움( 변수 이름이 강제되고, 불필요하게 장황 )배열 구조 분해 할당은 자유롭게 이름을 선언할 수 있기 때문..

⚡리액트 개발을 위해 꼭 알아야할 자바스크립트 - 1.5 이벤트 루프와 비동기 통신의 이해1.5.1 싱글 스레드 자바스크립트🌚자바 스크립트한번에 하나의 작업만 동기 방식으로 처리할 수 있음(싱글 스레드)하나의 코드가 실행하는데 오래걸리면 뒤의 코드가 실행되지 않는 것 > "Run-to-completion"자바스크립트는 비동기 처리가 가능한 것을 이해하려면 이벤트 루프를 알아야 함동기 : 직렬방식비동기 : 병렬방식 자바스크립트는 싱글스레드지만, 브라우저(혹은 Node.js)가 제공하는 이벤트 루프(Event Loop)와 백그라운드 API(Web API, Thread Pool) 덕분에 비동기 처리가 가능하다.1.5.2 이벤트 루프란?자바 스크립트 런타임 외부에서 자바스크립트의 비동기 실행을 돕기 위해 만들..

⚡리액트 개발을 위해 꼭 알아야할 자바스크립트 - 1.4 클로저리액트의 클래스형 컴포넌트에 대한 이해가 자바스크립트의 클래스, 프로토타입, this에 달려있다면, 함수형 컴포넌트에 대한 이해는 클로저에 있다!1.4.1 클로저의 정의함수가 바깥에 있는 변수를 기억하고 계속 쓸 수 있는 것1.4.2 변수의 유효범위, 스코프(scope)1. 전역 스코프 (global scope)전역 레벨에서 선언하는 것브라우저 환경에서 전역 객체는 window, Node.js 환경에서는 global이 있는데, 이 객체에 전역 레벨에서 선언한 스코프가 바인딩됨.코드에서 global이라는 변수를 var와 함께 선언했더니 전역 스코프와 hello 스코프 모두에서 global 변수에 접근할 수 있는 것을 확인할 수 있음.var gl..

⚡리액트 개발을 위해 꼭 알아야할 자바스크립트 - 1.3 클래스 1.3.1 클래스란 무엇인가?💡자바스크립트의 클래스란특정한 형태의 객체를 반복적으로 만들기 위해 사용되는 것// 클래스 예제// Car 클래스 선언class Car { // constructor는 생성자. 최초에 생성할 때 어떤 인수를 받을지 결정할 수 있으며, // 객체를 초기화하는 용도로도 사용 constructor(name) { this.name = name } // 메서드 honk() { console.log(`${this.name}이 경적을 울립니다!`) } // 정적 메서드 static hello() { console.log('저는 자동차입니다.') } // setter set age(val..

⚡리액트 개발을 위해 꼭 알아야할 자바스크립트 - 1.2 함수함수의 다양한 형태와 이러한 함수의 차이점이 무엇인지 살펴보자!1.2.1 함수란 무엇인가?🌚자바스크립트에서 함수란?작업을 수행하거나 값을 계산하는 동의 과정을 표현하고, 하나의 블록으로 감싸서 실행 단위로 만들어 놓은 것💡리액트에서 컴포넌트를 만드는 함수 형태function Component(props){ return {props.hello}}1.2.2 함수를 정의하는 4가지 방법1. 함수 선언문표현식이 아닌 일반 문(statement)으로 분류됨표현식: 무언가 값을 산출하는 구문. 즉, 함수 선언으로는 어떠한 값도 표현되지 않았으므로 표현식이 아닌 일반 문으로 분류2. 함수 표현식함수는 다른 함수의 매개변수가 될 수도 있고, 반환값이 될수..

⚡리액트 개발을 위해 꼭 알아야할 자바스크립트 - 1.1 자바스크립트의 동등 비교리액트 코드의 기반이 되는 자바스크립트에 대해 먼저 알아보자!1.1.1 자바스크립트의 데이터 타입자바스크립트의 모든 값은 데이터 타입을 갖고 있으며, 데이터 타입은 크게 원시타입과 객체타입으로 나눠진다.💡데이터 타입원시타입(private type)객체타입(object/reference type)booleannullundefinednumberstringsymbolbigintobject💡참고할 사이트https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects 표준 내장 객체 - JavaScript | MDN아래 전역 속성은 간단한 값을 반환하며 속..

⚡들어가기전 🌕리액트의 특징a. 명시적인 단방향 상태 변경리액트는 단방향 바인딩만 지원양방향 바인딩(Angular)은 뷰와 컴포넌트가 서로 영향을 줌단방향 바인딩이 줄 수 없는 편리함을 주지만, 프로젝트 규모가 커진다면 상태의 변화 원인을 파악하기 어려움단방향 바인딩 단점 : 항상 변화를 감지하고 업데이트하는 코드를 작성해야한다. 즉, 코드의 규모가 커짐b. JSX(Javascript XML)기존 Javascript 문법에 HTML을 약간 가미한 문법으로 몇 가지 특징만 이해하면 JSX 코드를 구현할 수 있음c. 배우기 쉽고 간결함d. 강력한 커뮤니티, 메타🌕 리액트의 역사2000년대 LAMP 스택 유행- Linux, Apache Web Server, MySQL, PHP를 활용한 웹개발이 주를 이룸-..

1. API 인증의 개념 및 깃 허브 리포지터리에서의 설정 방법, API 인증이 설정된 젠킨스와의 통합 방법에 대해 알아보자! 2. 코드형 파이프라인의 개념과 깃 허브에 이벤트가 발생할때 웹 훅을 사용해 깃 허브에서 파이프라인을 시작하는 방법을 알아보자!📂 API 인증 깃 원격 리포지터리에 접속하려면 비밀번호 대신 사용할 수 있는 API 액세스 토큰이라는 보안 텍스트를 생성해야 한다.📂 깃허브 리포지터리에 API 인증 적용 깃허브 리포지터리에서 API 인증 기술을 적용하려면 깃허브에서 API 토큰을 생성해야 한다.💡 깃허브에서 API 액세스 토큰을 생성하는 과정1단계 : 깃허브 로그인 : 깃허브 사용자 이름과 비밀번호를 사용해 로그인하고 대시보드로 이동한다.2단계 : API 액세스 토큰 생성 : 대..