profile
세 잎 클로버들 사이에 네 잎 클로버 🍀
post-thumbnail

[AWS] AWS Amplify CI/CD (with React)

개요 > AWS(Amason Web Service) 에서는 AWS Amplify 로도 CI/CD 가 가능하다. 앞서 포스팅한 AWS Elastic Beanstalk 으로 배포하는 것과 비교하는 것은 여기 를 참고해볼 것 AWS 에서는 Amplify 를 이렇게 설명

2021년 8월 31일
·
0개의 댓글
post-thumbnail

[AWS] AWS Elastic Beanstalk CI/CD ( with React App )

AWS(Amason Web Service) 의 Elastic Beanstalk 을 사용하면 애플리케이션을 실행하는 인프라에 대해 자세히 알지 못해도 AWS 클라우드에서 애플리케이션을 신속하게 배포하고 관리할 수 있다.선택 또는 제어에 대한 제한 없이 관리복잡성을 줄일

2021년 8월 31일
·
0개의 댓글
post-thumbnail

[AWS] AWS 프리티어 확인법

AWS CI & CD 연습에 앞서 내가 AWS 프리티어 를 가입했던 것 같은데, 1년(12개월) 간이라곤 기억나는데, 남은 기간이 얼마나 남았지 ? 확인을 위해 먼저 확인하는 작업이 필요했다.아마존 웹 서비스(Amazon Web Services, AWS) 를 가입하여

2021년 8월 31일
·
0개의 댓글
post-thumbnail

[React] 컴포넌트 생명주기 메서드

리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다.컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때끝난다.컴포넌트를 처음으로 렌더링 할 때, 어떤 작업을 처리해야하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도

2021년 8월 28일
·
0개의 댓글
post-thumbnail

[React] 컴포넌트 반복

리액트 프로젝트에서 반복적인 내용을 효율적으로 보여 주고 관리하는 방법을 알아본다.개념책 리액트를 다루는 기술 를 기반으로 작성하였습니다.

2021년 8월 27일
·
0개의 댓글
post-thumbnail

[React] ref: DOM에 이름 달기

HTML에서 id 나 class 를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다. 그것이 ref(reference 의 줄임말) 이다.리액트 컴포넌트 안에서는 id 를 사용하면 안되는가 ?콜백 함수를 통한 ref 설정c

2021년 8월 27일
·
0개의 댓글
post-thumbnail

[React] Event Handling

사용자가 웹 브라우저에서 DOM 요소들과 상호 작업하는 것을 이벤트(Event) 라고 한다.리액트에서는 순수 HTML - Javascript 의 이벤트 핸들링 방식과 조금은 다른 방식으로 동작한다. 리액트에서의 Event Handling 에 대해 살펴본다.개념책 리액

2021년 8월 27일
·
0개의 댓글
post-thumbnail

[React] Component

React 에서 Component 를 사용하는 방법에는 크게 1. Class Component, 2. Functional Component 가 존재하는 것은 알고 있을 것이다.이번 포스팅에서는 주로 사용하던 Functional Component 에서보다 Class Co

2021년 8월 27일
·
0개의 댓글
post-thumbnail

[React] JSX

React 는 자바스크립트 라이브러리이나, 기본적으로 사용하는데 있어서 이 라이브러리만의 문법이 존재한다.자바스크립트 확장 문법이며 XML과 매우 비슷하게 생겼다.JSX 형식으로 작성한 코드는 \*\*브라우저에서 실행되기 전에 코드가 번들링(Bundling) 되는 과정

2021년 8월 26일
·
0개의 댓글
post-thumbnail

[React] 리액트는 왜 사용하는가 ?

이전까지 React를 단지 Javascript 로 프론트엔드 개발을 하는데 사용하는 라이브러리이고, 이를 통해 구현하는데 필요한 사용법만 알고, 빈 깡통을 들여다보는 느낌으로 다뤘던 것을 반성하며, React 란 무엇인지, 기본기부터 지나쳤던 개념들을 상기시키는 목적으

2021년 8월 26일
·
0개의 댓글
post-thumbnail

[JS] Iterable 객체

JS 개발을 하다보면, Iterator, Array-like 같은 키워드를 볼 수 있고, 이런 자료형이어야 작동하는 프로세스들을 볼 수 있었을 것이다.JS ES6+ 에는 새로운 문법이나 Built-in Object 뿐만 아니라, protocols(표현법들)도 추가되었다

