전체 글

문제https://school.programmers.co.kr/learn/courses/30/lessons/147355?language=javascript 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr풀이반복문을 돌며, p의 길이만큼 첫문자부터 잘라낸 다음, 그 문자를 p와 비교한다.function solution(t, p) { //p 길이 let answer = 0; const pLength = p.length; //p길이 부분 문자열 찾기, 부분 문자열 길이만큼만 반복 for (let i = 0; i

리액트 공식문서에서 틱택토 게임 만들기를 살펴보면 중간에 key에 대한 이야기가 나온다.(틱택토 게임 만드는 방법은 생략! https://ko.react.dev/learn/tutorial-tic-tac-toe ) 1. 리액트에서 리스트 항목에 대한 렌더링 리스트를 화면에 보여줄 때, React는 마치 메모장처럼 각 항목을 기억해둔다. 리스트가 바뀌면 (예: 새로운 항목 추가, 삭제, 순서 변경 등), React는 이전에 기억해둔 메모와 비교해서 실제로 무엇이 달라졌는지 찾아낸다. 장보기 목록을 적는다고 가정해보자.  리액트는 두개의 메모장을 가지고 이전 메모와 비교하여 장보기 목록에 '우유'를 추가했다면 → 새로운 항목이 추가된 것을 알아챈다.'계란'을 지웠다면 → 그 항목이 사라진 것을 파악한다항목들의..

1. 컴포넌트: UI 구성 요소 React의 핵심 개념인 컴포넌트는 마크업, CSS, JavaScript를 하나로 모아 독립적이고 재사용 가능하게 만든 UI 조각이다. HTML 태그와 마찬가지로 컴포넌트를 조합하여 전체 페이지를 구성한다. 마치 레고 블록처럼 한번 만든 컴포넌트를 여러 곳에서 재사용할 수 있다!컴포넌트 재사용의 주요 장점을 몇 가지 살펴보면: 반복적인 코드 작성 감소로 개발 시간이 단축, 동일한 컴포넌트를 사용해서 일관성 유지, 컴포넌트 수정 시 사용된 모든 곳에 자동 반영 되므로 모듈화 되어 관리가 쉬워짐 등  Docs 컴포넌트를 들여다 보면 마크업을 반환하는 함수로 이루어져 있다. export default function Profile() ..

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]) );}

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번 반복되어야 함을 의미합니다.$:..