전체 글
-
HON KOK 프로젝트 회고 (2023.09.01 ~ 2023.09.27)프로그래머스 데브코스: 빅 데이터 플랫폼 프론트엔드 엔지니어링 2023. 10. 5. 00:18
9월 한 달 동안 진행했던 프로젝트가 끝났습니다! 프로젝트 하면서 기술적으로 배운 부분 위주로 회고를 작성해 보려 합니다. 😄 배포 링크 : https://honkok.vercel.app/ 혼콕 HONKOK 혼자 사는 사람들에게 유용한 정보와 아늑한 커뮤니티를 제공합니다. honkok.vercel.app 깃헙 레파지토리 : https://github.com/prgrms-fe-devcourse/FEDC4_HONKOK_JunilHwang GitHub - prgrms-fe-devcourse/FEDC4_HONKOK_JunilHwang Contribute to prgrms-fe-devcourse/FEDC4_HONKOK_JunilHwang development by creating an account on GitH..
-
(7~8월/MIL) 프로그래머스 데브코스 FE 회고프로그래머스 데브코스: 빅 데이터 플랫폼 프론트엔드 엔지니어링 2023. 9. 5. 00:49
벌써 프런트엔드 데브코스가 3달이나 지났다! 정말 시간이 너무너무 빠른 것 같다. 그동안 있었던 일을 정리하고 회고하면서 반성하고 개선할 점들을 찾아보자! 🤩 과제 우선 7~8월 동안 4번의 과제가 있었다. vanilla js 노션 클로닝, 유튜브 CSS 클로닝, Vue 영화 사이트 만들기, React view navigator 만들기 과제... 하 정말 너무 힘들었고 배울 점들이 너무 많았다. 사실 개발 과제를 해본게 처음이라 과제를 이해하는 단계에서부터 애를 먹었다. SPA, SSR, CSR이라는 개념을 이해하기는 것부터 해서 실제로 코드를 짜고 배포하는 것까지 알아야 할 게 너무 많았다. 아쉬운 점이 너무 많았지만 2달 동안 할 수 있는 한 최선을 다했고 지금도 성장하고 있으니 됐다. 4번의 과제를..
-
(UX/UI) 스켈레톤 UI프로그래머스 데브코스: 빅 데이터 플랫폼 프론트엔드 엔지니어링 2023. 8. 3. 20:00
스켈레톤 UI는 실제 데이터가 렌더링(API로부터 data를 비동기적으로 로드하기까지) 되기 전에 보이게 될 화면의 윤곽(빈 껍데기)을 먼저 그려주는 로딩 애니메이션입니다. 콘텐츠를 기다리는 것에 사용자가 지루함을 느낄 수 있으므로 스켈레톤 UI 혹은 스피너를 보여주므로써 사용자의 이탈을 막아줍니다. 이런 스켈레톤 UI와 스피너 등을 progress indicator라고도 하는데요. 무작정 progress indicator 사용을 남발하는 것도 좋지는 않다고 합니다. 세계적인 UX 리서치 그룹 닐슨 노먼은 이에 대해 주요 지침을 내놓기도 하였는데요. 로드하는데 1초 미만이 소요되는 모든 항목의 경우 반복되는 애니메이션을 사용하면 주의가 산만해지므로 이때는 progress indicator 사용을 지양해야..
-
[TS] 타입별칭과 인터페이스TypeScript 2023. 7. 28. 14:54
🔆 처음에는 JS로 충분할 거 같은데 굳이 TS를 배워야 하나? 타입까지 일일이 신경 쓰려면 손도 많이 가고 복잡할 거 같은데...라고 생각했는데 TS 공부를 시작하고 다들 이래서 TS를 쓰는구나 느꼈습니다. 특히 협업을 하거나 천 줄이 넘는 코드를 볼 상황이라면 더욱 TS로 짜인 코드가 오히려 읽기 수월하겠구나 싶었어요. 공부를 하면서 타입 별칭과 인터페이스 간에 유사한 점이 많더라구요. 어떤 걸 사용하면 좋을지 두 개를 비교하면서 정리해 봤습니다! 타입스크립트를 이용하는 이유 타입스크립트는 이름 그대로 타입을 엄격하게 검사해 주는 역할을 해요.그리고 이건 엄격한 타입체크로 생긴 부가 기능인데 TS를 사용하게 되면 에러 메시지의 퀄리티가 올라가게 돼요.자바스크립트만 사용했을때는 에러 메시지가 다소 ..
-
[프로그래머스 / JS] 귤 고르기Coding Test/JavaScript 2023. 7. 18. 21:59
값들이 특정 분류로 나뉘면 해시 맵을 생각해 봐야 한다. 1. 2차원 배열로 만들어 주고 2. 원하는대로 정렬해 주자 function solution(k, tangerine) { // [1, 3, 2, 5, 4, 5, 2, 3] let hashMap = new Map(); for(let i = 0; i 1, 3 => 2, 2 => 2, 5 => 2, 4 => 1 } const sortedMap = [...hashMap].sort((a, b) => b[1] - a[1]); let tempSum = 0, i = 0; while(tempSum = k) { return i+1 } else { tempSum+=sortedMap[i][1]; i++ } } return..
-
[프로그래머스/JS] 예상 대진표카테고리 없음 2023. 7. 17. 21:38
처음에는 슬라이딩 위도우로 풀어야 하나, {[1, null], [2, A], [3, null] ....} 이런식으로 해서 for문 돌리고 하나씩 지워가는 식으로 해야 하나 했는데, 그렇게 어려운 문제가 아닌 것 같아서 A, B 숫자 위주로 봤더니 규칙을 찾아냈다. function solution(n,a,b) { let cnt = 0; while(a !== b){ a = Math.ceil(a/2); b = Math.ceil(b/2); cnt++; } return cnt; }
-
[프로그래머스 / JS] 연속부분수열 합의 갯수Coding Test/JavaScript 2023. 7. 16. 23:54
으 어렵다.. 연속적인 원소를 원하는 만큼 뽑으려면 어떻게 짜야 할까. 뽑아서 더하고 배열에 넣고 new Set() 해서 중복된거 제거하면 될 거 같은데. 다중 for문은 시간복잡도가 너무 커질거 같고.. 아! 슬라이딩 윈도우 방법 써보자! function solution(elements) { const set = new Set(); const L = elements.length for(let size = 1; size
-
[프로그래머스 / JS] 구명 보트Coding Test/JavaScript 2023. 7. 15. 23:13
탐욕법(그리디) 알고리즘이란 현재 상황에서 가장 좋은(최선의) 것을 고르는 알고리즘을 말합니다. 하지만 현재 상황에서 가장 좋은 선택이 최종적으로 가장 좋은 결과를 도출해 낸다고 보장을 해줄 수 없기 때문에 주의 해야해요. 그러니 그리디 알고리즘을 선택할 때에서 탐욕적인 선택은 항상 안전하다는 것이 보장되야합니다. function solution(people, limit) { people = people.sort((a, b) => b - a); let answer = 0; for(let i = 0, j = people.length - 1; i limit){ answer++; } else { answer++; j--; } } return answer; } 쓰읍 다른 방법 없나 ...?