본문 바로가기

Developing Diary10

[React 오답노트] 배포하기 리액트로 만들고 깃헙에 있는 프로젝트를 배포하기 * 먼저 gh-pages를 다운로드 해줘야 한다. yarn add gh-pages pakage.json { "name": "new_haninbridge", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^13.0.0", "@testing-library/user-event": "^13.2.1", "axios": "^1.2.3", "gh-pages": "^5.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-innertext":.. 2023. 1. 26.
[React 오답노트] Api 서비스를 이용하여 사용자에게 위치, 날씨정보 제공하기 Weather API를 이용하여 사용자의 위치를 기반으로 도시와 현재 날씨를 제공한다. * 먼저 파일 내에 axios, geolocation을 설치해 주어야 한다. yarn add axios yarn add react-navigator-geolocation img.jsx -> Landing 화면을 분할하여 보여줄 코드 import { ImgContainorAboutus, ImgContainorConsulting, ImgContainorDefault, ImgContainorInterpretation, Title1, Title2, ShortSummary, LocationAndWeather } from "./style"; import getUserLocationAndWeather from "../.. 2023. 1. 25.
[React 오답노트] Media query를 이용하여 반응형 UI 구현하기 미디어 쿼리와 스타일 컴포넌트를 이용하여 스마트폰과 pc에 다르게 반응하는 UI 구현하기 style.jsx -> style-component 파일 import styled from "styled-components"; import mainImg from "../../resources/images/landing/hello.jpg" import aboutUsImg from "../../resources/images/landing/aboutUs.jpg"; import interpretationImg from "../../resources/images/landing/interpreation.jpg"; import consultingImg from "../../resources/images/landi.. 2023. 1. 24.
[React 오답노트] Download link 만들기 Click to Download Resume를 클릭하면 pdf파일이 다운로드 되게 만들기 body.jsx -> 현재 페이지 구성 import { BodyDiv, IntroBox, IntroUpTitle, IntroDownTitle, IntroContentBox, IntroContent, InterpreterBox, InterpreterUpTitle, InterpreterDownTitle, PJWBox, PJWImg, PJWContentBox, PJWName, PJWContent, PJWResume, YTHBox, YTHContentBox, YTHName, YTHContent, YTHResume, YTHImg, ServiceBox, GeneralTitle, GeneralSlideAndConte.. 2023. 1. 22.
[React 오답노트] 리액트에서 Swiperjs 사용하기 Swiperjs를 사용하여, 일정 간격으로 자동으로 넘어가는 이미지 슬라이드 만들기 * 먼저 파일 내에 swiperjs를 설치해 주어야 한다. npm i swiper swiperjs.jsx -> 슬라이드를 구현해줄 코드 // Import Swiper React components import { Swiper, SwiperSlide } from "swiper/react"; // Import Swiper styles import "swiper/css"; import "swiper/css/pagination"; import "./slideStyle.css"; // import required modules import { Autoplay, Pagination } from "swiper"; expo.. 2023. 1. 20.
[React오답노트] 배경만 흐리게하기 div 속에 배경 화면을 넣고 text를 넣는데, "배경만" 흐리게 하기 Consulting Body Engine code import { BodyDiv, Intro, IntroUpTitle, IntroDownTitle, IntroContentBox, IntroContent, History, HistoryTitle, HistoryContentBox, HistoryContent, SlideBox } from "./style" function Body() { return ( Consulting 함께, 인도네시아로 한인브릿지 컨설팅은, 한국 기업들 또는 개인이 인도네시아로 진입할 수 있게끔 수많은 인도네시아에 대한 지식과 경험 그리고 이해도를 쌓아왔으며,.. 2023. 1. 17.
[React오답노트] Link 태그의 밑줄 제거하기 Navigation bar의 각 영역을 클릭하면 클릭한 페이지에 맞는 라우팅 처리 해 주기 Header Engine code import { HeaderDiv, HeaderLogo, NavigationBar, ToAboutUs, ToInterpreation, ToConsulting } from "./headerStyle"; import {Link} from "react-router-dom"; function Header() { return ( About us Interpreation Consulting ) } export default Header Header style code import styled from "styled-components"; // How to import img fr.. 2023. 1. 17.
[React오답노트] Styled Component를 활용하여 로컬 이미지 불러오기 Header, Footer의 구현 Header -> 로고를 클릭하면 Landing 페이지로, 그 밑의 Navigation Bar를 클릭하면 각 페이지로 Footer -> 기능 x, 언급 안할 것임 Header Engine code import { HeaderDiv, HeaderLogo, NavigationBar, ToAboutUs, ToInterpreation, ToConsulting } from "./headerStyle"; import {Link} from "react-router-dom"; function Header() { return ( About us Interpreation Consulting ) } export default Header Header style code impo.. 2023. 1. 17.
[React오답노트] MouseEnter가 반응하지 않을 때 사용자가 위의 화면에서 About us, Interpreation, Consulting 영역에 마우스를 얹으면, 오른쪽의 Hello, We are HanIn Bridge 영역의 화면이 알맞게 변화하는 UI를 만들어보자 Landing Engine code import Wrapper from "../../styles/wrap"; import Img from "../../pages/landing/img" import { FlexDiv, Ul } from "./style"; import { useState } from "react"; import { Link } from "react-router-dom"; // Main engine of Landing page function Landing () {.. 2023. 1. 17.
[React오답노트] 프로젝트 소개 작년 22년도 이맘때 쯤 친한 형이 만든 기업의 홈페이지를 제작, 관리하기 시작했다. 사용된 기술 : HTML, CSS, JavaScript(jQuery 라이브러리 사용) 나름 잘 만들어보겠다고 반응형 UI도 미디어 쿼리를 이용한 css로 구현했었다. 그러나 jQuery 라이브러리의 사용은 홈페이지 로딩속도를 극도로 느리게 만들었고, 늘 이에 대한 아쉬움이 있었다. 따라서 ReactJS를 배운 지금, 이 사이트를 ReactJS와 함께 새로 리마스터링 하려 한다. 그리고 이 곳은 그 개발 과정에서 겪은 시행착오를 기록하는 공간, 즉, 오답노트로 사용하려 한다. 모든 소스 코드는 github을 통해 확인 가능하다. https://github.com/Yang-Min-Seok/new-HanInBridge 2023. 1. 16.

티스토리툴바