kang-gicheon.log

[자바스크립트] - away, async문법

Thu, 10 Aug 2023 13:50:51 GMT

문법에 들어가기 앞서

JavaScript는 비동기적인 작업을 처리하기 위해 await와 async라는 키워드를 제공합니다. 이들은 JavaScript 개발자들이 비동기 코드를 더 읽기 쉽고 관리하기 쉽게 작성할 수 있게 해주는 강력한 기능입니다. 이 글에서는 await와 async의 개념과 예시 코드를 통해 이해해보겠습니다.

비동기 작업과 콜백 지옥

JavaScript는 싱글 스레드로 동작하며, 따라서 오랜 시간이 걸리는 작업을 동기적으로 처리하면 페이지가 블로킹되어 반응하지 않는 상황이 발생할 수 있습니다. 이런 문제를 해결하기 위해 비동기 작업이 등장했습니다. 그러나 콜백 패턴을 통한 비동기 코드 작성은 복잡하고 가독성이 떨어지는 문제를 야기했습니다. 이를 "콜백 지옥"이라고 부르며, 코드의 복잡성을 증가시켰습니다.

async 함수와 await 키워드

async 함수와 await 키워드는 비동기 코드를 더 쉽게 작성하고 관리할 수 있도록 도와줍니다. async 함수는 항상 프로미스를 반환하며, await 키워드는 프로미스가 처리될 때까지 함수의 실행을 일시 중단합니다.

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

위 예시에서 fetchData 함수는 비동기적으로 데이터를 가져오는데 사용됩니다. await 키워드는 fetch 함수와 response.json() 메서드가 프로미스를 반환하는 것을 기다려줍니다. 오류 처리는 try...catch 블록을 사용하여 간단하게 처리할 수 있습니다.

await과 병렬 처리

await는 코드의 실행을 블로킹하지만, 여러 개의 비동기 작업을 동시에 수행하고 싶을 때도 있습니다. 이럴 때 Promise.all() 메서드를 사용하여 병렬 처리할 수 있습니다.

async function fetchMultipleData() {
    try {
        const promises = [
            fetch('https://api.example.com/data1'),
            fetch('https://api.example.com/data2'),
            fetch('https://api.example.com/data3')
        ];
        const responses = await Promise.all(promises);
        const data = await Promise.all(responses.map(response => response.json()));
        return data;
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

위 코드에서는 세 개의 데이터를 병렬로 가져오는 방법을 보여줍니다. 모든 프로미스가 처리될 때까지 기다린 후에 결과를 반환합니다.

결론

await와 async는 JavaScript의 비동기 코드를 더 효과적으로 작성하고 관리하는 데 도움을 주는 강력한 기능입니다. 콜백 지옥을 피하고 가독성 높은 코드를 작성하며, 병렬 처리 등 다양한 비동기 작업을 쉽게 다룰 수 있습니다. 이러한 기능을 활용하여 더 나은 사용자 경험을 제공하는 웹 애플리케이션을 개발할 수 있습니다.

[React] - LifeCycle? & useEffect 배워보기

Mon, 31 Jul 2023 15:09:58 GMT

Lifecycle은 주로 리액트에서 생성한 컴포넌트에 사용하는 개념입니다. 컴포넌트 또한 인생이 있다라는 생각으로 가볍게 이해하시면 좋을거 같습니다.

컴포넌트 LifeCycle

컴포넌트 3가지 lifecycle개념을 가지고 있는데 다음과 같습니다

컴포넌트는 생성이 될 수도 있습니다(=mount)
재렌더링이 될 수도 있습니다(=update)
삭제가 될 수도 있습니다(=unmount)

이러한 컴포넌트의 lifecycle 개념을 익히는 이유는 컴포넌트의 중간중간 코드실행을 위해 필요한 개념입니다, 중간중간 코드실행하는 방식을 "간섭한다"라고 정의하겠습니다. (ex. 컴포넌트가 장착이 될때, 또는 업데이트 될 때 특정 코드를 실행할 수 있음)

Lifecycle 중간 코드실행 방법

(ex)

상세 페이지 컴포넌트 나타나기 전에 특정 코드 실행

상세 페이지 컴포넌트 사라지기 전에 특정 코드 실행 등등 코드를 실행하기 위해 간섭이 가능하며 hook(=갈고리)를 이용합니다

hook을 이용한 Lifecycle 이용해보기

import {useState, useEffect} from 'react';

function Detail(){

  useEffect(()=>{
    //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됩니다.
    console.log('안녕')
  });

  return (생략)
}

useEffectf를 상단에 먼저 import 시켜준 후 사용해줍니다, 콜백함수 console.log('안녕')를 추가하여 코드에 적으면 Detail 페이지 로드시 콘솔창에 안녕이 출력됩니다.

useEffect

useEffect 문법은 html 렌더링 이후에 동작하는 특징을 가지고 있습니다. 실행이 오래 걸리는 코드가 있다면 useEffect를 활용해서 렌더링 시간 감소를 할 수 있습니다.

function Detail(){

  for(let i = 0 ; i < 1000000000000000000 ; i++) {
  console.log(i)
  }
  return (생략)
}

예를 들어 이런 코드가 있을시 useEffect를 활용해서

function Detail(){

  useEffect(()=>{
    for(let i = 0 ; i < 1000000000000000000 ; i++) {
  console.log(i)
  }
  });

  return (생략)
}

이런 식으로 활용해서 웹페이지를 제작시 코드의 실행 시점을 조절해 html 렌더링을 빠르게 할 수 있습니다.

[React] - styled-component

Sun, 30 Jul 2023 12:42:10 GMT

styled-component를 사용하는 이유

리액트의 컴포넌트가 늘어나면서 각각의 스타일링을 하게 되면 여러 상황들이 생깁니다.

제작한 class를 잊고 중복해서 만드는 상황
스타일을 적용할 생각이 없는 컴포넌트에 적용 되는 상황
CSS 파일이 너무 길어져서 수정이 어려운 상황

이러한 상황들을 방지하기 위해서 styled-component를 이용하여 스타일을 바로 입힐 수 있습니다.

styled-component 라이브러리 설치

터미널에 라이브러리 설치하는 명령을 입력합니다.

npm install styled-components

or

yarn add styled-components

설치 후 사용할 컴포넌트에 import styled from 'styled-components' 를 입력하시면 됩니다.

styled-component 사용해보기

import styled from 'styled-components';

let Box = styled.div`
  padding : 20px;
  color : grey
`;
let YellowBtn = styled.button`
  background : yellow;
  color : black;
  padding : 10px;
`;

function Detail(){
  return (
    
      
        버튼 테스트
      
    
  )
}

div태그로 제작시 styled.div, p태그로 제작시 styled.p 식으로 작성하면 됩니다.
문단은 끝에 백틱(``)기호를 이용하고 백틱사이에 CSS 스타일을 넣을 수 있습니다.
변수 선언 방식으로 따로 저장해서 사용합니다.

styled-component의 장점

CSS 파일 오픈할 필요없이 JS 파일에서 바로 스타일을 넣을 수 있습니다.

적은 스타일이 다른 JS 파일로 오염되지 않습니다. 원래 CSS파일은 오염됩니다.

페이지 로딩시간을 단축할 수 있습니다.

styled-component의 단점

JS 파일이 매우 복잡해집니다.

그리고 이 컴포넌트가 styled 인지 아니면 일반 컴포넌트인지 구분도 어렵습니다.

JS파일 간 중복 디자인이 많이 필요할시
다른 파일에서 스타일 넣은 것들을 import를 하면 되니 그냥 CSS와 차이가 없다는 점이 생깁니다.

CSS 담당하는 디자이너가 있다면 협업시

협업한 사람이 styled-components 문법을 모른다면

CSS로 짠걸 styled-components 문법으로 다시 바꾸는 작업이 필요하여 진행이 늦어질 수 있습니다.

[React] - nested routes 문법 활용

Sat, 29 Jul 2023 11:35:56 GMT

nested-routes 문법은 특정 웹페이지에서 서브경로를 제작할시 주로 사용합니다 또한 여려개의 유사한 페이지를 작성할때 사용되는 문법입니다.

nested routes 이용 전 코드 제작

서브경로를 제작하기전에 location으로 이동하는 Route 코드를 만들겠습니다


회사 } />

URL 주소에 /company 입력할시 div에 감싸져 있는 회사가 출력됩니다 만약 여기서 company 이후로 추가적인 URL을 만들시에는


회사 } />
멤버들 } />
위치 } />

