About IT/웹 개발7 콘스트처럼? 콘스트 단언! as const 들어가며.업무를 하다 보면, 종종 상수를 다루어야 하는 경우가 생깁니다. typescript를 사용하는 경우, as const를 이용하여 상수를 표현하고는 하는데요. 이는 강제된 규칙이 아니기 때문에, as const 없이 상수를 다루는 경우도 있습니다. 단순히 상수명을 대문자로만 구성하고, 대문자로만 구성된 건 상수를 뜻한다고 코드 컨벤션을 정의할 수 있기 때문이죠. 그런데, 정말로 대문자로만 상수를 표현하는 것으로 충분할까요? 저는 상수를 다룰 때 typescript를 사용한다면, as const를 사용하기를 권장합니다. 왜 권장하냐고요? 그건.. 아래에서 자세히 알아보도록 하죠. as const가 뭔가요?as const는 TypeScript에서 값을 '깊은 수준의 읽기 전용(deeply reado.. 2025. 3. 16. Biome에 대해 아세요? 들어가며개발자라면 살아가면서 무수히 많은 프로젝트를 하게 됩니다. 다른 말로 하면, 수없이 많은 개발 환경을 세팅해 본다는 뜻이죠. 신기하게도, 거의 모든 프로젝트의 개발 환경 세팅은 조금씩 다릅니다. 팀의 개발 문화, 프로젝트의 성격, 규모 등 여러 요소에 따라 세팅해야 할 디테일이 달라지기 때문입니다. 이 글을 보고 계신 개발자분들은 개발 환경을 세팅할 때 얼마나 많은 고통을 겪고 계신가요? 또 Lint 설정이야..?대부분의 프런트엔드 개발자들은 lint 설정을 위해 ESLint와 Prettier 조합을 선택합니다. 업계의 표준처럼 여겨지는 이 조합으로 개발 환경을 세팅하는 일은 얼핏 보기에는 그리 어려워 보이지 않습니다. "단순히 설치하고 설정만 적용하면 되는 거 아닌가?"라고 생각할 수도 있죠. .. 2025. 2. 28. 익숙한 듯 익숙하지 않은 쿠키(Cookie)의 보안에 대해 알아보자 쿠키 보안, 얼마나 알고 계신가요?웹 개발을 하면서 쿠키를 사용한 경험은 많지만, 보안에 대해 깊이 고민해 본 적이 있으신가요? 사실 저는 단순히 값을 저장하고 읽는 용도로만 사용했지만, 사이드 프로젝트를 통해 직접 로그인 기능을 구현하면서 쿠키의 보안 문제를 고려해야 한다는 것을 깨닫게 되었습니다.로그인 처리 시 access token을 어디에 저장해야 할지 고민하면서, "클라이언트에서 대충 저장해도 괜찮지 않을까?"라는 생각이 들었지만, 보안 관점에서는 그렇지 않았습니다. 특히, 서버에서 httpOnly 속성을 설정하여 쿠키를 관리하는 방식에 대한 피드백을 받고 나서, 이 속성이 정확히 무엇이고, 왜 필요한지 더 깊이 파고들게 되었습니다. httpOnly란?httpOnly 속성은 서버에서 쿠키를 설정.. 2025. 2. 3. JS로 DOM 꾸미기: 스타일 적용의 6가지 방법 들어가며..현재 개발 중인 서비스에서 shadow DOM을 생성하고 해당 DOM의 높이를 계산하는 로직을 작성해야 하는 일이 있었습니다. JavaScript 코드만으로 DOM에 스타일을 적용해야 했는데, 여러 스타일 속성을 한꺼번에 적용해야 하다 보니 흔히 사용하던 element.style이나 classList.add 외에 더 나은 방법이 있을지 고민하게 되었습니다. 다른 방법들을 찾아보니, 생각보다 다양한 방식으로 스타일을 적용할 수 있었고, 이번 기회에 각 방법을 정리하고 소개해 보려 합니다. 스타일을 적용하는 방법들은..1. classList.add 사용하기classList.add 메서드를 사용하면 하나 이상의 특정 클래스 이름을 요소에 추가할 수 있습니다. HTML의 class속성값을 간편하게 .. 2025. 1. 19. 알고 쓰는 서브 픽셀: 웹 개발자와 디자이너의 협업을 위한 필수 지식 목차1. 들어가며2. 서브 픽셀 기술이란?3. 서브 픽셀 렌더링 vs. 서브 픽셀 정밀도4. 서브 픽셀 정밀도가 중요한 CSS 속성들 (1) 적용되는 속성들 (2) 적용되지 않는 속성들5. 마무리 들어가며웹 서비스를 개발하며 디자이너와 협업하다 보면, 다음과 같은 상황을 마주할 수 있습니다.디자인 시안에 border: 1.55px가 적혀있는데, 개발자는 “브라우저가 border 소수점 처리를 제대로 하지 못해, 사실상 적용이 안 된다”고 설명합니다. 그러자 디자이너는 “그럼 box-shadow에는 소수점을 쓸 수 있는데, 왜 border는 안 되나요?”라며 반문합니다. 결국 개발자는 “그 둘은 동작 방식이 다르고, 아무튼 border는 소수점 처리가 안 된다”며 직접 브라우저 개발자 도구를 통해 소수.. 2024. 12. 22. Next.js 배포 실패? Vercel에서 Sentry CLI 오류 해결하기 들어가며배포 환경에서의 오류는 마치 감기처럼, 언제 올지 모르는 불청객입니다. (저리가) 이번 글에서는 평소에는 문제없이 배포되던 프로젝트에서 발생한 예기치 못한 배포 실패 오류로 인한 땀 삐질 모먼트와 이를 해결한 경험을 공유합니다. 문제 상황 : Sentry CLI 플러그인 에러 (Command failed)오랫동안 참여하지 않았던 프로젝트에서 간단한 수정 요청을 받았습니다. 단순히 텍스트를 변경하는 수준의 요구사항이었기에, 바로 프로덕션 배포까지 하루 안에 진행되어야 했습니다. 수정사항이 담긴 PR은 문제없이 머지되었고, Staging에서의 QA도 통과되었습니다. 그리고 여느 때처럼, 프로덕션 환경에 배포를 시작했습니다. 원래라면 문제없이 배포되어야 하는데, 어찌된 영문인지 배포에 실패하고 말았습.. 2024. 11. 24. 이전 1 2 다음