2021년 8월 14일
·
0개의 댓글
post-thumbnail

[DEV] 웹 개발속도 향상을 위한 VSC Extensions

조만간 나만의 개발환경이 아닌 공적인 개발환경이 생길 수도 있을 것 같다.그러면 기존에 개발해오던 방식 세팅을 해놔야 개발할 때 불편함이 없을 것 같아서, 평소에 많이 사용하는 VSCode에서 잘 사용하고있던 Extension(확장 프로그램)을 정리해놓고, 필요할 때

2021년 8월 13일
·
0개의 댓글
post-thumbnail

[JS] 깊은 복사 & 얕은 복사

이전 JS, 원시타입 & 객체 포스팅에서 언급했듯이, JS는 유독 다양한 여러 Object 를 지원하기도하고, 조금이라도 복잡한 데이터 구조가 형성 된다하면, 배열이나 객체에 데이터를 저장해놓는 작업이 많다.복사라는 개념이 이런 관점에서 단순한 원시타입에 대해서는 일반

2021년 8월 11일
·
0개의 댓글
post-thumbnail

[JS] 원시타입, 객체타입

JS는 다른언어와 다르게, 원시값(문자열, 숫자 등)을 마치 객체(object)처럼 다룰 수 있기도 하다.다른 말로는, 원시값에서도 객체에서처럼 메소드(Method)를 사용할 호출할 수 있다.이번에는, JS에서의 원시값 과 객체에 대해 조금 구분을 해본다.그전에, 잠시

2021년 8월 11일
·
0개의 댓글
post-thumbnail

[JS] Map & Set 자료형

객체(Object) or 배열(Array) 로도 많은 작업을 할 수 있지만, 현실 세계를 반영하기에, 더욱 효과적인 자료형을 JS에서도 제공한다.그 중 맵(Map) 과 셋(Set) 자료형을 알아본다.다른 건 몰라도 개발을 하면서 중복 제거라는 이슈는 빈번하게 발생한다고

2021년 8월 10일
·
0개의 댓글
post-thumbnail

[JS] Array

Javascript 문법 중에 많은 비중을 차지하는 Array(배열)에 대해 정리한다.JS, queue뒤에 추가 : push앞에 삭제 : shiftJS, Stack뒤에 추가 : push뒤에 삭제 : popJS, Deque앞에 추가 : unshift앞에 삭제 : shif

2021년 8월 10일
·
0개의 댓글
post-thumbnail

[JS] Array Functions

JS Array Object 는 아주 많은 메소드들을 존재하지만, 그 중 평소에 자주 사용하는 메소드들을 정리한다.Array.prototype.splice()Array.prototype.slice()Array.prototype.concat()Array.prototype

2021년 8월 4일
·
0개의 댓글
post-thumbnail

[JS] 유용한 JS 문법 시리즈(1)

JS 로 개발을 하면서 유용하면서도, 코드의 의도가 같음에도 간결하고 명료한 코드를 작성하기 위한 몇 가지 유용한 JS 문법을 알아본다.삼항연산자라고도 한다.구조 분해 할당이라고도 한다.참고문서참고문서참고문서백틱(\`\`) 을 사용한다.하나의 문자열안에 변수를 포함할

2021년 8월 4일
·
0개의 댓글
post-thumbnail

[DEV] npm 과 yarn

이번에는 npm과 yarn 에 대해 비교해본다. 평소에 JS 프로젝트를 진행하면서 npm 으로 패키지를 관리하는데, 뭔가 무겁다 정도의 느낌을 받을 정도로 개발을 해왔던, 조금이라도 그런 느낌을 받았다면 이 포스팅이 조금은 도움이 되리라.

2021년 8월 3일
·
0개의 댓글
post-thumbnail

[DEV] npm 과 npx

React 프로젝트를 하기위해 CRA(Create-React-App)를 설치할 때 무심코 npx create-react-app 프로젝트명 같은 명령어를 통해 React 프로젝트를 설치한다.이 상황 외에도, 가끔 npm 과 npx 를 번갈아 쓰는 경우가 많은데, 이 기회

2021년 8월 3일
·
0개의 댓글