sodol-dotcom

1. 첫 번째 방식: 함수 선언function sub() { console.log("i am sub");}main(sub);함수 선언을 사용해 sub 라는 이름의 함수를 먼저 정의한 후, 이 함수를 main 함수에 전달한다.이렇게 하면 sub 함수는 코드의 다른 부분에서도 사용할 수 있다. 즉, sub 라는 이름을 가진 함수가 어디에서든 접근 가능하다.가독성이 좋고 , 여러 곳에서 sub 함수를 재사용할 수 있다.  2. 두 번째 방식: 기명 함수 표현식main(function sub() { console.log("i am sub");}기명 함수 표현식을 사용하여 함수를 직접 main 함수에 전달한다. 여기서 함수는 이름을 가지고 있지만, 오직 main 함수에서만 사용된다.이 방식은 함수가 오직 ..

1. 문제 개요문제 제목: "Kim"의 위치 찾기문제 설명: 'seoul'이라는 배열에서 "Kim"이 있는 위치를 찾아 "김서방은 x에 있다"라는 문장으로 반환하는 문제이다. "Kim" 배열에 한 번만 등장하며, 잘못된 값이 입력되지 않음.  2. 문제 해결 전략단계 1: `indexOf` 메소드를 사용하여 배열 'seoul'에서 "Kim"의 위치(index)를 찾는다.단계 2: 찾은 위치(index)를 템플릿 리터럴을 사용하여 "김서방은 x에 있다"형식의 문자열로 변환한다.단계 3: 변환된 문자열을 반환하여 문제를 해결한다.  3. 코드 분석function solution(seoul) { // "Kim"의 위치를 찾는다. var index = seoul.indexOf("Kim"); /..

1. HTML 문서 읽기HTML 문서 요청: 사용자가 웹 페이지를 열면, 브라우저가 웹 서버에 HTML 문서를 요청한다. 웹 서버는 이 요청에 응답하여 HTML 문서를 브라우저로 보낸다.HTML 문서 수신: 브라우저는 HTML 문서의 내용을 네트워크를 통해 받아온다.2. HTML 파싱(Parsing)파싱(Parsing)*은 HTML 문서의 텍스트를 브라우저가 이해할 수 있는 구조로 변환하는 과정이다. 이 과정은 다음과 같이 진행된다:문서 파서(Document Parser): 브라우저가 HTML 문서를 문자 단위로 읽어들이며, 문서 파서가 이를 분석한다. 문서 파서는 HTML 태그와 내용을 이해하고 구조를 형성한다.토큰화(Tokenization): HTML 문서의 텍스트가 토큰(Token)이라고 불리는 작..

웹 페이지를 여는 과정:웹 브라우저: 웹 브라우저는 HTML 문서를 받아서 화면에 표시한다. 브라우저는 HTML 문서를 해석하여 화면에 보여주기 위해 내부적으로 문서를 처리한다.문서 파싱:파싱(Parsing): 파싱은 브라우저가 HTML 문서의 텍스트를 읽어들이고 이해할 수 있는 구조로 변환하는 과정이다. 즉, HTML 문서의 텍스트를 읽어들여 브라우저가 이해할 수 있는 형식으로 변환한다.파싱이 끝나면 브라우저는 이 구조를 DOM(Document Object Model)이라고 부르는 형태로 변환한다.DOM(Document Object Model)DOM: DOM은 웹 페이지의 구조를 JavaScript가 이해하고 조작할 수 있는 형태로 표현한 것이다. DOM은 HTML 문서의 각 요소를 객체로 변환하며, ..

1. 문제 개요문제 제목: 나누어 떨어지는 요소 찾기문제 설명: 주어진 배열의 각 요소 중에서 특정 divisor로 나누어 떨어지는 값을 찾아 오름차순으로 정렬한 배열을 반환한다. 만약 나누어 떨어지는 요소가 없다면 배열에 1을 담아 반환한다.  2. 문제 해결 전략단계 1: 배열 arr에서 divisor로 나누어 떨어지는 요소만 필터링한다.단계 2: 필터링된 결과가 비어 있는지 확인한다. 비어 있다면 배열에 1을 담아 반환한다.단계 3: 필터링된 배열이 있다면 오름차순으로 정렬하여 반환한다.  3. 코드 분석function solution(arr, divisor) { // arr에서 divisor로 나누어 떨어지는 요소만 필터링 var answer = arr.filter(num => num ..

호이스팅은 자바스크립트에서 변수와 함수 선언이 코드의 최상위로 끌어올려지는 동작을 말한다.1. 기본 개념1-1. 변수 호이스팅var 키워드로 선언된 변수는 선언만 최상위로 이동하고, 할당은 원래 위치에서 진행된다.예를 들어, 다음 코드를 살펴보자: function a(x) { console.log(x); // 1 var x; // 2 console.log(x); // 3 x = 2; // 4 console.log(x); // 5 } a(1);이 코드에서 var x;는 함수의 최상위로 끌어올려진다. 그래서 함수의 실행 흐름은 다음과 같다:첫 번째 console.log(x);는 매개변수 x의 값이 1이므로 1이 출력된..

자바스크립트에서는 함수를 정의하는 두 가지 주요 방법이 있다: 함수 선언식과 함수 표현식.이 두 가지 방법의 차이와 호이스팅이 어떻게 작용하는지에 대해 살펴보면, 1. 함수 선언식 (Function Declaration)함수 선언식은 함수 이름과 함께 정의한다. 자바스크립트는 코드 실행 전에 함수 선언을 자동으로 "호이스팅"한다. 이는 함수 선언이 코드의 맨 위로 끌어올려지는 것처럼 작동하여, 함수가 정의되기 전에도 호출할 수 있게 한다.예시:sayHello(); // "Hello" 출력function sayHello() { console.log("Hello");}여기서 sayHello 함수는 선언하기 전에 호출해도 문제없다. 자바스크립트가 코드 실행 전에 함수 선언을 호이스팅하기 때문에, sayH..

1. 할당 (Assignment)정의: 할당은 변수에 값을 저장하는 작업을 한다.예시:여기서 let x = 10;은 x라는 변수를 만들고, 그 변수에 10이라는 값을 저장한다. 이 값은 x 변수가 사용되는 코드 블록 내에서 참조할 수 있다. let x = 10; // x라는 변수에 10을 할당한다.  2. 반환 (Return)정의: 반환은 함수가 계산한 결과를 함수 호출자에게 전달하는 작업을 한다.예시:위 코드에서 add 함수는 return a + b;를 사용하여 함수 호출자에게 결과값을 반환한다. 이 반환된 값은 result 변수에 저장된다. function add(a, b) { return a + b; // a와 b를 더한 결과를 반환한다. } let result = add(2, 3); ..

step 1. 문제 코드코드를 접하게 된 과정비동기 데이터 처리를 연습하는 과정에서 async / await의 사용법을 익히기 위해 작성한 코드이다.fetch API를 사용하여 외부 데이터(여기서는 jsonplaceholder의 post)를 불러오는 간단한 예제이다.import { useState } from "react";import { useEffect } from "react";const App = () => { const [post, setPost] = useState(null); useEffect(() => { const fetchPost = async () => { try { const response = await fetch( "https://j..

step 1. 문제 코드import { useState, useEffect } from "react";const App = () => { useEffect(() => { fetch("https://jsonplaceholder.typicode.com/posts/1") .then((response) => response.json()) .then((json) => console.log(json)); }, []); return {/* {message} */};};export default App;  step 2. 코드 설명(1) 기능 개요이 코드는 컴포넌트가 화면에 나타날 때 useEffect 에 의해 비동기적으로 데이터를 가져온다. fetch 함수를 사용해서 URL에서 데이터를 요..