이런식으로 /company/member 또는 /company/location로 이동되어 div에 입력된 멤버, 위치 가 출력되게 됩니다.

nested routes 이용해보기

Route 경로에 추가적인 경로를 제작할시에는 /company/member 첫 URL을 계속 먼저 작성 후, 새로운 URL을 작성해야 합니다 그러나, nested routes 문법을 이용하여 새로운 Route 경로를 만들 수 있습니다

처음에 작성했던


회사 } />
멤버들 } />
위치 } />

이 코드를


회사 }>
멤버들 } />
위치 } />

이렇게 Route태그에 또 다르게 감싸서 이용할 수 있습니다(div태그와 비슷한 개념입니다)

[리액트] - useNavigate

Fri, 28 Jul 2023 14:42:25 GMT

useNavigate 컴포넌트는 router-dom 라이브러리에서 지원하는 컴포넌트로 Link의 컴포넌트와 다르게 함수형을 선언하여 페이지 이동 기능을 구현할때 자주 사용하는 기능입니다.

import 우선 설정

사용을 위해 react-app에서

import { Routes, Route, Link, useNavigate } from 'react-router-dom'

필요한 컴포넌트를 우선 import 시킨 후 시작합니다.

페이지 이동을 위한 useNavigate()

페이지 이동을 위해서 Link를 사용할 수 있으나 useNavigate 또한 활용할 수 있습니다.

function App(){
  let navigate = useNavigate()

  return (
    (...생략)
    
  )
}

useNavigate 함수를 이용한 예시코드입니다. 사용한 함수를 이용해 navigate('/detail') 코드가 실행되면 /detail 페이지로 이동할 수 있습니다.

useNavigate 추가 기능 useNavigate 괄호() 자리에 숫자를 집어넣는다면 페이지 앞으로 가기, 뒤로 가기 기능개발 또한 가능합니다.
ex)

-1을 넣을시 뒤로 1번가기

2를 넣는다면 앞으로 2번 가기 기능

+) 잘못된 URL로 들어갈 경우 404에러 페이지

페이지를 이용하는 유저가 이상한 경로고 접속했을 경우를 대비하고 싶다면

존재하지 않는 페이지입니다. } />

Route path="*" 라는 코드를 만들어 제작에 하단에 배치하면 제작이 가능합니다.

** 경로는 모든 경로를 뜻하며 따로 제작한 페이지가 아니면 * 경로로 이동시켜줍니다.*

[리액트] - Router활용

Fri, 28 Jul 2023 13:53:52 GMT

리액트에서 각 페이지를 나누는 기능을 구현할때 사용하는 라이브러리인 router-dom을 배워보겠습니다. 기존 방식(html, css, js)이라면 html 파일 여러개를 제작하여 이용하지만 리액트에서는 html파일을 하나만 사용합니다.

