본문 바로가기
728x90

전체 글93

03.11.24 Cypress 환경 설정 cypress 설치 // cypress 설치 yarn add cypress --dev // cypress 앱 오픈 yarn e2e-web:dev cypress open cypress.config.js module.exports = { e2e: { setupNodeEvents(on, config) { // implement node event listeners here }, }, }; 2024. 3. 11.
03.04.24 You Don't Know JS 스터디 후기 this는 도대체 어떻게 탄생했을까? 비동기 콜백지옥은 왜 만들어지게 되었나? 이번 글에서는 위 질문에 대한 궁금증을 조금이나마 해소하고 싶은 오랜 꿈이 있었습니다. 이에 열정 가득하고 실력 짱짱한 상우님 그리고 상권님과 함께 'You Don't Know JS'의 this와 프로토타입 및 비동기와 성능에 대한 책을 2023년 8월 29일부터 2024년 2월 14일까지 총 12회에 걸쳐서 스터디 한 내용을 회고하고, 당시 느꼈던 인사이트들을 공유하고자 합니다. 명시적 바인딩이 암시적 바인딩보다 우선순위가 높다. JavaScript에서는 함수를 호출할 때 this 키워드가 해당 함수를 호출한 객체를 참조하도록 설계 되었습니다. 바인딩은 특정 컨텍스트(context) 또는 객체에 함수를 연결하는 과정을 의미합.. 2024. 3. 10.
03.22.23 {BOJ} 10810번 나이계산하기 - node.js 공넣기 🔗 문제 링크 https://www.acmicpc.net/problem/10810 문제 설명 도현이는 바구니를 총 N개 가지고 있고, 각각의 바구니에는 1번부터 N번까지 번호가 매겨져 있다. 또, 1번부터 N번까지 번호가 적혀있는 공을 매우 많이 가지고 있다. 가장 처음 바구니에는 공이 들어있지 않으며, 바구니에는 공을 1개만 넣을 수 있다. 도현이는 앞으로 M번 공을 넣으려고 한다. 도현이는 한 번 공을 넣을 때, 공을 넣을 바구니 범위를 정하고, 정한 바구니에 모두 같은 번호가 적혀있는 공을 넣는다. 만약, 바구니에 공이 이미 있는 경우에는 들어있는 공을 빼고, 새로 공을 넣는다. 공을 넣을 바구니는 연속되어 있어야 한다. 공을 어떻게 넣을지가 주어졌을 때, M번 공을 넣은 이후에 각 바구니에.. 2023. 3. 22.
03.08.23{개발일기} debounce 활용 계좌번호 예외처리 UI 성능 최적화하기 서론 2023년 1월 30일부터 3월 7일까지 '오늘의집사'라는 프로덕트를 개발하면서 만났던 개발이슈 중, 마이페이지 계좌관리 기능의 계좌등록 기능을 구현하면서 은행별 계좌번호 입력갯수에 따른 예외처리 이벤트 핸들러 함수가 필요했습니다. 계좌번호 입력시 input 이벤트가 짧은시간 연속적으로 발생하는 상황속에, 은행별 계좌번호 입력칸마다 부족한 숫자 자릿수만큼 'X글자를 입력하세요!'라는 알람 문구를 노출 시켜야하는 요구사항이 있었습니다. 이로인해 계좌번호 입력시 input 이벤트가 과도하게 짧은시간 연속해서 해당 이벤트 핸들러 함수가 호출되므로 서비스 성능에 치명적인 이슈가 발생할 가능성이 다분하여 고민하게 되었습니다. 금번 포스팅에서는 이러한 문제를 어떤 관점으로 접근했고 어떻게 해결하였는지에 관한 .. 2023. 3. 8.
02.15.23{개발일기} CDN 아키텍처 구성 및 활용사례 CDN 아키텍처 정의 CDN(Content Delivery Network) 아키텍처는 사용자의 지리적 위치에 따라 웹 페이지, 이미지, 비디오 및 기타 유형의 파일과 같은 콘텐츠를 사용자에게 전달하기 위해 함께 작동하는 분산 서버 네트워크입니다.CDN의 기본 아이디어는 콘텐츠를 최종 사용자에게 더 가깝게 가져와 콘텐츠가 인터넷을 통해 이동하는 데 필요한 거리를 줄이는 것입니다. 이것은 결과적으로 웹 사이트 또는 애플리케이션의 속도와 성능을 향상시키는 데 도움이 됩니다. CDN 아키텍처는 특히 원본 서버에서 멀리 떨어진 사용자를 위해 웹 애플리케이션 및 웹 사이트의 속도, 성능 및 안정성을 개선하는것을 목표로 설계됩니다. CDN 아키텍처 구성 CDN 아키텍처는 아래와 같은 구성 요소를 가지고 있습니다. 에.. 2023. 2. 15.
02.03.23{개발일기} Object와 Map 바르게 알고 사용하기 서론 Map객체와 Object 객체의 차이는 무엇일까요? 물론 Object와 Map은 둘다 유사하게 getter와 setter 메소드를 갖고 있고, 삭제 및 수정도 가능합니다. 하지만 Map을 사용하는 특별한 이유들이 MDN 공식문서에 잘 설명되어 있음을 확인할 수 있었습니다. 대괄호 표기법의 위험성 Object로 키-값을 관리하면 악성해커의 경우 쉽게 대괄호표기법을 활용해 키와 값을 재정의하여 보안에 취약할 수 있습니다. 무슨 근거로 보안에 취약한지 궁금하여 관련내용을 MDN에서 더 찾아보았는데, 이를 이해하기 위해선 먼저 Object 키에 접근하는 대괄호 표기법과 점표기법의 기능 차이부터 짚고 넘어가야 했습니다. 대괄호 표기법 vs 점표기법 '점표기법'은 변수로 특정 프로퍼티 값을 수정 불가능하지만,.. 2023. 2. 4.
01.15.23{개발일기} 가비아에서 구매한 개별 도메인 netlify에 배포 자동화 셋팅 및 HTTPS 도메인 인증 개요 DNS 구성 요소 및 네임서버에 대한 개념없이 그저 강의에서 알려주는 대로 따라 셋팅 했을 때 초기 배포엔 문제가 없었습니다. Netlify에서 제공해주는 도메인이 아닌 가비아 DNS 호스팅 서비스에서 구매한 도메인 주소를 Netlify 네임 서버로 연결 시도했을 때, 해당 도메인 주소로 호스팅 서비스 연결이 안되었을 뿐만 아니라, 기존에 배포했던 도메인 주소로 자동 배포까지도 작동이 안되었습니다. 해당 문제를 해결하는 과정에서 알게 된 내용을 기록하고자 본 포스팅을 작성하게 되었습니다. 해당글은 2023년 1월 15일에 초안이 작성되고 1월20일 기준으로 최종 작성완료 된 글이기에, 이 글을 읽으시는 시점이 많이 최근이 아닌 경우, netlify 서비스 UI 및 호스팅 정책이 변경 될 수 있는 점.. 2023. 1. 15.
01.11.23{개발일기}onerror와 addEventListener 둘 중 어느것이 더 나은가? AddEventListener와 onerror 용도 차이 고민 계기 image 태그에 src 속성값을 불러 올 때 404 에러 예외처리가 필요했고, 대체 이미지를 설정하는 과정에서 error이벤트 리스너를 통해 대체 이미지 주소로 src 속성값 핸들링이 필요했습니다. MDN으로 error event handler를 검색해보았을 때 크게 2가지 방식이 정의 되어 있음을 확인할 수 있었습니다. 첫번째 방식은 Element.addEventListener의 첫번째 파라미터 값에 'error'라는 이벤트를 넣고 콜백함수를 실행하는 방식이었습니다. element.addEventListener('error', function() { /* do stuff here*/ }); 다른 하나는 onerror 라는 이벤트 핸들.. 2023. 1. 11.
12.01.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-7 챕터리뷰 [ 새롭게 알게 된 것 ] 1.리듀서는 import 해서 사용할땐 리듀서 배열을 리턴하므로 중괄호{ }로 감싸 객체로 받아야 한다 import { addTodo, toggleTodo } from '../modules/todos'; But, you have to consider the order for reducer to return. Each reducer can be used by the order to declare. 2. 리듀서 초기 상태는 필요에 따라 비워두거나 디폴트 값 설정 하되 id값을 필요적절하게 설정해야 한다 그런데 디폴트 값을 설정했는데 최초 todo 항목을 추가한것과 초기 값이 동시에 하나의 toggle 이벤트로 발생하는 현상을 확인 했다. 원인은 맨처음 todo 항목 추가되고 난후 .. 2022. 12. 2.
11.26.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-6 챕터리뷰 [ 새롭게 알게된 것 ] 1. Redux dev Tool은 장점이 참 많다 리덕스 개발자 도구를 사용하면 현재 스토어의 상태를 조회 할 수 있고, 현재 액션 디스패치 여부에 따른 상태 변화도 확인 가능하다. 뿐만 아니라 액션을 직접 디스패치해서 디버깅도 가능하다. https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd Redux DevTools Redux DevTools for debugging application's state changes. chrome.google.com 2. 리덕스 개발자 도구 설치는 크롬 웹 스토어 확장프로그램에서 확인 가능하다 확장프로그램 설치 한 후, redux-devt.. 2022. 11. 26.
11.25.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-5 챕터리뷰 [ 새롭게 알게된 것 ] 1. 프리젠테이셔널 컴포넌트란 리덕스에 직접 접근 없이 필요한 값을 접근할 수 있는 컴포넌트다 프리젠테이셔널 컴포넌트에선 주로 UI를 선언하는 것에 집중한다. 필요한 값들이나 함수는 props 로 받아와서 사용하는 형태로 구현하는 것이 특징이다. 2. 컨테이너 컴포넌트란 리덕스 상태 조회 및 액션 디스패치 할 수 있는 컴포넌트다 HTML 태그를 사용하지 않고 다른 컴포넌트를 import해서 사용한다. 3. 책대로 분리 한다고 했는데 문제가 발생했지만 이유를 알 수 없다 이유를 추후 찾아봐야 겠다. 값은 넘겨주고 받는게 명확한데.. 왜 컨테이너에서만 에러가 뜨는건지 이유를 모르겠다.. 원인을 분석해보니 아래와 같은 문제점을 발견했고, 해결했다. modules라는 디렉토리도 안만들어.. 2022. 11. 24.
11.23.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-4 챕터리뷰 [ 새롭게 알게된 것 ] 1. 리덕스를 적용하기 위해선 모듈이 필요하다 모듈은 액션타입, 액션 생성함수, 리듀서 항목들이 모두 들어 있는 자바스크립트 파일을 의미한다 리덕스 모듈은 다른 신체 장기들과 상호작용하는 인간의 뇌와 같다. 뇌가 다른 장기들을 거쳐서 특정 신체 장기에 뇌파신호를 보내는게 아니다. 뇌는 다이렉트로 각 장기에 액션명령을 전달하는데, 이는 리덕스가 작동하는 원리이자 장점과 동일한 원리다. 리액트 프로젝트에 리덕스를 적용할땐 해당 모듈을 만들고 아래와 같이 라이브러리를 yarn을 통해 설치해주어야 한다. $ yarn add react-redux 2. Ducks 패턴을 지향해야 한다 만약 액션과 리듀서가 서로 다른 파일에 정의되어 있다면 합치는 것을 지향해야 하는데, 이유는 간단하다. r.. 2022. 11. 23.
11.23.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-3 챕터리뷰 [ 새롭게 알게된 것 ] 1. ReacDOM.render는 더이상 React 버전18을 지원하지 않음을 알게 되었다 해당부분은 추후 자세하게 좀 더 살펴볼 것이다. 2. createStore라는 스토어를 만들어주는 redux 함수를 알게 되었다 사용법은 아래와 같다. import { createStore } from 'redux'; 3. 액션 타입은 주로 대문자로 작성하고, 액션 생성함수는 camelCase로 작성한다 액션 생성함수 안에 액션 객체는 type값이 필수이다. 4. Redux 리듀서 함수를 사용할 땐 반드시 불변성을 지켜줘야 한다 스프레드 함수를 사용 하여 state값을 얕은 복사한다. function reducer(state = initialState, action) { // state 의.. 2022. 11. 23.
11.21.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-2 챕터리뷰 [ 새롭게 알게 된 것 ] 1. 리덕스를 사용할 땐 단 한개의 스토어만 만들어서 사용해야 한다 리덕스는 스토어에 original state를 갖고, 각 컴포넌트가 해당 state를 참조한다. 만약 state를 참조를 분리시켜야 할 경우, 여러개의 스토어를 사용하는 것은 가능 하지만 비권장 된다. 이유가 궁금하여 공식 문서를 찾아보니, 나와 비슷한 궁금증을 가진 사람이 많았는지 따로 FAQ로 질문 답변이 되어 있었다. 본래 Flux 패턴에선 리액트 앱을 구현 할 때 하나의 스토어만 가지도록 의도되어 있다. 이를 통해 Redux 개발자도구를 활용하면 특히 대규모 서비스일수록 디버깅이 쉬워지는 장점이 있다. 만약 스토어가 여러개이면, 여러개의 스토어가 동시에 업데이트 되는 것이 아닌 내부 동작구조에 따라 순차.. 2022. 11. 21.
11.18.22{코딩일기} 라인 X Yahoo! Japan 'Tech-Verse 2022' 콘퍼런스 둘째날 후기 둘째날 세션 간략 후기 라인은 매번 콘텐츠 변경을 위해 View,로그인, 권한관리를 수정하는 번거로운 작업을 덜어내고자 Headless CMS를 적용하게 되어 프론트엔드 개발자가 서버 없이 사이트를 운영할 수 있는 방법을 도입해 프로젝트 출시 기간을 현저히 단축시킨 케이스를 소개했다. 뿐만아니라 Headless CMS도입해 트랜잭션을 4400% 개선한 점에서 몹시 놀라웠다. Webhook에 대해서 새롭게 알게 되었다. 보통 우리가 흔히 사용하는 API는 클라이언트가 서버에 요청을 전송하고 응답받는 구조라면, Webhook은 특정 이벤트가 발생했을 때 서버에서 클라이언트를 호출하는 역방향 방식이다. Webhook은 특정 이벤트가 발생하면 custom 콜백으로 변환해주는데, 이때 사용하는 콜백 URL은 서버.. 2022. 11. 18.
728x90

티스토리툴바