🤓 슬기로운 개발생활 🤓 슬기로운 개발생활

🤔 Route 53이란 무엇일까? 아마존에서 제공하는 Domain Name System 웹서비스이다. 웹 페이지에 도메인을 붙여주는 서비스로, 사용자의 요청을 ec2, elastic load balancing 로드 밸런서, s3 버킷 등 aws에서 실행되는 인프라에 연결할 수 있도록 도와준다. 나는 S3버킷과 연결을 해야 하기 때문에 이 서비스를 이용하기로 했다. 나는 가비아에서 도메인을 구매했지만, route 53에서도 도메인 구매 서비스도 제공한다. 내가 할 일은 1. example.com 도메인 이름 등록 2. Amazon S3버킷을 만들고 웹 사이트를 호스팅하도록 버킷을 구성 이 두 가지이다. 성공했을 시에는 브라우저를 열고 도메인 이름을 입력하였을 때, 호스팅한 웹페이지가 잘 렌더링 되어야 한다..

스택(stack) 이렇게 책이 무더기로 쌓여있을 때, 가장 마지막에 쌓은 책을 가장 먼저 꺼낸 후에 다른 책을 꺼낼 수 있다. 스택은 가장 마지막에 들어온 것이 가장 먼저 나가는 자료구조이다(LIFO : Last In, First Out). 뒤로가기, 계산기 등도 스택 자료구조를 이용한 예이다. 여러가지 메서드 stack의 주요 메서드로는 push, pop, top/peek 등이 있다. 1. push : 스택공간에 데이터를 집어넣는(저장하는) 메서드이다. 2. pop : 스택공간의 최상단에 있는 데이터를 꺼내는 메서드이다. 3. peek : 제일 최근에 들어간 데이터, 최상위 데이터(top)를 읽는 작업이다. (데이터에 영향을 주지 않는다) 스택 자료구조 코드로 작성해보기 class Stack{ cons..

자료구조 👉 자료(DATA) 자료(資料, data, 데이터, 문화어: 데타)는 문자, 숫자, 소리, 그림, 영상, 단어 등의 형태로 된 의미 단위이다. 보통 연구나 조사 등의 바탕이 되는 재료를 말하며, 자료를 의미있게 정리하면 정보가 된다.(위키백과) 👉 컴퓨터의 언어 우리가 이러한 자료들을 가지고 컴퓨터에 처리를 맡길 때, 컴퓨터는 데이터를 이해할 수 있을까? 0과 1. 컴퓨터의 언어는 0과 1이기 때문에 두 수를 가지고 데이터를 전달해주어야 컴퓨터가 이해할 수 있다. 예전에는 위와 같은 천공 카드라는 것을 이용해 데이터를 표현하여 컴퓨터에 전달하였다. 하지만 천공 카드로 모든 데이터를 0과 1로 표현하기에는 한계가 생겼고, 프로그래머들은 다른 방안을 고안해냈다. 그 결과로 프로그래밍 언어(c, py..

함수형 컴포넌트 vs 클래스 컴포넌트 컴포넌트는 자바스크립트의 함수처럼 하나의 기능을 하는 단위라고 생각하면 될 것 같다. 하나의 컴포넌트는 하나의 커스텀 태그의 역할을 한다. 컴포넌트는 함수형으로, 클래스형으로 작성할 수 있다. 함수형 컴포넌트 함수 컴포넌트로 태그를 만들었다. 이 컴포넌트는 index.js에서 사용하고 있고, 로 name이라는 props를 넘겨주고 있다. props를 받기 위해서는 App에서 props를 인자로 받아야한다. 클래스 컴포넌트 ES6 class를 사용하여 컴포넌트를 정의할 수도 있다. 어떻게 Hello, wow가 화면에 렌더링 되게 되는 것일까? 1. 엘리먼트로 ReactDOM.render()를 호출하게 된다. 2. React는 {name : "wow"} 를 props로 ..

Codesandbox 사용해서 Hello world 출력해보기 react를 실행하기 위해서는 react를 설치해야 한다. 하지만 codesandbox에서 설치하지 않고 실행해볼 수 있다. 1. 로그인을 한 후 dashboard에 들어간다. 2. new sandbox를 클릭하고, 리액트를 클릭해준다. 3. import로 React 와 ReactDom을 불러오고 render 해주면 된다. render안에 있는 내용은 Hello world 라는 태그를 id가 root인 태그안에 넣겠다는 뜻이다. Hello World 라는 태그는 아래와 같이 위치하게 된다. Hello World Creat React App 으로 출력해보기 react를 사용하기 위해서는 react 프로젝트를 생성해야 한다. npx create-..

React 리액트 공식 홈페이지에 들어가면 리액트는 '사용자 인터페이스를 만들기 위한 JavaScript 라이브러리' 라고 나와있다. 웹페이지를 만드는 방법은 크게 두 가지로 나눌 수 있다. 1. html, css 파일을 만들고 javascript로 동적인 액션을 넣어서 만드는 방법 2. vue, react, angular 같은 라이브러리를 사용해서 만드는 방법이다. 자바스크립트 라이브러리 사용하기 웹페이지를 만들고 사용자들과 상호작용을 하게 되면서 많은 상태 관리가 필요하게 된다. 만약, 사용자가 프로필 관리에서 프로필 사진을 바꾼다고 하자. 그럼 아래와 같은 과정이 일어날 것이다. 1. 바꿀 이미지 DOM을 찾는다. 2. 이미지 DOM의 소스를 새로운 이미지로 바꿔준다. 3. 바뀐 이미지를 화면에 다..

Test-driven development TDD를 설명하기 전에, 먼저 디버깅에 대해 알아야 한다. 디버깅은 쉽게 말해서 문제가 발생했을 때 그 문제를 해결해주는 도구이다. 🐛 버그를 잡는다는 의미로 문제의 원인을 잡을 수 있도록 도와준다. 디버깅을 모른다면, 삽질을 하고도 원인을 파악하지 못할 것이다. 때문에 디버깅은 개발에서 떼어놓을 수 없는 스킬이다. sum 이라는 함수를 선언한 후, 실행했을 때 에러가 생기는 것을 알 수 있다. ❌ 버그가 잡힌 것이다. 디버거로 확인을 하면 문제가 생긴 원인을 확인할 수 있다. "원인은 x표시가 난 곳이구나!" 그리고 console.lo가 function이 아니라는 것을 확인할 수 있다. 이런 에러를 처음부터 줄일 수 있도록 도와주는 방법이 바로 TDD이다. T..

클라이언트사이드 렌더링 클라이언트사이드 렌드링에 가장 대표적인 것으로 Single Page Application(SPA)가 있다. 📌 SPA란? SPA는 전통적인 Multi Page Application(MPA)과 다르다. SPA는 단 하나의 웹페이지(단 하나의 html)에서만 렌더링이 이루어진다. 네트워크 탭을 보면 단 하나의 파일만 내려받는 것을 볼 수 있다. 리액트를 사용하여 프로젝트를 진행했었는데 보이는 것과 같이 하나의 html파일만 받아오지만, 유저가 탭에서 선택하면 렌더링 되는 것이 달라지는 것을 볼 수 있다. 이러한 방식을 클라이언트사이드 렌더링이라고 한다. SPA는 처음 화면을 켰을 때, 비어있는 HTML 파일을 받아온다. 그리고 로드 되면서 데이터를 서버에 요청하고 화면에 렌더링한다. ..