강태풍의 개발블로그

🎈개요 인프콘 2023 에서 발표한 " 당신의 웹페이지는 몇점인가요? " 발표를 듣고 강의 내용을 간략히 정리하고, 느낀점과 해야할 일을 적는 리뷰 글입니다. 📚강의 내용 정리 웹성능 사이트 내의 로드 시간을 단축 : 리소스들의 로딩 시간을 단축 서비스를 빠르게 사용 가능하게 준비 매끄러운 상호작용성 사용자의 체감 성능 : 실제 로딩 시간보다 사용자가 더 빠르게 느끼게 하기 로딩 성능과 렌더링 성능을 고려해야한다. 로딩성능 리소스가 렌더링 되기 전에 로딩되는 성능 Network 바에서 확인 가능 로딩성능의 개선 네트워크 개선 및 리다이렉트 방지, 캐시 적극적 사용 보통 캐시를 이용해서 쉽게 개선이 가능하다 리소스 압축 및 최적화 렌더링 성능 개선 받아온 리소스가 DOM 에 그려지는 성능 FP / FCP ..

🎈개요 인프콘 2023 에서 발표한 "2곳 중 1 곳은 무조건 합격하는 개발자 이력서 만들기" 발표를 듣고 강의 내용을 간략히 정리하고, 느낀점과 해야할 일을 적는 리뷰 글입니다. 📚강의 내용 정리 이력서는 가장 Dry 한 문서여야 한다. 이력서에 사용되는 한 문장 한 문장에 Why, How, What.. 등이 담겨있어야한다. 내용이 길면 너무 풀어 쓴 것이고, 내용이 짧으면 핵심을 놓친 것 컴팩트하게 만들자 ⇒ 노션 (행간이 넓고, PDF 변환 시 토글이 다 나오므로 내용이 길어진다)대신 구글 Docs나 Figma를 이용하여 작성하자 포트폴리오를 킥으로 사용하자 ⇒ 지금까지의 작업물을 모아볼 수 있는 포트폴리오가 필요하다 포트폴리오에 **서사(스토리)**를 작성하세요 “불가피한 외적 문제로 주인공이 문..

🔷 내용 정리 🔹테스팅의 장점 테스팅으로 코드에 대한 확신과 안정성을 줄 수 있다. 🔹테스팅 트로피 🔷정적 테스트 : 실행시키지 않고 테스팅 EsLint, Typescript 🔷단위 테스트 : 기능 단위나 컴포넌트 단위를 따로 떼어내 테스팅 의존성이 있는 모듈 같은 경우 Moccking 하여 사용 단위가 적어 작성 비용이 낮다, 실행 속도가 빠르다 🔷통합 테스트 : 어플리케이션의 여러 부분을 통합하여 상호작용을 테스트 큰 단위로 테스트 (페이지, 큰 규모의 기능) jest, RTL 사용 🔷E2E 테스트 : 사용자가 사용하는 조건에서 테스팅 AWS나 서버 DB 등이 합쳐진 환경에서 테스팅 작성이 어렵고 실행 속도가 느리다 실행 시나리오가 너무 다양하다 100% 신뢰성을 가지기 어렵다 Cypress 나 셀레..

🚀야놀자 X 패스트 캠퍼스 FE 과정 합격 본 과정은 네 단계를 통해서 과정에 지원 할 수 있었고, 사전신청, 자기소개서 제출, 기초소양 테스트, 비대면 면접응시를 차례대로 진행하였습니다. 사전신청은 인터넷에서 클릭 몇 번 하면 되는 간단한 과정이었습니다. 자기소개서은 총 세 질문이 있었습니다. 각각 지원동기와 문제해결 능력, 발전 가능성과 관련된 질문이었고, 자기소개서 중에 개발자에게 물어보기 가장 좋고 포멀한 질문들인 것 같습니다. 대부분 IT 회사나 다른 부트캠프 자기소개서에서도 질문이 많이 겹치므로 이런 질문들에 대해서는 시간이 여유로울 때 미리 작성해 보는 것도 좋은 것 같습니다. 추가적으로 깃허브나 기술 블로그, 포트폴리오, 포트폴리오 웹사이트 등을 받았습니다. 기초소양 테스트는 온라인으로 4..

