전체 글348 [ JavaScript ] slice, splice, substring, substr 차이점 정리: 기초부터 예제까지 자바스크립트에서 문자열이나 배열의 일부를 가져오려고 하면 비슷한 이름의 메서드들이 등장합니다.slice(), splice(), substring(), substr()는 이름은 비슷하지만 사용하는 대상과 인수의 의미가 다릅니다. 특히 두 번째 인수가 끝 위치인지, 개수인지와 원본을 변경하는지를 구분하면 이해하기 쉬워집니다.1. 먼저 알아둘 기초: 인덱스는 0부터 시작한다인덱스(index)는 문자열의 문자나 배열 요소가 있는 위치입니다.const text = "ABCDE";console.log(text[0]); // "A"console.log(text[1]); // "B"console.log(text[4]); // "E"console.log(text.length); // 5문자ABCDE인덱스01234배열도 .. 2026. 10. 19. [ JavaScript ] filter(): 빈 문자열은 왜 제거되고, 공백은 왜 남을까? 배열에서 필요한 값만 골라낼 때 자주 사용하는 메서드가 filter()입니다. 그런데 아래처럼 조건이 없어 보이는 코드를 만나면 헷갈릴 수 있습니다.my_string.split(" ").filter(v => v);“filter가 원래 빈 값을 제거해 주는 걸까?” “v => v는 어떤 조건일까?”핵심은 filter()에 전달한 함수의 반환값입니다. 기본 사용법부터 헷갈리기 쉬운 사례까지 살펴보겠습니다.1. filter()는 조건을 통과한 요소로 새 배열을 만든다filter()는 전달한 함수를 배열 요소마다 실행하고, 반환값이 참으로 판단되는 요소만 새 배열에 담습니다. 조건에 맞는 요소가 없으면 빈 배열을 반환합니다.const numbers = [1, 2, 3, 4, 5];const result = nu.. 2026. 10. 13. [ 직무 면접 대비 ] 프론트엔드 개발자 자격증 목록과 추천 우선순위 프론트엔드 개발자는 자격증보다 다음 역량이 취업과 이직에 훨씬 중요하다.JavaScript·TypeScript 기본기React, Vue 등 프레임워크 활용 능력브라우저 렌더링과 네트워크 이해웹 접근성 및 반응형 UI 구현테스트와 성능 최적화실제 프로젝트 및 문제 해결 경험GitHub, 포트폴리오, 기술 블로그따라서 자격증은 취업의 결정적인 요소라기보다 부족한 기반 지식을 체계적으로 학습하고 보완하는 수단으로 접근하는 것이 좋다.원문의 백엔드 자격증 분류 방식을 프론트엔드 직무에 맞게 바꾸면 다음과 같다.1. 기본 IT 자격증(1) 정보처리기사소프트웨어 설계, 데이터베이스, 운영체제, 네트워크, 보안 등 개발자가 알아야 할 기본 지식을 다룬다.프론트엔드 기술을 직접 검증하는 자격증은 아니지만 전반적인 IT.. 2026. 9. 23. 정보보안 기초 개념 정리: SSO부터 악성코드, 이메일 보안, Windows 부팅까지 정보보안을 처음 공부하다 보면 SSO, Trapdoor, PGP, Trojan Horse, POST, MBR처럼 생소한 용어가 한꺼번에 등장합니다.처음부터 용어의 정의를 외우려고 하면 비슷한 개념끼리 헷갈리기 쉽습니다. 그래서 이번 글에서는 단순히 정의를 암기하기보다 "왜 필요한가 → 어떤 원리인가 → 비슷한 개념과 무엇이 다른가" 순서로 정리해보겠습니다.이번에 살펴볼 내용은 크게 다음과 같습니다.인증(Authentication)과 SSOTrapdoor와 악성코드이메일 보안 기술트로이목마(Trojan Horse)Windows 부팅 과정1. 인증(Authentication)과 SSO인증이란 무엇일까?인터넷 서비스를 이용하다 보면 가장 흔하게 만나는 보안 기능이 바로 로그인입니다.로그인을 조금 더 보안적인 .. 2026. 8. 25. [ Three.js ] PerspectiveCamera near, far 값은 왜 중요할까? z-fighting 원인까지 쉽게 설명! Three.js를 공부하다 보면 아래와 같은 코드를 자주 보게 됩니다.const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000)여기서 많은 사람들이 궁금해하는 부분이 바로 이것입니다.near, far 값은 왜 필요한 걸까?그리고 Three.js 관련 글을 보다 보면 이런 문장도 자주 보게 됩니다.Do not use extreme values like 0.001 and 999999 to prevent z-fighting처음 보면 굉장히 어렵게 느껴질 수 있습니다.이번 글에서는:PerspectiveCamera near/far 의미왜 극단적인 값을 쓰면 안 되는지z-fighting 현상.. 2026. 5. 26. [ 개선 ] Lighthouse 경고 하나씩 없애보기 3: Layout Shift Culprits 해결하기 Lighthouse에서 다음 경고가 나왔다. Layout shift culprits이 경고는 CLS, 즉 Cumulative Layout Shift와 관련된 항목이다.Lighthouse 설명은 대략 이렇다.Layout shifts occur when elements move absent any user interaction.사용자가 아무 동작도 하지 않았는데 페이지 요소가 움직이면 layout shift가 발생한다. 그리고 이런 이동이 누적되면 CLS 점수가 나빠진다.이번 케이스에서는 Lighthouse가 특정 `div`를 layout shift culprit로 잡았다. 스크린샷을 보면 보고서 목록 페이지의 본문 영역이 로딩 중 아래로 밀린 것으로 보였다. CLS가 왜 문제일까?CLS는 사용자가 페이.. 2026. 5. 25. [ 개선 ] Lighthouse 경고 하나씩 없애보기 2: Duplicated JavaScript 줄이기 Lighthouse에서 로고 이미지 관련 경고를 해결한 뒤, 다음으로 마주한 경고는 JavaScript 관련 항목이었다.Duplicated JavaScriptEst savings of 118 KiB처음에는 “공통 코드가 여러 번 번들에 들어간 건가?”라고 생각했다. 하지만 확인해 보니 실제 문제는 조금 달랐다.이번 글은 `Duplicated JavaScript` 경고를 확인하고, 라우트 단위 lazy loading으로 초기 번들을 줄여 Lighthouse 경고를 제거한 과정이다. 1. Lighthouse 경고Lighthouse는 다음과 같은 메시지를 보여줬다.Duplicated JavaScriptRemove large, duplicate JavaScript modules from bundles대략 이런.. 2026. 5. 24. [ 개선 ] Lighthouse 경고 하나씩 없애보기 1: LCP Request Discovery -이미지 최적화하기 Lighthouse를 돌렸을 때 처음 마주한 문제는 Performance 점수였다. 특히 첫 화면 상단에 있는 로고 이미지가 LCP 관련 경고에 계속 잡히고 있었다.이번 글은 로고 하나를 최적화하면서 Lighthouse 경고가 어떻게 바뀌었고, 어떤 순서로 해결했는지 정리한 기록이다. 첫 번째 경고: LCP Request Discovery처음 Lighthouse에서 나온 경고는 다음과 같았다.LCP request discovery세부 항목은 이런 내용이었다.fetchpriority=high should be appliedRequest is discoverable in initial documentlazy load not applied즉, Lighthouse는 이렇게 말하고 있었다.> LCP로 잡힌 이미.. 2026. 5. 23. [ 개선 ] Lighthouse 경고 하나씩 없애보기 0: 성능 점수 49점에서 시작하기 프로젝트를 어느 정도 만들고 나면 한 번쯤 Lighthouse를 돌려보게 된다.그리고 생각보다 냉정한 숫자를 마주한다.이번 프로젝트의 Lighthouse 결과는 다음과 같았다.- Performance: 49- Accessibility: 95- Best Practices: 77- SEO: 75접근성 점수는 나쁘지 않았지만, Performance 점수가 49점이었다. 특히 주요 지표를 보면 성능 문제가 꽤 명확했다.- First Contentful Paint: 12.5s- Largest Contentful Paint: 24.9s- Speed Index: 12.8s- Total Blocking Time: 80ms- Cumulative Layout Shift: 0.134여기서 눈에 띄는 건 `Total Bloc.. 2026. 5. 22. 이전 1 2 3 4 ··· 39 다음 728x90 반응형
