개요1. 진행 기간: 2024.08.28 ~ 2024.09.032. 인원: 5명3. 개발환경- React, Vite- 전역상태관리: Context API- 데이터베이스: Supabase- Github, Figma, Slack, Notion 등 활용 4. Github 링크프로젝트 소개주제 선정 계기단순 학습 용도가 아닌 실생활에서 활용할 수 있는 프로젝트를 만들어보고싶어 시작된 아이디어다!내일배움캠프에서 빠르게 여러 프로젝트들을 진행하면서 발표를 듣지못한 다른 팀들의 프로젝트도 궁금하고, 내 프로젝트도 한 곳에 모여있으면 뿌듯할 것 같다는 생각이 들었는데 이 기회에 프로젝트들을 한눈에 모아볼 수 있는 기능을 만들어보기로 했다. 주요 담당 기능1. Post fetch 및 Context Provider2. P..
리액트에서 자주 변경되고, 변경된 값이 화면에 출력돼야하는 값이 필요할 때 state를 활용할 수 있다. useStatereact hook 이라고 한다. 이 개념은 추후 자세히 알아볼 예정! const test = useState("초기값");// test: [ 변수: "변수값", 변수를 변경할 수 있는 함수: function() {},]// 따라서 아래와같이 사용할 수 있음 (Destructuring)const [name, setName] = useState('Kim'); 제어 컴포넌트import { useState } from "react";const App = () => { const [value, setValue] = useState(""); const onChangeHandler = (..
props: 컴포넌트 끼리의 정보 교환 방식 특징1) 위에서 아래 방향(부모 → 자식 방향)으로만 흐른다. (단방향)2) 반드시 읽기전용으로 취급하며 변경하지 않는다. childrenprops와 유사하게 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전송할 수 있는 방법여는 태그와 닫는 태그 사이에 작성된 값이 자식 컴포넌트의 children이라는 값으로 전달된다. import React from "react";const App = () => { return 안녕하세요!;};function User(props) { return 유저님 {props.children};}export default App; children의 용도1) 레이아웃 컴포넌트를 만들 때 주로 사용import React from "rea..
논리합연산자 ( || )논리합 연산자를 활용해 기본값을 설정할 수 있다.if-else 혹은 삼항연산자 등을 활용하는 경우를 훨씬 간단하게 표현할 수 있다는 것!const person = { age: 30,};const getUserName = (user) => { return user.name || "신원미상";};const getUserName2 = (user) => { if(!user.name) return "신원미상"; else return user.name;}; 논리곱연산자 ( && )특정 조건이 성립할 때 수행할 내용을 지정해줄 수 있다.const loggedIn = true;const userName = "르탄이";loggedIn && console.log(`환영합니다. ${userN..
Destructuring객체객체 내부의 요소들을 쪼개서 사용할 수 있다 const person = { name: "르순이", age: 28,};function greet({age, name}) { console.log(`안녕하세요. 제 이름은 ${name}이고, ${age}살 입니다.`);}greet(person);위처럼 사용하는 경우 객체 내부에서 요소의 순서와 분해된 순서가 달라지면 영향이 있지 않을까 생각할 수 있지만, key의 이름과 일치하는 변수에 할당되므로 영향 없다! 객체 Destructuring 사용 예시const movie = { title: "Inception", // 생략};const { title } = movie; // "Inception"// --------------..
자바스크립트 엔진자바스크립트 엔진 = 자바스크립트를 읽고 동작시키는 프로그램기존에 사용하던건 크롬 브라우저의 V8기존의 V8을 발전시켜 다른 환경에서도 사용할 수 있게 만들어 준것이 node.js고, 이걸 자바스크립트 런타임이라고 함 자바스크립트 실행 순서1) 실행 컨텍스트 생성2) 전역 컨텍스트 평가 스택에 추가3) 함수 컨텍스트 평가 스택에 추가4) 내부 함수까지 평가를 마쳤다면, 이벤트 루프에 밀어넣고 큐에 추가5) 동기/비동기 나눠서 수행 후 일이 끝났다면 스택을 하나씩 걷어낸다6) 스택을 모두 걷어내면 끝! 실행되는 방법1) 실행컨텍스트 = 자바스크립트를 실행하는 전체적인 맥락자바스크립트 엔진은 전역 스코프를 제일 먼저 평가함콜스택에 가장 먼저 전역 스코프가 쌓인다선언부 확인: 변수, 함수 선언..