💡 URECA/🗒️ 스터디 노트

React Router 개념React에서 라우팅을 구현하기 위한 표준 라이브러리웹 애플리케이션에서 여러 페이지를 쉽게 관리하고 내비게이션을 구현할 수 있게 해준다.라우팅의 개념예를 들어:example.com/home → 서버의 home.html 파일 요청example.com/about → 서버의 about.html 파일 요청React와 같은 단일 페이지 애플리케이션(SPA)에서는 클라이언트 사이드 라우팅이 사용됩니다.웹 애플리케이션이 처음 로드될 때 필요한 모든 JavaScript를 다운로드URL이 변경되면 새로운 페이지를 서버에서 받아오는 대신, JavaScript가 브라우저의 히스토리 API를 사용하여 URL을 변경하고 화면에 표시되는 컴포넌트를 변경페이지 전체를 다시 로드하지 않기 때문에 더 빠른 ..

📃 주요 코드 설명 🐛 실습 중 겪은 문제 Objects are not valid as a React child 에러 발생result 값이 string이 아니라 정규표현식(RegExp)처럼 객체로 들어가 있어서 화면에 출력 불가능한 값이 전달됨콘솔 에러 메시지: found: [object RegExp]카드 컴포넌트가 세로로 나열됨카드 2개가 안에서 기본 block 요소로 세로 쌓임버튼을 카드 사이에 넣는 구조도 구현 어려웠음텍스트들이 왼쪽 정렬되어 UI가 어색함결과 텍스트, 설명 텍스트, 버튼 아래 텍스트 등 자잘한 글자들이 가운데 정렬되지 않음 ⚙️ 해결과정 result 타입 오류 디버깅determineWinner() 함수가 '이겼다', '졌다' 같은 문자열만 반환하도록 수정JSX에서 result..

📌 배운 내용 요약useState 훅을 사용해 상태(state)관리하기컴포넌트 분리: Header, InputFild, PostList로 구조 나눔버튼 클릭 이벤트로 상태를 변경하고 화면이 바뀌는 흐름props를 통해 자식 컴포넌트로 데이터 전달📃 주요 코드 설명import React, { useState } from 'react'import Header from '../components/Header'import './index.css'import InputField from '../components/InputFild'import PostList from '../components/PostList'export const App = () => { const [sample] = useState('t..

html 구조도는 html 중요도에 따라 작성하면 된다. section이나 article요소에도 h도 쓰인다.최신 자료가 article영역이거나 banner가 section이면 h가 필요하다.  관공서 사이트가 웹 표준을 잘 지킨다.  이런식으로 화면 구성을 나눌 수 있다.  각각의 필요한 이미지를 개발자 도구를 통해서 다운받으면 된다.png는 배경이 투명한 것을 허용한다.  css는 중요도가 높은 것을 밑에 작성해야된다. cdnjs - The #1 free and open source CDN built to make life easier for developers cdnjs - The #1 free and open source CDN built to make life easier for develope..

import React from 'react';const Header = () => { return 헤더;};export default Header;import React from 'react';const Footer = () => { return 푸터;};export default Footer; import React from 'react';import Header from './Header';import Footer from './Footer';// 레이아웃 예시, 반드시 따라할 필요xconst Layout = () => { return ( 내용 );};export default Layout; 피그마 앱을 연다. 1. 화면 크기 입력 ..

컴포넌트를 선언하는 방식1. 함수 컴포넌트import React from 'react';const TTest = () => { return ( );};export default TTest; 2. 클래스형 컴포넌트import React, { Component } from 'react';class TTest extends Component { render() { return ( ); }}export default TTest; render 함수가 꼭 있어야한다. → 그 안에 보여줘야할 JSX를 반환한다.  함수 컴포넌트와 클래스형 컴포넌트의 차..

자바스크립트초기에는 단순한 연산과 시각적인 효과를 주는 스크립트 언어현재는 웹 어플리케이션에 가장 핵심적인 역할슬랙, 아톰, VScode등을 일렉트론으로 개발(자스로 데스크톱 어플리케이션을 만들 수 있는 프레임워크)페이스북, 디스코드, 페이팔 등등하지만 순수 자바스크립트 만으로는 관리하기 어려움순수자바스크립트 문제 해결위해 프레임워크들 등장프레임워크는 항상 발전하고 새롭게 등장 다양한 프레임워크 리액트 점유율 킹왕짱! 다른 프레임워크의 경우 MVC 아키텍쳐를 사용하고 있음.다른 아키텍쳐와 공통점은 모델과 뷰가 있다는 것.모델은 애플리케이션이 사용하는 데이터를 관리뷰는 사용자에게 보여짐애플리케이션 규모가 크면 복잡해지고 관리를 제대로 하지않으면 성능이저하됨   ⭐ ReactMVC, MVW 등과 다르게 오직..

기존에 있는 다양한 학습 앱들을 참고하면서, 새로운 형태의 학습 앱을 구상해보고 싶었다.앱의 이름은 T-Time으로, 단순히 차를 마시는 시간을 의미하는 Tea Time뿐만 아니라, 대화를 나누는 시간이라는 의미의 Talk Time까지 포함할 수 있도록 네이밍했다. 이 앱은 마이크로 러닝을 기반으로 학습을 돕는 서비스를 제공하며, 짧은 시간 안에 효율적으로 학습할 수 있도록 설계되었다.또한, 추후 수익화 방안을 고려한다면 화상 언어 교환 기능을 추가할 수 있다. 사용자가 기본적인 언어 교환을 무료로 경험할 수 있도록 하되, 일정 시간이 지나면 제한이 걸리고, 추가 시간을 연장하기 위해서는 유료 결제를 해야 하는 방식으로 구성할 수 있다.이를 통해 사용자들에게 자연스럽게 학습을 지속하도록 유도하는 동시에,..

캐러셀 인터랙션 메인 페이지에서 디자인 컨셉이나 마케팅 정보를 순서대로 전환하면서 보여주는 이미지 방식오버플로우 스크롤링 인터랙션  오버플로우 스크롤링은 화면 내에서 좌우로 스크롤리 된다는 점스크롤이 멈추면 멈춘 위에서 이미지가 좌우 어디로든 안 겹친다. 모달창 인터랙션  모달 창이란 팝업 창과 비슷한 개념특정 영역에 원하는 크기로 새로운 디자인을 띄우는 것을 의 내비게이션 드로워 인터랙션 화면의 왼쪽 가장자리에서 서랍 처럼 열리고 닫히면서앱을 탐색 할 수 있는 패널 의미모바일 그리드컬럼 4 마진 16 거터 16웹 그리드컬럼 12 마진 64 거터 36