yevdev◡̈

현재 포트폴리오 진행상황은 웹(PC) 버전만 일단 구현 완료한 상황이다! 아직 반응형은 진행하지 못했고,, 일단 바빠질 다음주를 대비하여 웹 버전만 완벽하게 해두기로,, 무료로 웹 프로젝트를 호스팅하기 위해 많이들 사용하는 Github Pages를 사용한 것을 기록해보겠다! 1️⃣ Repository > Settings > Pages 이동 호스팅을 하고자 하는 프로젝트가 담긴 Repository에서 Settings로 이동한다. Settings의 사이드 바를 보면 Pages탭이 있는데 그곳으로 들어간다! 여기서 master 혹은 main 브랜치로 설정한 후, save 버튼을 눌러준다. 이때 생성되는 초록색 바탕의 url을 복사한다!! 2️⃣ 프로젝트의 package.json파일에 homepage 프로퍼티 ..

스크롤할 때 애니메이션 효과를 주고자한다! ( 스크롤 할 때 말고 다른 컴포넌트 마운트시에도 사용가능 ) 💡Aos? (Animate On Scroll Library) - 스크롤 할 때 보여지는 영역에 애니메이션 효과를 넣을 수 있는 라이브러리 - 어떤 애니메이션이 있는지는 https://michalsnik.github.io/aos/ 요기서 확인할 수 있음 :) 1️⃣ 설치 yarn add aos 2️⃣ 사용할 컴포넌트 혹은 index.js에 import ! import AOS from 'aos' import 'aos/dist/aos.css' AOS.init(); 3️⃣ 애니메이션을 적용할 컴포넌트 (영역) data-aos="fade-up" : fade-out, zoom-in 등 다양하게 애니메이션 적용 ..

오늘은 React-scroll을 이용하여 원하는 영역으로 부드럽게 이동하는 동작을 구현해 보겠다. 포폴 사이트는 원페이지로 구성되어 있기 때문에 헤더의 각 항목들을 눌렀을 때, 하나의 페이지에서 나뉘어진 영역을 부드럽게 이동하고 싶었다. 💡React-scroll? - 1️⃣ React-scroll 설치 npm의 경우, npm install --save react-scroll​ yarn의 경우, yarn add react-scroll​ 2️⃣ Header 항목 버튼들이 있는 컴포넌트 import { Link } from 'react-scroll' 을 맨 위에 import 해준 후, 각 항목마다 Link를 걸어준다. 여기서 smooth 옵션은 각 항목을 클릭했을 때 부드럽게 영역을 이동할 수 있게 해줌! t..

개발하면서 가장 많은 시간을 뺏긴 것 같았던 모달 창 구현! ContextAPI로 전역적인 상태를 가지고 오자는 생각을 미리하지 못했어서 더 오래 걸렸던 것 같다! ContextAPI에 관한 공부는 이전에 했으므로 링크달아둠! https://yexjinitlog.tistory.com/56 [React] Study #21 | Context API를 사용한 전역 값 관리 이전 #20 까지 공부했던 챕터에서 까지, 특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에게 전달해주었다. 컴포넌트 한개 정도를 거쳐서 전달하는 것은 사실 큰 불편함은 없지만, 만약 3~4 yexjinitlog.tistory.com 구현하기에 앞서,, 구현할 모달창을 확인해 보자 이전 포스팅에서 이런 Carousel Slider을 구현..

포트폴리오 제작은 사실 지난 해부터 만들자 만들자 했는데, 미뤄지고 미뤄지다 만들지 못했다..^^,, 새해도 됐겠다, 본격적으로 이번주내로 포트폴리오 개발을 완료하기로 결정^,^! 아, 이 카테고리의 목적은 포트폴리오를 리액트로 개발하면서 간단하지만 쓸모있는 구현들을 기록해 나갈 예정이다 (거의 나를 위한 목적 ㅋㅋ..) 포트폴리오 탭 구성 (Navigation Header) 은 아래와 같다. Atomic Design Pattern으로 개발하고 있으며 간단히 그저 보여주는 사이트이므로 백엔드 개발은 패스, 더미데이터 이용, 상태관리는 딱히 필요 없다 생각

