티스토리

치현
검색하기

블로그 홈

치현

juniortunar.tistory.com/m

새로운 것은 늘 관심있고, 꾸준히 정진하는 프론트엔드 개발자입니다.

구독자
2
방명록 방문하기
공지 자기소개 모두보기

주요 글 목록

  • [JS] this를 포함한 구조 분해 할당의 문제와 해결 방법 this를 포함한 property를 구조분해할당하면this가 가리키는 객체가 다를 것이라는 것은 머릿 속으로는 알고 있었는데,정리해보려고 남겨보는 글이다.this를 포함한 구조 분해 할당의 문제와 해결 방법구조 분해 할당은 객체나 배열에서 원하는 속성 또는 값을 추출해 별도의 변수로 할당하는 방식이다.코드의 간결성과 가독성을 높이는데 자주 사용된다.예시: 단순 속성 구조 분해this를 사용하지 않는 경우, 구조 분해 할당은 아무 문제 없이 동작한다.함수형 예제const obj = { a: 1, b: 2, c: 3 };const { a, b } = obj;console.log(a, b); // 출력: 1, 2클래스 예제 (this 제외)class MyClass { constructor() { thi.. 공감수 1 댓글수 1 2024. 12. 4.
  • [JS] ES2024에는 어떤 기능이 추가되었을까? 매년 Ecma International에서는 JavaScript의 표준인 ECMAScript(줄여서 ES)를 개정하여 발표한다.2024년 7월에 발표된 ES2024는 JavaScript에 새로운 기능을 추가하고 기존 기능을 더욱 강화하여 개발자들의 작업을 보다 효율적으로 만들어 주는 다양한 개선 사항을 포함하고 있는데,이번 글에서 다뤄보고자 한다.[JS] ES2024에는 어떤 기능이 추가되었을까?1. Object.groupBy 및 Map.groupByES2024 이전의 불편함: 배열을 특정 기준으로 그룹화할 때, 개발자는 reduce()나 forEach()를 사용해 수동으로 데이터를 그룹화해야 했다. 이 방식은 코드가 길어지고 가독성이 떨어지며, 실수를 유발할 가능성도 있다.이전 코드 (ES2024 이전.. 공감수 0 댓글수 0 2024. 10. 16.
  • [JS] RORO 패턴이란? RORO 패턴이란?RORO는 "Receive an Object, Return an Object"의 약자로, 함수의 매개변수와 반환값을 모두 객체로 사용하는 JavaScript 패턴이다.이 패턴은 TypeScript와 함께 사용할 때 특히 유용하다고 한다. RORO 패턴의 주요 이점은 다음과 같다:매개변수의 순서에 구애받지 않음선택적 매개변수를 쉽게 처리함수 시그니처의 변경이 용이코드의 가독성과 유지보수성 향상TypeScript와 함께 사용 시 타입 안정성 강화RORO 패턴 예시예시1기존의 함수:function createUser(name: string, age: number, email: string, isAdmin: boolean = false) { // 사용자 생성 로직}createUser("Joh.. 공감수 0 댓글수 0 2024. 7. 1.
  • [Node] fs 모듈과 readLine 모듈 JavaScript 코딩테스트를 준비해 본 사람이라면, Node.js에서 사용자 입력을 받아 처리하는 대표적인 방법인 fs 모듈과 readLine 모듈을 사용해봤을 것이다.입력 값을 받아 출력 값을 보여주기 위해 사용하는 모듈이라는 사실만 알지, 구체적으로 어떻게 사용하는 것인지 몰랐기에,이번에 정리해보려한다.1. fs 모듈fs 모듈은 파일 시스템과 상호작용할 수 있는 모듈로, 파일을 읽거나 쓸 때 사용됩니다. 주로 파일에서 입력을 읽을 때 사용한다.사용법모듈을 불러온다. // require('fs')readFileSync 메서드를 사용하여 파일을 동기적으로 읽는다. // fs.readFileSync('data.json', 'utf8')입력을 처리한다. // JSON.parse(data) : JSON 문.. 공감수 0 댓글수 0 2024. 6. 24.
  • [JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(5) 위 글은 45 JavaScript Super Hacks Every Developer Should Know를 번역 겸 약간의 각색을 곁들인 글로,이 글은 5번째 중 5번째. 마지막 글이다.37. Avoid Global Variables (전역 변수 피하기)문제: 전역 변수는 충돌과 의도치 않은 부작용을 초래할 수 있습니다.해결책: 전역 변수를 피하면 충돌과 의도치 않은 부작용을 방지할 수 있으며, 코드의 모듈화와 유지보수성을 높일 수 있습니다.// PROBLEM: 전역 변수 사용// 전역 변수를 사용하면 충돌과 부작용이 발생할 수 있음var globalVar = 'This is global';function doSomething() { console.log(globalVar); // "This is gl.. 공감수 0 댓글수 0 2024. 6. 12.
  • [JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(4) 위 글은 45 JavaScript Super Hacks Every Developer Should Know를 번역 겸 약간의 각색을 곁들인 글로,이 글은 5번째 중 4번째 글이다. 28. Debounce Function (디바운스 함수)문제: 윈도우 리사이즈 이벤트와 같은 자주 호출되는 함수는 성능을 저하시킬 수 있습니다. 해결책: 디바운스 함수를 사용하여 함수가 일정 시간 동안 비활성 상태일 때만 실행되도록 하세요.// PROBLEM: debounce 미사용function logResize() { console.log('Window resized');}window.addEventListener('resize', logResize);// SOLUTION: debounce 사용function debounc.. 공감수 0 댓글수 0 2024. 6. 11.
  • [JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(3) 위 글은 45 JavaScript Super Hacks Every Developer Should Know를 번역 겸 약간의 각색을 곁들인 글로,이 글은 5번째 중 3번째 글이다. 19. Array some()와 every()문제: 배열의 일부 또는 모든 요소가 조건을 만족하는지 확인하는 것은 장황할 수 있습니다. 해결책: some()과 every()를 사용하여 코드를 간결하게 작성하세요.// PROBLEM: some(), every() 미사용const numbers = [1, 2, 3, 4, 5];let hasEven = false;let allEven = true;for (let i = 0; i num % 2 === 0); console.log(hasEven); // true const allEv.. 공감수 0 댓글수 0 2024. 6. 10.
  • [JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(2) 위 글은 45 JavaScript Super Hacks Every Developer Should Know를 번역 겸 약간의 각색을 곁들인 글로,이 글은 5번째 중 2번째 글이다. 10.  Nullish Coalescing Operator ( 널리쉬 병합 연산자)문제: || 연산자를 사용할 때, 0, "" (빈 문자열), false 등의 falsy 값들 때문에 의도하지 않은 기본값이 적용될 수 있다.예를 들어, 사용자가 나이를 0으로 설정했을 때 기본값으로 대체되어버리는 문제가 발생할 수 있다. 해결책: null이나 undefined일 때만 기본값을 제공하는 Nullish Coalescing (??)를 사용하세요. 이 연산자는 falsy 값들을 실제 값으로 취급하여 의도한 동작을 보장합니다.// PROBL.. 공감수 0 댓글수 0 2024. 6. 9.
  • [JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(1) 위 글은 45 JavaScript Super Hacks Every Developer Should Know를 번역 겸 약간의 각색을 곁들인 글로,팁이 45가지나 되는 만큼 한 글에 담기보단 9개씩 5번으로 나눠서 포스팅할 예정이다.이 글은 5번째 중 1번째 글이다.1. var 대신 let과 const 사용하기문제: var는 함수 스코프를 가지고 있어서 버그와 예측 불가능한 동작을 초래할 수 있다.해결책: 블록 스코프를 가지는 let과 const를 사용하세요.// PROBLEM1: var는 함수 스코프이기 때문에 if 블록 내부에서의 재할당이 전역 score 변수에 영향을 미친다.var score = 10;if (true) { var score = 100; // 같은 변수 이름을 사용}console... 공감수 1 댓글수 3 2024. 6. 8.
  • [JS] 2024년 개발자들이 주목해야 할 10가지 JavaScript 트렌드(번역 by GPT) + 개인적인 2024 상반기 회고 위 글은 24년 2월에 쓰여진 Medium의 글을 gpt로 번역한 것 요약본과 커리어에 대한 회고이다. 요약: 2024년 개발자들이 주목해야 할 10가지 JavaScript 트렌드JavaScript는 빠르게 진화하며 웹 개발의 판도를 바꾸고 있습니다. 2024년에는 웹 애플리케이션 구축 방식을 재정의할 흥미로운 트렌드들이 등장하고 있습니다. 이 글에서는 웹 개발자들이 주목해야 할 10가지 JavaScript 트렌드를 간단하게 설명합니다. 1. 마이크로 프론트엔드 (Micro Frontends):웹 애플리케이션을 작고 관리하기 쉬운 부분으로 나누어 개발. 모듈화, 확장성, 빠른 개발 사이클을 촉진.2. 서버리스 아키텍처 (Serverless Architecture):개발자는 인프라 관리 없이 코드를 작성... 공감수 0 댓글수 0 2024. 6. 2.
  • [Javascript] Ajax 정리(수정중) 멋쟁이 사자처럼 프론트엔드 스쿨 어느덧 10주차에 이르렀다. 자바스크립트 프로젝트를 앞두고 마지막으로 비동기 v통신을 중심적으로 배우고 있는데, 그에 대한 정리를 해보고자 한다. 동기 통신 과 비동기 통신 Ajax를 다루기에 앞서, 비동기 통신이 왜 필요한 지에 대해 먼저 짚어보고자 한다. 기본적으로,웹에서는 요청과 응답이 순차적으로 이루어지는 방식(동기 통신 방식)을 이룬다. 동기 통신 방식 클라이언트가 서버에 데이터를 요청 => 서버는 해당 요청 처리 후 데이터를 응답 => 클라이언트는 서버의 응답을 받을 때까지 대기 즉, 요청과 응답이 완전히 끝날 때 까지 다음 동작을 실행하지 않고 대기한다. 이런 순서로 작동하는 동기 통신의 단점으로, 1. 응답 대기시간 증가: 서버에서 응답 시간이 오래 걸리는 .. 공감수 0 댓글수 0 2023. 7. 25.
  • [JS] 클래스(Class) 멋쟁이사자처럼 프론트엔드 스쿨의 7주차를 지나고 있는 시점이다. Javascript의 개념들을 배우고 있는데, 한 번에 이해가 도저히 되지 않던 개념이었던 것중 하나인 Class에 대해 정리해보고자 한다. Class 정의 자바스크립트에서 함수의 한 종류로, 객체를 생성하기 위한 템플릿으로 사용되며, 값으로 사용할 수 있는 일급 객체(다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체)이다. 역할 일종의 설계도로, 클래스를 정의함으로써 객체를 만들기 위해 필요한 속성과 메서드의 구조를 미리 정의할 수 있다. 클래스는 생성자(constructor)를 포함하고 있다. 클래스 내부에서 정의된 메서드는 해당 클래스로부터 생성된 모든 객체에서 공유된다. 특징 // 1. 무명의 리터럴로 생성하여, 런타임.. 공감수 0 댓글수 0 2023. 7. 10.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.