Programming310 [React] 컴포넌트 소개 - 클래스형과 함수형 컴포넌트 이제 리액트에 대해 본격적으로 첫 발을 내딛을 시간입니다. 리액트는 ES6 이후부터의 문법을 많이 사용하기 때문에 ES6이후 문법이 익숙하지 않다면 읽으시는데 어려움이 있으실 수 있습니다. 제 블로그 자바스크립트 탭에 자주 사용되는 ES6에 대한 문법들을 기재해놨으니 참조해주시길 바랍니다. 1. 컴포넌트 우선 들어가기에 앞서 컴포넌트(Components)에 대해 알아봐야 합니다. 리액트에서 컴포넌트라고 하는 것은 자바스크립트의 함수 개념과 유사하다고 할 수 있습니다. 이 컴포넌트를 통해서 UI를 만들어냄은 물론이고 이벤트에 따른 동작 변화까지 만들어 낼 수 있습니다. 리액트의 컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트 두가지가 있습니다. 그리고 그 중에서 클래스형 컴포넌트에 대해서 먼저 다루도록 하.. 2021. 11. 2. JSON 자바스크립트를 만지다보면, 혹은 인터넷을 하다가도 JSON이라는 것이 자주 등장합니다. 그렇다면 JSON이 대체 뭐길래 이렇게 자주 언급되는 것 일까요? 1. JSON 소개 JSON(JavaScript Object Notation)은 문자 기반 데이터 포맷 중 하나입니다. 포맷 중에서도 자바스크립트의 객체 문법을 따르고 있어서 자바스크립트를 사용할 줄 안다면 쉽게 이해할 수 있는 데이터이기도 합니다. JSON은 주로 비동기 통신 AJAX(XML을 대체)을 위해서 사용되고 있습니다. 또한 작성이 쉽고 모르는 사람이 봐도 이해하기 쉽기 때문에 JSON이 많이 사용되고 있는 추세입니다. 다음은 JSON의 구조를 보여주는 예시입니다. { "key1": "value1", "key2": "value2", } 2. .. 2021. 11. 2. [React/JSX] JSX 소개 이전 포스트를 따라가며 만들 프로젝트 폴더를 보니 App.js라는 파일이 눈에 띕니다. 자바스크립트? 하면서 들어간 그 파일에는 다음과 같이 알 수 없는 코드들이 짜여있습니다. import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 자바스크립트 같기도 하고, HTML같기도한 이 코드들을 알아보겠습니다. 1. JSX JSX는 자바스크립트의 확장 문법입니다. 바닐라 자바스크립트, HTML, XML과 비슷하기도합니다. JSX는 이처럼 HTML 요소를 자바스크립트로 표현하고 변환하기 위해 등장한 문법입.. 2021. 11. 1. 퀵 정렬 지난 번에 다룬 셸 정렬은 시간 복잡도가 O(n^2)로 아직 아쉬운 시간소모량을 보여줍니다. 그래서 더 빠른 정렬을 위해 고안된 방식이 퀵 정렬입니다. 1. 퀵 정렬 퀵 정렬은 가장 많이 사용되고 있는 가장 빠른 정렬 방식입니다. 정렬 대상을 특정 기준으로 두 개의 그룹을 나누고 다시 나눈 그룹에 대해 또 그룹을 나누고를 반복하여 정렬하는 방식입니다. 이때 특정 기준으로 설정하는 기준점을 피벗(Pivot)이라고 합니다. 퀵 정렬의 시간 복잡도는 O(n log n)입니다. 퀵 정렬 방식을 설명드리겠습니다. 우선 다음과 같은 배열이 있을 때 피벗을 설정합니다. 피벗은 보통 배열의 가운데 부분에 있는 요소에 대해 설정합니다. 피벗은 4로 설정해도 좋겠지만 6으로 설정하겠습니다. 그리고 피벗에 대해 피벗보다 작.. 2021. 10. 31. 셸 정렬 단순 삽입 정렬은 삽입 위치가 현재 위치에서 멀수록 연산이 멀어진다는 단점이 있습니다. 이 단점을 보완한 정렬방식이 셸 정렬입니다. 1. 셸 정렬 셸 정렬은 정렬할 배열의 요소를 몇개의 그룹으로 나누어 각 그룹으로 단순 삽입 정렬을 하고 그룹을 합쳐나가며 정렬을 하는 방식입니다. 그룹으로 나눌 때 h칸 만큼 떨어진 요소끼리 모아 h개의 그룹으로 나누어 정렬방식을 'h-정렬' 이라고 합니다. 셸 정렬의 시간 복잡도는 최선일 경우의 O(n)과 최악일 경우의 O(n^2)의 평균인 O(n^1.5)입니다. 다음과 같은 8개의 요소를 가진 배열을 가지고 셸 정렬을 해보겠습니다. 3 8 1 4 9 6 2 5 우선 4칸씩 떨어진 요소 그룹 4개로 4-정렬을 해보겠습니다. 같은 색으로 묶인 각 그룹에 대해 큰 수는 뒤로.. 2021. 10. 30. HTTP - HyperText Transfer Protocol 웹에 대한 걸 다루기 위해, 웹 개발자가 되기 위한 모든 것의 근간이 되는 프로토콜입니다. 클라이언트와 서버간의 통신을 위해 사용되고 있기 때문에 가장 기초적이고 필수적인 프로토콜이라고 할 수 있습니다. 백엔드 개발자라면 서버 요청에 대한 처리를 위해 HTTP를, 프론트엔드라면 서버로 데이터를 전송하기 위해 HTTP를 알아두어야 한다고 할 수 있습니다. 1. HTTP 소개와 특징 HTTP(HyperText Transfer Protocol)은 직역하면 하이퍼 텍스트를 전송하기 위한 프로토콜입니다. 즉, 정보를 주고 받기 위한 프로토콜입니다. 보통 HTML 문서를 주고 받는데 프로토콜이 이용되고 최근에는 HTTP의 확장성을 이용해서 폼(Form)이나 이미지, 비디오 등까지도 통신할 수 있게 되었습니다. 이 .. 2021. 10. 28. 이전 1 ··· 17 18 19 20 21 22 23 ··· 52 다음 300x250