Github GitHub - yexjin/Rendering: 서울과학기술대학교 고급웹프로그래밍 프로젝트 🦋 서울과학기술대학교 고급웹프로그래밍 프로젝트 🦋. Contribute to yexjin/Rendering development by creating an account on GitHub. github.com API 문서 Rendering The Postman Documenter generates and maintains beautiful, live documentation for your collections. Never worry about maintaining API documentation again. documenter.getpostman.com Design 문서 플로우 2 18 Screens..

리액트에서는 배열이나 객체를 업데이트 해야할 때, 직접 수정하면 안되고 불변성을 지켜주면서 업데이트를 해주어야한다. 이때, concat, filter, map등의 함수를 사용해야한다. 하지만, 만약 객체의 데이터 구조가 복잡해지면 불변성을 지켜가며 새로운 데이터를 생성해내는 코드가 조금 복잡해지게 된다. 이때, immer라는 라이브러리를 사용하면 우리가 상태를 업데이트 할 때, 불변성을 신경쓰지 않으면서 업데이트를 해주면 Immer가 불변성 관리를 대신 해준다. Immer 사용법 1️⃣ Immer 설치 yarn add immer 2️⃣ immer 불러오기 보통은 produce라는 이름으로 불러온다. import produce from 'immer'; 3️⃣ produce 함수 사용법 첫번째 파라미터 : ..

이전 #20 까지 공부했던 챕터에서 까지, 특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에게 전달해주었다. 컴포넌트 한개 정도를 거쳐서 전달하는 것은 사실 큰 불편함은 없지만, 만약 3~4개 이상의 컴포넌트를 거쳐서 전달을 해야하는 일이 발생한다면 매우 번거로울 것..! 그럴 땐, 리액트의 Context API와 이전 #20에서 배운 dispatch를 사용하면 복잡한 구조를 해결! 💡 Context API? 프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리할 수 있다. 꼭 상태를 가리키지 않아도 된다. (값!) 이 값은 함수일 수도, 외부 라이브러리 인스턴스 일 수도 있고, 심지어 DOM일 수도 있다. 1️⃣ Context 만들기 const UserDispatch = React.createCon..

리액트 프로젝트에 리덕스를 적용하기 위한 리덕스 모듈을 만들어보자! 💡리덕스 모듈? 다음 항목들이 모두 들어있는 자바스크립트 파일 액션 타입 액션 생성함수 리듀서 위 항목들을 리덕스를 사용하기 위해 각각 다른 파일에 저장할 수도 있다. 액션과 리듀서가 서로다른 파일에 정의되어 있을 수도 있지만, 개발하는데 꽤나 불편할 수도 있으므로 리듀서와 액션 관련 코드들을 하나의 파일에 몰아서 작성해보자! (Duck 패턴) 1️⃣ counter 모듈 만들기 첫번째 모듈, counter을 만들어보자! modules/counter.js // 액션 타입 만들기 // Ducks 패턴을 따를 땐, 액션의 이름에 접두사 넣어주기! // 다른 모듈과 액션이름이 중복되는 것을 방지할 수 있음! const SET_DIFF = 'co..

리덕스 라이브러리 설치 yarn add redux redux 를 불러와서 redux에 내장된 API를 사용해보고 연습해보자! exercise.js import { createStore } from 'redux'; // createStore 는 스토어를 만들어주는 함수 // 리액트 프로젝트에서는 단 하나의 스토어를 만든다. // 리덕스에서 관리할 상태 정의 const initialState = { counter: 0, text: '', list: [] }; // 액션 타입 정의 // 액션 타입은 주로 대문자! const INCREASE = 'INCREASE'; const DECREASE = 'DECREASE'; const CHANGE_TEXT = 'CHANGE_TEXT'; const ADD_TO_LIST ..