728x90 반응형 프론트엔드7 Nginx 사용하여 프론트배포 후 백엔드 서버와 연결하기 웹 애플리케이션을 배포할 때 프론트엔드와 백엔드를 효과적으로 연결하는 것은 매우 중요합니다.이 글에서는 Nginx를 사용하여 프론트엔드 애플리케이션을 배포하고,이를 백엔드 서버와 연결하는 방법에 대해 알아보겠습니다.Nginx는 높은 성능과 확장성을 제공하는 웹 서버로,프록시 서버로도 많이 사용됩니다.이를 통해 프론트엔드와 백엔드 간의 원활한 통신을 설정할 수 있습니다.필요한 도구 및 환경 설정Nginx: 웹 서버 및 프록시 서버프론트엔드 애플리케이션: React, Angular, Vue 등백엔드 애플리케이션: Node.js, Spring Boot 등서버 환경: AWS EC2, DigitalOcean 등이 글에서는 AWS EC2를 사용하여 Nginx를 설정하고 프론트엔드와 백엔드 애플리케이션을 배포하는 과.. 2024. 5. 22. tailwind css에 대해 알아보자 안녕하세요 오늘은 css를 좀더 간편하게 작성하기 위해서 tailwind css를 적용해보고 간단한 문법을 알아보겠습니다. 먼저 공식문서에서 설치 및 적용 방법이 자세히 설명되어있습니다. https://tailwindcss.com/docs/installation Installation - Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. tailwindcss.com 해당 링크에서 적용시켜 보세요 만약 해당 방법으로 적용이 되지 않는 경우 input.css를 직접 app.tsx에 import 시켜주니 적용되는 이슈가 저는 있었네요 이.. 2024. 2. 10. 친환경 쇼핑몰 프로젝트 구축하기: 리액트와 리코일을 이용한 로그인 및 회원가입 페이지 구현 - 전역 상태 관리와 라우팅 적용 (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. 웹 포트폴리오 마스터하기: 김현승 포트폴리오 개선 방향과 코드 리뷰의 모든 것 안녕하세요 제가 처음 만든 웹포트폴리오 입니다. 제가 구현한 코드를 다시 복습하고 더 발전 시키는 포스트입니다. https://muganghskim.github.io/hskimport/ 김현승 포토폴리오 소개 페이지 어메스 커피 - 개발기간 : 약 2주 - 개발인원 : 본인 - 작업 기여도 : 100% - 주요특징 : 가상의 커피 전문점 웹사이트 구현, passport.js 통한 로그인 기능, 반응형 구현 - js : AOS,스와이퍼,isotop 라이브러 muganghskim.github.io 코드 리뷰 및 todo list를 작성하여 발전시켜 봅시다~ 감사합니다. 2023. 3. 10. 자바스크립트의 JSX 확장 구문과 리액트 컴포넌트에서의 활용 방법 jsx란 자바스크립트에서 HTML과 같은 코드를 작성할 수 있게 해주는 확장 구문입니다. 예를 들어 다음과 같이 쓸 수 있습니다. const element = Hello, World!; JSX의 주요 이점 중 하나 중괄호를 사용하여 HTML과 같은 코드 내에서 JavaScript 표현식을 작성할 수 있다는 것입니다. 이렇게 하면 콘텐츠를 동적으로 생성하고 데이터 및 사용자 입력을 기반으로 애플리케이션의 구조를 조작하기가 쉬워집니다. 예를들어 const items = ['apple', 'banana', 'orange']; const list = ( {items.map((item) => ( {item} ))} ); JSX를 사용하여 이와 같은 데이터 배열을 기반으로 항목 목록을 생성할 수 있습니다. 리액트는.. 2023. 2. 28. 리액트 컴포넌트 생성 및 활용 가이드: 기본 세팅과 컴포넌트 재사용의 이점 일단 컴포넌트를 작성하기 전에 기본 세팅부터 하겠습니다. index.js 폴더에서 위의 코드는 index.html에 root라는 id를 가진 div 태그를 리액트 기본 루트 돔으로 쓰겠다는 의미의 코드입니다. 을 감싸고 있는 를 지워줍니다. 해당 코드는 검사를 위한 코드로 우리가 테스트 프로젝트를 작성할 때 딱히 필요하지 않고 console.log() 사용시 에러가 발생할 수 있습니다. 이번에는 App.js에 들어와서 import logo from './logo.svg'; 와 태그 안에 있는 코드를 지워줍니다. 또한 스타일에 관련된 index.css app.css 안에 코드들도 지워줍니다. 해당 코드는 기본 스타일로써 내장되있던것입니다. 위와 같이 비워준 화면입니다. 저는 태그도 프레그먼트 태그로 비워주.. 2023. 2. 27. 리액트 사용의 이점과 시작 가이드: 프로젝트 구조 이해 및 기본 컴포넌트 생성 방법 리액트를 사용해야 하는 이유 구성 요소 기반 아키텍처: React는 구성 요소 기반 라이브러리로 코드를 쉽게 재사용할 수 있고 애플리케이션의 다른 부분을 쉽게 유지 관리하고 업데이트할 수 있습니다. 선언적 프로그래밍: React를 사용하면 응용 프로그램의 상태와 일치하도록 DOM을 변경하는 방법에 대해 걱정할 필요가 없습니다. 원하는 UI 모양을 선언하기만 하면 React가 나머지를 처리합니다. 가상 DOM: React는 가상 DOM을 사용합니다. 업데이트가 필요한 항목만 업데이트하여 성능과 속도를 개선하는 데 도움이 됩니다. JSX: React의 JSX 구문을 사용하면 HTML과 같은 코드를 쉽게 작성할 수 있습니다. 더 쉽게 읽고 이해할 수 있습니다. 크고 활동적인 커뮤니티: React에는 크고 활동.. 2023. 2. 27. 이전 1 다음 728x90 반응형
