Front End42 [React] 로컬에서 데이터 로직에 대한 고민 개발이라고 해야할지, 퍼블리싱이라고 해야할지 그런 일을 리액트로 작업하고 있는데 한, 두개가 아닌 수십개의 이미지를 어떻게 하면 하드코드하지 않고 로직을 만들어서 브라우저에 띄울 수 있을까에 대한 고민과 이를 풀어낸 과정. 적은 개수의 이미지 같은 경우엔 src 폴더 안에 img 폴더를 따로 만들고 여기에서 해당 이미지를 import 해서 사용했는데 구글링을 해보니까 이미지 같은 경우는 굳이 import를 하지 않아도 public 폴더 안에 assets 폴더를 만들고 여기에 이미지를 넣어 로 사용할 수 있더라. 이미지를 컴포넌트에 직접 import해서 사용했던 방식 import React from 'react'; import dropdown from 'img/btn_dropdown.svg'; const .. 2021. 12. 22. [Redux] 리덕스의 흐름을 이해하기 위한 여정 바닐라 자바스크립트의 코드를 보고서 '어떤 내용인지 알겠다'정도의 감이 잡혔을 때 자바스크립트를 이용한 라이브러리 중 하나인 리액트를 배우기 시작했다. 유데미에 있는 리액트 강의 중 하나인 Modern React with Redux 라는 강의를 통해 리액트와 리덕스를 같이 공부하면 되겠다 생각했는데 리액트는 어찌어찌 내용의 흐름을 따라갈 수 있는 반면, 리액트에서 리덕스를 사용하는 강의로 넘어가는데 전혀 이해를 할 수 없었다. 리덕스의 진입장벽이 높다고 들었는데 이런 의미였던건가. 강사분도 리덕스에 대해 설명을 하면서 처음에는 이해하기 어려워도 쓰다보면 그 난이도가 그렇게 어렵게 느껴지지 않는다라고 언급했다. 상태관리를 양방향이 아닌 단방향으로 흐르게 하는 Flux를 바탕으로 설계된 것이 Redux라고 .. 2021. 12. 20. [React] Hook으로 카카오맵 API 사용하기 | 마커 표시, 커스텀 오버레이 📍카카오맵 API 키 발급받기 업체의 장소를 표현하기 위해 카카오맵 API를 사용하였다. https://developers.kakao.com로 접속해서 로그인을 하고 애플리케이션 추가하기 버튼으로 앱 키를 발급 받는다. 네이티브 앱 키, REST API 키, Admin 키, JavaScript 키 중에서 JavaScript 키를 이용한다. 📍도메인 등록하기 내 애플리케이션 > 앱 설정 > 플랫폼에서 구현하려는 운영체제에 맞게 플랫폼 등록을 한다. 리액트를 이용하여 웹 사이트 화면에 지도를 띄우려고 했기 때문에 Web 플랫폼에 등록을 했다. 그 도메인에서만 API를 사용할 수 있기 때문에 꼭 등록해줄 것! (최대 10개까지 가능) 📍카카오맵 API 문서 훑어보기 https://apis.map.kakao.c.. 2021. 12. 13. 옐 FE개발자 포트폴리오 옐 FE개발자 👩💻 https://yelldev-portfolio.vercel.app/ - React.js, styled-components (Feat. TypeScript) 반응형 웹사이트 컬러칩 : #FFC000 #1BB991 #474339 #F7F3F4 🍋 컬러칩 정하기 https://dribbble.com/ Dribbble - Discover the World’s Top Designers & Creative Professionals Discover the world’s top designers & creatives Dribbble is the leading destination to find & showcase creative work and home to the world's best desi.. 2021. 11. 27. 리액트 Waveyy 웨이비 : Waveyy 🌊 https://compassionate-shockley-ee0497.netlify.app/#/ - React.js, styled-componets, netlify 메인 컬러 #F81894 #A077FF 웨이비 파비콘 이미지 UI 디자인을 생각할 때 메인컬러를 먼저 생각하고 그 다음으로 파비콘을 정한 후 프로젝트를 시작했다. 처음엔 핫핑크색과 보라색을 메인 색상으로 쓰고 싶어서 사이트의 이름을 '퍼핀: Purpin' 퍼플 + 핑크 조합으로 이름을 지었다가 만족스럽지 않아서 영상 스트리밍 서비스 '웨이브'에서 따와 웨이비: Waveyy 라고 지은 다음, 이에 알맞은 이미지를 찾았다. 파비콘을 내가 직접 만들긴 어렵기 때문에 어떤 이미지를 고를까 고민했는데 때 마침 원하는 색상으로 .. 2021. 11. 16. 이전 1 2 3 4 5 ··· 9 다음
