본문 바로가기

분류 전체보기

(93)

[ JS ] Promise VS async await 비교 자바스크립트에서 비동기 작업을 처리하는 주요 방식인 Promise와 async/await에 대해 비교해보려고 한다. 평소 작업을 하면서 둘을 사용하는데, 정확히 어떻게 다른지 차이점과 특징을 비교해보려고 한다. (둘 다 ES6+ 이후에 도입되었다.) 1. 문법 - Promise: `.then()`, `.catch()`, `.finally()` 메서드를 체인으로 연결하여 사용. - async/await: 더 동기적인 코드 스타일이며 `try/catch` 구문으로 에러를 처리한다. 2. 가독성 - Promise: 복잡한 비동기 로직에서는 중첩된 `.then()`으로 인해 "콜백 지옥"과 유사한 상황이 발생할 수 있다. - async/await: 일반적으로 더 읽기 쉬운 직관적인 코드를 ..

[ React ] React의 export와 export default 차이점 알아보기 SyntaxExport 구문, Import 구문 간단 정리표Defaultexport default function Button() {}import Button from './button.js';Namedexport function Button() {}import { Button } from './button.js'; 보편적으로 한 파일에서 하나의 컴포넌트만 export 할 때 default export 방식을 사용하고 여러 컴포넌트를 export 할 경우엔 named export 방식을 사용한다. React에서 `export`와 `export default`의 차이점은 다음과 같다.1. export - 여러 개의 값(함수, 객체, 원시 값 등)을 내보낼 수 있다. - 가져올 때 중괄호..

[ 개발도서 추천 ] 리팩터링 2판 회사에서 내가 정말 좋아하는 선임분이 추천해 주신 책.사실 어떻게 코드를 짜야 좋은 코드일까?라는 고민과 생각은 많이 해봤지만, 구체적으로 리팩토링을 하게 될 때, 어떻게 구조를 짜고, 어떻게 효율적으로 구현해야 하는지 깊게 고민해보지는 않았던 것 같다. 그래서 이 책을 읽으면서 리팩토링에 대한 기준과 개선방안에 대해 고민해 보려고 구매하였다. 일단 나는 교보문고 온라인에서 주문하였고, 가격은 31,500원이었다. 출판사는 내가 IT서적을 구매할 때, 가장 좋아하는 한빛미디어 출판이었고, 저자는 무려 '마틴 파울러'이다. 이 책은 자바스크립트로 리팩토링에 대해 설명되어있다. 책의 전부를 읽을 시간이 없다면, 아래와 같이 습득하라고 가이드가 나와있다. 1. 리팩토링이 뭔지 모른다면 1장을 ..

[ JS ] Event.stopPropagation와 Event.preventDefault 의 차이점 알아보기. JavaScript에서 자주 사용되지만 종종 혼동되는 두 가지 메서드인 Event.stopPropagation()과 Event.preventDefault()에 대해 정리를 해보려고 한다. Event.stopPropagation() `stopPropagation()` 메서드는 이벤트의 버블링을 중지시킨다. element.addEventListener('click', function(event) { event.stopPropagation(); // 이벤트 처리 로직}); 주요 특징 )- 이벤트가 상위 요소로 전파되는 것을 막는다.- 중첩된 요소에서 특정 이벤트를 독립적으로 처리하고 싶을 때 유용하다. 사용 예시 )중첩된 div에서 클릭 이벤트가 발생했을 때, 해당 div에서만 이..

[ React ] Chart UI 구현을 위한 React 라이브러리 정리 Chart 관련 Libraries 정리 글 1.Recharts⭐ 20.3k 의 인기 있는 차트 라이브러리. (중국 회사)storybook을 통한 UI 명세가 있고, 굉장히 다양한 차트 컴포넌트 지원.https://recharts.org/en-US 2.nivo⭐ 11.4khttps://nivo.rocks/components/ 3.apexcharts⭐ 12.5k예쁘고 아기자기한 디자인, React 컴포넌트 예시(class 컴포넌트 기반), 커스터마이징 자유도 높음.https://apexcharts.com/ 4.react-chartjs-2⭐ 5.9kChart.js 용 React Component 라이브러리. Chart.js V3,V4를 서포트함. (가장 인기 많..

React의 상태관리 라이브러리, Zustand에 대한 간략 정리글. 독일어로 "상태"를 의미하는 Zustand는 React 애플리케이션에서 단순화된 Flux 패턴을 사용하는 작고 빠른 상태 관리 라이브러리이다.hook을 기반으로 사용하는 간편한 API를 제공하며, 최소한의 보일러플레이트 코드로 사용이 가능하며, 개발자가 상태 관리를 직관적이고 쉽게 처리할 수 있도록 도와준다. 주요 기능 및 특징 1. 심플한 API: Zustand의 API는 매우 간단하다. 보통 1~2개의 hook만 사용하여 상태를 정의하고, 이를 컴포넌트에서 사용할 수 있다. 주로 `create` 함수와 `useStore` 훅을 사용한다.2. 초경량: Zustand는 경량 라이브러리로, 크기가 작고 빠르다. React Context API 기반으로 작동하는 다른 상태 관리 라이브러리와 비..

[ Sentry ] F.E에서 Sentry를 활용하여 디버깅 하기. 프론트엔드에서 개발 및 운영을 하는 과정에서 발생하는 에러를 모니터링하는 방법은 다양하다. 현재 우리 회사는 프론트엔드의 디버깅 툴로 센트리를 사용하고 있어서 간단히 소개하려고 한다. 센트리는 웹, 모바일 앱, 게임등의 다양한 애플리케이션에서 발생하는 오류를 실시간으로 추적하고 분석하여 예측 가능한 오류와 예측 불가능한 오류들에 대해 탐지를 위한 툴이다. 처음에는 오픈 소스 프로젝트로 시작하였으나 현재는 클라우드 기반 서비스와 온프레미스 설치 버전을 모두 제공한다. 센트리를 잘 활용하여 고객들에게 더 나은 품질의 서비스를 제공할 수 있다. 센트리의 강력한 기능들 1. 에러 모니터링애플리케이션에서 발생하는 모든 에러를 자동으로 감지하고 기록하여 개발자가 어떤 에러가 발생했는지 바로 알 수 있도록 도와준다..

[ WEB ] iOS에서 SVG 이미지가 깨져 보일 때 해결 방법 회사에서 iOS개발 파트에 이슈 티켓이 발행되었는데, AOS에서는 이미지가 정상적인 해상도로 노출되는 반면, iOS 에서는 이미지가 깨져 보이는 이슈가 있었다. 해당 이미지는 SVG 벡터 이미지라 이론상으로 당연히 깨지는 이슈가 없어야 하는 게 맞는데 참 이상했다. iOS개발자 분이 해당 화면은 웹뷰라고 웹프론트 파트에 이슈 티켓을 넘겨주어 함께 찾아보았는데, 구글링을 통해 사파리 웹뷰에서 SVG깨짐 현상이 발생하고 있다는 사실을 알았고, 방법을 찾아보았다. 태그를 이런 식으로 object 태그를 사용하면 간단하게 해결할 수 있다. (, 도 가능) 구글링을 해본 결과 위의 방법이 가장 쉬워 보였다. 하지만 모든 SVG 이미지를 로 사용하기는 실질적으로 어려웠다. (서버에서 이미지..

이전 1 2 3 4 5 ··· 12 다음

티스토리툴바