[회고][데브코스 FE] 3차 프로젝트 회고

안녕하세요, 프론트엔드 개발자를 준비중인 dalsu 입니다.!~제가 참여했던 데브코스 1기가 저번주 금요일 수료식 이후로 끝이 났습니다.살짝 늦었지만, 지난 10월 말부터 11월 초까지 약 3주간 진행했던 3차 프로젝트에 대한 회고를 공유하고자 합니다.!~ 이번 프로젝트는 저에게 특별한 의미가 있었습니다.프론트엔드 개발자로서의 역할을 수행하면서 동시에 처음으로 Node.js를 활용한 백엔드 개발에도 도전해보았기 때문입니다.기획에 1주일, 실제 개발에 2주일을 투자했던 이 시간 동안, API에 대한 이해도를 높이고 프론트엔드와 백엔드 간의 협업에서 중요한 포인트들을 발견할 수 있었습니다. 일단 FE개발자로서 얻은피드백에 대해서 먼저 생각해보고자 합니다.FE 주요 피드백과 깨달은 점💭 UX 관점에서의 개선..

• format_list_bulleted FE 개발일지
• · 2024. 12. 16.
• textsms

[react-globe.gl] 지구본 시점 위치 기억해두기 by 세션스토리지

현재 마무리 진행 중인 Vite+TypeScript 프로젝트에서 react-globe.gl 라이브러리를 활용해 국가별 여행 위험 경보를 지구본에 표시하고 있습니다. 이번 글에서는 국가 디테일 페이지(예: 이탈리아)로 이동한 후 다시 지구본 페이지로 돌아와도 기존의 지구본 뷰(시점)를 유지하는 방법을 소개하고자 합니다.문제: 매번 초기화되는 지구본 뷰기존 코드에서는 사용자가 지구본 페이지에 접근할 때마다 지구본의 시점이 항상 대한민국으로 초기화되었습니다. 이로 인해 사용자는 매번 동일한 초기 위치에서 시작해야 했으며, 페이지를 떠난 후 다시 돌아왔을 때 이전에 보던 위치가 기억되지 않았습니다.또한, 현재 진행중인 데브코스의 FT님께서 제 페이지를 사용해보신 후, "지구본 페이지로 돌아올 때 이전에 보던 지..

• format_list_bulleted FE 개발일지
• · 2024. 10. 11.
• textsms

[react-globe.gl][성능 개선] 초기 지구본 위치를 대한민국으로 설정하고, 초기 위치 풀리지 않도록 만들기

현재 개인프로젝트로, vite+typescript 프로젝트 환경에서 react-globe.gl 라이브러리를 이용하여지구본으로 국가별 여행위험경보를 띄우고 있다. 문제상황https://github.com/vasturiano/react-globe.gl GitHub - vasturiano/react-globe.gl: React component for Globe Data Visualization using ThreeJS/WebGLReact component for Globe Data Visualization using ThreeJS/WebGL - vasturiano/react-globe.glgithub.com 공식깃헙에는 다양한 예제가 나와있는데, 그중에서 ' Choropleth' 예제 테마를 활용하였다.지구..

• format_list_bulleted FE 개발일지
• · 2024. 10. 1.
• textsms

[react-globe.gl] 지구본을 반응형으로 정가운데 오도록 만들기

현재 개인프로젝트로, vite+typescript 프로젝트 환경에서 react-globe.gl 라이브러리를 이용하여지구본으로 국가별 여행위험경보를 띄우고 있다. 문제상황https://github.com/vasturiano/react-globe.gl GitHub - vasturiano/react-globe.gl: React component for Globe Data Visualization using ThreeJS/WebGLReact component for Globe Data Visualization using ThreeJS/WebGL - vasturiano/react-globe.glgithub.com공식깃헙에는 다양한 예제가 나와있는데, 그중에서 ' Choropleth' 예제 테마를 활용하였다.테마와..

• format_list_bulleted FE 개발일지
• · 2024. 9. 27.
• textsms

JavaScript에서 TypeScript로: 3가지 방법으로 타입스크립트 도입하기

시작에 앞서...React와 TypeScript의 결합은 현대 웹 개발에서 점점 더 인기 있는 조합입니다.TypeScript는 JavaScript에 정적 타입 검사를 추가하여 코드의 안정성과 유지 보수성을 높이는 데 도움을 주며,React는 사용자 인터페이스를 효율적으로 구축할 수 있게 해줍니다. 그러나 기존의 JavaScript(jsx) 프로젝트를 TypeScript(tsx)로 전환하는 과정에서 고민이 생길 수 있습니다.특히, 기존의 컴포넌트에 타입을 추가하거나, 타입스크립트의 이점을 활용하기 위해 어떤 접근 방법을 선택해야 할지에 대한 고민이 클 것입니다. 이 글에서는 기존의 JSX 파일을 TypeScript(TSX)로 변환하는 세 가지 방법을 소개할 예정입니다.각 방법은 프로젝트의 규모나 상황에 따..

• format_list_bulleted Typescript
• · 2024. 9. 2.
• textsms

TypeScript 환경 설정

TypeScript 사용하기 위한 단계별 가이드타입스크립트 프로젝트를 시작하기에 앞서, 타입스크립트를 사용할 수 있는 환경을 설정해야합니다.이번 포스팅에서는 타입스크립트를 연습하기 위해 사용했던 타입스크립트 환경 설정 과정을 다뤄보겠습니다. 1. Node.js 설치Node.js 공식 웹사이트에서 LTS 버전을 다운로드하고 설치합니다.설치 후 터미널에서 node -v와 npm -v 명령어로 설치를 확인합니다. Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. 프로젝트 초기화새 디렉토리를 만들고 그 안에서 프로젝트를 초기화합니다:mkdir ts..

• format_list_bulleted Typescript
• · 2024. 8. 31.
• textsms