우리는 지난시간에 간단한 JSX 문법을 사용해서 React 컴포넌트(엘리먼트) 를 만들었다 이번시간에는 Component 하고 Props 에 대해서 알아보도록 하자 Component 리액트트는 리액트 컴포넌트의 조합으로 이루어져 있습니다 하나의 페이지는 리액트 컴포넌트로 이루어져 있고 그 리액트 컴포넌트는 다른 작은 리액트 컴포넌트로 이루어져 있습니...
React 8 용어 정리 및 간단한 어플리케이션 개발
우리는 앞에서 리액트를 쓰기 위해 간단한 자바스크립트 부터 복잡한 함수형 프로그래밍 등 여러가지를 보았습니다 이제 이것들을 바탕으로 이 장부터 React 에 대한 이야기를 하도록 하겠습니다 그전에 리액트가 무엇인지 먼저 알아보겠습니다 리액트란 리액트는 전 페이스북 현 메타에서 개발한 오픈소스 자바스크립트 라이브러리로 사용자 인터페이스를 만들기 위한...
DevOps Jenkins 실전배포 환경 만들기 5 Credentials
보안에 있어서는 정말 생명이다 특히나 서버에 접속하는 SSH 비밀번호 같은것은 노출이 되게 되면 심각한 보안사고가 일어나게 되는데 우리 앞에서 배포한것들 중에 파라미터를 한번 살펴보자 이렇게 파라미터 빌드할떄 비밀번호를 가려 놓을 수 있다 이렇게 하면 안전할꺼라고 생각하지만 파이프라인에서 보안이 쉽게 뚫리게 된다 stage('SOURCE T...
React 7 고차함수
고차함수의 정의 고차 함수는 다음의 2가지 중 한가지를 수행할때 이를 고차함수라고 합니다 다른 함수를 매개변수로 받는 함수 함수를 반환하는 함수 함수를 인자로 전달하는 function opertaionFunction (x , y , optFunction){ return optFunction(x ,y);...
React 6 순수함수
순수함수 어떤 함수의 실행이 외부에 영향을 끼치지 않는 함수를 뜻합니다 순수함수의 특징 동일한 입력에 대해서는 항상 동일한 출력을 반환합니다 동일한 인자로 호출시 항상 동일한 값을 반환합니다 부수효과가 없습니다 함수 내부에서 외부 상태를 변경하지 않으며 외부 상태에 영향을 주지 않고 외부 변수를 의존하지도 않습...
React 5 불변성
정의 함수의 불변성은 함수가 호출되면 함수에 전달된 인자나 함수 내부의 상태를 변경하지 않은 원칙을 나타냅니다 불변성은 프로그램의 안정성과 예측가능성을 향상시키며 코드를 이해하고 유지모수 하기 쉽게 만듭니다 함수의 인자는 변경되지 않음 함수가 호출되면 그 함수에 전달된 인자는 변경되지 않아야 합니다 이것은 함수 내에서 전달된 인자의 값을 변경하지 않...
React 4 클로저
우리 지난 시간에 일급 함수의 특징을 하면서 일급 함수는 함수를 return 알 수 있다 이런 특징을 보았다 그래서 그때 한 예제가 function calualateArea(x){ return function(width , heigth){ return x * width * heigth; } } function cli...
React 3 일급함수 정의와 특징
자바 스크립트가 함수형 프로그래밍을 지원하는데 함수형 프로그래밍이 뭘까 그중에서 일급 함수라는 단어가 있다 함수가 마치 변수처럼 다른 함수의 인자처럼 전달되거나 다른 함수로 반환되거나 변수의 값으로 할당될 수 있다는 뜻입니다 변수에 할당 변수의 할당은 우리가 앞에서 보았다 const alert_print_helllo = () => aler...
React 2 동기 통신 vs 비동기 통신
우리 잠깐 ajax를 한번 생각을 해보자 ajax를 보면 async라는 옵션이 있는데 이를 true로 두면 비동기 수행이고 이를 false로 두면 동기 수행입니다 그럼 간단한 예제를 한번 만들어보자 간단하게 서버 api를 만들어보겠습니다 동기 vs 비동기 @GetMapping("/demo") @ResponseBody public Map<Str...
React ES6 문법1
이 장부터 React에 대한 공부를 적어 나가기로 했습니다 그 첫 번째로 ES Next 에 대한 문법을 정리할 것인데 이는 ES5 -> ES6 단계에서 자바 스크립트는 정말 많은 변화를 이룩했습니다 그 내용을 전부는 아니지만, 핵심 내용만 정리해서 넘어가도록 하겠습니다 const 이전에 없었던 상수정의입니다 이전 자바스크립트는 모든 변수를 va...