🎃개요 자바스크립트의 내장 메소드인 Array.prototype.sort() 는 브라우저 마다 정렬 알고리즘이 달라지는 사실을 알고계시나요? 이번에 Baekjoon 정렬 알고리즘 문제를 풀다가, sort() 함수의 시간 복잡도를 구해야하는 일이 있었습니다. 이때 자바스크립트의 브라우저마다 정렬 알고리즘의 방식이 달라지고, 이에 따라 시간복잡도도 달라진다는 사실을 알게 됐습니다. 1️⃣ V8 엔진 - Chrome 브라우져와 Node.JS의 엔진이다. - 과거 V8, V7.0 및 Chrome 70 전에는 퀵 정렬과 삽입정렬을 혼합하여 사용했다. - 현재 TimSort 알고리즘을 사용한다. 이는 작은 단위에 삽입정렬을 사용하고, 그보다 큰 Array에서는 병합정렬을 사용한다. - Best 시간복잡도는 O(n)..

😸 요약 Skeleton UI를 적용해서 성능면에서 LightHouse 성능점수 6점 향상, CLS 점수를 0점(Good)으로 바꾸었습니다. 또한 시각적으로 사용자에게 편안함을 줄 수 있었습니다. 🚀 개요 기존의 홈페이지를 보자. 메인 이미지를 불러오는데 시간이 걸린다. 그리고 이미지가 다 로드 됐을 경우, img태그의 Height와 Width가 지정되면서, 이전에 로드된 나머지 DOM 요소 Layout을 아래로 미는 것을 확인할 수 있다. 사용자가 봤을 경우 아래로 밀리는 것이 시각적으로 덜컥거림이 느껴져 불편하고, 성능적으로도 Layout의 변화가 일어남으로 불필요한 Reflow를 불러일으킬 수 있다. 이를 방지하고자 스켈레톤 UI를 적용할 수 있다. 유튜브와 같이 아래 video 영상들과 제목 등과..

😎 요약 개발 의존성의 의존성 파일인 package-lock.json 파일이 모종의 이유들로 잘못 깔릴 경우(option을 설정하지 않는다거나..), 다른 환경에서 돌아가는 라이브러리가 설치가 안 될 경우가 있다 (Netlify 배포 환경은 Linux x64, 내 로컬 환경은 Window11이다) 그럴 경우 package-lock.json파일을 의심해 보자 🚀 개요 package.json "scripts": { "dev": "parcel ./index.html", "build": "parcel build ./index.html" }, Parcel 번들러를 이용한 프로젝트를 진행 후 이를 배포하기 위하여 Netlify 를 사용하였습니다. 평상시와는 다른 에러로그를 마주쳤습니다. @parcel/watcher..

🚀 개요 이전 게시물에서 이어집니다, [패스트캠퍼스X야놀자 FE 부트캠프] HTML/CSS/JS 리팩토링1 - Intersection Observer 🚀 개요 야놀자 X 패스트캠퍼스 프론트엔드 개발 부트캠프에서 이전 토스 클론 코딩하여 배포한 것을 멘토님과 피어리뷰를 통하여피드백을 받고 이를 리팩토링 할 시간과 기회를 얻게 됐다. 성 koeyhhh.tistory.com 멘토님과 동료님들의 피드백을 확인할 수 있다. 성능 측면에선 크게 두가지 피드백을 받았다. 1. 기존 scroll 이벤트들이 등록되다보니 메모리 누수가 발생할 가능성이 높고 성능 저하가 일어난다. => CSS나 JS 내장 애니메이션을 통하여 개선하는 것이 좋아보인다. 2. Opacity가 0 1로 바뀌는 부분에서 Reflow가 발생할 수 ..

