HTTP 상태코드와 Security Through Obscurity (STO) HTTP 상태코드는 공격자에게도 힌트가 되기에, 상태코드를 의도적으로 다르게 내려준다는 이야기를 들은적이 있다. 오늘 갑자기 궁금해져서 관련 개념을 찾아봤다. https://en.wikipedia.org/wiki/Security_through_obscurity HTTP 상태코드는 클라이언트와 서버가 요청 결과를 해석하기 위한 약속이다. 200은 성공, 400은 잘못된 요청, 401은 인증 필요, 403은 권한 없음, 404는 리소스 없음, 500은 서버 오류를 뜻한다.문제는 이 정보가 정상적인 클라이언트에게만 전달되지 않는다는 점이다. 공격자도 같은 응답을 본다. 그리고 상태코드의 차이를 관찰하면서 서버의 구조와 동작을 추론할 수 있다.HTTP 상태코드는 공격자에게 "무료 정보"가 될 수 있다. 공격자는..
모두를 위한 웹을 만든다는 것, Accessibility 접근성은 별도의 기능을 추가하는 일이 아니라, HTML을 작성하고 UI를 구현하는 과정에서 함께 지켜야 하는 기본 조건에 가깝다.개발자 입장에선 조금 번거롭고 실제 인터페이스의 겉면만 볼 땐 달라보이는게 없을 수 있어도, 누군가의 사용성을 크게 바꾼다. 인턴으로 일할 때도 접근성 요소들이 잘 지켜지지 않던 기존 코드를 발견을 종종했어서 이슈를 올려 한번 쭉 검토를 해보기도 했는데, 사실 아래 내용을 정리하면서 생각지도 못한 부분 (예를 들면 버튼만 탐색해야할 경우를 대비하여 삭제가 아닌 프로젝트 삭제로 라벨을 설정해야한다는 점)도 고려대상이라는 점을 새롭게 배웠다. 이 글에서는 MDN의 「HTML: 접근성의 좋은 기반」 문서를 바탕으로, 웹 개발 중 최소한으로 점검하면 좋은 접근성 항목들을 정리해보려고..
useState는 어떻게 값을 기억하는가 (리액트 코드로 Fiber 구조와 렌더링 살펴보기) TMI) 네이버랩스 인턴을 마치고 10일간 미국에서 쉬다왔다. 요즈음엔 개발 공부하는 것에 재미를 다시 붙이고 있다. 어쩌다보니 리액트 소스코드를 뜯어보는데에 재미를 붙여서, 동시에 이것저것 찾아보다보니 정보의 레이어가 쌓이는 장점도 있지만 그만큼 더 헷깔리는 것들이 생기는 것 같기도 하다. (특히 다양한 자료에서 용어를 혼용하는 경우가 많다..) 정보의 홍수와 AI로 인한 FOMO 속에서 혼란스러운 개발자 생태계 안에서 다음 스텝을 준비하는 입장에서, 리액트 소스코드를 뜯어본 경험은 안티프래질하다고 볼 수 있지 않을까 ..? 라는 생각이다. FiberReact는 컴포넌트 하나마다 Fiber 객체를 만든다. state는 React 내부의 Fiber 객체에 저장되는데, state와 관련된 필드만 보면Fib..
자바스크립트 효율적으로 처리하기 (requestAnimationFrame, requestIdleCallback, Web Workers) 브라우저 성능 최적화의 핵심은 단순히 코드를 “빠르게” 만드는 것이 아니라,언제 실행할지와 어디서 실행할지를 적절히 나누는 데 있다. 브라우저의 메인 스레드는 하나다. 개발자가 작성한 JavaScript 실행뿐 아니라 이벤트 처리, 스타일 계산, 레이아웃, 페인트, 컴포지팅까지 대부분의 주요 작업이 같은 스레드에서 처리된다.따라서 JavaScript가 메인 스레드를 오래 점유하면 브라우저는 화면을 갱신하지 못한다. 사용자는 이를 스크롤 버벅임, 클릭 지연, 입력 랙, 애니메이션 끊김 같은 형태로 체감한다.브라우저가 일반적으로 목표로 하는 60fps 환경에서는 한 프레임에 사용할 수 있는 시간은 약 16.6ms뿐이다.이 짧은 시간 안에 JavaScript 실행, 스타일 계산, 레이아웃, 페인트까지 끝나야 ..
네이버랩스 6개월 인턴 회고 보호된 글입니다.
Biome 마이크레이션 후 린터 룰 적용기 최근 프로젝트에서 사용하던 ESLint와 Prettier를 제거하고 Biome으로 마이그레이션했다.기존에는 린팅과 포맷팅을 위해 11개의 라이브러리를 조합해 사용하고 있었지만, 이를 하나의 도구로 대체하면서 설정과 의존성을 단순화했다.이 글에서는 마이그레이션 이후 실제 코드에 린터 룰을 적용하며 구조를 개선했던 사례들을 정리했다.공개 가능한 형태로 정리하기 위해, 회사의 비즈니스 로직이 드러날 수 있는 변수와 도메인 용어는 모두 일반화했다.1. useExhaustiveDependencies (warn)의도React Hook의 의존성 배열 누락/과잉을 감지하여 stale closure 버그를 방지한다.케이스 A: 누락된 의존성 추가문제 코드const getItemId = (item) => item[idKe..
네이버랩스 Robot Web App Developer 합격 후기 (서류~최종면접) * 문제가 되는 내용은 지적해주신다면 바로 수정 조치 하겠습니다. 8월 초 즈음에 네이버랩스의 Robot Web App Developer 인턴에 지원했다. 후술하겠지만, 코딩테스트부터, 다수의 면접 절차가 있어 꽤나 오랜 프로세스를 거쳐왔다. 당근 다닐때 지원했는데 이제 결과가 나왔으니 두달 넘게 걸린것 .. 네이버랩스는 ARC Mind 가 출시되었던 작년에 알게 되었는데, 로봇 생태계의 확장 가능성이 궁금해서 한번 찾아봤던 회사였다. iOS 앱 창업, Today at apple 발표, 커뮤니티 (KWDC, Asyncswift) 오거나이징, 애플아카데미 등 .. 애플 개발자 생태계에서 다양한 활동을 해왔던 학생으로서, 한 생태계가 만들어지기 위해 필요한 건 OS 뿐만아니라 생태계를 이루는 개발..
getElementsByClassName 함수 구현하기 (+자바스크립트에서 유사배열과 배열, 변환 방법) 프론트엔드 라이브 코딩이나 화이트보드 테스트에서 자주 나오는 과제 중 하나가 DOM API를 직접 구현해보는 문제입니다. 그중 대표적인 것이 document.getElementsByClassName을 직접 만들어보라는 과제입니다. 이번 글에서는 이 문제를 어떻게 접근하면 좋을지 베이스케이스 → 엣지케이스 → 효율성 → 가독성 순서로 풀어봅니다. 문제 이해목표는 주어진 className을 가진 모든 요소를 찾아 배열로 반환하는 함수입니다.기본적으로는 DOM 트리를 순회하면서 조건에 맞는 요소를 모으면 됩니다.function getElementsByClassName(className) { const bodyChildrenEls = document.body.children; const result = [..
메모이제이션(Memoization)의 원리와 함수 구현해보기, 적용 프로그래밍을 하다 보면, 같은 연산을 반복해서 수행하는 상황을 자주 만납니다. 이런 경우, 이미 계산한 결과를 저장해 두었다가 재활용하면 성능을 크게 개선할 수 있는데요. 이 기법이 바로 메모이제이션(Memoization) 입니다.리액트에서의 useMemo 말고 직접 함수 구현은 처음이라 하나씩 공부하면서 정리해둔 내용입니다. 단순히 갖다 쓰기만 할줄 알았는데, 내부 로직을 직접 짜보니 흥미롭네요. 이번 글에서는 메모이제이션의 원리에서 시작하여 구현하며 비교해본 다양한 방법들, 그리고 적용까지 정리해 보겠습니다.1. 메모이제이션의 기본 원리메모이제이션은 간단히 말해 “입력 → 출력 결과”를 캐시에 저장해 두고, 같은 입력이 다시 들어왔을 때는 계산하지 않고 캐시에서 꺼내 쓰는 방식입니다.ex, 피보나치..

티스토리툴바