myinfo7091 님의 블로그

오늘의 학습내용 :  useEffect, useRef, useContext Hook  ◆ useEffect  useEffect는 side effect를 발생시킬 때 사용하는 React Hook이다. 쉽게 말해서 어떤 컴포넌트가 렌더링 된 이후마다 특정한 작업을 수행하도록 설정하고 싶을 때 사용하는 것이다. React 공식 문서에서 useEffect는 외부 시스템과 컴포넌트의 싱크를 맞춘다고 설명하는데, 렌더링이 끝난 다음에 실행되기 때문에 컴포넌트의 렌더링 과정을 순수하게 유지시킬 수 있다. import React, { useEffect } from "react";const App = () => { useEffect(() => { console.log("hello useEffect"); }); ..

오늘의 학습내용 :  styled 컴포넌트  ◆ CSS in JS CSS in JS는 스타일의 정의를 자바스크립트로 작성된 컴포넌트에 바로 삽입하는 방식이다. 쉽게 말해 자바스크립트 코드로 css 코드를 작성하여 컴포넌트를 꾸밀 수 있다고 생각하면 좋다. 이전까지 배웠던 style 관련 코드를 작성할 때에는 css 파일을 생성하고 이를 import 했지만, 조금 더 간편한 방법으로 컴포넌트 꾸미기가 가능하다.왜 이런 방식의 개발이 주류가 될까?기존에는 HTML, CSS, JS를 별도의 파일로 정리하는 방법을 선호했지만, React 등 모던 자바스크립트 라이브러리가 등장하면서 웹 애플리케이션을 재사용하기 편리한 여러 블록으로 분리하여 개발하는 컴포넌트 기반의 방식이 많이 쓰이게 되었다. 웹 페이지를 여러 ..

useState, 제출 - 삭제 기능 구현 ◆ useState App.jsx에 국가별로 메달 집계를 표시하는 리스트를 추가한다. useState를 활용해서 데이터를 저장하고 출력하는 React hook에 익숙해질 필요가 있었다.function App() { const [country, setCountry] = useState(''); const [gold, setGold] = useState(0); const [silver, setSilver] = useState(0); const [bronze, setBronze] = useState(0); const [medalList, setMedalList] = useState([]); const handleSubmit = (event) => { ..

오늘의 학습내용 :  React 컴포넌트  ◆ 컴포넌트 컴포넌트(Component)란, 프로그래밍에서 재사용할 수 있는 독립된 모듈들을 말한다. 컴포넌트를 기반으로 하는 프로그래밍에서는 블록을 조립하듯 화면을 구성하게 되는데, 웹 컴포넌트는 이를 웹에서 적용할 수 있도록 정한 것이다. React는 컴포넌트 기반의 구조라는 특징을 갖는데, 페이지를 컴포넌트로 구성하고, 하나의 컴포넌트가 다른 여러 개의 컴포넌트 조합으로 구성될 수 있다. 개발자는 컴포넌트를 활용해 사용되는 전체 코드의 양을 줄일 수 있고, 개발 시간을 단축할 수 있으며, 유지 보수 비용을 줄일 수 있다.  ◆ useState hook useState는 컴포넌트에 state 변수를 추가할 수 있는 React Hook이다. 먼저 컴포넌트의 최..

react 프로젝트 셋업, 폼 ui 구현  이번 개인 프로젝트로는 올림픽 메달 집계를 관리해 보는 Olympic Medal Tracker를 제작한다. 강의에서 배운 리액트 컴포넌트와 이벤트 관리, state 관리를 통해 필요한 기능을 구현할 수 있다. 과제를 수행하면서 리액트 컴포넌트 useState 관리에 익숙해질 것으로 기대된다. 이번 개인과제에서도 1~3일차에 해당하는 로드맵이 있는데, 제작하다 보니 순서를 거의 지키지 않게 되었다... 이번에도 필수 구현사항들을 먼저 만들어보고, TMDB 영화 검색 사이트처럼 나중에 추가 목표들을 하나씩 도전해볼 계획이다. 터미널을 열고 Vite로 리액트 프로젝트를 셋업한다. 이제 브라우저에서 React 앱을 열어볼 수 있다.yarn create vite my-m..

오늘의 학습내용 :  React 개발환경 세팅하기  ◆ Yarn앞으로 개인 과제를 진행하면서 사용하게 될 패키지 툴이다. 간단한 커맨드로 게시된 패키지들을 설치받아 사용할 수 있고, 이를 통해 보다 효율적인 개발이 가능하다. 대표적인 패키지 관리 툴에는 npm, 그리고 yarn이 있는데, 각각 어떤 특징을 가지고 있는지 간단하게 알아보았다. NPM(Node Package Manager)은 자바스크립트 언어를 위한 패키지 관리자이다. Node 패키지를 만들고, 업로드하여 공유하여 누구나 사용할 수 있다. NPM이 없었을 때에는 필요한 기능을 추가하려면 직접 작성하거나 깃허브를 통해 다운로드할 수밖에 없었다. 이런 불편을 해소하기 위해 Node.js를 설치하면 기본적으로 내장된 npm을 사용할 수 있게 되었..

오늘의 학습내용 :  React 소개 ◆ React.js 주특기 입문주차에 들어서면서 React를 처음 접하게 되었다. React는 메타에서 개발한 오픈소스 자바스크립트 라이브러리로, 요즘에는 프론트엔드 개발자들 사이에서 많은 인기를 얻고 있다. SPA를 전제로 하고, 업데이트가 필요한 DOM요소를 찾아 해당 부분을 빠르게 업데이트하기 때문에 동적인 웹에서 좋은 퍼포먼스를 낼 수 있다. React 그 자체만으로는 프레임워크라고 불리기에 부족한 기능들이 있지만, 대신 라이브러리라는 특성을 살려 다른 프레임워크에 붙여 사용하거나 각종 메소드를 지원받고 프론트엔드 개발자라면 익혀야 할 표준으로 자리잡았다. 웹개발자로 일하고 싶으면 리액트 배워  홈페이지에서 간단한 특징 소개를 읽어보았다.애플리케이션의 각 상태..

오늘의 학습내용 :  Class ◆ Class 생성하기자바스크립트는 프로토타입 기반의 객체 지향 프로그래밍 언어이다. 다만 생성자, 상속 등 클래스를 기반으로 하는 다른 언어에 익숙한 개발자들이 적응할 수 있도록 ES6부터 class가 추가되었다. ES6에서 기존 자바스크립트가 가지고 있던 많은 단점들이 개선되었다. 그리고 배워야 할 것도 늘어났다 class를 통해 코드를 직관적으로 읽고 편리하게 작성할 수 있다.클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위한 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다. (참고: 모던 JavaScript 튜토리얼) class User { constructor(name) { this.name..

오늘의 학습내용 :  DOM  ◆ DOM DOM(The Document Object Model, 문서 객체 모델)은 HTML, XML 문서의 프로그래밍 인터페이스이다. 문서를 구조화해 표현하고 프로그래밍 언어가 DOM의 구조에 접근할 수 있는 방법을 제공하는데, 우리는 이를 통해 문서의 구조와 스타일, 내용 등을 변경할 수 있다. 다시 말해 웹페이지의 객체 지향 표현이며, 자바스크립트와 같은 언어로 DOM을 수정할 수 있다. 1주차부터 4주차까지 자바스크립트의 다양한 문법들을 적용해 보면서 결과적으로 DOM을 수정하는 방법을 익히는 것이다. DOM을 사용하는 이유는 크게 ① 자바스크립트를 통해 HTML에서 데이터를 가져오기 위해서 ② 웹페이지 데이터를 동적으로 변경하기 위해서 정도로 생각해볼 수 있다. ..

오늘의 학습내용 :  콜백 함수 내부의 this에 다른 값 바인딩하기 ◆ 콜백 함수 내부의 thisthis는 Java, C# 처럼 객체 지향 프로그래밍 언어에서도 사용하는 키워드이다. 이때 this는 해당 코드를 실행하는 클래스의 인스턴스를 나타낸다. 조금 다른 방식으로, 자바스크립트에서의 this 키워드가 있는데, 함수가 호출되는 방식에 따라 this가 참조하는 것이 결정된다. 콜백 함수도 함수이기 때문에, 어떤 객체의 메서드로 있던 함수가 인자로 전달되면 함수 자체로 전달된다. 이때 내부의 this는 제어권을 넘겨받은 함수가 정의하고, 정의되지 않은 경우에 전역 객체를 참조한다. 복습하기: 전역 객체?전역 범위에 항상 존재하는 객체를 전역 객체라고 한다. 웹 브라우저에서의 전역 객체는 window, ..