yevdev◡̈

스크롤할 때 애니메이션 효과를 주고자한다! ( 스크롤 할 때 말고 다른 컴포넌트 마운트시에도 사용가능 ) 💡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을 구현..

웹 개발을 하다보면, 은근 carousel이 많이 보인다. 그래서 기록하는 구현 방법! 💡Carousel ? Carousel은 회전목마라를 뜻! 이미지나 영상들을 슬라이드 형태로 나타낸 것이라고 쉽게 생각하면 된다. 넷플릭스에서 쉽게 Carousel을 이용하여 영상들과 이미지를 보여주는 슬라이더를 볼 수 있다! 구현할 Carousel은 아래의 사진과 같다. 1️⃣ react-slick 설치 npm npm install react-slick --save npm install slick-carousel --save​ yarn yarn add react-slick yarn add slick-carousel​ 2️⃣ import! slider을 사용하는 부분에 해주면 될것 같다! import Slider fro..

포트폴리오 제작은 사실 지난 해부터 만들자 만들자 했는데, 미뤄지고 미뤄지다 만들지 못했다..^^,, 새해도 됐겠다, 본격적으로 이번주내로 포트폴리오 개발을 완료하기로 결정^,^! 아, 이 카테고리의 목적은 포트폴리오를 리액트로 개발하면서 간단하지만 쓸모있는 구현들을 기록해 나갈 예정이다 (거의 나를 위한 목적 ㅋㅋ..) 포트폴리오 탭 구성 (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..

지난번 NP-완전 문제 (1) 포스팅에 이어서 계속한다. 저번 포스팅에서는 결정문제까지 다루었는데, 이번 포스팅에서 다룰 건 아래와 같다. NP-완전(NP-Complete, NP-완비) 문제를 이해하기 NP-완전 증명 방법을 이해하기 NP 집합에 속하는 결정 문제 중에서 가장 어려운 문제의 부분집합 NP-완전이라는 사실이 판명됨으로써 얻을 수 있는 이득을 이해하기 음 일단 그전에! P와 NP 문제를 이해해보자 1️⃣ 문제의 분류 ( P와 NP ) P : 다항식 시간복잡도를 가진 알고리즘으로 해결되는 (polynomial) 문제 집합 [결정문제 관점에서] 결정 문제들 중에서 쉽게 풀리는 것을 모아 놓은 집합. 다항식 시간에 Yes 또는 No 대답을 할 수 있는 문제 전산학자들이 제안한 '풀기 쉬운' 문제의..

NP-완전 이론 : 문제를 현실적인 시간에 풀 수 있는가에 관한 이론 복잡한 문제가 주어졌을 때, 고민할 것 답이 존재? 어떻게 답을 찾는가? 찾은 것이 올바른지 어떻게 검증? 쉬운문제 / 답은 구하는데 시간이 짧은 문제 어려운 문제 / 답을 구하는데 시간이 오래 걸리는 문제 풀 수 없는 문제 / 너무 어려워서 풀리지 않는 문제 아리송한 문제 / 어떤 집단 문제들은 어려워 보이기는 하지만, 그 답을 보면 옳다는 것을 검증하기가 쉬운 그러한 집단 문제 예) 퍼즐 맞추기 : 모나리자를 500조각 낸 퍼즐을 구입하여 짝을 맞추는 문제 : 문제를 푸는 것은 어렵지만, 답을 보고는 그것이 옳다는 것을 판정하는데 500 조각만 조사하면 됨으로 검증하기 쉽다. 이번 포스팅에서 다룰 것. 문제의 난이도 "다루기 힘든 ..

Miller-Rabin Primality Test : 밀러-라빈 소수판별법 임의의 수 a가 소수인지 아닌지를 확률적으로 판별해주는 알고리즘 이 알고리즘은 주어진 수 a이 소수임을 증명하지 않고, 소수가 아닐 확률(여사건)을 분석하여 소수를 판별함. 왜 확률적인가? a가 큰수이고, 소수 판별을 위해 먼저 2로 나누어 떨어지지 않는다고 가정한다면, 2, 4, 6, 8 등의 2의 배수인 수로도 나누어 떨어지지 않는다. 즉 이 수들에 대해서 검사할 필요가 없다. -> 전체 자연수에 대해서 50%의 숫자들을 검사한 효과! a가 3으로 나누어 떨어지지 않는다면 6, 9, 12 등의 수에 대해서도 검사할 필요가 없다. -> 전체 자연수에 대해서 33%의 숫자들을 검사한 효과 a가 5로 나누어 떨어지지 않는다면, 10..

기수정렬? 데이터끼리의 직접적인 비교 정렬이 아닌, 숫자를 부분적으로 비교하는 정렬방법 제한적인 범위 내에 있는 숫자에 대해서 낮은 자릿수부터 자릿수 별로 비교 정렬하는 알고리즘 어느 비교 정렬 알고리즘보다 빠른 큰 장점!! 기 (Radix)? 특정진수를 나타내는 숫자들 10진수의 기 : 0,1,2,3,4,5,6,7,8,9 2진수의 기: 0,1 🚫주의할 점 10의 자리가 같을 때 왜 035가 131 위에 위치하면 안되는 것인가? -> 1의 자리에 대해 정렬해 놓은 것이 아무 소용이 없게 되기 때문이다. ❗️정렬알고리즘은 안정성을 가진다. 입력에 중복된 숫자가 있을 때, 정렬된 후에도 중복된 숫자의 순서가 입력에서의 순서와 동일하다. 💡RadixSort 알고리즘 (의사코드) 입력 : n개의 r진수의 k자리..