728x90 반응형 리액트14 리액트 아토믹 디자인(Atomic Design)에 대해 알아보자 안녕하세요 오늘은 리액트 아토믹 디자인에 대해서 알아보겠습니다. 아토믹 디자인(Atomic Design)은 Brad Frost가 제안한 디자인 시스템입니다. 이 방법론은 웹 페이지를 여러 개의 독립적인 컴포넌트로 분리하고, 이들을 조합하여 복잡한 UI를 구축하는 데 초점을 맞춥니다. 아토믹 디자인은 이름에서 알 수 있듯이 화학의 원소와 분자에 착안한 아이디어로, 다음과 같은 5단계 계층 구조를 가집니다: Atoms (원자): 이는 가장 기본적인 빌딩 블록으로서 버튼, 인풋 필드, 텍스트 등과 같이 독립적으로 사용할 수 없는 가장 작은 UI 요소들을 의미합니다. Molecules (분자): 여러 개의 Atom을 결합하여 만든 비교적 간단한 UI 구성 요소입니다. 예를 들어 검색 폼(Molecule)은 텍스.. 2023. 9. 12. React에서 styled-components로 스타일링하기 안녕하세요 오늘은 리액트 스타일드 컴포넌트에 대해 알아보겠습니다. 저는 학원에서 CSS,SCSS를 배워 이부분이 익숙하지만 리액트를 사용하게 되면 프론트엔드 관점에서 CSS를 사용하는 것 보다 클래스 네임등을 설정하지 않아도 되므로 클래스 명 충돌을 방지하고 컴포넌트를 사용하게 되므로 재사용성을 높일 수 있다는 편한점이 있습니다. 기본적인 스타일드 컴포넌트 예제를 살펴보고 어떻게 사용하는지에 대해 작성해보겠습니다. 먼저 npm install styled-components 명령어를 실행해 주세요. import React from "react"; import styled from "styled-components"; const Button = styled.button` background-color: ${.. 2023. 9. 8. [validation]자바스크립트 (js) 코드 리액트 (react) 로 마이그레이션하기 (4) 안녕하세요 바로 이어서 4번째 기능 validation 입니다. 프론트단에서 form data를 입력할때 정규 표현식을 이용하여 validation을 진행하는데요 이부분을 리액트로 마이그레이션 해보겠습니다. 먼저 첫번째 글 링크입니다. https://rhgustmfrh.tistory.com/92 자바스크립트 (js) 코드 리액트 (react) 로 마이그레이션하기 (1) 안녕하세요. 오늘은 기존에 만들어 놨던 포토폴리오를 리액트로 마이그레이션 하는 작업중 첫번째 글입니다. 제가 이 작업을 하는 이유에 대해 먼저 말씀 드리겠습니다. 저는 비전공자로 개발 rhgustmfrh.tistory.com import React, { useState } from "react"; import "../assets/css/l.. 2023. 8. 26. [count]자바스크립트 (js) 코드 리액트 (react) 로 마이그레이션하기 (3) 안녕하세요. 바로 이어서 세번째 기능인 count를 마이그레이션 해보도록 하겠습니다. 1편 링크 첨부합니다. https://rhgustmfrh.tistory.com/92 자바스크립트 (js) 코드 리액트 (react) 로 마이그레이션하기 (1) 안녕하세요. 오늘은 기존에 만들어 놨던 포토폴리오를 리액트로 마이그레이션 하는 작업중 첫번째 글입니다. 제가 이 작업을 하는 이유에 대해 먼저 말씀 드리겠습니다. 저는 비전공자로 개발 rhgustmfrh.tistory.com import React, { useEffect, useState } from "react"; import { useRecoilState, useRecoilValue } from "recoil"; import { counterValueState.. 2023. 8. 26. [swiper, aos]자바스크립트 (js) 코드 리액트 (react) 로 마이그레이션하기 (2) 안녕하세요. 바로 이어서 자바스크립트코드를 리액트로 마이그레이션 하는 작업 두번째 시작하겠습니다. 전에 첫번째를 못보신 분들은 이작업을 진행하는 이유와 헤더에 대한 부분이 있으니 링크 추가하겠습니다. https://rhgustmfrh.tistory.com/92 자바스크립트 (js) 코드 리액트 (react) 로 마이그레이션하기 (1) 안녕하세요. 오늘은 기존에 만들어 놨던 포토폴리오를 리액트로 마이그레이션 하는 작업중 첫번째 글입니다. 제가 이 작업을 하는 이유에 대해 먼저 말씀 드리겠습니다. 저는 비전공자로 개발 rhgustmfrh.tistory.com import React, { useEffect, useState } from "react"; import AOS from "aos"; import { .. 2023. 8. 26. [dropdown]자바스크립트 (js) 코드 리액트 (react) 로 마이그레이션하기 (1) 안녕하세요. 오늘은 기존에 만들어 놨던 포토폴리오를 리액트로 마이그레이션 하는 작업중 첫번째 글입니다. 제가 이 작업을 하는 이유에 대해 먼저 말씀 드리겠습니다. 저는 비전공자로 개발을 시작하면서 처음 6개월은 학원에서 퍼블리셔 과정을 학습하였습니다. 해당 과정 중 배운것은 html,css,js,node.js,mongodb 등으로 학습한 내용을 바탕으로 mpa (multi page application) 를 만들어 포토폴리오로 사용하였습니다. 해당 과정 후 프론트엔드 개발자로 취업하였고 회사가 백엔드 기반인지라 1개월 후 백엔드 개발자로 전향하였는데요 8개월차가 된 지금 포토폴리오 구조를 바꾸려는 이유는 다음과 같습니다. 1. 대한민국 == 자바 표준 전자 정부 프레임워크는 자바입니다. 앞으로도 백엔드단.. 2023. 8. 26. React와 TensorFlow.js로 BTC 비트코인 예측 웹앱 만들기: 머신러닝 기반 프로젝트 튜토리얼 안녕하세요 오늘은 저번 당뇨병 예측과 비슷하게 비트코인의 미래 가격을 측정하는 프로젝트를 진행하겠습니다. 깃헙에 코드는 올려져 있으므로 중요 부분을 리뷰해보겠습니다. 데이터는 코인게코에서 가져왔습니다. //gru 순환 신경망 const createModel = () => { const model = tf.sequential(); model.add( tf.layers.gru({ units: 128, inputShape: [null, 1], kernelInitializer: "glorotUniform", recurrentInitializer: "glorotUniform" }) ); model.add(tf.layers.dropout({ rate: 0.2 })); /* 드롭아웃 비율 조절: 과적합을 피하려면 d.. 2023. 8. 17. 친환경 쇼핑몰 프로젝트 구축하기: 리액트와 리코일을 이용한 로그인 및 회원가입 페이지 구현 - 전역 상태 관리와 라우팅 적용 (3) 이번에는 프론트 리액트와 리코일을 이용하여 회원가입 및 로그인을 구현해보겠습니다. 먼저 App.tsx 입니다. import React from "react"; import AppRoutes from "./app/AppRoutes"; import { RecoilRoot } from "recoil"; function App() { return ( ); } export default App; 상태관리를 위해서 리코일을 사용합니다. auth.ts입니다. import { atom } from "recoil"; import axios from "axios"; interface User { username: string; email: string; token?: string; } export const userSta.. 2023. 6. 26. useEffect를 사용하여 api를 사용해보자 이번에는 useEffect를 사용해서 api를 불러내는 예제를 작성해 보겠습니다. DataDisplay라는 컴포넌트를 만들어 줍니다. import React, { useState, useEffect } from 'react'; function DataDisplay() { const [searchTerm, setSearchTerm] = useState(''); const [results, setResults] = useState([]); const handleSearch = async () => { const response = await fetch(`https://api.conceptnet.io/c/en/${searchTerm}?limit=10`); const data = await response.js.. 2023. 3. 21. 리액트 useState에 대해 알아보자 사용자가 증가 및 감소할 수 있는 카운터를 만들고 싶다고 가정해 보겠습니다. useState 훅을 사용하여 카운트에 대한 상태 변수와 카운트를 업데이트하는 함수를 만들 수 있습니다. import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); function increment() { setCount(count + 1); } function decrement() { setCount(count - 1); } return ( Count: {count} Increment Decrement ); } 사용자가 "Increment" 버튼을 클릭하면 증가 함수가 호출되고 현재 카운트 값에 1을 더한 .. 2023. 3. 21. 이전 1 2 다음 728x90 반응형
