yevdev◡̈

한국대학생IT경영학회 (KUSITMS) 활동 중 하나인 기업프로젝트. 과제를 제시한 기업은 이큐브랩(ECUBELABS). 이큐브랩은 IoT 기술을 기반으로 한 스마트 폐기물 솔루션을 제공하여 폐기물 산업의 효율 개선 방안을 제시하고 기업 및 지자체의 효율성을 높임과 더불어 도시환경 개선을 위해 노력하는 기업으로, 북미시장에서 쓰레기 배출자 ↔ 수거자를 연결시켜주는 매칭플랫폼 Haulla 서비스를 제공하고 있었다. 이큐브랩이 제시한 과제의 목적은, 효율, 효과적인 CS 관리 Product를 설계함으로써 Haulla 서비스 배출자 고객의 Retention을 높이고, CS operation cost를 줄이는 것. 따라서 과제의 결과물은, Back-office CS 관리 흐름(Flow) 및 화면설계(Wirefr..

Surfee 런칭이 완료됐다 ! 사이트는 https://surfee.co.kr 여기로 🚀 (많은 피드백과 후기 부탁함니다😊) ➰자세한 정보 (디스콰이엇) : https://disquiet.io/product/surfee-1645603651836 Surfee | Disquiet* 노코드 랜딩페이지 제작 툴 disquiet.io ➰Github repository : https://github.com/thxxx/kiwi GitHub - thxxx/kiwi: LandingPage MVP for Kiwi LandingPage MVP for Kiwi. Contribute to thxxx/kiwi development by creating an account on GitHub. github.com FE 개발자로 참여..

Surfee 개발자로 출근한지 한달은 된거 같은데, 아직 일주일 밖에 안지났다 .. ! 지난 주에 '새로운 알바 + 근로 + 새로운 일 + 자격증 공부 시작하려고 맘먹기(?)' 등을 하느라 너무너무 바빴는데, 그래도 바쁜 와중 블로그가 생각났고 저번 Portfolio 카테고리 처럼 Surfee를 개발하며 생긴 어려움과 해결코드를 기록해보고자 한다. 내가 기획 단계에 있었던 팀도 아니고 더군다나 대학생 초기 스타트업 팀이기 때문에 디자인, 화면 그런건.. 어느정도 보안을 지켜가며? 기능위주로 기록할 예정! 사실 1차 MVP 개발이 너무 바빠서 .. 글을 잘 올릴지 모르겠다 ㅠㅠ.. 지금 기능의 70프로는 구현되어있는거 같지만 ,,, ㅋㅋ,, 암튼 다시 포스팅 시작! 아쟈뷰👊

보호되어 있는 글입니다.

현재 포트폴리오 진행상황은 웹(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을 구현..

웹 개발을 하다보면, 은근 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으로 개발하고 있으며 간단히 그저 보여주는 사이트이므로 백엔드 개발은 패스, 더미데이터 이용, 상태관리는 딱히 필요 없다 생각