elevne's Study Note

웹 애플리케이션을 만들다보면 li 태그 등을 반복적으로 사용하는 등, 반복되는 코드를 작성해야할 일들이 생기게된다. 이를 하나하나 직접 입력해주는 것은 불가능한 일일 것이다. 이를 쉽게 작성하기 위해 JS 배열 객체의 내장 함수인 map 함수를 사용한다. map 함수에 대해 복습해보자면, 이는 배열 내의 요소들에 대해 인자로 들어가는 함수를 적용시키는 것이라고 보면 된다. 아래와 같이 작동한다. let numbers = [1, 2, 3, 4, 5] let mappedNumbers = numbers.map((num) => { return num * num }) console.log(mappedNumbers) // 결과: [1, 4, 9, 16, 25] 위 함수를 사용하여, 배열 내의 객체들에 대해 반복되는..

단순히 HTML 만 사용하게 될 때는 DOM 에 이름을 달고 사용하기 위해 id 를 사용한다. React 프로젝트 내부에서는 DOM 에 이름을 다는 방법을 ref (reference) 라고 한다. ref 는 id 를 사용하는 경우처럼, DOM 을 꼭 직접적으로 건드려야 할 때 사용된다. 이를 직접 실습해보기 위해 아래와 같이 새로운 파일을 만들어 적어준다. import { Component } from "react"; import "./ValidationSample.css"; class ValidationSample extends Component { state = { password : "", clicked : false, validated : false } handleChange = e => { th..

사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 Event 라고 한다. 이를 React 로 구현하는 것은 일반 HTML, JS 를 사용하여 구현하는 것과는 비슷하면서도 조금 다르다. 아래 코드는 이전 시간에 작성해보았던 코드이다. import { useState } from "react"; const Say = () => { const [message, setMessage] = useState(""); const onClickEnter = () => setMessage("안녕하세요") const onClickLeave = () => setMessage("안녕히가세요") return ( 입장 퇴장 {message} ) } export default Say 기존 HTML 의 Event 를 다룰 ..

프로젝트를 진행하며 팝업 창에 "오늘 하루 보지 않기", "24시간 동안 보지않기" 등의 버튼을 만들 일이 생겼다. 위 기능을 구현하기 위해 쿠키를 사용할 필요가 있다. 우선 아래와 같은 함수를 사용하여 팝업 창에서 버튼을 눌렀을 때, 해당 팝업 글의 번호를 사용하여 쿠키에 값을 설정해준다. document.getElementById('dont-show-button').addEventListener('click', function() { let num = String(document.getElementById("popup").value) let popNoName = "popup"+num let expirationDate = new Date() expirationDate.setHours(expiration..

React 를 사용하여 인터페이스를 설계한다면 사요자가 보는 화면은 여러 가지 Component 로 구성되게 된다. 여기서 Component 는 단순히 템플릿의 역할을 하는 것이 아니라, Lifecycle API 를 이용하여 Component 가 화면에 나타날 때, 화면에서 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있다. Component 는 함수형, 클래스형 두 종류로 나누어 다룰 수 있다. 저번 글에서 다루었던 방식은 함수형이고, 클래스형으로 사용할 때는 아래와 같이 작성할 수 있다. import { Component, Fragment } from "react"; class App extends Component { render() { const name = "React" return..

yarn 명령어로 설치해준 프로젝트에 들어가면 App.js, index.js 등 여러가지 파일, 폴더가 생성된 것을 확인할 수 있다. JS 파일들의 상단에 보면, Python에서 다른 모듈을 import 하듯이 아래와 같은 형식으로 import 구문이 작성되어 있다. import logo from './logo.svg'; import './App.css'; 위와 같이 모듈을 불러와서 사용하는 것은 원래 브라우저에는 없는 기능이라고 한다. (2017년도 부터는 브라우저에서도 import 구문을 사용할 수 있긴 하지만 이는 단순히 JS를 불러오는 용도로만 사용되는 것이기에 프로젝트 번들링과는 다르다고 한다.) 브라우저가 아닌 환경에서 JS를 실행할 수 있게끔 해주는 환경인 Node.js 에서 지원하는 기능이..

React 에 대해 자세히 공부해보기 위해서 서적 '리액트를 다루는 기술'을 처음부터 읽어보며 따라가보기로 하였다. React 는, 이전에 알아보았던 것처럼, Javascript 라이브러리로 사용자 인터페이스를 만드는데 사용된다. 구조가 MVC, MVW 등인 프레임워크와 달리 오진 'View'만 신경쓰는 라이브러리라고 한다. React 에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 Component 라고 부른다. Component 는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며 Component 하나에서 해당 Component 의 생김새와 작동 방식을 정의한다. 사용자의 화면에 View 를 보여주는 것을 Rendering 이라고 부른다. React 에는 맨 처음 화면을 보일 ..

TypeScript는 Javascript에 Compile 타임 형식을 추가한 언어다. TypeScript에서는 변수와 함수에 Type을 지정하고 형식 규칙을 지키지 않았을 경우 오류를 발생시켜 프로그램의 오작동을 방지한다. 아래와 같이 Type을 지정해줌으로써 Javascript 코드를 TypeScript 로 변환시킨다. (실습의 모든 코드는 TypeScript Playground 웹사이트에서 실행하였다.) JS const average = (x, y) => (x + y) / 2 TS const average = (x: number, y: number) => (x + y) / 2 console.log(average(1, 5)) TypeScript 에서는 위처럼 형식을 지정해줘야 하며, TypeScript..