일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- React
- 패키지 스크립트
- 자바스크립트
- 비동기프로그래밍
- dom
- 프론트엔드
- 컴포넌트
- JavaScript
- fe
- 상태 관리 라이브러리
- 코드리뷰
- 퍼포먼스 최적화
- 풀스택 개발
- 동적 웹 페이지
- 웹 개발
- 웹 성능 최적화
- 리액트 기초
- tanStack Query
- 비동기 요청 처리
- jsx
- 프라미스체이닝
- Node.js
- 국제화(i18n)
- 웹개발
- html
- Promise
- 웹 성능
- 자바스크립트공부
- #프론트엔드개발
- css
- Today
- Total
목록Fundamentals/JavaScript (20)
sodol-dotcom

1. 기본 사용법toLocaleDateString()는 자바스크립트에서 날짜를 사용자가 설정한 언어와 지역에 맞춰서 사람이 읽기 쉬운 형식으로 변환해주는 함수이다. 간단히 말해, 날짜를 각 나라별로 익숙하게 볼 수 있는 형태로 보여주는 데 유용하다. toLocaleDateString()는 Date 객체에서 사용할 수 있다. 예를 들어, 현재 날짜를 한국 형식으로 출력하려면 다음과 같이 할 수 있다.const today = new Date();console.log(today.toLocaleDateString());위 코드를 실행하면 보통 한국에서는 YYYY.MM.DD 형식으로 날짜가 출력된다. 예를 들어, 2023.10.25 와 같은 형태가 될 것이다. (한국 지역이 기본 설정된 브라우저에서 실행시)2. ..

