Programming 개발은 구글로/Web[프론트엔드&백엔드]47 [Web] Moden JS - 변수와 상수, 데이터 타입 Moden JS(모던 자바스크립트) 변수와 상수, 데이터 타입 1. 변수와 상수 변수: 특정 이름에 특정 값을 설정하는 것입니다. 이를 변수 선언이라고 합니다. let value = 1; value -2; - 변수는 변경할 수 있는 값을 말합니다. 즉 선언 후 수정이 가능합니다. ※ 주의할 점은 똑같은 이름을 선언하지는 못합니다. let value = 1; let value = 2; 상수: 한번 선언하고 값이 변경할 수 없는 값입니다. const a = 1; ※ Var 타입은 더 이상 사용하지 않습니다. 2. 데이터 타입 : 변수나 상수를 선언하게 될 때, 숫자 외에도 다른 값들을 선언 숫자(number) let value = 1; 문자열(String) let text = 'Copymaster'; 참/거.. 2022. 6. 30. [Web] React Hooks - useState, useEffect 등 React Hooks : React v16.8에 새로 도입된 기능입니다. useState: 함수형 컴포넌트에서도 상태 관리 useEffect: 렌더링 직후 작업을 설정 useContext: Context 쉽게 사용하기 위해 사용 useReducer: 컴포넌트에서 다양한 상태에 따라 다른 값으로 업데이트 1. useState : 함수형 컴포넌트에서도 가변적인 상태로 상태를 관리하는 경우 사용이 됩니다. React 개념 설명했듯이 Html 값을 변화시키려면 새로고침을 해야 하는데, 전체 화면을 새로고침하는 것은 비효율적입니다. 그래서 변경된 화면만 새로고침하기 위해 useState를 사용합니다. 참고 글 : [Web] 프론트엔드 React 개념 2022.06.23 - [Programming Web[프론트엔드.. 2022. 6. 29. [Web] React의 LifeCycle API 알아보자 React LifeCycle 관련 API : 브라우저에서 보이고 사라지는 등 업데이트 및 호출되는 컴포넌트 API입니다. 1. 컴포넌트 생성 : 컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API들입니다. 1.1 constructor : 컴포넌트 생성자 API로 컴포넌트가 새로이 만들어질 때마다 호출됩니다. constructor(props) { super(props); } 1.2 componentWillMount : 컴포넌트가 화면에 디스플레이가 되기 전에 호출되는 API입니다. React v16.3부터 해당 API가 deprecated가 되었으며, v16.3 이후부터는 UNSAFE_componentWillMount()로 사용됩니다. 기존에 담당하던 부분은 1.3 componentDidMount에서.. 2022. 6. 28. [Web] React state & setState 개념 이해 React state & setState 개념 이해 : 동적인 데이터 처리할 때 state를 사용한다. import React, { Component } from 'react'; class Counter extends Component { state = { number: 0 } increase = () => { this.setState({ number: this.state.number + 1 }); } decrease = () => { this.setState({ number: this.state.number - 1 }); } render() { return ( 카운터 값: {this.state.number} + - ); } } export default Counter; 여기서 increase() 함수와.. 2022. 6. 27. [Web] React props & defaultProps 개념이해 React props & defaultProps 1. props : props는 부모 컴포넌트가 자식 컴포넌트에게 넘겨주는 값입니다. import React, { Component } from "react"; class MyJob extends Component { render() { return ( 제 직업은 {this.props.job} 개발자입니다. ); } } export default MyJob; 자신이 받아온 props 값은 this. 키워드를 통하여 조회할 수 있습니다. job = "Web"으로 props 값을 설정하였습니다. import { Component } from 'react'; import MyJob from './MyJob'; // import MyJob class App ext.. 2022. 6. 27. [Web] npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 에러 발생 npm 에러 npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 1. npm이 설치되어 있지 않은 경우 "npm download"를 검색하거나 아래 사이트에 접속하셔서 LTS 버전으로 설치하시면 됩니다. https://nodejs.org/ko/download/ 관련 글: Node 개요와 설치방법 2022.06.26 - [Programming 개발은 구글로/Web[프론트엔드&백엔드]] - [Web] Node.js 개요와 설치방법 2. VSCode 터미널 설정이 잘못된 경우 VScode의 기본 터미널 설정이 "Powershell"로 되어 있다면 .. 2022. 6. 26. [Web] Node.js 개요와 설치방법 Node.js 1. 개요 : Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. Node.js 는 Ruby의 Event Machine이나 Python의 Twisted 같은 시스템과 설계상 유사하고 영향을 받았습니다. Node.js 는 좀 더 발전된 이벤트 모델을 선택해서 라이브러리가 아닌 런타임 생성자로 이벤트 루프를 제공합니다. 비동기 이벤트 주도 JavaScript 런타임으로써 Node.js 는 확장성 있는 네트워크 애플리케이션을 만들 수 있는 소프트웨어 플랫폼입니다. const http = require('http'); const hostname = '127.0.0.1'; const port = 3000; const server = http.createServer.. 2022. 6. 26. [Web] React 컴포넌트 JSX React 컴포넌트 JSX 1. 컴포넌트 만들기 기존에 만들어두었던 react-study 프로젝트를 열어보면, 아래처럼 프로젝트가 구성됩니다. React를 사용하면 웹 애플리케이션에서 사용하는 유저 인터페이스를 재사용 가능한 컴포넌트로 분리하여 작성, 프로젝트의 유지보수성을 올려줍니다. App.js 파일에서 컴포넌트 코드를 확인할 수 있습니다. import React, { Component } from 'react'; // React와 내부의 Component import import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } e.. 2022. 6. 25. [Web] 함수 표현식과 IIFE(즉시 실행 함수 표현식) 개념 함수 표현식과 IIFE(즉시 실행 함수 표현) 개념 정리 1. 함수 표현식(Function Expression) : 함수 문법으로 생성한 함수 객체를 변수에 할당하는 방식 let date = function selectYear(x) { const year = new Date().getFullYear(); return '당신이 선택한 년도는 ${year + x}입니다.' } console.log(date(1)); // 당신이 선택한 년도는 2023년 입니다. console.log(selectYear(4)); // error - Date is not defined 함수 리터널의 함수 이름(selectYear)은 아래처럼 생략이 가능하다. 이러한 함수를 익명 함수라고 한다. let date = function.. 2022. 6. 24. [Web] 프론트엔드 React 개념 프론트엔드 React 라이브러리 🟦 React 개념 웹사이트를 만들기 위해서는 사실 프론트엔드 라이브러리의 도움 없이도 만들어낼 수 있습니다. 단순히 정적 페이지를 만드는거라면 자바스크립트 없이도, 그냥 HTML과 CSS를 사용해서 만들면 됩니다. 거기에 자바스크립트를 더해주면, 유저의 행동 흐름에 따라서 동적으로 화면을 보여줄 수 있습니다. 하지만, 요즘의 웹은 단순히 웹 페이지가 아니라 웹 애플리케이션입니다. 브라우저 상으로도 정말 자연스러운 흐름으로 매우 많은것들을 할 수가 있죠. sample.html Counter 0 + 위의 Html 코드에서 버튼을 눌러서 숫자 값("0")을 변경하려면 각 DOM(Document Object Model(문서 객체 모델) sample.html) 앨리먼트에 대한 레.. 2022. 6. 23. [Web] 프론트엔드, 벡엔드 차이점 및 전망 웹 개발 네이버와 같은 웹 사이트를 개발하는 직업을 웹 프로그래머 혹은 웹 개발자고 합니다. 담당하는 작업 영역에 따라서 직업의 명칭이 달라집니다. 우선 웹 개발자에 대한 직무는 프론트엔드와 백엔드, 퍼블리셔로 나눠집니다. 여기선 프론트엔드와 백엔드를 중점으로 다루도록 하겠습니다. 1. 프론트엔드 : 네이버를 사용할 때 시각적으로 보이는 모든 화면들인 사용자 인터페이스를 개발합니다. 프론트엔드 개발자는 시각적으로 보이는 영역뿐만 아니라 웹 사이트에서 로그인을 하거나 포스팅을 발행 등 특정 기능을 실행하였을 때 필요한 API를 불러오고 데이터를 입력하는 영역에 대해서 개발을 진행합니다. ※ 필요한 지식: HTML, CSS, JS(JavaScript), React, Vue, Angular 등 2. 백엔드 :.. 2022. 6. 23. 이전 1 2 3 4 다음 728x90
