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

자료구조 👉 자료(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 파일을 받아온다. 그리고 로드 되면서 데이터를 서버에 요청하고 화면에 렌더링한다. ..

브라우저의 주요 기능 인터넷 익스플로러, 크롬 등 우리가 사용하는 소프트웨어(앱)를 브라우저라고 한다. 브라우저의 가장 핵심 기능은 사용자가 url(자원이 있는 위치, 주소)을 입력했을 때 자원(주로 HTML파일)을 서버에 요청하고 브라우저에 표시하여 사용자에게 보여주는 기능이다. 크로스브라우징(웹 호환성) 브라우저도 인터넷 익스플로러, 파이어폭스, 사파리, 크롬 등 많은 종류가 있다. 과거에는 브라우저들이 저마다 독자적인 방법으로 브라우저를 만들어서 심각한 호환성 문제를 겪었다. (웹 서비스를 만드는데 크롬을 사용하는 유저, 인터넷 익스플로러를 사용하는 유저 등 각각의 브라우저에 맞게 웹 서비스를 만들어야 했다) 이 문제를 해결하기 위해 웹 표준화 기구인 W3C(World Wide Web Consort..

프록시(Proxy Server) 프록시란 빨간 애다. 프록시는 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해 주는 것이다. 서버와 클라이언트 사이에 중계기로서 대리로 통신을 수행하는 것을 가리킨다. 그리고 이 역할을 하는 서버를 프록시 서버라고 한다. 📌 프록시 서버를 사용하는 이유는 무엇일까? 1. 클라이언트 대신 서버에게 요청을 받아 응답을 해준다. 2. 캐시를 사용하여 리소스로의 접근을 빠르게 하기 위해. 웹 프록시는 웹 서버로부터 웹 페이지를 캐시로 저장하는 데 흔히 쓰인다. (네트워크 비용감소, 원서버와는 통신하지 않음) 3. 프록시 서버를 거치는 요청 및 응답을 확인할 수 있기 때문에 (filter) -> 사용률을 기록하고 검사(이를테면 회사는 인터넷 이용을 ..