router 설치 방식

VSC 터미널을 이용하여 라이브러리를 설치합니다 명령어는 아래와 같습니다.

yarn add react-router-dom

or

npm install react-router-dom

Router 라이브러를 사용하기 위한 셋팅

설치한 리액트앱에서 index.js로 들어간 후

(...)
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
      
        
      
  
);

import {BrowserRouter} from "react-router-dom"을 이용하여 임포트 시킨 후

를  태그로 감싸 셋팅을 완료합니다

라우터로 페이지 나누기

import { Routes, Route, Link } from 'react-router-dom'

우선 리액트앱 -> App.js에서 라이브러리 사용을 위한 import를 우선 해줍니다

상단에 Routes, Route, Link 컴포넌트를 import 시켜줍니다

Routes 태그를 먼저 생성하고 그 안에 Route를 작성합니다.

Route path="/url경로" element={ <보여줄html> } /

이런 식으로 코드를 작성하여 이용합니다

ex) 메인페이지의 경우

Route path="/u" element={ 메인페이지 } /

이렇게 메인페이지를 작성 할 수 있습니다.

Link 컴포넌트

일반적으로 사용자가 사이트를 이용하는 경우 사이트의 URL을 수정해서 사용하지 않습니다, 웹페이지 제작할시 특정 페이지를 이동하는 링크를 이용하기 때문에 따로 만들어 줄 필요가 있습니다.

Router-dom에서 Link 컴포넌트를 import 시켜줍니다.

import를 시켜줬다면 링크를 넣고자 하는 위치에 Link 태그를 넣어 사용합니다.

홈
상세페이지

이런 식으로 각각의 URL 경로로 이동하는 링크를 생성할 수 있습니다.

[자바스크립트] - 반복문(Loop) 학습하기

Thu, 27 Jul 2023 14:07:39 GMT

JavaScript의 반복문은 프로그램에서 동일한 작업을 여러 번 반복하여 수행하는 데에 사용됩니다. 이를 통해 반복적인 작업을 자동화하고, 코드의 중복을 피하며, 데이터를 효율적으로 처리할 수 있습니다. JavaScript에서는 주로 for문과 while문이 가장 많이 사용되며, 각각의 반복문은 특정 상황에 적합하게 사용됩니다.

for문:
for문은 특정 조건이 참인 동안에 반복적으로 코드 블록을 실행하는 데에 사용됩니다. 주로 특정 범위 내의 값들을 반복 처리할 때 유용하며, 반복 횟수를 정확히 알고 있을 때 적합합니다.

while문:
while문은 특정 조건이 참인 동안에 반복적으로 코드 블록을 실행하는 데에 사용됩니다. 주로 반복 횟수를 정확히 예측하기 어려울 때나, 조건에 따라 반복을 유연하게 제어해야 할 때 유용합니다.

이제 각 반복문의 예시 코드와 동작 방식, 그리고 어떤 경우에 이러한 구문들을 사용하는지 살펴보겠습니다.

for문

예시코드




    for문 예시


    for문
    for문은 다음과 같은 형식으로 작성됩니다:
        for (초기화; 조건; 증감) {
        // 조건이 참인 동안 반복적으로 실행되는 코드
    }
    
    예시 코드:
        for (let i = 0; i < 5; i++) {
        document.write(i + " ");
    }

위 예시 코드에서는 변수 i를 0부터 시작하여 5보다 작을 때까지 1씩 증가시키며 반복적으로 코드 블록을 실행합니다. 따라서 출력 결과는 "0 1 2 3 4"가 됩니다.

while문

예시 코드




    while문 예시


    while문
    while문은 다음과 같은 형식으로 작성됩니다:
        while (조건) {
        // 조건이 참인 동안 반복적으로 실행되는 코드
    }
    
    예시 코드:
        let count = 0;
    while (count < 5) {
        document.write(count + " ");
        count++;
    }

위 예시 코드에서는 변수 count가 5보다 작을 때까지 반복적으로 코드 블록을 실행합니다. 초기값으로 count는 0으로 설정되고, 반복마다 count가 1씩 증가합니다. 따라서 출력 결과는 "0 1 2 3 4"가 됩니다.

반복문은 데이터의 집합이나 배열과 함께 사용되어, 반복적인 작업을 수행하거나 배열의 각 요소에 접근하여 처리하는 등 다양한 상황에서 유용하게 사용됩니다. 또한, 반복 횟수를 예측하기 어려운 경우에는 while문이 유연한 조건 제어를 제공하여 사용됩니다. 반복문을 적절하게 활용하면 더 효율적이고 간결한 코드를 작성할 수 있습니다.

[자바스크립트] - if, switch문 학습

Thu, 27 Jul 2023 14:00:56 GMT

JavaScript에서 조건문은 프로그램의 흐름을 제어하고, 다양한 상황에 따라 코드를 실행할 수 있게 해줍니다. 두 가지 주요한 조건문인 if문과 switch문은 프로그래밍에서 자주 사용되는 도구로, 각각 다른 상황에 적합하게 사용됩니다.

이 글에서는 if문과 switch문의 개념을 예시 코드를 통해 자세히 설명하고, 각각의 동작 방식을 살펴보겠습니다. 이를 통해 JavaScript 개발자들이 조건문을 효과적으로 활용하여 프로그램을 작성하는 데에 도움이 될 것입니다.

IF문

if문은 JavaScript에서 가장 기본적인 조건문으로, 특정 조건이 참인 경우에만 코드 블록을 실행합니다. 조건이 참이 아닌 경우, 해당 코드 블록은 무시되고 실행되지 않습니다.

