전체 글

[ReactJS] JSX와 컴포넌트 (Component)

JSX JSX는 JavaScript의 문법을 확장한 React만의 문법으로, JavaScript 내에서 HTML 마크업을 사용할 수 있도록 한 것이다. 마크업과 자바스크립트 로직이 서로 연결되어 있다고 판단하여 이를 한 번에 작성할 수 있는 방법을 고민한 결과 생겨난 문법이다. JavaScript 내에서 마크업을 작성할 수 있고, JS 로직도 함께 작성할 수 있다. JavaScript 정식 문법은 아니기 때문에 브라우저에서 이를 해석할 수 없다. 따라서 Babel 변역기로 이를 React.createElement() 함수로 변환하는 과정이 반드시 필요하다. JSX의 특징 JSX는 자바스크립트의 값이다. 특정한 변수에 이 값을 담을 수 있고, 함수의 인자로 전달하거나 함수의 리턴값으로 사용할 수 있다. f..

[ReactJS] React의 특징과 Virtual DOM

React의 대표적인 특징 2가지 선언형 (Declarative Programming) 리엑트는 선언형 프로그래밍 언어이다. 절차적 vs 선언적 절차적(명령형) 프로그래밍 원하는 결과를 만들기 위한 절차(How)에 중점을 두는 프로그래밍 방식 자바스크립트에서 직접 DOM을 조작하는 방식 모든 과정을 일일이 기술해야 하므로 생산성이 저하될 수 있다. 선언적 프로그래밍 원하는 결과가 무엇(What)인지 선언하는 형태로 프로그래밍 하는 방식 자바스크립트에서 DOM 조작은 React에 위임 컴퓨터는 절차적으로 동작하기에 결국 모든 명령을 다 절차적으로 해주어야 하지만, 개발을 하는 개발자는 (최대한 절차적인 부분은 감추가나 위임하고) 선언적인 부분에만 집중하게 하는 방식이 선언적인 프로그래밍 방식이다. 컴포넌트..

[ReactJS] React JS 소개 및 설치

React JS의 개념과 탄생 배경 React 탄생 배경 웹 애플리캐이션이 등장함에 따라 웹 개발의 복잡성이 증가하게 되었다. 웹 애플리케이션 : 웹 브라우저를 통해 응용 소프트웨어의 기능을 이용할 수 있도록 만든 웹 서비스 이에 따라 DOM을 직접 조작하는 (Vanila JS, jQuery를 이용하는) 기존의 개발 방법으로는 한계가 생겼다. 이러한 상황에서 자연스럽게 프론트엔드 개발의 생산성 향상과 난이도 하향을 위한 여러 라이브러리 및 프레임워크가 탄생하였다. 이 중 현재 제일 많이 사용되는 것은, React, Angular, Vue이다. React JS란? React JS (혹은 React)는 UI를 구축하고 어플리케이션이 interactive하도록 만들어주는 프레임워크 (Framework) 이자 ..

[NodeJS] Node JS & NPM 소개 및 설치

Node JS란? Node JS란 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임(실행 환경)이다. 실행 환경 : 특정 프로그램을 실행하기 위해서 필요한 환경 JavaScript 실행 환경 : JavaScript를 실행할 수 있도록 해주는 환경 (JavaScript 엔진 + 파일 읽고 쓰는 기능 + 입출력 기능 등등) Node JS란 (V8 엔진으로 빌드된) 단순한 문자의 나열인 JavaScript 코드를 해석하고 실행할 수 있도록 제공된 환경이다. Node JS 탄생 배경 웹 브라우저는 대표적인 JavaScript의 실행환경이다. 애초에 JavaScript 언어는 브라우저에서 간단한 스크립트를 실행하기 위해 탄생한 언어이다. 그렇기 때문에, JavaScript는 브라우저..

[프로그래머스] 옹앓이 (1) (📓Lv. 0) (JavaScript)