HTML 태그 자체를 자바스크립트 코드로 직접 리턴할 수 없는 이유는 주로 자바스크립트의 문법 구조와 HTML의 문법 구조가 서로 다르기 때문이라고 한다. 1. 문법 차이자바스크립트는 프로그래밍 언어로, 특정한 문법 규칙을 따른다. 반면 HTML은 마크업 언어로, 웹 페이지의 구조를 정의하는 데 사용된다. 자바스크립트 코드 안에서 HTML 태그를 직접 사용할 경우, 자바스크립트의 문법에 맞지 않게 된다.예를 들어:function render() { return Hello, World!; // 오류 발생} 위 코드는 자바스크립트 문법으로서는 올바르지 않기 때문에 오류를 발생시킨다. 자바스크립트는 HTML 태그를 인식하지 않으며, 이러한 문법은 자바스크립트 코드로 해석되지 않는다. 2. 자바스크립트의..

두 방식 모두 기능적으로 동일하지만, 사용할 때 약간의 차이가 있으므로 상황에 따라 적절히 선택하는 것이 좋다. 1. `export default function multiply(a, b) {...}` (함수 선언과 동시에 내보내기)유의할 점: 함수 이름: 이 방식으로 내보내면 함수 이름이 명시적으로 필요하지 않은 상황에서 유용하다. 함수가 주로 기본 내보내기 용도로만 사용되고, 이름 자체는 파일 내부에서만 의미가 있을 때 적합하다.Hoisting(호이스팅): 함수 선언과 동시에 내보내는 방식은 함수가 호이스팅되기 때문에 파일 내에서 함수를 호출할 때, 선언된 위치와 상관없이 사용할 수 있다.console.log(multiply(2, 3)); // 정상 작동export default function mu..

// 1. export { multiply };function multiply(a, b) { return a * b;}export { multiply };// 2. export function multiply(a, b) {...}export function multiply(a, b) { return a * b;};// 3. export default function multiply(a, b) {...}export default function multiply(a, b) { return a * b;}; 세 가지 로직은 모두 `multiply`라는 함수를 정의하고 내보내는 방식이다. 각각의 `export` 방식에 따라 사용하는 방법이 다르다. 1. `export { multiply };`functio..

1. 개념구조 분해 할당은 객체나 배열의 값을 간편하게 변수에 할당할 수 있도록 해주는 문법이다.이 기능을 사용하면 코드가 더 간결하고 이해하기 쉬워진다. 2. 객체 구조 분해 할당const person = { name: "Alice", age: 25, job: "developer"};`person`은 `name`, `age`, `job`이라는 세가지 프로퍼티를 가진 객체이다. 2-1. 기본적인 변수 할당객체의 속성 값을 변수에 할당하려면 다음과 같이 작성한다.const name = person.name; // name 변수에 "Alice" 할당const age = person.age; // age 변수에 25 할당이 문장은 `person` 객체에서 `name`과 `age` 프로퍼티..

프론트엔드 개발에서 Node.js는 백엔드와의 연결, 데이터 처리, 서버 실행 등 여러 용도로 사용된다.프로젝트가 커지면서 파일과 폴도의 구조가 복잡해질 수 있는데, 이럴 때 패키지 스크립트를 사용하면 더 간편하게 작업할 수 있다. 1. 패키지 스크립트란?패키지 스크립트는 `package.json` 파일에 있는 `scripts` 항목에 정의된 명령어이다. 이 명령어를 사용하면 자주 사용하는 작업을 손쉽게 실행할 수 있다. 마치 매크로처럼, 복잡한 명령어를 간단한 이름을 대체해준다. 2. `package.json` 파일 이해하기`package.json` 파일은 Node.js 프로젝트의 설정 정보를 담고 있는 파일이다.여기에는 프로젝트의 이름, 버전, 의존성, 그리고 스크립트 명령어 등이 포함되어 있다...

1. `console.log(getData)`정의: 이 코드는 `getData`라는 함수 자체를 출력한다.무엇을 출력하는가? 함수의 이름과 내용(정의)을 보여준다. 즉, 이 코드가 실행되면 "이 함수는 이렇게 생겼어!"라고 설명하는 것과 같다.출력 예시:ƒ getData() { return { name: "이정환", id: "winterlood", };}어떤 의미인가?이 코드는 단순히 `getData`라는 함수가 존재함을 보여주는 것이고, 이 시점에서는 아무것도 실행되지 않았다. 함수를 호출하지 않았기 때문에 함수가 반환하는 값은 확인할 수 없다. 2. `console.log(getData())`정의: 이 코드는 `getData`라는 함수를 호출하는 것이다.무엇을 출력하는가?함수가 호출되..

Promise(프라미스)는 자바스크립트에서 비동기 작업을 처리할 때 유용하게 사용되는 개념이다. 특히 Promise Chainning(프라미스 체이닝)을 통해 여러 비동기 작업을 순차적으로 처리할 수 있다. 공부하면서 이 과정에서 등장하는 '기존 프라미스'와 '반환된 프라미스'의 차이점을 이해하는 데 어려움이 있었다. 그래서 이번 글에서는 이 부분을 중점적으로 남겨본다. 1. 프라미스의 기본 개념프라미스는 비동기 작업의 성공 또는 실패 결과를 처리하기 위한 객체이다.비동기 작업이 완료되면 프라미스는 `resolve`를 통해 성공적인 결과를 반환하거나, `reject`를 통해 에러를 반환하게 된다.프라미스를 사용하면 비동기 작업을 보다 직관적으로 처리할 수 있다. 2. 기존 프라미스와 반환된 프라미스의..

자바스크립트에서는 모듈 시스템을 통해 코드를 분리하고, 필요한 부분만 불러와 사용할 수 있다.모듈 시스템은 특히 규모가 커진 프로젝트에서 코드를 관리하고 재사용하는 데 매우 유용하다. 웹 개발에서 자주 사용되는 두 가지 주요 모듈 시스템이 있다. CommonJS와 ES 모듈(ESM) 시스템이다. 1. CommonJS(CJS)CommonJS는 주로 Node.js 환경에서 사용하는 모듈 시스템이다. 서버사이드 자바스크립트에서 널리 사용되고, 코드를 모듈로 분리하고 가져오는 방법을 제공한다.(CommonJS가 서버에서 실행되는 자바스크립트 코드에서 널리 사용한다는 말. 쉽게 말해, 브라우저가 아닌 서버에서 자바스크립트를 사용할 때 CommonJS가 많이 쓰인다는 것이다.)특징 :`require`로 모듈 가져..

map 함수는 JavaScript의 배열 메서드 중 하나로, 배열의 각 요소에 대해 특정 작업을 수행하고 그 결과로 새로운 배열을 만들어준다.초보자가 이해하기 쉽게 구조와 사용 방법을 보면, 1. map 함수의 구조const newArray = originalArray.map((element, index, array) => { // 작업을 수행하고 반환할 값})originalArray(원본 배열)map 함수를 호출하는 배열. 이 배열의 각 요소에 대해 작업을 수행한다.예를 들어, const numbers = [1, 2, 3] 가 원본 배열이다.newArray(새로운 배열)map 함수가 반환하는 새로운 배열. 이 배열은 원본 배열의 각 요소에 대해 수행한 작업의 결과로 만들어진다.예를 들어, numbers..