전체 글 검색 결과

해당 글 93건

ApexCharts에서 mounted만으로 DOM 보정이 안 되는 이유

처음에는 차트가 마운트될 때만 legend 영역의 padding을 보정해 주면 충분할 거라고 생각했다.차트가 한 번 그려지면 DOM 구조가 유지될 거라고 예상했기 때문이다.그래서 처음에는 다음과 같이 mounted 이벤트에서만 padding 보정 함수를 호출했다.mounted: () => { fixLegendPadding();}초기 렌더링에서는 문제가 없었다.하지만 legend를 끄거나 다시 켰을 때, 적용해 둔 padding이 사라지는 현상이 발생했다.문제 현상차트 최초 진입 시 → padding 정상legend off → padding 사라짐legend on → 여전히 복구되지 않음즉, 차트는 그대로인데 스타일만 날아간 것처럼 보였다.원인: ApexCharts는 업데이트 시 DOM을 다시 그린다Ap..
웹 개발 2025. 12. 31. 18:00

await은 브라우저 다운로드 성공 여부를 알 수 없다?

이번 글에서는 await의 책임 범위와 user gesture의 신뢰도 판단을 살펴볼 예정이다.인스턴스 GPU 사용률을 엑셀 파일로 다운로드하는 기능을 구현하면서, await로 감싸둔 코드가 항상 성공으로 판단되는 문제를 겪었다.분명히 다운로드가 되지 않는 경우도 있었는데, try / catch에서는 에러가 발생하지 않았다. 이 글에서는왜 await에서는 엑셀 다운로드 실패를 감지하지 못하는지브라우저 다운로드가 JS 관점에서 어떻게 동작하는지최종적으로 어떤 코드가 문제를 해결했는지이 순서로 정리해본다.1. await는 무엇을 기다리고 있을까다음과 같은 코드가 있다고 가정해보자. const handleGpuDeviceUsageDownload = async () => { try { showL..
웹 개발 2025. 12. 31. 16:48

2차 면접 후기

컬쳐핏 면접으로 알고 갔는데 cs 관련해서 수두룩하게 질문을 받았다...그래서 오늘도 부족했던 부분에 대해서 정리해보려 한다.1. http와 https의 차이가 무엇인가요?먼저, http란 클라이언트와 서버 간 통신을 위한 통신 규칙 세트 또는 프로토콜이다. 사용자가 웹 사이트를 방문하면 사용자 브라우저가 웹 서버에 http 요청을 전송하고 웹 서버는 http 응답으로 응답한다. 이 때 브라우저는 데이터를 일반 텍스트로 교환한다.여기서 http 통신의 문제점이 드러난다. 바로 '일반 텍스트'로 교환을 하기 때문이다. 즉, 암호화되지 않은 데이터를 교환하기 때문에 제3자가 가로채고 읽을 수 있다. 이를 해결하기 위해 https는 http 요청 및 응답을 SSL 및 TLS 기술에 결합하여 또 다른 보안 계..
TIL 2025. 6. 19. 14:32

면접 후기

면접을 보고 왔다....하하하하하하하역시 실제 면접을 가니까 아는 것도 대답 잘 못하겠고 그냥 백지 상태가 되버리는... 이번엔 면접 질문에 대해 답이 마음에 안 들거나 아예 모르는 질문들만 기록을 하려 합니다.사실 떨어서 질문도 잘 기억이 나질 않지만....마음을 다 잡고...1. useLayoutEffect가 무엇인가요?useLayoutEffect는 useEffect와 달리 브라우저가 화면을 그리기 전에 동기적으로 실행되는 훅입니다.이 시점에 DOM을 측정하거나 조작하면 리플로우나 리페인트가 발생할 수 있어 성능에 영향을 줄 수 있기 때문에, 꼭 필요한 경우에만 사용하는 것이 권장됩니다.예를 들어, 헤더의 UI가 유저 이름의 길이에 따라 배치가 달라지는 경우, useLayoutEffect를 사용해 화..
TIL 2025. 6. 6. 01:14

Next.js의 등장 배경

Next.js를 계속 사용해 오면서 왜 이런 프레임워크가 등장하게 되었는지, 그리고 어떤 문제들을 해결하기 위해 만들어졌는지 고민해본 적이 없는 것 같다. 이번 기회에 프론트엔드 개발의 흐름을 정리하면서 Next.js가 등장하게 된 배경을 짚어보고자 한다.초창기 웹 개발과거에는 서버 개발자들이 웹 페이지 전체를 생성했다. Java와 JSP 템플릿 엔진을 통해 고정된 HTML에 변동되는 데이터를 서버에서 넣어 완성된 HTML을 만들고, 이를 클라이언트에 응답했다. 추후 사용자 인터랙션이 많아지게 되며 이러한 과정들은 UX를 크게 저하시키는 요인이 되었다. 서버에서 변동되는 데이터를 넣어주고 새로운 HTML을 응답 받는 과정까지 사용자는 아직 렌더링 되지 않은 흰 화면을 보고 있어야 하기 때문이다.AJAX의..
Next.js 2025. 6. 2. 10:01

Docker CLI

dockerhub은 이미지를 저장 혹은 다운로드 할 수 있는 저장소이다.원하는 이미지를 dockerhub에서 다운 받아 보자.이미지는 nginx로 진행하겠다. nginx를 검색하면 tag를 확인할 수 있는데, 이는 버전이라고 보면 된다.이미지이미지 다운로드$ docker pull nginx:stable-alpine3.19-perl위와 같이 "이미지명":"tag명"으로 특정 버전의 이미지를 다운 받을 수 있다.tag명을 명시하지 않을 경우 자동으로 latest 버전으로 다운 받아진다.이미지 조회$ docker image ls이미지 삭제$ docker image rm 016d위와 같이 image id를 통해 삭제할 수 있다. image id의 전부를 입력하지 않고 일부만 입력해도 삭제 가능하다.컨테이너를 실..
Docker 2025. 5. 30. 15:57

컴파일러 옵션 설정

CompilerOptionTypeScript는 우리가 작성한 코드에 타입 오류가 없는지 검사한 후 JavaScript 코드로 변환해준다.이렇게 컴파일에 관한 세부적인 사항을 컴파일러 옵션이라고 한다. 우선, 컴파일러 옵션을 설정할 수 있는 파일을 생성해보자.tsc --init위 명령어를 입력하면 tsconfig.json 파일이 생성된다.includetsc에게 컴파일 할 TypeScript 파일의 범위와 위치를 알려주는 옵션이다.여러 개의 파일이 있을 때, 각각의 파일을 일일히 JavaScript 파일로 변환하기엔 무리일 것이다.{ "include": ["src"]}위와 같이 설정할 경우 tsc 명령어만 입력해도 src 폴더 내 모든 파일이 동시에 컴파일되어 JavaScript 파일로 변환된다.targe..
TypeScript 2025. 5. 29. 23:15

TypeScript의 동작 원리

프로그래밍 언어의 동작 원리TypeScript의 동작 원리에 들어가기 앞서 기존 프로그래밍 언어의 동작 원리를 살펴보자.많은 사람들이 알다시피 컴퓨터는 바이트코드, 이진수 등 단순한 형태의 언어를 이해하고 실행한다. 따라서 프로그래밍 언어를 컴퓨터가 바로 이해하고 실행할 수는 없다. 따라서 컴퓨터가 해석하기 쉬운 형태로 변환하는 과정이 무조건적으로 필요한데, 이를 컴파일이라고 한다. 그럼 JavaScript의 컴파일 과정을 살펴보자.컴파일러를 통해 코드를 바로 바이트코드로 변환하는 것이 아닌 AST(추상 문법 트리)라는 형태로 변환한다.AST란 코드의 공백이나 주석 택 등의 코드 실행에 관계 없는 요소를 제거하고 트리 형태의 자료구조에 코드를 쪼개서 저장해 놓은 형태다.이후에 이 AST를 바이트코드로 변..
TypeScript 2025. 5. 29. 22:36

TypeScript란?

TypeScript의 탄생 배경본래 JavaScript는 웹 브라우저에서 동작하며, 간단한 인터랙션이나 UI 조작을 위해 설계된 스크립트 언어였다. 이 때문에 엄격한 문법보다는, 개발자가 빠르게 개발할 수 있도록 유연함에 중점을 두고 만들어졌다.하지만 이후 Node.js의 등장으로 JavaScript는 브라우저를 벗어나 백엔드 개발에까지 사용되기 시작했다. 단순한 스크립트 수준을 넘어, 대규모 애플리케이션 개발에 활용되면서 안정성과 유지보수성이 점점 중요해졌다.이에 따라 정적 타입 시스템을 통해 코드의 안정성을 높이고, 대규모 프로젝트에서도 신뢰성 있게 동작하는 코드 작성을 돕기 위한 언어가 필요해졌고, 이를 해결하기 위해 TypeScript를 탄생하게 된 것이다.TypeScript란타입을 더 안전하게 ..
TypeScript 2025. 5. 29. 22:07