🚀 개요 야놀자 X 패스트캠퍼스 프론트엔드 개발 부트캠프에서 이전 토스 클론 코딩하여 배포한 것을 멘토님과 피어리뷰를 통하여피드백을 받고 이를 리팩토링 할 시간과 기회를 얻게 됐다. 성능개선을 통한 최적화와 코드 가독성 측면으로 항상 관심이 있어서, PR과 주석을 통하여 웹 브라우저 렌더링 성능과 Indent가 중첩되어 사용한 것을 가독성이 보기 좋은 방법이 있는지에 대해 현직 FE개발자신 멘토님께 여쭤봤다. 아래에 멘토님과 동료님들의 피드백을 확인할 수 있다. 성능 측면에선 크게 두가지 피드백을 받았다. 1. 기존 scroll 이벤트들이 등록되다보니 메모리 누수가 발생할 가능성이 높고 성능 저하가 일어난다. => CSS나 JS 내장 애니메이션을 통하여 개선하는 것이 좋아보인다. 2. Opacity가 0..

🚀 개요 토스 홈페이지 클론 코딩 중, Javascript만을 이용하여 스크롤 이벤트를 구현했다. 토스 홈페이지에서의 대부분의 애니메이션은 특정 요소가 화면에 보이기 시작하는 순간에 애니메이션이 시작된다. 이를 감지하기 위해 스크롤 이벤트 핸들러를 사용하였다. 그리고 이벤트 핸들러 내부에서는 화면에 요소가 나타났는지 확인을 하기 위한 조건으로서 window.outerHeight와 element.getBoundingClientRect() 을 적절하게 조합하여 사용하였다. 또한 요소에 걸리는 애니메이션은 opacity와 transform을 이용한 간단한 애니메이션이어서 바닐라 JS로 구현하기 적당한 난이도이다. 애니메이션을 사용한 몇 가지 유형을 소개시키고자 글을 쓴다. 최종 결과물은 다음 경로에서 확인 할..

🚀 개요 파이썬이나, C언어와 같이 손쉽게 배열을 선언하지 못한다. Javascript에서는 아직 공식적으로 2차원 배열에 대한 선언이 없다. const array = [[1,2,3],[4,5,6],[7,8,9]] 위와 같은 리터럴적인 표현으로는 2차원 배열이 가능하지만, col과 row 값이 100개만 넘어서도 다음과 같이 선언하기 힘들다. 또는 iteration을 통하여 array.prototype.push() 로 2차원 배열이 선언이 가능하지만, 간단한 2차원 배열 선언에도 시간이 오래 걸린다. 그래서 보통 다음과 같은 방법으로 2차원 배열을 선언한다. const [col, row] = [100, 100] Array.from(Array(col),()=>new Array(row).fill(0)) Ar..

🚀 개요 패스트 캠퍼스 온라인 강의를 수강하던 중 유의적 버전(Semantic Version) 에 대해서 배웠다. Lodash 라이브러리의 4.17.21 버전에서 4는 Major, 17은 Minor, 21은 Patch의 의미를 지닌다. - Major : 기존 버전과 호환되지 않는 새로운 버전 ~ 큰 변경사항 - Minor : 기존 버전과 호환되는 기능이 추가된 버전 - Patch : 기존 버전과 호환되는 버그 및 오타 등이 수정 된 버전 앞선 버전 뿐만 아니라 버전에는 `~4.17.21` 이나 `^4.17.21` 과 같이 버전 앞에 ~ 와 ^ 의 심볼이 추가되기도 하는데 이의 의미는 다음과 같다. ^4.17.21 : Major 버전 안에서 가장 최신 버전으로 업데이트 가능(minor와 patch는 변경이..