본문 바로가기

전체 글137

[모던 리액트 Deep Dive] 10장 리액트 17과 18의 변경 사항 살펴보기 10.1 리액트 17 버전 살펴보기리액트 17버전은 16버전에서 더 추가된 기능은 없고 기존에 사용하던 코드의 수정을 필요로 하는 변경 사항을 최소화했다는 점이 가장 큰 특징이다. 10.1.1 리액트의 점진적인 업그레이드16에서 더 이상 호환되지 않는 API가 있거나 새로운 리액트 17을 사용하는 데 있어 이전과 작동 방식이 달라질 수 있기 때문에 단행된 주 버전 업데이트다.전체 애플리케이션 트리는 리액트17이지만 일부 트리와 컴포넌트에 대해서는 리액트18을 선택하는 점진적인 버전 업이 가능해진다. 한 애플리케이션 내에 여러 버전의 리액트가 존재하는 경우 예제 659p리액트 17 애플리케이션은 내부에서 리액트 16을 게으르게(lazy) 불러온다.불러오는 과정에서 리액트 16을 위한 별도의 루트 요소를 만.. 2024. 12. 9.
[9장 발표] 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기 9.1 Next.js로 리액트 개발 환경 구축하기 9.1.1 create-next-app 없이 하나씩 구축하기npm init//package.json을 만드는 CLI를 실행할 수 있다.npm i react react-dom next//핵심 라이브러리인 react, react-dom, next 설치npm i @types/react @types/react-dom eslint eslint-config-next typescript --save-dev//devDependencies에 필요한 패키지를 설치 9.1.2 tsconfig.json 작성하기 9.1.3 next.config.js 작성하기poweredByHeader- 보안 취약점으로 취급되는 헤더를 제거한다.- 웹서버에서 사용되는 프로그램 엔진 정보가 노출될.. 2024. 12. 8.
[프로그래머스 Lv.1] 옹알이(2) javascript function solution(babbling) { var answer = 0; const words = ["aya", "ye", "woo", "ma"]; // 조카가 발음할 수 있는 단어 목록 // 각 단어에 대해 처리 babbling.forEach(babble => { let isValid = true; // 유효한 발음인지 체크 let prevWord = ""; // 이전에 발음한 단어를 저장 while (babble.length > 0 && isValid) { let found = false; for (let word of words) { if (babble.. 2024. 12. 6.
[프로그래머스 Lv.1] 덧칠하기 javascript 너무 어렵게 생각해서 잘 안 풀렸는데 다른 분 코드를 보니 이제 보인다 ....ㅎㅎ다른 사람 풀이function solution(n, m, sections) { var answer = 0; var painted = 0; for(var section of sections) { if(painted 2024. 12. 6.
[모던 리액트 Deep Dive] 9장 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기 보호되어 있는 글 입니다. 2024. 12. 5.
[프로그래머스 Lv.1] 소수 만들기 function solution(nums) { let answer = 0; // 소수 판별 함수 const isPrime = (num) => { if (num 2024. 12. 5.
[프로그래머스 Lv.1] 소수 찾기 javascript function solution(n) { var answer = 0; // 1에서 n까지의 숫자를 담은 배열 생성 const numbers = Array.from({ length: n }, (_, i) => i + 1); // 각 숫자의 약수 개수를 구함 numbers.forEach(num => { let divisorCount = 0; // 1부터 num까지 나누어떨어지는지 확인 for (let i = 1; i  처음 풀이었는데 테스트 후반 부에 시간 초과로 실패가 떴다.아래는 에라토스테네스의 체를 사용하는 것이라고 한다.function solution(n) { var answer = 0; // 1부터 n까지 true로 초기화된.. 2024. 12. 3.
[프로그래머스 Lv.1] 과일장수 javascript function solution(k, m, score) { var answer = 0; //점수를 내림차순으로 정렬하기 score.sort((a, b) => b - a); //상자를 만들 수 있는 최대 개수 계산 const boxCount = Math.floor(score.length / m); //각 상자의 최저 점수를 기준으로 이익 계산 for (let i = 0; i 2024. 12. 2.
[프로그래머스 Lv.1] 모의고사 javascript function solution(answers) { //수포자 삼인방의 찍는 패턴 정해주고 const pattern1 = [1, 2, 3, 4, 5]; const pattern2 = [2, 1, 2, 3, 2, 4, 2, 5]; const pattern3 = [3, 3, 1, 1, 2, 2, 4, 4, 5, 5]; // 수포자들이 맞춘 카운트를 담음 const scores = [0, 0, 0]; // answers 배열의 인덱스와 같은 수포자들의 패턴 인덱스를 비교해서 맞으면 카운트 answers.forEach((answer, index) => { if (answer === pattern1[index % pattern1.length]) scores.. 2024. 11. 28.
[프로그래머스 Lv.1] 기사단원의 무기 javascript function solution(number, limit, power) { let answer = 0; // 1에서 number까지 각 숫자의 약수 개수 계산 for (let i = 1; i limit) { answer += power; // 제한 초과 시 power 추가 } else { answer += divisorCount; // 제한 내면 그대로 추가 } } return answer; // 필요한 철의 총 무게} 2024. 11. 27.
[프로그래머스 Lv.1] 2016년 function solution(a, b) { const days = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]; // 2016년 a월 b일의 Date 객체 생성 // 월은 0부터 시작해서 -1 해줘야 함 const date = new Date(2016, a - 1, b); // 해당 날짜의 요일 const dayIndex = date.getDay(); // 요일 반환 return days[dayIndex];} 2024. 11. 25.
[프로그래머스 Lv.1] 폰켓몬 function solution(nums) { let newArr = Array.from(new Set(nums)); return newArr.length === nums.length / 2 || newArr.length 2024. 11. 22.

티스토리툴바