프로젝트 Repository GitHub - SV-Summer-BootCamp-Team-F/frontend Contribute to SV-Summer-BootCamp-Team-F/frontend development by creating an account on GitHub. github.com 목표 프로젝트에서 D3를 사용하는 페이지를 하나 맡았다. 아래에 있는 사이트처럼 마우스를 통해 넓은 화면을 이동할 수 있도록 하며 확대, 축소 기능까지 넣는 것을 목표로 한다. React D3 Tree bkrem.github.io 프로젝트 스펙 React, Vite, TailwindCSS, TypeScript Issue 1. D3.js 설치 우선, 2D 시각화에 특화되어있는 D3를 설치한다. 이 때, 주의해야 할..

상황 : .prettierrc 파일에 따로 typescript 설정을 해두지 않았습니다. 문제는 아래와 같았습니다. const [position, setPosition] = useState({ x: 0, y: 0 }); const [dragging, setDragging] = useState(false); const [rel, setRel] = useState(null); // 위와 같아야 하던 코드가 Prettier 세팅으로 인해 아래와 같이 변경됨 const [position, setPosition] = useState { x: 0, y: 0 }; const [dragging, setDragging] = useState false; const [re..

프론트엔드를 함에 따라 기본적인 개발과정을 따를 수 있으면 한 번 씩은 바라보는 주제가 있습니다. 바로 시각화 입니다. 어떤 주제로 개발을 할 때, 개발에 사용했던 데이터를 이용하여 시각화를 하는 것은 꽤나 값진 경험이 될 것입니다. 그렇기에 오늘은 D3를 이용하여 간단한 노드를 연결하는 작업을 해 볼 것입니다. 우선, D3가 무엇인 지 알아보아야겠죠? D3를 이전에 정리했던 글에서 살펴보실 수 있습니다. [D3.js] 강력한 성능의 시각화 라이브러리, D3.js에 대해 알아보자 D3.js 라는 이름을 들어 보셨나요? "Data-Driven Documents"의 줄임말인 D3.js는 웹 표준을 이용해 데이터를 시각화하는 데 사용되는 강력한 자바스크립트 라이브러리입니다. 주로 프론트엔드 고도화의 time-..

주요 기능 Fragments Map API Results & DataBase Used Queries End

진행정보 기간 : 23/05/26 ~ 20/05/27 (1박 2일) 규모 : 약 110명 참가 유형 : 참가자(개발 파트) 개발 유형 : iOS Demo https://youtube.com/shorts/u38oQMk1ERw?feature=share - YouTube www.youtube.com 개요(발표자료 활용) 방방고는 무계획 여행, 부담없는 여행, 근교 여행을 위한 앱 서비스 입니다. 현재 위치에서 가까운 관광지를 추천해주는 것을 메인 기능으로 하며 기획되었죠. 이제 방방고에 원하는 거리, 추천받을 관광지의 갯수, 현재 위치를 입력합니다. 그 과정을 거친 후 앱에서 관광지에 대한 정보를 사용자에게 보여줍니다 프론트엔드로는 iOS를 위한 Swift를, 백엔드로는 서버를 위해 python 기반의 dja..

Git : https://github.com/TMInstaller/GradeBuddy GitHub - TMInstaller/GradeBuddy Contribute to TMInstaller/GradeBuddy development by creating an account on GitHub. github.com IDE : IntelliJ IDEA Language : Java 11 Framework : Spring Boot 2.7.12 ORM : MyBatis Database : MariaDB Template Engine : JSP 제작기간 : 23/06/05 ~ 23/06/18 Demo End