예시코드

Copy code



    if문 예시


    if문
    if문은 다음과 같은 형식으로 작성됩니다:
        if (조건) {
        // 조건이 참일 때 실행되는 코드
    } else {
        // 조건이 거짓일 때 실행되는 코드 (옵션)
    }
    
    예시 코드:
        const num = 10;

    if (num > 0) {
        document.write("num은 양수입니다.");
    } else {
        document.write("num은 음수입니다.");
    }

위 예시 코드에서는 num 변수의 값이 0보다 큰지 확인하여 조건을 평가합니다. num이 10으로 초기화되었으므로, 조건 num > 0은 참이 되어 "num은 양수입니다."가 출력됩니다.

switch문

switch문은 if문과 유사한 조건문이지만, 특정 변수의 값에 따라 다른 조건들을 비교하고 실행할 수 있습니다.

예시코드

Copy code



    switch문 예시


    switch문
    switch문은 다음과 같은 형식으로 작성됩니다:
        switch (변수) {
        case 값1:
            // 변수가 값1과 일치할 때 실행되는 코드
            break;
        case 값2:
            // 변수가 값2와 일치할 때 실행되는 코드
            break;
        // 추가적인 case문들을 작성할 수 있습니다.
        default:
            // 모든 case에 해당하지 않을 때 실행되는 코드 (옵션)
    }
    
    예시 코드:
        const fruit = 'apple';

    switch (fruit) {
        case 'banana':
            document.write("바나나입니다.");
            break;
        case 'apple':
            document.write("사과입니다.");
            break;
        default:
            document.write("기타 과일입니다.");
    }

위 예시 코드에서는 fruit 변수의 값이 'apple'인지 확인하여 switch문 내부의 case문들을 비교합니다. fruit가 'apple'과 일치하므로 "사과입니다."가 출력됩니다.

if문과 switch문은 서로 다른 상황에 따라 사용될 수 있으며, 개발자는 코드의 가독성과 유지보수를 고려하여 적절한 조건문을 선택할 수 있어야 합니다. 간단한 조건에 대해서는 if문을 사용하고, 복잡한 다중 조건인 경우에는 switch문이 유용합니다.

[자바스크립트] - Array 함수

Mon, 17 Jul 2023 14:46:02 GMT

자바스크립트는 Array 객체에 다양한 함수를 제공하여 배열 데이터를 조작하고 처리하는 데 도움을 줍니다. 이 글에서는 자바스크립트의 주요 Array 함수들에 대해 설명하고, 각 함수의 예시 코드와 실행 방법에 대해 알아보겠습니다.

push()

push() 함수는 배열의 끝에 하나 이상의 요소를 추가합니다. 예시 코드:

const fruits = ['apple', 'banana', 'orange'];
fruits.push('grape');
console.log(fruits); // ['apple', 'banana', 'orange', 'grape']

pop()

pop() 함수는 배열의 마지막 요소를 제거하고 반환합니다. 예시 코드:

const fruits = ['apple', 'banana', 'orange'];
const removedFruit = fruits.pop();
console.log(removedFruit); // 'orange'
console.log(fruits); // ['apple', 'banana']

shift()

shift() 함수는 배열의 첫 번째 요소를 제거하고 반환합니다. 예시 코드:

const fruits = ['apple', 'banana', 'orange'];
const removedFruit = fruits.shift();
console.log(removedFruit); // 'apple'
console.log(fruits); // ['banana', 'orange']

unshift()

unshift() 함수는 배열의 앞에 하나 이상의 요소를 추가합니다. 예시 코드:

const fruits = ['apple', 'banana', 'orange'];
fruits.unshift('grape', 'kiwi');
console.log(fruits); // ['grape', 'kiwi', 'apple', 'banana', 'orange']

splice()

splice() 함수는 배열의 특정 위치에서 요소를 추가하거나 제거합니다. 예시 코드:

const fruits = ['apple', 'banana', 'orange'];
fruits.splice(1, 0, 'grape', 'kiwi');
console.log(fruits); // ['apple', 'grape', 'kiwi', 'banana', 'orange']

fruits.splice(2, 2);
console.log(fruits); // ['apple', 'grape', 'orange']

slice()

slice() 함수는 배열의 일부분을 추출하여 새로운 배열로 반환합니다. 예시 코드:

const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];
const slicedFruits = fruits.slice(1, 4);
console.log(slicedFruits); // ['banana', 'orange', 'grape']

concat()

concat() 함수는 두 개 이상의 배열을 병합하여 새로운 배열을 반환합니다. 예시 코드:

const fruits = ['apple', 'banana'];
const vegetables = ['carrot', 'tomato'];
const combined = fruits.concat(vegetables);
console.log(combined); // ['apple', 'banana', 'carrot', 'tomato']

indexOf()

indexOf() 함수는 배열에서 특정 요소의 인덱스를 반환합니다. 요소가 없으면 -1을 반환합니다. 예시 코드:

const fruits = ['apple', 'banana', 'orange'];
const index = fruits.indexOf('banana');
console.log(index); // 1

const notFoundIndex = fruits.indexOf('kiwi');
console.log(notFoundIndex); // -1

위에서 소개한 함수들은 자바스크립트 Array 객체의 일부분입니다. Array 객체는 다양한 함수와 속성을 가지고 있으며, 이를 통해 배열 데이터를 효율적으로 다룰 수 있습니다.

[React] - Class 컴포넌트

Mon, 17 Jul 2023 13:13:29 GMT

