sodol-dotcom

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

기본값을 설정하는 이유와 방법을 이해하기 위한 글로, 기본값을 설정해주면 컴포넌트를 더 안전하게 사용할 수 있고 에러를 예방할 수 있다고 한다.  1. 기본개념: `props`란 무엇인가?React에서 `props`는 컴포넌트에 데이터를 전달할 때 사용하는 객체이다. 컴포넌트는 부모 컴포넌트로부터 `props`를 받아 자식 컴포넌트가 그 데이터를 화면에 표시하거나 동작을 처리하게 된다. 예를 들어, `Button` 컴포넌트(자식 컴포넌트)에 `color`라는 `props`가 전달되면 그 값을 이용해서 버튼의 색상을 정할 수 있다. 위 코드를 보면, `color="blue"`로 버튼의 색상이 설정된다.  2. `props`에 기본값을 설정해야 하는 이유만약 `Button` 컴포넌트에 `color`를 전달하..

React JSX에서 UI 구성할 때, 객체 전달 시 중괄호를 겹쳐서 두 번 사용하게 된다.  1. 첫 번째 중괄호 `{}`JSX에서 React 요소의 속성을 설정할 때, JavaScript 표현식을 사용하기 위한 중괄호이다.return {...}; // 첫 번째 중괄호  2. 두 번째 중괄호 `{}`첫 번째 중괄호 안에 JavaScript 객체를 정의할 때 두 번째 중괄호를 사용한다. 이 경우, 실제 객체의 속성-값 쌍을 정의하는 역할을 한다.즉, 중괄호가 겹쳐서 `{{}}` 형태로 사용하게 된다.const Main = () => { const user = { 이름: "이정환", isLogin: false, }; const userDetails = { age: 25, cit..

자바스크립트는 웹 페이지를 동적으로 만들 때 매우 중요한 역할을 하지만, HTML 태그 자체를 자바스크립트 코드로 직접 리턴할 수 없다. 그래서 JSX라는 특별한 문법을 사용하는데, 이것이 리액트에서 자바스크립트로 HTML과 비슷한 구문을 작성할 수 있게 도와준다.자바스크립트가 HTML 태그를 직접 리턴할 수 없는 이유https://sodol-dotcom.tistory.com/75  1. 기본 개념 이해:자바스크립트는 프로그래밍 언어로, 웹 페이지에서 여러 작업을 처리하고 데이터를 다루는 데 주로 사용된다. 자바스크립트로 HTML 태그를 만들려면 주로 `document.createElement` 같은 메서드를 사용해야 한다. 하지만 이 방식은 복잡하고 코드가 길어질 수 있다.HTML은 웹 페이지를 구조화..

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. Node.js란?Node.js는 자바스크립트를 웹 브라우저가 아닌 컴퓨터(서버)에서도 실행할 수 있게 해주는 도구(실행환경 = 런타임)이다.원래 자바스크립트는 브라우저에서만 실행되도록 설계되었지만, Node.js는 자바스크립트의 사용 범위를 확장하여 브라우저 외부에서도 자바스크립트를 구동할 수 있게 만들어졌다.(웹 페이지의 버튼을 클릭하거나 이미지를 보여주는 등의 작업을 할 때만 사용되었다가 Node.js 덕분에, 브라우저가 없이도 서버라는 곳에서 자바스크립트를 사용할 수 있게 되었다.)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. 기존 프라미스와 반환된 프라미스의..