분류 전체보기 (51) 썸네일형 리스트형 잠깐, eslint의 새로운 config 시스템에 대해 아시나요? 문제 상황처음에 vite + react + typescript로 기본 프로젝트 설정을 진행했는데 eslint 9.13.0 버전이 설치되었고 기본 설정 파일은 eslint.config.js였다. 그래서 해당 파일에 팀원분께 받은 .eslintrc.js 파일 내용을 eslint.config.js 에 무지성으로 그대로 복사했더니 다음과 같은 에러를 마주했다.A config object is using the "00" key, which is not supported in flat config system 해당 에러를 마주하면서 flat config system에 대해 처음 알게 되어서 정리하게 되었다.Flat Config System?ESLint v9.0.0부터는 기본적으로 flat config file fo.. Yarn Berry와 Pnpm 알아보기 그룹 프로젝트를 시작하면서 팀원들과 함께 패키지 매니저 선택에 대한 고민을 하게 되었다. 기존에 많이 사용되어 온 npm의 문제점을 개선한 다양한 모던 패키지 매니저가 등장했는데, 그 중 특히 주목받고 있는 pnpm 을 사용하기로 했다. 멘토님께서 yarn berry도 언급해 주셔서 pnpm이 yarn berry와 비교를 해본 뒤 패키지 매니저를 결정하기로 했다. (근데 사실 이미 pnpm을 사용하기로 이야기를 나눈 후에 yarn berry도 찾아보는 형식으로 이야기가 진행된 것이라 pnpm 걍 쓸 것 같다.)이 글에서 npm의 문제점을 짚어보고, 이를 해결하려는 yarn berry와 pnpm에 대해 간략하게 정리했다.기존 npm(또는 Yarn 1)의 문제점유령 의존성 (Phantom Dependency.. div 테두리 겹침 현상 해결하기 div의 테두리(border)가 겹치는 현상이 발생했다.border: 5px solid blue; 이 문제를 해결하기 위해서 구글링을 하다가 border-collapse 라는 속성을 알게 되었다. border-collapse는 표(table)에서 cell의 테두리가 분리(seperated)될지 상쇄(collapsed)될지 결정할 수 있는 속성이다. 근데 지금은 table의 cell이 아닌 div의 테두리가 겹치는 것이라서 다른 해결 방법이 필요해 보였다. 그때 한 동료분이 outline이라는 속성을 알려주셨다. mdn에 들어가서 outline에 대한 설명을 읽으면 border와의 차이점에 대해 나와있다.outline은 border와 다르게 콘텐츠 밖에 그려지며 절대 공간을 차지하지 않는다. 위의 예시에서.. 부동소수점에 오차가 발생하는 이유(feat. IEEE 754) 인트로최근 모딥다를 읽다가 흥미로운 내용을 발견했다.부동소수점 산술 연산은 정확한 결과를 기대하기 어렵다. 정수는 2진법으로 오차 없이 저장 가능하지만 부동소수점을 표현하기 위해 가장 널리 쓰이는 표준인 IEEE 754는 2진법으로 변환했을 때 무한 소수가 되어 미세한 오차가 발생할 수밖에 없는 구조적 한계가 있다. 이 구절을 읽고 부동 소수점에 대해 정확히 알아보고 싶은 생각이 들었다. 그리고 왜 2진법으로 변환했을 때 무한 소수가 되어버리는 건지 궁금했다. 그래서 이번 글에서는 관련 내용을 찾아보다가 알게된 내용을 정리해보고자 한다.10진법 소수를 2진법으로 변환하기우선 간단하게 10진법 소수를 2진법으로 바꿀 수 있는 방법은 무엇인지부터 알아보았다. 간단한 예로 0.1을 변환해보자.소수에 2를 곱하.. Babel과 react Runtime 옵션 Babel은 무엇일까?babel 공식 사이트를 읽어보면 babel에 대한 설명이 잘 나와있다.Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.Transform syntaxPolyfill features that are missing in your target environmentSource code transformations Babel은 문법 변환을 지원한다. 그래서 최신 JavaScript 코드를 이전 버전의 브라우저에서도 호환 가능하도록 구버전 J.. 실행 컨텍스트 가볍게 이해하기 자바스크립트를 조금 공부하다보면 실행 컨텍스트라는 용어를 한 번쯤 들어보게 된다. 이 개념을 확실하게 이해하기 위해 간단한 예제 코드를 통해 실행 컨텍스택과 실행 컨텍스트를 저장하는 스택의 동작 방식을 알아보자.실행 컨텍스트(execute context)란?실행 컨텍스트는 말 그대로 코드를 실행할 때 필요한 정보(맥락)를 의미한다. 이 정보에는 구체적으로 변수, 함수 선언, this 값 등이 포함된다. 자바스크립트 엔진은 코드를 실행할 때 실행 컨텍스트를 생성하고, 이를 실행 컨텍스트 스택에 쌓아 관리한다.실행 컨텍스트의 종류는 크게 4가지로 구분할 수 있는데, 그 중 자주 쓰이는 전역 실행 컨텍스트(Global Execution Context)와 함수 실행 컨텍스트(Function Execution C.. [부스트캠프 9기] 멤버십 웹 풀스택 4주 과정 회고록 멤버십의 첫 4주를 마쳤다. 시간이 정말 빠르게 흘러갔다. 이 기간 동안 많은 것을 배우고, 도전하고, 또 깨달았다. 4주 간의 여정을 돌아보며 느낀 점들을 정리해보고자 한다.시작부터 꼬인 멤버십을 시작하기 전, 학교 연구실 일을 정리해야 했다. 멤버십 시작 전 일주일과 첫 주 주말까지 최대한 일을 헤치우려 했지만, 양이 너무 많았다. 결국 이미 지친 상태로 멤버십에 들어왔고, 첫 주 주말에도 제대로 쉬지 못했다. 연구실 일에 대한 스트레스로 인해 초반에 체력 관리가 제대로 되지 않았다. 첫 시작을 평탄하게 하지 못해서 너무 아쉬웠다.기술에 대한 욕심과 깨달음 초반에 미션을 수행하면서 web component와 swagger를 꼭 공부해보고 싶었다. 하지만 이 기술들을 공부하는 데 시간을 너무 많이 써서.. offsetWidth으로 강제로 랜더링시키기 로그인과 회원가입 폼을 만들 때 로그인 화면에서 회원가입 버튼을 누르면 아래처럼 로그인 모달이 180도 가로로 뒤집히면서 회원가입 폼이 나타나게 하고 싶었다. 그래서 처음에는 180도 뒤집는 flip 애니메이션을 만든 뒤에 회원가입 버튼과 로그인 버튼의 click 이벤트 핸들러를 다음과 같이 작성했다.function animateForm() { const formWrapper = document.querySelector(".auth_form_wrapper"); formWrapper.classList.remove("animate_flip_reverse"); // 반대 애니메이션 제거 formWrapper.classList.add("animate_flip"); // 애니메이션 추가}function an.. 이전 1 2 3 4 ··· 7 다음
