Dev Blog

진행 사항 - Contact Section 구현 - Nav 버튼 클릭 scrollTo 로직 구현 - 전체적으로 CSS re-sizing Contact Section ScrollTo import React from "react"; import styled from "styled-components"; import theme from "../common/style/themes/default"; import MainLogo from "../assets/images/logo.png"; import GitLogo from "../assets/images/github.png"; import BlogLogo from "../assets/images/tistory.svg"; function MainNav() { //스..

진행 사항 02 [Client]ADD Studies Component - Implement Studies and Modal - Store Studies data in Firestore - Use useState method to convey according datas to Modal component 03 [Client]ADD Works Section - Implement Works Section - Store Works data in Firestore - Use useState method to convey according datas to Modal component Firestore 겹친 영역 이벤터 Studies / Works 의 아이템 클릭 시 모달 창이 뜨는데, 아이템의 어떠한 부분을 클릭해..

금일 진행 사항 - About Section2 Education 구현 완료

금일 진행 사항 - About Section1 구현 완료 - Pair review Carousel Pair review Carousel React-slick Library 를 사용하여 구현했다. 커스터마이징은 자유롭지 않지만 편리하다. Firebase 에 리뷰 데이터를 저장하여 사용하는 방법도 있지만, 간단한 텍스트 데이터이기에 src - assets - reviews 의 자바스크립트 파일에 리뷰 배열을 만들어 데이터를 저장하고 불러오는 방식으로 구현했다. Carousel.js 코드 import React, { Component } from "react"; import Slider from "react-slick"; import styled from "styled-components"; import "s..

금일 진행 사항 - Navigation Bar 구현 완료 - Home Section 구현 완료 - About Section 구현 중 Navigation Bar & Home Section About Section 페어리뷰의 Carousel 구현 예정. 관련 데이터를 임의의 js 파일에 넣어둘지 아니면 firebase firestore 를 사용할지 생각중. 오늘의 생각 전체적인 사이즈 조정이 필요하다. 각 섹션이 한눈에 들어오도록 UI 를 구성할 필요가 있어 보인다.

금일 진행 사항 - 컴포넌트 세분화 작업 진행 컴포넌트 리액트 JSX 및 HTML element 로 초안 작성 완료 예시) 자세한 작업내용은 아래 링크에서 확인 가능 https://www.figma.com/file/LUfL42xIwdg8LKHaeiIXUo/Portfolio-Project?node-id=0%3A1 Figma Created with Figma www.figma.com 작업 예정 실제 코드로 작성 / React + Styled Component

금일 진행 사항 - 컴포넌트 세분화 작업 진행 - 모달 UI 추가(리뷰 / 프로젝트 디테일 설명) - 깃헙 readme.md 업데이트(UI 추가) 컴포넌트 세분화 작업 실제 코드를 작성하기 전에 페이지 및 컴포넌트 세분화 작업을 진행 중인데, 이는 각 페이지에 어떤 컴포넌트가 포함되어 있는지, 그리고 어떤 엘리먼트가 쓰여야 하는지 등을 미리 파악하여 실제 코드 작성의 효율을 높이기 위함이다. 해당 프로젝트의 규모가 크지 않으므로 Atomic Design 을 적용하지 않고 진행할 예정이다. 다만, Styled Component Theme 개념을 적용하여 스타일(색상 & 텍스트 스타일 등)을 재사용할 계획이다. 모달 UI Pair Review Detail Project & Studies Detail

네비게이션 바에서 특정 메뉴를 클릭했을 때 해당 페이지로 스크롤 이동하는 로직 출처: https://enai.tistory.com/33