리액트에서 컴포넌트를 제작시 function을 이용해 컴포넌트를 제작하지만 class 문법을 사용해서도 컴포넌트를 만들 수 있습니다. 예시 코드를 이용해 만들어 보겠습니다

Class 컴포넌트 만드는 법

class test extends React.Component {
  constructor(){
    super()
  }

  render(){
    return (
      안녕
    )
  }

}

test라는 컴포넌트 이름을 먼저 작명합니다

constructor(), super(), render() 함수 3개를 작성해 class 컴포넌트의 템플릿을 먼저 작성합니다

HTML의 축약을 위해서 사용하는게 컴포넌트이므로 return 안에 축약할 HTML을 적습니다

이후에 테스트 컴포넌트를 이용할때마다 div값에 안녕이 저장되어 출력이 됩니다.

Class 컴포넌트에서 state를 만드는 방법

class test extends React.Component {
  constructor(){
    super();
    this.state = {
      name : 'kim',
      age : 20
    }
  }

  render(){
    return (
      안녕 { this.state.name }
    )
  }

}

this.state라는 임시 변수를 만들고 object 형식으로 state를 나열합니다.

state를 사용한다면 {this.state.state이름}으로 작성해서 사용합니다.

Class 컴포넌트에서 state 변경

class test extends React.Component {
  constructor(){
    super();
    this.state = {
      name : 'kim',
      age : 20
    }
  }

  render(){
    return (
      안녕 { this.state.age }
        
      
    )
  }

}

state 변경을 원할시 this.setState라는 기본함수를 제작하여 사용합니다(작명 자유)

소괄호 안에 새로운 state를 넣으면 기존 state가 업데이트 되어 출력됩니다.

Class 컴포넌트에서 props를 사용하려면

class test extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      name : 'kim',
      age : 20
    }
  }

  render(){
    return (
      안녕 { this.props.프롭스이름 }
    )
  }

}

constructor, super에 props 파라미터를 등록합니다

this.props 사용해 출력합니다

[자바스크립트] - 변수 선언(var, let, const)

Sun, 16 Jul 2023 12:18:03 GMT

자바스크립트에서 변수를 선언하는 방식에는 var, let, const 세 가지가 있습니다. 이들의 차이점을 이해하고 올바른 변수 선언 방식을 선택하는 것은 자바스크립트 개발에서 중요한 부분입니다. 이 글에서는 var, let, const의 차이점과 let을 더 많이 사용하는 이유에 대해 알아보겠습니다. 또한, 예시 코드를 통해 개념을 명확히 이해할 수 있도록 하겠습니다.

var

var는 ES5 이전의 자바스크립트에서 사용되던 변수 선언 키워드입니다. var로 선언된 변수는 함수 스코프를 가지며, 호이스팅(hoisting)이 발생합니다. 호이스팅은 변수 선언문을 해당 스코프의 맨 위로 끌어올리는 동작을 말합니다. 또한, var로 선언된 변수는 중복 선언이 허용되며, 값의 재할당이 가능합니다. 예시 코드:

javascript
Copy code
function example() {
  var x = 10;
  if (true) {
    var x = 20; // 동일한 변수 x를 재선언
    console.log(x); // 출력: 20
  }
  console.log(x); // 출력: 20
}

example();

let

let은 ES6에서 도입된 블록 스코프를 가지는 변수 선언 키워드입니다. let으로 선언된 변수는 중복 선언이 허용되지 않으며, 블록 내에서만 유효한 범위를 가집니다. 또한, 호이스팅은 발생하지 않습니다. let은 var와 비교하여 더 엄격한 변수 선언 규칙을 가지고 있으며, 가독성과 유지보수성을 향상시킵니다. 예시 코드:

javascript
Copy code
function example() {
  let x = 10;
  if (true) {
    let x = 20; // 새로운 변수 x를 선언
    console.log(x); // 출력: 20
  }
  console.log(x); // 출력: 10
}

example();

const

const는 상수를 선언하는 키워드로, let과 마찬가지로 블록 스코프를 가집니다. const로 선언된 변수는 재할당이 불가능하며, 선언과 동시에 초기화해야 합니다. const는 객체나 배열의 경우에도 재할당이 불가능하지만, 객체나 배열 내부의 속성이나 요소는 변경할 수 있습니다. 예시 코드:

javascript
Copy code
function example() {
  const x = 10;
  if (true) {
    const x = 20; // 새로운 변수 x를 선언
    console.log(x); // 출력: 20
  }
  console.log(x); // 출력: 10
}

example();

+) let의 선호 이유

let은 블록 스코프를 가지고 있으며, 호이스팅이 발생하지 않기 때문에 변수의 범위와 생명 주기를 명확하게 파악할 수 있습니다. 또한, 중복 선언을 방지해주기 때문에 실수로 같은 이름의 변수를 재사용하는 문제를 방지할 수 있습니다. 이러한 이유로 let은 가독성과 유지보수성을 향상시키는 데에 더 적합한 변수 선언 방식입니다.

자바스크립트에서 변수를 선언할 때는 var, let, const 중 어떤 키워드를 사용할지 결정해야 합니다. var는 호이스팅과 중복 선언을 허용하는 반면, let과 const는 블록 스코프를 가지며 중복 선언이 불가능합니다. let은 var보다 엄격한 규칙을 가지고 있고, 가독성과 유지보수성을 향상시키기 때문에 더 많이 사용됩니다. 앞으로는 let을 활용하여 변수를 선언하는 것을 권장합니다.

[자바스크립트] - 데이터 타입 공부

Sun, 16 Jul 2023 12:10:42 GMT

