분류 전체보기
-
프로젝트의 배포 이후, 어떻게 해야 코드나 성능을 개선할 수 있을까에 대해 고민하고 있었습니다. 제일 먼저 접했던 것은 컨퍼런스에서 소개 된 CleanCode 를 적용해 '코드를 개선하는 것' 이었는데요. (*참고했던 컨퍼런스는 Toss 개발자인 '진유림' 씨의 실무에서 바로 쓰는 Frontend Clean Code 입니다.) 안타깝게도, 이 적용법은 조금 더 공부가 필요해 보였습니다...😢 (물론 이후에 본 프로젝트 코드를 이용해 레거시를 걷어내고 클린코드 적용해 볼 예정입니다.🙌) 또 다른 방법도 있나.... 했더니 있었습니다! 크롬에서 제공하는 성능 분석 도구인 LightHouse를 사용하는 것인데요. 이 도구는 안타깝게도 로컬 PC 환경이나 해외 사이트 등을 조사하거나 하는 등의 이유로 매번 성능..
성능 최적화 (1) LightHouse를 이용해 성능 최적화 해보기프로젝트의 배포 이후, 어떻게 해야 코드나 성능을 개선할 수 있을까에 대해 고민하고 있었습니다. 제일 먼저 접했던 것은 컨퍼런스에서 소개 된 CleanCode 를 적용해 '코드를 개선하는 것' 이었는데요. (*참고했던 컨퍼런스는 Toss 개발자인 '진유림' 씨의 실무에서 바로 쓰는 Frontend Clean Code 입니다.) 안타깝게도, 이 적용법은 조금 더 공부가 필요해 보였습니다...😢 (물론 이후에 본 프로젝트 코드를 이용해 레거시를 걷어내고 클린코드 적용해 볼 예정입니다.🙌) 또 다른 방법도 있나.... 했더니 있었습니다! 크롬에서 제공하는 성능 분석 도구인 LightHouse를 사용하는 것인데요. 이 도구는 안타깝게도 로컬 PC 환경이나 해외 사이트 등을 조사하거나 하는 등의 이유로 매번 성능..
2022.07.08 -
run : npm install 로 설정된 CI Setup에서 오류가 나는 상황 만약, GitHub Pages를 사용하고 있다면 가능성 있는 해결법 GitHub Pages를 사용하고 있다면 기본 루트에 React, Next app을 설치할 수 없습니다. 따라서 기본 루트가 아닌 새로운 폴더안에 app을 설치했을텐데, 디렉토리를 설정해주지 않았기 때문에 생기는 오류일 확률이 있습니다. defaults: run: working-directory: "폴더명" 이렇게 경로를 지정해주면 오류를 해결할 수 있습니다. 또 다른 방법으로는 프로젝트가 생성된 파일을 루트 폴더로 옮기면 됩니다. 다만 실제 프로젝트에서는 프론트와 백엔드가 서로 다른 폴더에 작업하기 때문에 루트에서 사용하시는 것은 좋지 않은 듯 합니다.
[GitHub Actions] 254번 오류 해결하기 (with React, Next)run : npm install 로 설정된 CI Setup에서 오류가 나는 상황 만약, GitHub Pages를 사용하고 있다면 가능성 있는 해결법 GitHub Pages를 사용하고 있다면 기본 루트에 React, Next app을 설치할 수 없습니다. 따라서 기본 루트가 아닌 새로운 폴더안에 app을 설치했을텐데, 디렉토리를 설정해주지 않았기 때문에 생기는 오류일 확률이 있습니다. defaults: run: working-directory: "폴더명" 이렇게 경로를 지정해주면 오류를 해결할 수 있습니다. 또 다른 방법으로는 프로젝트가 생성된 파일을 루트 폴더로 옮기면 됩니다. 다만 실제 프로젝트에서는 프론트와 백엔드가 서로 다른 폴더에 작업하기 때문에 루트에서 사용하시는 것은 좋지 않은 듯 합니다.
2022.06.29 -
🎈 왜 스크롤 형식으로? 여러 방식을 고안해봤는데, 한 뷰에 하나 또는 2개 이상의 컨테이너를 띄우는 경우를 나누지 않고 가장 편하게 구현할 수 있을 것 같았다. 🎈 구현 방식 const currentRef = useRef(null); const next = (ref) => { const offsetX = ref.current.offsetWidth; ref.current.scrollBy(offsetX, 0); }; next(currentRef)}> React Hook의 useRef를 이용하여 캐러셀 전체 영역을 저장하고, 버튼을 만들어 offsetWidth로 현재 보이는 영역의 width를 얻어서 버튼을 누르면 그 만큼을 +로 옮기면 완성! (css는 생략했지만 scrollX는 hidden으로 변경해줘야..
[웹 프로젝트] 리액트로 Carousel(Slider) 스크롤 방식으로 구현하기🎈 왜 스크롤 형식으로? 여러 방식을 고안해봤는데, 한 뷰에 하나 또는 2개 이상의 컨테이너를 띄우는 경우를 나누지 않고 가장 편하게 구현할 수 있을 것 같았다. 🎈 구현 방식 const currentRef = useRef(null); const next = (ref) => { const offsetX = ref.current.offsetWidth; ref.current.scrollBy(offsetX, 0); }; next(currentRef)}> React Hook의 useRef를 이용하여 캐러셀 전체 영역을 저장하고, 버튼을 만들어 offsetWidth로 현재 보이는 영역의 width를 얻어서 버튼을 누르면 그 만큼을 +로 옮기면 완성! (css는 생략했지만 scrollX는 hidden으로 변경해줘야..
2022.06.21 -
문제 이름 : 가장 먼 노드 function solution(n, vertex) { let answer = []; const graph = Array.from(Array(n + 1), () => new Array()); for (const el of vertex) { graph[el[0]].push(el[1]); graph[el[1]].push(el[0]); } const bfs = (start, count) => { let queue = [[start, count]]; let visited = new Array(n + 1).fill(false); visited[1] = true; while (queue.length) { let [next, count] = queue.shift(); for (const ..
[Programmers] 가장 먼 노드 문제 - (javascript)문제 이름 : 가장 먼 노드 function solution(n, vertex) { let answer = []; const graph = Array.from(Array(n + 1), () => new Array()); for (const el of vertex) { graph[el[0]].push(el[1]); graph[el[1]].push(el[0]); } const bfs = (start, count) => { let queue = [[start, count]]; let visited = new Array(n + 1).fill(false); visited[1] = true; while (queue.length) { let [next, count] = queue.shift(); for (const ..
2022.05.05 -
문제 번호 : 1715 번 문제 바로가기 ☞ https://www.acmicpc.net/problem/1715 const fs = require("fs"); const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt"; let input = fs.readFileSync(filePath).toString().split("\r\n"); let heap = [null]; const swap = (a, b) => { [heap[a], heap[b]] = [heap[b], heap[a]]; }; const heappush = (value) => { heap.push(value); let curIdx = heap.length - 1; le..
[BaekJoon] 1715 번 카드 정렬하기 문제 - (nodejs)문제 번호 : 1715 번 문제 바로가기 ☞ https://www.acmicpc.net/problem/1715 const fs = require("fs"); const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt"; let input = fs.readFileSync(filePath).toString().split("\r\n"); let heap = [null]; const swap = (a, b) => { [heap[a], heap[b]] = [heap[b], heap[a]]; }; const heappush = (value) => { heap.push(value); let curIdx = heap.length - 1; le..
2022.05.04 -
문제 이름 : 이중우선순위큐 function solution(operations) { let minHeap = [null]; let maxHeap = [null]; const swap = (m, a, b) => { if (m === "min") { [minHeap[a], minHeap[b]] = [minHeap[b], minHeap[a]]; return; } [maxHeap[a], maxHeap[b]] = [maxHeap[b], maxHeap[a]]; }; const minHeapPush = (value) => { minHeap.push(value); let curIdx = minHeap.length - 1; let parIdx = (curIdx / 2) >> 0; while (curIdx > 1 && ..
[Programmers] 이중우선순위큐 문제 - (javascript)문제 이름 : 이중우선순위큐 function solution(operations) { let minHeap = [null]; let maxHeap = [null]; const swap = (m, a, b) => { if (m === "min") { [minHeap[a], minHeap[b]] = [minHeap[b], minHeap[a]]; return; } [maxHeap[a], maxHeap[b]] = [maxHeap[b], maxHeap[a]]; }; const minHeapPush = (value) => { minHeap.push(value); let curIdx = minHeap.length - 1; let parIdx = (curIdx / 2) >> 0; while (curIdx > 1 && ..
2022.05.03