국민내일배움카드로 국비지원받고 프론트엔드 학습 열공 챌린지 8주차 파이널 프로젝트 🎥 목차 더보기 1. 목표 2. 알게된 점 3. 아쉬웠던 점 4. 파이널 프로젝트 🚀 목표 패스트 캠퍼스에서 학습주차별로 구분지어줬기 때문에, 8주차 학습강의 듣기가 학습 목표이다. 그리고, 파이널 프로젝트를 진행하여 프로젝트를 제출한다. 💡 알게된 점 portal portal이란, 자식 컴포넌트가 시각적으로 튀어나오도록 적용시킬때 사용한다. 예를 들어서 modal창이 튀어나오는 컴포넌트를 구현했을때, 이 컴포넌트가 다른 형제 컴포넌트보다 아래에 있을때만 형제 컴포넌트를 덮고, 그렇지 않으면 형제 컴포넌트가 위에 튀어나오는 구조가 기본적으로 되어있다. # Modal창이 형제 컴포넌트를 덮는다. const App = () =..

국민내일배움카드로 국비지원받고 프론트엔드 학습 열공 챌린지 7주차 🎥 목차 더보기 1. 목표 2. 알게된 점 3. 좋았던 점 4. 나의 다짐 🚀 목표 패스트 캠퍼스에서 학습주차별로 구분지어줬기 때문에, 7주차 학습강의 듣기가 학습 목표이다. 💡 알게된 점 Fetch 1~6주차 강사님께서 axios를 알려주셔서, Fetch 대신 axios를 이용하여 api 통신하여 데이터를 호출했다. 밑에 강사님이 임시 데이터를 호출할 수 있는 예시 url를 주셨다. https://raw.githubusercontent.com/techoi/raw-data-api/main/simple-api.json import React, { useEffect, useState } from "react"; import axios from..

국민내일배움카드로 국비지원받고 프론트엔드 학습 열공 챌린지 6주차 🎥 목차 더보기 1. 목표 2. 알게된 점 3. 좋았던 점 4. 아쉬운 점 🚀 목표 패스트 캠퍼스에서 학습주차별로 구분지어줬기 때문에, 6주차 학습강의 듣기가 학습 목표이다. 💡 알게된 점 Javascript vs React : 리렌더링 Javascript는 리렌더링이 Element 단위로 진행된다. 반면에, React는 리렌더링이 변경되는 부분만 진행된다. 이 차이로 인해, React의 성능이 더 빠르다. React : 재조정 기존의 바닐라 자바스크립트는 Element 타입이 다르면, 이전 Element를 버리고 새로운 Element를 그린다. React의 경우에는, Element 타입을 비교하고 Element의 key를 비교했을때 같다..

국민내일배움카드로 국비지원받고 프론트엔드 학습 열공 챌린지 5주차 🎥 목차 더보기 1. 목표 2. 알게된 점 3. 좋았던 점 🚀 목표 패스트 캠퍼스에서 학습주차별로 구분지어줬기 때문에, 5주차 학습강의 듣기가 학습 목표이다. 💡 알게된 점 즉시 실행 함수 함수를 선언하고, 함수를 실행할때 기명함수를 호출하는 방식말고 선언하는 즉시 바로 실행하도록 만들 수 있다. # 기명함수 호출 const numberCall = () => { console.log(123) }) numberCall() # 즉시 실행 함수 (const numberCall = () => { console.log(123) }()) 호이스팅 let, const 키워드로 선언한 변수나 const로 선언한 함수는 호이스팅이 적용되지 않는다. 그러나..

국민내일배움카드로 국비지원받고 프론트엔드 학습 열공 챌린지 4주차 🎥 목차 더보기 1. 목표 2. 알게된 점 3. 오류 해결한 것 🚀 목표 패스트 캠퍼스에서 학습주차별로 구분지어줬기 때문에, 4주차 학습강의 듣기가 학습 목표이다. 💡 알게된 점 Node.js LTS(Long Term Supported)는 장기적으로 안정되고 신뢰도가 높은 지원이 보장되는 Node.js 버전 Node.js 최신버전보다 유지 보수 및 보안에 좋아, 대부분의 사용자에게 추천되는 버전이다. Node.js를 설치한다면, LTS 버전을 설치하면 된다. NVM 설치 Node.js 버전을 관리하는 도구이다. 이미 개발된 프로그램의 Node.js 버전과 동일한 버전으로 맞추기 위해 사용한다. Mac OS를 사용하는 경우에는, VSCode..