728x90 반응형 포트폴리오12 [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. React와 TensorFlow.js로 당뇨병 예측 웹앱 만들기: 머신러닝 기반 프로젝트 튜토리얼 안녕하세요 오늘은 제가 가지고 있는 약간의 프론트 지식에 머신러닝을 이용한 꿀잼 사이트를 만들어보려합니다. vs 코드를 실행하고 프로젝트를 시작할 폴더를 만들어줍니다. 해당 폴더에서 시작합니다. npx create-react-app my-app (리액트 앱 생성) npm install react-router-dom (라우팅) npm install axios (api) npm install recoil (상태관리) npm install --save typescript @types/node @types/react @types/react-dom @types/jest (타입스크립트) 타입스크립트 버전 관련 에러 발생 시 명령어들 뒤에 --legacy-peer-deps 를 뒤에 붙여주세요. 깃헙 첨부합니다. ht.. 2023. 8. 9. 포트폴리오 리뷰: AI 갤러리 프로젝트 - Node.js, MongoDB, EJS 템플릿 엔진을 활용한 웹 개발 안녕하세요 오늘은 포트폴리오에 사용한 기술들을 리뷰하고 복습하는 시간을 가져 보도록 하겠습니다. 제가 가장 좋아하는 사이트입니다. https://aigallery-5rhm.onrender.com/ AI 갤러리 AI 갤러리 인공지능 그리고 예술 인공지능을 이용하여 발현되는 다양한 상상력과 재능 AI를 사용한 예술이란 무엇인가? aigallery-5rhm.onrender.com 해당 웹페이지는 node.js 기반 서버로 만들었습니다. express, mongodb, ejs 템플릿 엔진 등이 사용되었습니다. 기본 서버 세팅 구성입니다. const express = require("express"); const MongoClient = require("mongodb").MongoClient; const mome.. 2023. 7. 20. 친환경 쇼핑몰 프로젝트 구축하기: 백엔드 상품 관리 기능 구현 - 엔티티, 리파지토리, 서비스와 이미지 저장 방식 적용 (4) 이번에는 백엔드 상품 등록 및 변경 기능을 구현해보겠습니다. 먼저 상품 엔티티를 등록합니다. import javax.persistence.* @Entity @Table(name = "products") data class Product( @Id @GeneratedValue(strategy = GenerationType.IDENTITY) val id: Long? = null, val name: String, val description: String, val price: Float, val imageUrl: String? = null ) 리파지토리 구현 import com.hsproject.envmarket.products.Product import org.springframework.data.jpa.re.. 2023. 6. 26. 친환경 쇼핑몰 프로젝트 구축하기: 리액트와 리코일을 이용한 로그인 및 회원가입 페이지 구현 - 전역 상태 관리와 라우팅 적용 (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. 친환경 쇼핑몰 프로젝트 구축하기: 스프링 부트와 JWT를 활용한 회원가입 및 로그인 기능 구현 - 보안 설정 및 인증 과정 개요 (2) 백엔드 회원가입 및 로그인 기능을 구현해보겠습니다. 자바 17, 스프링부트, 그래들, 코틀린, postgres, 스프링 security를 사용합니다. 가장 먼저 저는 사용자보안으로 jwt 를 사용할겁니다. import com.hsproject.envmarket.oauth.RoleName import com.hsproject.envmarket.util.JwtAuthenticationEntryPoint import com.hsproject.envmarket.util.JwtAuthorizationFilter import lombok.RequiredArgsConstructor import org.springframework.beans.factory.annotation.Autowired import org.spr.. 2023. 6. 26. 이전 1 2 다음 728x90 반응형
