[문서] 리액트 공식문서 톱아보기: 기본 문법(빠른 시작 가이드)
·
기술/React.js
React 앱은 컴포넌트로 구성된다.컴포넌트는 마크업을 반환하는 자바스크립트 함수로 작성한다.컴포넌트 명명은 대문자로 시작한다. ex) MyButtonJSX 문법이므로, 처럼 태그를 닫아줘야 한다. 여러 개의 JSX 태그를 반환할 수 없으므로 ... 와 같이 부모로 감싸주어야 한다. html문법을 jsx로 변환해주는 사이트: https://transform.tools/html-to-jsx function MyButton() { return ( I'm a button );}//컴포넌트 생성export default function MyApp() { return ( Welcome to my app );}//다른 컴포넌트 안에 중첩스타일 추가하기React에..
프로그래머스, 자바스크립트) 최대공약수와 최소공배수
·
개발/알고리즘(코딩테스트)
문제https://school.programmers.co.kr/learn/courses/30/lessons/12940 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 풀이최대공약수와 최소공배수를 구할때는 유클리드 호제법을 알면 쉽게 구할 수 있다.유클리드 호제법(-互除法, Euclidean algorithm) 또는 유클리드 알고리즘은 2개의 자연수 또는 정식(整式)의 최대공약수를 구하는 알고리즘의 하나이다. 호제법이란 말은 두 수가 서로(互) 상대방 수를 나누어(除)서 결국 원하는 수를 얻는 알고리즘을 나타낸다.2개의 자연수(또는 정식) a, b에 대해서 a를..
프로그래머스, 자바스크립트) 직사각형 별찍기
·
개발/알고리즘(코딩테스트)
문제https://school.programmers.co.kr/learn/courses/30/lessons/12969 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr풀이문자를 a번 반복한 것을 b번 만큼 출력해준다.process.stdin.setEncoding('utf8');process.stdin.on('data', data => { const n = data.split(" "); const a = Number(n[0]), b = Number(n[1]); for(let i = 0; i
프로그래머스, 자바스크립트) 행렬의 덧셈
·
개발/알고리즘(코딩테스트)
문제https://school.programmers.co.kr/learn/courses/30/lessons/12950 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr풀이두 배열의 크기가 같으니 한 배열을 기준으로 돌면서 값을 업데이트한다.function solution(arr1, arr2) { return arr1.map((row, i) => row.map((val, j) => val + arr2[i][j]) );}
[우아한 타입 스크립트 with 리액트] 타입스크립트의 등장, 웹개발의 역사와 자바스크립트의 한계
·
기술/TypeScript
1. 웹 개발의 역사자바스크립트1990년대 : 마이크로 소프트의 인터넷 익스플로러, 넷스케이프 커뮤니케이션즈의 넷스케이프 내비게이터 를 가장 많이 사용1995년대 : 넷스케이프의 브랜든 아이크는 웹의 다양한 콘텐츠를 표현하기 위해 플러그인 요소를 쉽게 조합 할 수 있는 새로운 언어가 필요하다고 생각 => 자바스크립트의 탄생익스플로러의 Jscript vs 넷스케이프의 Javasciprt : 둘다 사용자에게 유의미한 편의성은 제공하지 못함자바스크립트의 표준, ECMAScript 경쟁관계이던 익스플로러와 넷스케이프는 자신들의 브라우저 기능을 빠르게 늘리기 시작추가된 기능은 각자의 브라우저에서만 동작해, 웹페이지가 다르게 동작하거나 제대로 동작하지 않는 크로스 브라우징 이슈 발생개발자들은 어떤 기능을 추가하기 ..
프로그래머스, 자바스크립트) 같은 숫자는 싫어
·
개발/알고리즘(코딩테스트)
문제https://school.programmers.co.kr/learn/courses/30/lessons/12906 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 풀이필터를 걸어 다음 숫자와 같은지 판별한 후 같지 않는 숫자만 넘긴다.function solution(arr) { return arr.filter((v, i) => v !== arr[i + 1]);}
프로그래머스, 자바스크립트) 문자열 다루기 기본
·
개발/알고리즘(코딩테스트)
문제https://school.programmers.co.kr/learn/courses/30/lessons/12918 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 풀이정규식으로 길이가 6또는 4인지, 숫자만 들어가있는지 판단한다.isNaN으로 생각할 수도 있지만 "12e", "16x1" 같은 애들도 숫자로 판단하기에 예외처리를 해줘야된다. 정규식 풀이는 다음과 같다.^: 문자열의 시작을 나타냅니다.\d: 숫자를 나타내는 메타 문자입니다. [0-9]와 동일합니다.{6}: 바로 앞의 문자(여기서는 \d, 즉 숫자)가 정확히 6번 반복되어야 함을 의미합니다.$:..
프로그래머스, 자바스크립트) 부족한 금액 계산하기
·
개발/알고리즘(코딩테스트)
문제https://school.programmers.co.kr/learn/courses/30/lessons/82612 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 풀이1부터 시작해서 count만큼 금액을 누적한 후 계산해준다.function solution(price, money, count) { let total = 0; for (i = 1; i money ? total - money : 0;}
프로그래머스, 자바스크립트) 문자열 내림차순으로 배치하기
·
개발/알고리즘(코딩테스트)
문제https://school.programmers.co.kr/learn/courses/30/lessons/12917 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr풀이대문자는 소문자보다 작은것으로 간주하고, 알파벳순서로 앞 글자가 뒤로 가야하니 sort()를 해준 다음 뒤집어줬다.마지막은 join으로 합쳐서 문자열로 만들어주기function solution(s) { return [...s].sort().reverse().join("")}
프로그래머스, 자바스크립트) 약수의 개수와 덧셈
·
개발/알고리즘(코딩테스트)
문제https://school.programmers.co.kr/learn/courses/30/lessons/77884 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 풀이약수를 구하는 함수를 만든 후 솔루션 함수 안에서 홀짝 판별해준다.function countDivisors(n) { let count = 0; for (let i = 1; i  다른 풀이제곱근이 정수면 약수가 홀수다.ex )12 => 1,2,3,4,6,12 , 루트12는 3.4xx로 정수가 아니다. 약수의 개수또한 짝수16 => 1,2,4,8,16, 루트 16은 4로 정수. 약수의 개수 홀..