자바스크립트는 동적 타입 언어로, 변수의 타입을 선언하지 않고도 값을 할당할 수 있습니다. 이러한 특성 때문에 자바스크립트의 데이터 타입을 이해하는 것은 중요합니다. 이 글에서는 자바스크립트의 기본 타입과 참조 타입에 대해 알아보겠습니다. 또한, 각각의 예시 코드를 통해 개념을 명확히 이해할 수 있도록 하겠습니다.

기본 타입 (Primitive Types)

자바스크립트의 기본 타입에는 다음과 같은 타입들이 있습니다. 숫자 (Number): 정수와 부동소수점 숫자를 모두 포함합니다. 문자열 (String): 문자들의 집합으로, 작은따옴표나 큰따옴표로 감싸서 표현합니다. 불리언 (Boolean): true 또는 false 값을 가집니다. null: 값이 없음을 나타냅니다. undefined: 값이 할당되지 않았음을 나타냅니다. 심볼 (Symbol): 유일하고 변경 불가능한 데이터 타입입니다. ES6에서 추가되었습니다. 예시 코드:

javascript
Copy code
let number = 42;
let string = 'Hello, world!';
let boolean = true;
let nullValue = null;
let undefinedValue = undefined;
let symbol = Symbol('mySymbol');

console.log(typeof number);       // 출력: "number"
console.log(typeof string);       // 출력: "string"
console.log(typeof boolean);      // 출력: "boolean"
console.log(typeof nullValue);    // 출력: "object" (주의: typeof null은 "object"를 반환합니다)
console.log(typeof undefinedValue);   // 출력: "undefined"
console.log(typeof symbol);       // 출력: "symbol"

참조 타입 (Reference Types)

자바스크립트의 참조 타입에는 객체 (Object)와 배열 (Array)이 있습니다. 참조 타입은 기본 타입과 달리 실제 데이터가 저장된 메모리 주소를 참조하고 있습니다. 객체 (Object): 속성들의 집합으로, 중괄호({})를 사용하여 정의하며, 속성은 "키: 값" 형태로 표현됩니다. 배열 (Array): 값들의 순서화된 목록으로, 대괄호([])를 사용하여 정의하며, 값들은 쉼표로 구분됩니다. 예시 코드:

javascript
Copy code
let object = { name: 'John', age: 25 };
let array = [1, 2, 3, 4, 5];

console.log(typeof object);  // 출력: "object"
console.log(typeof array);   // 출력: "object"

결론: 자바스크립트는 기본 타입과 참조 타입을 가지고 있으며, 이를 이해하는 것은 프로그래밍 언어를 잘 다루는 데 있어서 중요한 요소입니다. 기본 타입은 숫자, 문자열, 불리언, null, undefined, 심볼로 구성되어 있고, 참조 타입은 객체와 배열로 구성되어 있습니다. 이 글을 통해 자바스크립트의 데이터 타입을 이해하고, 적절하게 활용할 수 있기를 바랍니다.

[React] - Input 공부하기

Sun, 16 Jul 2023 12:02:01 GMT

Input 태그 사용하기

input 태그를 응용하기 이전에 사용한 태그 설명입니다

글자를 작성할 수 있는 칸을 생성하는 태그

길이를 조절 할 수 있는 칸을 생성하는 태그

연, 월, 일 등 달력을 생성하는 태그

숫자를 생성하고 올리고, 줄일 수 있게 생성하는 태그

글자를 작성할 수 있는 칸을 생성하는 태그(작성칸 조절 가능)

Input태그를 이용하여 무언가를 입력시 코드를 실행시키기

사용자가 input에 뭔가 입력시 코드를 실행해주고 싶은 상황이 올때 onChange와 onInput 이벤트 핸들러를 이용합니다.

{ 실행할코드 }}/>

onChange, onInput은 input에 유저가 무언가를 입력할때마다 작성한 코드를 실행해줍니다. 실행할 코드 안에 console.log(1)을 넣어 테스트해보는게 학습에 큰 도움이 됩니다.

Input에 입력한 값 가져오는 법

{ console.log(e.target.value) }}/>

e라는 파라미터를 추가하고 e.target.value에 적으면 현재 input에 입력된 값을 가져 올 수 있습니다 **결과는 콘솔창에서 확인합니다**

e.target = 이벤트가 발생한 곳을 알려줍니다

e.preventDefault() 이벤트의 기본 동작을 막아줍니다

e.stopPropagation() 이벤트의 버블링을 막아줍니다

사용자가 input에 입력한 데이터 저장하기

function App (){

  let [입력값, 입력값변경] = useState('');
  return (
    { 
      입력값변경(e.target.value) 
      console.log(입력값)
    }} />
  )
}

state를 하나 만들어 준 후 onChange가 될 때마다 state에 e.target.value에 넣게 코드를 작성했습니다

state에 문자를 저장하고 싶으나 기본값을 무엇을 넣을지 모르겠다면 따옴표 2개를 입력해 빈 문자로 먼저 선언합니다

입력값이라는 state를 필요한 곳에서 사용하면 됩니다.

[React] - props

Tue, 11 Jul 2023 01:44:17 GMT

실습을 위한 예제코드

function App (){
  let [title, setTitle] = useState(['게시물1', '게시물2', '게시물3']);
  return (
    
      
    
  )
}

function Modal(){
  return (
    
      { title[0] }
      날짜
      상세내용
    
  )
}

function **Modal** 내부에 title state를 넣을땐 이런식으로 작성하지만 실행이 되지 않습니다.

Modal function 내부에 title state 변수가 선언되지 않아 title이 not define, 즉 선언되지 않았다는 에러가 출력됩니다.

