본문 바로가기

javascript28

개발 포트폴리오 개발진척 업데이트 현재 완료된 항목 반응형 웹 디자인 SSR i18n 다국어 지원 (영어 - 한국어) 다크/라이트 컬러 테마 변경 Fake 터미널 구현 Vercel 배포 추가 예정 항목 과거 팀프로젝트 경험 소개 페이지 과거 개발한 UI 컴포넌트들 projects/gallery에 추가 Burger 프로젝트 애니메이션 추가 및 보완 three.js 사용, 3d오브젝트 및 로고 추가 이미지 최적화 2021. 12. 6.
HTML5 Canvas 성능저하 및 랙 이슈 해결 개요 현재 개발 중인 포트폴리오 사이트에 이전에 제작했던 토이 프로젝트인 Wave를 추가할 때 발생한 문제이다. 아래는 기존에 제작한 Wave 프로젝트의 간략한 설명이다. Wave HTML5 + Javascript App : canvas 생성, 메서드 생성, WaveGroup 생성 WaveGroup : 지정한 wave와 point 개수에 맞춰 파도 각각의 색상과 포인트 지정 후 Wave 생성 Wave : canvas context에 파도를 그린다. 화면 크기 변화 시 각 파도를 resize 한다. 기존 프로젝트의 경우 파도의 갯수와 파도의 높이를 결정하는 waveCount와 pointCount를 WaveGroup 내부에서 하드 코딩하여 미리 지정하고 생성하여, 처음 한 번 canvas를 그릴 때 Wave.. 2021. 11. 26.
JS33 - 29.알고리즘 알고리즘을 마스터하기 위해선 데이터 구조에 대한 명확한 이해가 필요하다. 일반적으로 고려해야 할 사항 필요한 변수 반복 횟수, 종류 사용가능한 빌트인 메서드 고려해야 할 에지 케이스 헬퍼 함수를 추출하거나 추상화할 수 있는가? 확장성이 있는가? input 크기가 커지면 어떻게 실행되는가? 캐싱 메커니즘이 필요한가? 성능 향상과 메모리 최적화 코드 리팩터링과 재사용 기회가 있는 코드를 작성하기 커링을 통한 파라미터 제거 정렬 알고리즘 버블소트 const bubbleSort = array => { let swapped; do { swapped = false; array.forEach((number, index) => { if (number > array[index + 1]) { [array[index], a.. 2021. 11. 9.
프로그래머스 알고리즘 문제풀이: 소수찾기 코딩테스트 연습 - 소수 찾기 한자리 숫자가 적힌 종이 조각이 흩어져있습니다. 흩어진 종이 조각을 붙여 소수를 몇 개 만들 수 있는지 알아내려 합니다. 각 종이 조각에 적힌 숫자가 적힌 문자열 numbers가 주어졌을 때, 종이 programmers.co.kr 풀이 완전 탐색 문제 주어진 numbers 문자열의 순서를 바꿔 배치한 후 만들어낼 수 있는 숫자들 중 소수의 개수를 구하는 문제. 즉, 순열 + 소수 검사를 요구하는 문제. python의 경우 itertools의 permutations를 사용하여 순열을 생성하고 약수가 존재하면 False, 없다면 True를 반환하는 소수검사 함수를 생성하여 체크했다. 단, 그대로 제출할 시 시간초과에 걸릴 수 있다. numbers는 길이가 1이상 7 이하이고 숫.. 2021. 11. 6.
프로그래머스 알고리즘 문제풀이: H-index 코딩테스트 연습 - H-Index H-Index는 과학자의 생산성과 영향력을 나타내는 지표입니다. 어느 과학자의 H-Index를 나타내는 값인 h를 구하려고 합니다. 위키백과1에 따르면, H-Index는 다음과 같이 구합니다. 어떤 과학자가 발표 programmers.co.kr 프로그래머스 정렬 level 2 H-index 위키백과 설명 과학자의 생산성 및 영향력을 나타내는 지표인 H-index를 계산하는 문제이다. 어떤 과학자가 발표한 논문 중, H번 이상 인용된 논문이 H편 이상이고 나머지 논문이 모두 H번 이하 인용되었다면, 이때H의 최댓값이 H-index다. 어떤 과학자가 발표한 논문의 인용 횟수를 담은 배열 citations가 주어질 때, 이 과학자의 H-index를 계산하시오. 풀이 numer.. 2021. 11. 6.
JS33 - 28.함수 성능과 빅 오(Big O) 표기법 Big O is the worst-case scenario growth curve for the complexity of an algorithm 입력 시간에 따라 알고리즘이 실행되는 데 걸리는 시간을 수학적으로 표현한 것 알고리즘의 전체 단계를 대수로 바꾸고 문제의 전체 복잡성에 큰 영향을 미치지 않는 하위 상수 및 계수를 제외한다. Regular Big-O 2 O(1) --> It's just a constant number 2n + 10 O(n) --> n has the largest effect 5n^2 O(n^2) --> n^2 has the largest effect Constant Complexity (일정한 복잡성) : O(1) const firstElemEven = (array) => { .. 2021. 10. 27.