데굴데굴

자바스크립트에서 문자를 숫자로 변환하기 위해 사용하는 방법으로는 parseInt()와 Number()가 있다. 더 간단하게는 문자 앞에 +를 붙여 숫자로 바꾸기도 한다. 어쨌든 둘 다 숫자로 변환해주니까 그 동안 아무거나 사용해왔었는데, 오히려 그러다 보니 이 둘은 대체 뭐가 다른건가 하는 의문이 자연스럽게 피어올랐다. 그래서 정리를 한 번 해보려고 한다. 참고 링크 단항 더하기 (+) - JavaScript | MDN 단항 더하기 연산자(+)는 피연산자 앞에 위치하며 피연산자를 평가하지만, 만약 피연산자가 숫자가 아니라면 숫자로 변환을 시도합니다. developer.mozilla.org Number() vs parseInt() - this vs that Number() vs parseInt() this..

1. 문제 상황 2. 근본적인 원인 - 이 페이지에 어떻게 접속하게 되었나 3. 해결법 떠올리기 4. 해결 방법 5. 결과 부트캠프에서 했던 프로젝트를 리팩토링하다가 이 문제를 만나게 되었다. 문제 상황 '오픈채팅으로 연락하기' 버튼을 누르면 간혹 이런 페이지로 이동하였다. 근본적인 원인 - 이 페이지에 어떻게 접속하게 되었나 '오픈채팅으로 연락하기' 버튼에 쓰인 window.open()은 앞에 프로토콜까지 붙어있어야 정상적인 링크로 인식한다. (window.location.assign()도 마찬가지이다.) 예를 들어서 내가 현재 localhost:3000에 있다고 가정할 때, 콘솔에 window.open('www.naver.com')를 입력하면 주소창에 이렇게 입력된다. 반면 window.open('h..

참고 - 자바스크립트 Deep Dive, MDN 이벤트 입문 | MDN 이벤트(event)란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 여러분이 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주 developer.mozilla.org 이벤트 전파와 이벤트 버블링, preventDefault()와 stopPropagation()의 차이가 궁금해져 정리해본 글이다. 이벤트 등록 이벤트 핸들러 어트리뷰트 Say Hi! function greeting(name) { console.log(`Hi, ${name}!`); }; html 태그에 이벤트 속성을 부여하는 방법이다. 'on + 이벤트 종류'에 함수를 호출하면 이벤트 핸들러..

Proxy CORS 처리를 백엔드 개발자에게 요청할 필요 없이 리액트 라이브러리나 webpack dev server에서 제공하는 proxy 기능을 이용하면 CORS 정책을 우회할 수 있다. 브라우저를 속인다고 생각하면 된다. 1. webpack dev server의 proxy 기능 이용 클라이언트 폴더 package.json의 맨 밑에 프록시 설정을 추가한다. 아무데나 넣어도 상관은 없지만 보통 알아보기 쉽게 맨 밑에 추가한다고 한다. ... "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "las..

코드를 수정할 때마다 새롭게 빌드하고 배포하는 과정은 생각보다 번거로운 일이다. 자동화 작업을 통해 이 과정을 기계가 알아서 해주도록 만들 수 있다. CI Continuous Integration 지속적 통합 Code - Build - Test CD Continuous Deployment / Continuous Delivery 지속적 배포 Release - Deploy - Operate CI/CD 파이프라인을 구축하여 빌드부터 배포까지의 과정을 자동화한다. - 빌드 (소프트웨어 컴파일) - 테스트 (호환성 및 오류 검사) - 릴리스 (버전 제어 저장소의 애플리케이션 업데이트) - 배포 (개발에서 프로덕션 환경으로의 변환) - 규정 준수 및 유효성 검사 Github Actions CI/CD 플랫폼 공개 레..

Lighthouse 구글에서 개발한 오픈소스 웹페이지의 품질 검사 기능 제공 -> 이를 참고하여 낮은 지표에 대해 개선 가능 lighthouse 성능 분석은 결국 로컬 pc에서 진행되기 때문에 사용자의 pc 성능에 따라 결과가 그 때 그 때 다르게 나온다. 즉, 이 결과가 절대적이지 않다는 것을 염두에 두어야 한다! 사용해보기 네이버 데스크탑 웹페이지를 분석해본 결과 대부분의 지표에서 평균 이상의 점수가 나왔다. Largest Contentful Paint는 뷰포트에서 가장 넓은 영역을 차지하는 콘텐츠의 로딩 시간을 측정하는 지표이다. 이 부분을 제외한 모든 영역에서는 초록색이 떴다. 위 항목을 개선할 여러 방법에 대해서는 공식 문서에서 서술하고 있다. 최대 콘텐츠풀 페인트 최적화 Largest Cont..

번들링이란? 더 쉽고 빠르게 프론트엔드 애플리케이션에 접근할 수 있도록 용량을 줄이거나 파일을 최소화하는 작업 빌드는 개발이 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하는 작업, 모듈 간의 의존성 관계를 파악해 그룹화하는 작업이다. 의존성 관계란 파일이 서로 엮여있는지를 말하는 것이다. 보통 다른 파일에서도 그 파일을 쓰기 위해 module.exports를 쓰고 파일을 불러올 때에는 require을 쓴다. (commonJS) => ES6 문법에서는 import, export를 쓴다. 웹팩 webpack 프론트엔드 애플리케이션 배포를 위해 사용하는 번들러 최근 5년간 사용량 추세를 보면 압도적으로 높은 점유율을 차지하고 있다. webpack webpack is a module bundler. ..

웹 표준 예전엔 브라우저마다 따로 개발을 해주어야 했음. (개발자 살려...) 웹 개발의 형식을 통일시키기 위해 등장한 것이 웹 표준 사용자가 어떤 브라우저를 쓰더라도 동등한 웹 페이지를 보여줄 수 있도록 제작 기법을 담고 있다. 장점 1. 유지 보수의 용이성 + 구조, 표현, 동작 영역이 분리되면서 코드의 경량화로 트래픽 비용 감소 2. 웹 호환성 확보 3. 검색 효율성 증대 4. 웹 접근성 향상: 웹 표준을 맞추는 것만으로도 접근성을 향상시킬 수 있다. Semantic HTML 그냥 와 만 사용해도 화면을 구성할 수는 있다. 하지만 요소를 딱 봤을 때 어떤 역할을 하는지 짐작할 수 없다. 그렇기 때문에 Semantic HTML의 사용이 권장된다. 장점 1. 개발자간 소통 2. 검색 효율성: 시맨틱 요..