본문 바로가기

Developer

 (11)
[React] (5) React Developer Tools 사용방법 React Developer Tools는 React를 사용하기에 필수적으로 설치해야 하는 프로그램은 아니지만 React 개발자로서 다른 React 웹 사이트나 자신이 만든 React 웹 사이트의 Component를 쉽게 탐색할 수 있도록 돕는 프로그램이다. 설치방법 chrome 웹 브라우저의 웹 스토어에서 react developer tools를 탐색하여 찾는다. 사용방법 자신이 탐색하고 싶은 웹사이트에서 F12 또는 개발자도구에 들어가서 Components라는 탭을 클릭하여 아래 그림과 같이 Component를 찾을 수 있다. Component의 props까지 찾을 수 있고 직접 그 자리에서 값을 변경하여 넣어볼 수도 있다.
[React] (4) Component 만들기 이번 포스팅에서는 Component를 제작하는 것을 설명할 것이다. 지난번 포스팅에서 App이라는 component를 제작했는데 이번엔 다양한 Component를 만들고 src/components에 넣어 사용하는 방법과 props라는 것에 대해서도 알아볼 것이다. 우선, src폴더에 components라는 폴더를 생성한다. 그리고 아래와 같이 세 가지의 파일을 만들고 코드를 넣는다. /src/components (새로 생성한 폴더) /Content.js import React, { Component } from 'react'; class Content extends Component { render() { return ( {this.props.title} {this.props.desc} ); } } ex..
[React] (3) 배포의 의미(Release, Deploy, Distribute)와 배포(Deploy)해보기 배포의 의미 프로그래밍에서 배포는 3가지의 단어로 나뉘어져있다. Release: 같은 제품을 새롭게 만드는 것(예: 새로운 버전을 배포, 새로운 아이피 번로 부여) Deploy: 프로그램 등을 서버와 같은 기기에 설치하여 서비스 등을 제공하는 의미 Distribute: 제품을 사용자들이 사용할 수 있도록 서비스 등을 제공하는 의미 이번 포스팅에서는 React를 Deploy하는 방법을 배워볼 것이다. 1. npm run build 아래 명령어를 입력하게 되면 build 파일이 생긴다 이곳에는 2장에서 여러개로 나뉜 파일들이 필요한 것들만 하나로 소스코드까지 줄여주면서 컴팩트하게 만들어준다. npm run build 알아보기는 힘들지만 이렇게 줄여준다. 2. nxp serve -s bulid 아래 명령어의 ..
[React] (2) 생성된 폴더 각 활용 방법과 Component 변경 방법 앞선 포스트 1장을 잘 따라오셨다면 이번 장에서는 생성된 폴더의 각 파일들이 어떠한 역할을 하는지 알아보려고 한다. 위에서 보면 생선된 폴더들을 볼 수가있다. 각각 어떠한 역할을 하는지 알아보자. 언급하지 않은 파일은 현재 중요하지 않으니 넘어가도록한다. 1. /src/app.js 보시면 기본적으로 App.js가 화면을 구성하는 html역할을 App()이라는 함수에서 return하여 뿌려준다는 것을 알 수 있다. 각 내용들을 바꾸고 저장하면 localhost:3000 페이지의 내용도 바뀔 것이다. 2. /public/index.html 사실 진짜 html파일은 이곳에 저장되어 있다. 여기 보면 라는 곳이 있는데 이곳을 통해 뿌려주는 것이다. 뿌려주는 것을 정의해 주는 곳이 바로 /src/index.js ..
[프로그래머스] 짝수와 홀수 - 자바스크립트 문제 설명 문제 풀이 function solution(num) { return num % 2 === 0 ? 'Even' : 'Odd'; } 삼항 연산자를 이용해 정말 간단하게 풀 수 있는 문제다. 실행 결과 코드 채점하고 제출
[프로그래머스] 문자열 정수로 바꾸기 - 자바스크립트 문제 설명 문제 풀이 function solution(s) { let answer = ''; s[0] === '+' ? answer = s.slice(1) : answer = s.slice(0); return parseInt(answer); }; slice(first Index, last index)메서드를 이용하여 문제를 풀었다. last index를 설정하지 않으면 쭉 반환한다. 실행 결과 코드 채점하고 제출
[프로그래머스] 완주하지 못한 선수 - 자바스크립트 문제 설명 문제 풀이 function solution(participant, completion) { participant.sort(); completion.sort(); for(let i in participant) { if(participant[i] !== completion[i]) return participant[i]; } } 우선 participant와 competion을 정렬하고 for in 문을 돌려서 participant의 인덱스 번호에 해당하는 문자열과 completion의 인덱스 번호에 해당하는 문자열이 같지 않으면 paricipant의 값을 리턴한다. 실행 결과 코드 채점하고 제출
[JavaScript] Tree(트리) - Depth-first Search(깊이 우선 탐색), Breadth-first Search(너비 우선 탐색) 이진 트리의 탐색에는 크게 2가지 방법이 있다. 이번 포스팅에서는 깊이 우선 탐색(Depth-first Search)과 너비 우선 탐색(Breadth-first Search) 이 두 가지에 대하여 알아보고 각 순회들을 코드로 구현해 보려고 한다. Depth-first Search(깊이 우선 탐색) 1. Pre-Order Traversal(전위 순회) root -> left -> right 부모 노드 -> 왼쪽 자식 노드 -> 오른쪽 자식 노드 A, B, D, H, I, E, J, K, C, F, L, M, G, N, O 순으로 탐색 2. In-Order Traversal(중위 순회) left -> root -> right 왼쪽 자식 노드 -> 부모 노드 -> 오른쪽 자식 노드 H, D, I, B, J, ..
[JavaScript] Tree(트리) - 이론학습 트리의 정의 계층적 관계를 표현하는 자료구조를 트리라고 한다. 회사내의 조직도, 의사결정을 하는데 필요한 알고리즘 등을 트리 형태로 나타내고 있다. 트리의 용어 정리 - 노드(node) : 트리를 구성하는 각 요소 A, B, C, D, E, F - 간선(edge) : 노드와 노드를 연결하는 선 - 루트 노드(root node) : 트리 구조에서 최상위에 존재하는 노드 A - 단말 노드(terminal node) or leaf : 트리 구조에서 아래로 또 다른 노드(자식 노드)가 존재하지 않는 노드 C, D, E, F - 내부 노드(internal node) : 단말 노드를 제외한 모든 노드 A, B - A는 B, C, D의 부모 노드(parent node)이다. - B, C, D는 A의 자식 노드(chi..
[JavaScript] Queue - Linear Queue(선형 큐) Queue의 개념 큐는 FIFO(Frist In First Out)의 특징을 가지고 있다. 우리나라 말로 선입선출이라고 한다. 예를 들어 마트, 편의점 또는 가게 등에서 처음 들어온 물건을 가장 먼저 파는 것 같은 형태이다. 먼저 진열된 유통기한이 가까운 제품을 먼저 팔거나 가게, 콘서트 등에서 줄을 서고 있는 고객들을 연상시키면 될 것 같다. Linear Queue(선형 큐) 구현 선형 큐란 것은 배열의 공간에 들어간 데이터가 고정되어 데이터를 빼내더라도 초기화하지 않으면 원래 데이터가 있던 배열자리에 더이상 다른 것이 들어갈 수 없는 형태의 Queue이다. 1. class 생성자로 뼈대 만들기 class queueType { constructor(size) { this.maxSize = size; t..
[JavaScript] Array(배열) 자료구조를 이해하기 위해 처음으로 알아야 하는 것은 배열(Array)이라고 생각합니다. 배열의 자세한 내용과 정의는 MDN web docs에서 더욱 자세히 볼 수 있지만 제가 공부한 배열에 대해서 간단히 정리해보려고 합니다. 배열의 구성 배열은 인덱스 번호가 0번 부터 시작한다. 길이는 0이 아닌 1부터 시작한다. 인덱스 번호와 길이는 다르다는 것을 주의해야 한다. javascript 배열 선언 방법 javascript는 배열을 선언할 수 있는 두 가지 방법을 가지고 있다. ////////////// 1. 생성자 함수로 배열 선언 ///////////////// // 빈 배열 생성 let arr = new Array(); // 빈 배열에 값 넣기(문자열) arr[0] = 'one'; arr[1] = 't..

티스토리툴바