자바스크립에서는 다른 함수에 있는 변수를 마음대로 가져다 쓸 수 없습니다

그러나 컴포넌트 2개가 부모 / 자식 관계인 경우에 가능합니다 (다른 컴포넌트 안에 있는 컴포넌트를 자식 컴포넌트라고 부릅니다)

부모 컴포넌트의 state를 자식 컴포넌트로 전송할 수 있으며 자식도 전송받은 state를 사용할 수 있습니다. 전송시에는 props라는 문법을 사용합니다.

Props를 이용한 부모에서 자식으로 state 전송

사용하기 위한 2개의 단계가 있습니다

자식 컴포넌트를 사용하는 곳에 가서 <자식컴포넌트 작명={state이름} />

2. 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props.작명 사용

자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={state이름} />

자식컴포넌트 만드는 곳에 가서 props라는 파라미터 등록 후 props.작명을 사용해서 작성했습니다

Props 참고사항

props는 등등 무한한 전송이 가능합니다(단 코드 복잡해짐 주의)

꼭 state만 전송할 수 있는 것은 아닙니다.

함수 파라미터 문법을 응용하기

function Modal(props){
  return (
    
      { props.title[0] }
      날짜
      상세내용
    
  )
}

Modal class에서 style을 지정해서 배경을 변경하는 방법은 JSX를 이용해서 스타일 넣으면 되지만 다른 스타일이 필요하다면

function Modal2(){}

function Modal3(){}.... 이런식으로 컴포넌트를 여러개 만들어서 배경색을 다르게 할 수 있으나 내용이 같고 배경색만 다르게 한다면 여러개 함수를 만들 필요는 없습니다.

function Modal(props){
  return (
    
      { props.글제목[0] }
      날짜
      상세내용
    
  )
}

props.color 이런 식으로 지정해서 컴포넌트를 사용할때

이렇게 작성하여 비슷한 컴포넌트를 만들 필요 없게 생성 할 수 있습니다.

[React] - Map함수

Mon, 10 Jul 2023 14:02:09 GMT

Map 함수의 3가지 기능

array에 들어있는 자료갯수 만큼 코드를 반복 실행해줍니다.

콜백 함수에 파라미터를 작명할시 array안에 있던 모든 자료를 하나씩 출력합니다.

return 안에 담을시 array에 담아 출력합니다.

let array = [2,3,4];
array.map(function(){
  console.log(1)
});

1번 기능 : array에 들어있는 자료갯수 만큼 코드를 반복 실행

[2,3,4]배열을 만들어서 let으로 선언한 array변수에 저장합니다.

console.log로 임의의 값(1)을 출력하게 하여 확인합니다.

array의 갯수(3개)만큼 1을 3번 출력하는 결과를 얻게 됩니다. chrome 개발자도구(F12)콘솔에서 입력시 결과를 확인할 수 있습니다.

let array = [2,3,4];
array.map(function(a){
  console.log(a)
});

2번 기능 : 콜백 함수에 파라미터를 작명할시 array안에 있던 모든 자료를 하나씩 출력

[2,3,4]배열을 만들어서 let으로 선언한 array변수에 저장합니다.

함수안에 a라는 파라미터(매개변수)를 작명하여 작성합니다(매개변수 작명은 자유)

array의 안에 있는 값인 2,3,4가 출력되는 모습입니다.

let array = [2,3,4] let newArray = array.map(function(a){ return a * 10 }); console.log(newArray)

3번 기능 : return 안에 담을시 array에 담아 출력

**배열과 콜백함수에 파라미터를 정렬하는 방법은 위와 같습니다.**

return, 반환값을 받을 수 있게 작성한 후 임의의 계산을 집어넣습니다 a * 10

array에 담은 변수들을 출력하여 newArray가 [20,30,40]이 출력됩니다

React- JSX안에서 HTML을 반복 생성하고 싶다면

function App (){
  return (
    
      { 
        [1,2,3].map(function(){
          return ( 안녕 )
        }) 
      }
    
  )
}

이런식으로 출력시 안녕이 3번 실행되게 됩니다. 원리는 기능 1번과 같습니다.

동작원리 [1,2,3]에 map을 붙여서 그 안의 자료 갯수 만큼 map 내부코드 실행, return안에 안녕이 있으므로 array에 3번을 담아 출력합니다

[자바스크립트] - 함수문법

Sun, 09 Jul 2023 10:44:07 GMT

자바스크립트 함수 문법

자바스크립트에서 함수는 코드의 재사용을 위해 사용되는 중요한 개념입니다. 함수는 특정 작업을 수행하고 값을 반환할 수 있습니다.

함수 선언

함수를 선언하는 방법은 다음과 같습니다:

