개발나라 스용공주

이번 글은 리액트에서 state를 활용하는 법에 대한 글이다.  [ state란? ]state는 현재 가지고 있는 형태나 모양을 정의한 값으로 변화할 수 있는 동적인 값이다.컴포넌트의 현재 상태를 보관하는 변수이다.그래서 state의 값에 따라 렌더링되는 UI가 결정된다.  [ State 사용법 ]state 사용을 위해선 useState를 꼭 임포트 후 사용할 수 있다.import { useState } from "react";    [ State 구조 ]useState()는 새로운 state를 생성하는 함수고, 인수로는 state의 초기값을 받는다.state는 2개의 요소를 담은 배열을 반환한다.state의 현재 값과 state를 변경시키는 상태변화함수를 반환한다. import "./App.css";i..

이번 글은 리액트에서 이벤트 핸들링에 대한 글이다.  [ Event Handling ]Event는 버튼 클릭, 메세지 입력, 스크롤 과 같이 웹 내부에서 발생하는 사용자 행동이다.Event Handling는 웹에서 이벤트를 발생 시 처리하는 것으로 버튼 클릭 시 경고창이 노출되는 등의 과정이다. onClick = {onClickButton}는 이벤트를 처리하는 부분으로 이벤트 핸들러다.=> 이벤트에 해당하는 클릭(onClick)이 실행되면 onClickButton과 같은 함수가 실행된다. const Button = ({text, color,children}) => { const onClickButton = () => { console.log(text); }; return ( {..

이번 글은 props에 대한 글이다.  [ Props ]함수에 인수를 전달하듯 값을 전달할 때 컴포넌트에 전달된 것으로 객체 형태로 전달된다.객체로 부모의 값이 전달되고 부모에서 자식으로만 전달할 수 있다.props는 JS, html, react 컴포넌트 등을 담을 수 있다. [ 부모 - App 컴포넌트 ]import './App.css'import Button from './components/Button';function App() { return ( )}export default App [ 자식 - Button 컴포넌트 ]const Button = (props)=>{ console.log(props); return 클릭;};export d..

이번 글은 모듈시스템 ES에 대한 글이다.아래 링크로 가면 또 다른 모듈시스템인 CJS에 대한 설명을 볼 수 있다.https://hwangseoyoung.tistory.com/202 [Node.js] CommonJS(CJS)모듈이란?이번 글은 모듈 시스템 CJS에 대한 글이다.  [ CJS 사용 구조 ]아래 두 코드를 보면 CJS는 실행하고자 하는 파일(math)를 내보내 실행시키는 파일(index)에서 실행하는 것을 확인할 수 있다. math)이때 mhwangseoyoung.tistory.com   [ ES 사용 전 ]ES 모듈시스템을 사용하려면 먼저 package.json에 아래 코드 추가해야한다."type": "module" 그리고 아래 코드와 같이 CJS 방식의 코드들은 주석하거나 삭제해야 오류가..

이번 글은 모듈 시스템 CJS에 대한 글이다.  [ CJS 사용 구조 ]아래 두 코드를 보면 CJS는 실행하고자 하는 파일(math)를 내보내 실행시키는 파일(index)에서 실행하는 것을 확인할 수 있다. math)이때 math에서 내보내는데 module이라는 내장 객체에 exports라는 프로퍼티의 값으로 객체를 저장하는 구조이다.해당 객체 안에는 프로퍼티로 내보내고싶은 값을 넣어준다.아래 코드의 주석처럼 객체 내부의 value와 key의 이름이 같을 경우 하나만 작성해줄 수 있으며 작성된 값은 CJS 모듈에 의해 math 모듈에서 내보내진다. index)require로 모듈 경로를 인수로 전달해 해당 경로에서 내보내진 값을 불러올 수 있다.따라서 index에서는 객체에서 읽은 add와 sub의 값을..

이번 글은 Node.js에 대한 설명글이다.  [ Node.js란? ]웹 브라우저가 아닌 곳에서도 자바스크립트 코드를 실행하게 해주는 것이다.Node.js는 실행환경(run time)이자 언어 구동기에 해당하는 것이고 게임기(Node.js)에 게임칩(JavaScript)을 꽂아 실행하는 것과 같은 것이다. Node.js는 파일단위가 아니고 패키지라고 부른다.패키지 생성 시 터미널을 사용해 만들어줄 수 있으며 VSCode에서 터미널 단축키는 ctrl+J이다.   [ 모듈이란? ]예를 들어 쇼핑몰을 만들 때 회원관리, 장바구니 기능 등을 따로 따로 만들어 이걸 합쳐주는 구조로 만든다.이때 회원관리를 user.js로, 장바구니 기능을 cart.js로 할때 이 각각은 모듈이다.user 모듈과 cart 모듈을 합..

이번 글은 Node.js로 자바스크립트 파일을 실행시키는 방법에 대한 글이다. [ Node.js 실행하기 ]노드로 자바스크립트 파일을 실행할 때엔 경로를 잘 확인해야한다.  패키지 스크립트 : package.json 파일을 열었을 때 script 항목 안에 있는 일종의 매크로아래 코드처럼 src 폴더 내에 index.js 파일을 start라는 이름으로 매크로를 만든다.=> start를 사용해 바로 실행 가능{ "name": "section03", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node src/index.js"..

이번 글은 비동기 작업에서 Promise를 더 직관적이고 편하게 사용할 수 있게 도와주는 async와 await의 활용에 대한 글이다.아래 링크는 이 블로그의 다른 비동기 작업에 대한 글이다.https://hwangseoyoung.tistory.com/197 [JavaScript] 비동기 작업 - setTimeout(), 콜백함수이번 글은 비동기 함수의 작동원리와 비동기 작업 시 사용되는 setTimeout()과 콜백함수에 대한 글이다.   [ 동기와 비동기 ]동기는 여러 작업을 순서대로 한번에 하나씩 처리하는 것이고 JavaScripthwangseoyoung.tistory.comhttps://hwangseoyoung.tistory.com/198 [JavaScript] 비동기 작업 - promise(),..