문제 바로 가기 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 (JavaScript) 사용 언어 : JavaScript 풀이한 날짜 : 2022-12-20 function solution(babbling) { const correctBabbling = ["aya", "ye", "woo", "ma"]; let count = 0; babbling.forEach((item) => { let oneBabble = item; for (let i = 0; i < correctBabbling.length; i++) { if (item.includes(correc..

[백준] 1063번 : 킹 (🥈실버 4) (Python)

문제 바로 가기 1063번: 킹 8*8크기의 체스판에 왕이 하나 있다. 킹의 현재 위치가 주어진다. 체스판에서 말의 위치는 다음과 같이 주어진다. 알파벳 하나와 숫자 하나로 이루어져 있는데, 알파벳은 열을 상징하고, 숫자는 www.acmicpc.net 풀이 사용 언어 : Python 풀이한 날짜 : 2022-03-11 place = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'] dxs = [0, 1, 1, 1, 0, -1, -1, -1] dys = [1, 1, 0, -1, -1, -1, 0, 1] king, stone, n = tuple(input().split()) n = int(n) king_x = place.index(king[0]) + 1 king_y = int(king..

[백준] 1929번 : 소수 구하기 (🥈실버 3)

문제 바로 가기 1929번: 소수 구하기첫째 줄에 자연수 M과 N이 빈 칸을 사이에 두고 주어진다. (1 ≤ M ≤ N ≤ 1,000,000) M이상 N이하의 소수가 하나 이상 있는 입력만 주어진다.www.acmicpc.net 풀이사용 언어 : Python풀이한 날짜 : 2022-03-11m, n = tuple(map(int, input().split()))def isPrime(a): if a == 1 : return False i = 2 while i*i  풀이 로직m부터 n까지의 수를 for문을 통해 하나씩 확인하면서 소수인지 판별하고, 소수이면 출력한다. 끝.소수 판별 과정은 함수로 따로 만들어 구현했다. 판별 과정 중 나머지 연산은 n의 제곱근까지만 해보면 된다는 점. 문제 접근 ..

[백준] 1037번 : 약수 (🥈실버 5) (Python)

문제 바로 가기 1037번: 약수 첫째 줄에 N의 진짜 약수의 개수가 주어진다. 이 개수는 50보다 작거나 같은 자연수이다. 둘째 줄에는 N의 진짜 약수가 주어진다. 1,000,000보다 작거나 같고, 2보다 크거나 같은 자연수이고, 중복되 www.acmicpc.net 풀이 1 사용 언어 : Python 풀이한 날짜 : 2022-03-07 n = int(input()) lst = list(map(int, input().split())) if n == 1: print(lst[0] * lst[0]) else: print(max(lst) * min(lst)) 풀이 로직 진짜 약수는 1과 N이 될 수 없으므로, N은 1과 자신만을 약수로 갖는 소수가 될 수 없다. 진짜 약수의 개수가 1개면, 그 값을 제곱하면 ..

[백준] 1292번 : 쉽게 푸는 문제 (🥈실버 5) (Python)

문제 바로 가기 1292번: 쉽게 푸는 문제 첫째 줄에 구간의 시작과 끝을 나타내는 정수 A, B(1 ≤ A ≤ B ≤ 1,000)가 주어진다. 즉, 수열에서 A번째 숫자부터 B번째 숫자까지 합을 구하면 된다. www.acmicpc.net 풀이 1 사용 언어 : Python 풀이한 날짜 : 2022-03-05 a, b = tuple(map(int, input().split())) cnt = 0; ans = 0 def count(): global cnt, ans for i in range(1, 1001): for j in range(1, i+1): cnt += 1 if a

[백준] 1026번 : 보물 (🥈실버 4) (Python)

문제 바로 가기 1026번: 보물 첫째 줄에 N이 주어진다. 둘째 줄에는 A에 있는 N개의 수가 순서대로 주어지고, 셋째 줄에는 B에 있는 수가 순서대로 주어진다. N은 50보다 작거나 같은 자연수이고, A와 B의 각 원소는 100보다 작거 www.acmicpc.net 풀이 1 사용 언어 : Python 풀이한 날짜 : 2022-03-05 n = int(input()) lst_a = list(map(int, input().split())) lst_b = list(map(int, input().split())) lst_a.sort() lst_b.sort(reverse=True) ans = 0 for elem1, elem2 in zip(lst_a, lst_b): ans += elem1 * elem2 prin..