javascript Copy code function functionName(parameter1, parameter2) { // 함수의 코드 작성 // ... } 위의 코드에서 functionName은 함수의 이름이고, parameter1과 parameter2는 함수에 전달되는 매개변수입니다. 함수의 코드는 중괄호 {} 안에 작성됩니다.

예시를 통해 함수 선언을 살펴보겠습니다:

javascript
Copy code
function greet(name) {
  console.log('Hello, ' + name + '!');
}

greet('John'); // Hello, John! 위의 예시에서 greet 함수는 name 매개변수를 받아 화면에 인사를 출력합니다. greet('John')을 호출하면 'Hello, John!'이라는 메시지가 출력됩니다.

함수 반환 값

함수는 값을 반환할 수 있습니다. return 키워드를 사용하여 반환할 값을 지정합니다. 다음은 반환 값을 가지는 함수의 예시입니다:

javascript
Copy code
function add(a, b) {
  return a + b;
}

var result = add(3, 5); console.log(result); // 8 위의 예시에서 add 함수는 a와 b 매개변수를 받아 두 값을 더한 후 반환합니다. add(3, 5)를 호출하면 8이라는 값이 반환되고, 이를 result 변수에 저장한 후 화면에 출력합니다.

익명 함수

익명 함수는 이름 없이 선언되는 함수입니다. 주로 다른 함수 내에서 사용되거나 콜백 함수로 사용됩니다. 다음은 익명 함수의 예시입니다:

javascript
Copy code
var greeting = function(name) {
  console.log('Hello, ' + name + '!');
};

greeting('Alice'); // Hello, Alice! 위의 예시에서 greeting 변수에 익명 함수를 할당하고, 이를 호출하여 'Hello, Alice!'라는 메시지를 출력합니다.

화살표 함수

ES6에서 도입된 화살표 함수는 간단한 문법으로 함수를 정의할 수 있는 방법입니다. 다음은 화살표 함수의 예시입니다:

javascript
Copy code
var multiply = (a, b) => a * b;

var result = multiply(4, 6);
console.log(result);  // 24

위의 예시에서 multiply 함수는 a와 b 매개변수를 받아 두 값을 곱한 후 반환합니다. multiply(4, 6)를 호출하면 24라는 값이 반환되고, 이를 result 변수에 저장한 후 화면에 출력합니다.

[React] - State 배워보기

Sun, 09 Jul 2023 10:29:34 GMT

레이아웃 만들기

function App(){

  let posts = '게시물1';
  return (
    
      
        개발 blog
      
      
        글제목
        00월 00일 발행
      
    
  )
}

(App.css)

div {
  box-sizing : border-box
}
.list {
  text-align : left;
  padding-left : 20px;
  border-bottom : 1px solid grey;
}

기초적인 레이아웃과 CSS를 적용하여 제작했습니다!

State 만드는 법

기존 자바스크립트의 방식처럼 let = 변수명 식으로 데이터를 저장할 수 있으나, 리액트에서는 변수가 아닌 state를 만들어서 데이터 저장이 가능합니다.

import { useState } from 'react';
import './App.css'

function App(){

  let [a,b] = useState('남자 코트 추천');
  let posts = '게시물';
  return (
    
      
        개발 blog
      
      
        글제목
        2월 17일 발행
        
      
    
  )
}

import { useState } from 'react'를 작성합니다.

원하는 곳에서 UseState('보관할 자료')를 작성해 State에 자료를 저장합니다.

저장한 자료를 사용할시 let [a,b] = useState('남자 코트 추천'); a 자리에 state 이름을 자유롭게 작명한 다음 사용하면 됩니다.

변수명을 직관적으로 작성하고 싶다면

let [글제목, b] = useState('남자 코트 추천');

이런식으로 작성을 할 수 있습니다.

State를 쓰는 이유

**state는 변동사항이 생기면 state를 쓰는 html도 자동으로 재렌더링을 해줍니다.**

function App(){ let post = '게시물'

return (

{ post }

)}

만약 기존 자바스크립트로 작성할시 변수안에 저장한 자료를 게시물1로 수정한다면 post 변수안에 저장한 자료를 '게시물' -> '게시물2'로 수정하고 hrml도 수정해야 합니다

그러나

function App(){ let [글제목, b] = useState('게시물1');

return (

{ 글제목 }

)}

state를 만들어서 {글제목}안에 데이터바인딩을 했다면 html에 자동으로 재렌더링이 되어 html 또한 같이 수정됩니다. 코드를 작성할때 자주 변경되는 내용의 경우 state를 통해 작성해서 사용하면 됩니다.

[React] - JSX문법 배워보기

Sun, 09 Jul 2023 09:58:41 GMT

React에서 사용하는 JSX문법 3가지

Html에 class를 넣을땐 className으로 선언

변수를 HTML에 넣을때는 중괄호{ }로

html에 style 속성을 넣을때는 지켜야 할것

** 실습을 위한 BLOG 상단 제작**

(App.js
import './App.css';

function App() {
  return (
    
         
              React Blog
          
    
  );
}

export default App;

(App.css)
.black-nav {
  background : black;
  width : 100%;
  display : flex;
  color : white;
  padding : 20px;
### }

Html에 class를 넣을땐 className으로 선언

평소 사용하던 html, css와 다르게 스타일을 주기 위한 class명을 넣을때 class = " "가 아닌 className = " "을 사용하여 작성합니다.

      
              React Blog

(위에 적용했던 css와 같이 적용하여 실행할시)

변수를 HTML에 넣을때는 중괄호{ }로 묶기

function App(){

  let post = '게시물1';

  return (
    
      
        React Blog
        { post }
      
    
  )
}

export default App;

** 변수 = 길고 복잡한 자료를 한 단어에 저장해서 쓸 수 있게 하는 문법**

자바스크립트의 변수선언 방식 var, let, const키워드 중 하나를 이용해 제작합니다. 선언한 변수를 이용하는 방식은 중괄호안에 적으면 끝입니다.

이러한 과정을 데이터바인딩이라고 합니다

html에 style 속성을 넣을때는 지켜야 할것

JSX상에서 style 속성을 div안에 넣는다면 style={ } 안에 { } 자료형 식으로 코드를 작성해야 합니다

(예시)
 글씨

{ 속성명 : '속성값' } 이렇게 넣으면 됩니다.
font-size 처럼 속성명에 대쉬기호를 쓸 수 없습니다.
대쉬기호 대신 모든 단어를 붙여써야하며 여쓸 땐 앞글자를 대문자로 치환해야합니다.