coding (19) 썸네일형 리스트형 [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 .. [JavaScript] Quick Sort(퀵 정렬) Quick Sort(퀵 정렬)의 개념 Quick Sort(퀵 정렬) 구현 소스 코드 function quickSort(arr) { // arr의 요소가 하나이면 arr 자체를 그대로 반환 if(arr.length .. [프로그래머스] x만큼 간격이 있는 n개의 숫자 - 자바스크립트 문제 설명 문제 풀이 function solution(x, n) { let answer = []; for(let i = 1; i [프로그래머스] 짝수와 홀수 - 자바스크립트 문제 설명 문제 풀이 function solution(num) { return num % 2 === 0 ? 'Even' : 'Odd'; } 삼항 연산자를 이용해 정말 간단하게 풀 수 있는 문제다. 실행 결과 코드 채점하고 제출 [프로그래머스] 정수 제곱근 판별 - 자바스크립트 문제 설명 문제 풀이 function solution(n) { let x = Math.floor(Math.sqrt(n)); return n === x * x ? (x + 1) * (x + 1) : -1; } Math.sqrt메소드는 괄호의 제곱근을 반환해준다. 그리고 제곱근이 소수자리로 나오는 것들을 걸러주기 위해 floor로 내려주고 n 값과 x * x값을 비교해 주면 된다. 실행 결과 코드 채점하고 제출 [프로그래머스] 이상한 문자 만들기 - 자바스크립트 문제 설명 문제 풀이 function solution(s) { let answer = ''; let arrS = s.split(' '); for(let i = 0; i [프로그래머스] 약수의 합 - 자바스크립트 문제 설명 문제 풀이 function solution(n) { let answer = 0; for(let i = 1; i [프로그래머스] 문자열 정수로 바꾸기 - 자바스크립트 문제 설명 문제 풀이 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를 설정하지 않으면 쭉 반환한다. 실행 결과 코드 채점하고 제출 [프로그래머스] 소수 찾기 - 자바스크립트 문제 설명 문제 풀이 이번엔 두 가지의 풀이를 들고 왔다. 첫 번째 풀이는 코드도 더욱 간결하고 테스트도 통과하였다. 하지만 채점하고 제출하는데 테스트 10, 11, 12번을 통과하지 못해서 효율성 검사에서 탈락했다. function solution(n) { let answer = []; for(let i = 2; i [프로그래머스] 서울에서 김서방 찾기 - 자바스크립트 문제설명 문제풀이 function solution(seoul) { let answer = ''; let i = seoul.findIndex(a => a === 'Kim'); return answer = `김서방은 ${i}에 있다` } findIndex메서드를 써서 문자열이 같은 요소의 인덱스 번호를 받아와 문제를 풀었다. 실행 결과 코드 채점하고 제출 이전 1 2 다음
