본문 바로가기

분류 전체보기

(105)
Study_240523 ( React ) Router , styled-components import "./App.css";import { BrowserRouter, Route, Routes } from "react-router-dom";import Home from "./pages/Home";import Detail from "./pages/Detail";function App() {  /**   * TODO: 아래와 같은 구조로 컴포넌트를 만들고 Browser Router 설정하세요. UI는 신경쓰지 않습니다. 별도의 Router 컴포넌트 생성 여부는 자유입니다.   * Home 컴포넌트는 컴포넌트를 사용해서 Detail 컴포넌트로 이동하도록 하세요.   * Detail 컴포넌트를 path parameter 로 id 를 받도록 하세요.   * Detail 컴포넌트는 path parame..
Study_240522 ( 알고리즘 ) // 문자열에서 가장 많이 등장한 문자 찾기// 문제 정의:// 주어진 문자열에서 가장 많이 등장하는 문자를 반환하라. 만약 여러 개라면 그 중 아무거나 반환하라.// 조건:// 대소문자를 구분한다.// 공백도 하나의 문자로 간주한다.// 예시:// 입력: "banana"// 출력: 'a' (혹은 'n')function mostFrequentChar(s) {  // 문자와 갯수를 키:값 으로 저장하기위해 빈 객체 선언  const count = {};  // 가장 큰 값을 저장 할 숫자형 변수 선언  let maxCount = 0;  // 가장 큰 값의 키를 저장 할 문자형 변수 선언  let mostChar = "";  // 입력 받은 문자열의 문자를 활용하기위해 순회  for (let i = 0; i..
Study_240521 ( 알고리즘 ) // 문제 1: 문자열 내 각 문자의 개수 반환// 문제 정의:// 주어진 문자열에서 각 문자가 몇 번 등장하는지 세어라. 결과는 객체 형태로 반환한다.// 조건:// 대소문자를 구분한다.// 공백도 하나의 문자로 간주한다.// 빈 문자열이 주어질 수도 있다.// 예시:// 입력: "hello world"// 출력: {'h': 1, 'e': 1, 'l': 3, 'o': 2, ' ': 1, 'w': 1, 'r': 1, 'd': 1}// 입력: "hello World"// 출력: {'h': 1, 'e': 1, 'l': 3, 'o': 2, ' ': 1, 'W': 1, 'r': 1, 'd': 1}function countCharacters(s) {  // 결과를 객체 형태로 반환하기 위해 빈 객체 선언  con..
Study_240520 (React 학습) 계산기import { useState } from "react";export default function App() {  const [cr, setCr] = useState(0);  const [newNumber, setNewNumber] = useState("");  const addNumber = () => {    if (newNumber === "") {      setNewNumber("");      alert("값을 입력하세요.");      return;    }    setCr(cr + parseInt(newNumber));    setNewNumber("");  };  const subNumber = () => {    if (newNumber === "") {      setNewN..
Study_240517 (React 학습) TodoList 학습 // 리액트로 개발한 앱은 컴포넌트라는 조각을 구성됨// -> UI구축을 훨씬 쉽게 만들어줌// 컴포넌트를 생성하고 UI 요소를 컴포넌트 내부에서 JSX통해 선언// -> 리액트가 반응 -> 리액트 컴포넌트가 '선언체'라는 개념이 아주 중요// 리액트에서 랜더링은 현재 props와 state의 상태에 기초하여// UI구성을 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미// triggering -> rendering -> commit 순으로 진행// 브라우저 랜더링은 다른 프로세스로 페인팅 이라고도 부름import Layout from "./components/Layout";import TodoContainer from "./components/todo/TodoContainer";const App = ..
Study_240516 (React 학습) 리랜더링 및 TodoList 완성 // 리액트로 개발한 앱은 컴포넌트라는 조각을 구성됨// -> UI구축을 훨씬 쉽게 만들어줌// 컴포넌트를 생성하고 UI 요소를 컴포넌트 내부에서 JSX통해 선언// -> 리액트가 반응 -> 리액트 컴포넌트가 '선언체'라는 개념이 아주 중요// 리액트에서 랜더링은 현재 props와 state의 상태에 기초하여// UI구성을 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미// triggering -> rendering -> commit 순으로 진행// 브라우저 랜더링은 다른 프로세스로 페인팅 이라고도 부름   import { useState } from "react";import "./App.css";import TodoList from "./components/TodoList.jsx";import To..
Study_240515 (React 학습) State , Layout Component // children : Layout 컴포넌트를 만들 때 주로 사용// layout 컴포넌트는 자식 컴포넌트를 가지는 형태// const User = (props) => {//   console.log("props=>", props);//   return user {props.children};// };// function Layout(props) {//   const children = props.children;//   return (//     //       header//       {children}//       footer//     //   );// }const App = () => {  // return hi;  // return (  //     //     App  //     //..
Study_240514 (React 학습) Component , JSX , props // 조상 , 부모 , 자식 컴포넌트function App() {  return (    div>      h1>부모-자식 관계 테스트h1>      GrandFather />    div>  );}export default App;function GrandFather() {  return (    div>      p>할아버지p>      Mother />    div>  );}function Mother() {  return (    div>      p>엄마p>      Child />    div>  );}function Child() {  return (    div>      p>자식p>    div>  );} rafce 스니펫 ->import React from 'react'const App..