자바스크립트120 [React] 컴포넌트 만들기 이제 App.js라는 만들어진 컴포넌트에서 벗어나 직접 컴포넌트를 하나 만들어 보겠습니다. 1. 컴포넌트 만들기 컴포넌트를 만들기 위해서 src 디렉토리 내부에 새 파일을 만들어 줍니다. 저는 분리를 위해 src 아래에 새로운 디렉토리를 만들고 그 안에 컴포넌트들을 모으기로 했습니다. 컴포넌트를 만들때 주의사항은 자바스크립트와 다르게 컴포넌트 파일명이나 컴포넌트명을 PascalCase 방식으로 명명해야한다는 점 입니다. 새 파일을 만들고 다음과 같이 작성합니다. 코드 자체는 자바스크립트와 다른점이 없기 때문에 설명은 따로 없습니다. import React from 'react'; const FirstComponent = () => { return 처음으로 만들어 본 컴포넌트 입니다. }; export d.. 2021. 11. 2. [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. 퀵 정렬 지난 번에 다룬 셸 정렬은 시간 복잡도가 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. [Javascript] Fetch API Ajax 통신을 이용할 때 지난 포스트에서 다룬 XMLHttpRequest, jQuery, Fetch 등을 사용합니다. 이 중 XHR 방식은 사용법이나 가독성면을 위협하고, 제이쿼리는 사용하지 않는 경향이 있기 때문에 Fetch를 사실상의 표준으로 채택하고 있습니다. 1. Fetch API 지난번에 비동기 통신을 다루는 객체인 XMLHttpRequest 객체를 알아보았습니다. 하지만 사용법이 조금 복잡하고 가독성도 썩 좋다고는 하지는 못한다고 할 수 있습니다. 그래서 이런 문제점을 해결하기위해 ES6부터 통신을 위한 Fetch API를 채택했습니다. Fetch는 브라우저에 내장되어있기 때문에 따로 라이브러리의 설치같은 과정 없이도 이용할 수 있다는 장점이 있습니다. Fetch는 네트워크의 Request와.. 2021. 10. 18. 이전 1 ··· 5 6 7 8 9 10 11 ··· 20 다음 300x250
