'REACT' 태그의 글 목록

TECH 2024. 4. 28. 21:08

툴팁은 클릭하거나 또는 마우스를 특정 구성 요소에 가져갔을 때(hover 했을 때) 상황에 맞는 도움말이나 정보를 표시합니다. 툴팁을 직접 만들어서 사용하던 중, hover 요소가 화면 상 오른쪽 끝에 위치할 때 툴팁의 컨테이너가 화면 너비를 넘어가는 현상을 발견했습니다. 다음과 같은 현상은 사용자가 예상한 대로 인터페이스가 동작하지 않고, 툴팁의 내용을 확인하기 위해 화면을 스크롤해야 하기 때문에 사용자 경험을 저해합니다. 따라서 위와 같은 경우를 개선하여 툴팁의 컨테이너가 화면의 가로 길이를 넘어가지 않도록 툴팁의 위치를 조정해 보도록 하겠습니다. 우선 수정 전 툴팁 코드는 다음과 같습니다.import styles from './tooltip.module.css';import IconQna..

React에서 TMap API 사용하기

TECH 2023. 12. 30. 14:48

이 글에서는 네이버 부스트캠프 내의 모각코 모집/관리 플랫폼인 모락 서비스를 개발하며 TMap API를 사용했던 후기를 담아 보았습니다. GitHub - boostcampwm2023/web17_morak: Morak | 네이버 부스트캠프 내 모각코 모집/관리 플랫폼 🧑🏻‍💻 Morak | 네이버 부스트캠프 내 모각코 모집/관리 플랫폼 🧑🏻‍💻👩🏻‍💻👨🏻‍💻. Contribute to boostcampwm2023/web17_morak development by creating an account on GitHub. github.com TMAP Open API는 웹 개발 또는 어플리케이션 개발에 다양하게 활용될 수 있도록, Javascript 형태로 제공되는 TMAP 지도 플랫폼입니다. TMap API는 이..

[React] useMemo와 useCallback로 리액트 렌더링 성능 최적화하기(Feat. React.memo)

TECH 2022. 4. 9. 10:00

안녕하세요. 리액트를 다루다 보면 렌더링 성능 최적화에 대한 이슈를 접하기 마련입니다. 리액트에서는 렌더링 성능 최적화에 관한 대표적인 훅으로 useMemo와 useCallback이 있습니다. 저는 개인적으로 useMemo와 useCallback이 뭐가 다른지, 어떤 상황에서 써야 렌더링 성능 최적화를 할 수 있을지 굉장히 많이 헷갈렸었는데요~ 오늘은 useMemo와 useCallback의 차이점에 대해 자세히 알아보고 이 둘의 사용법에 관해서도 간단하게 알아보도록 하겠습니다. ✔️ useMemo useMemo에서 Memo의 의미는 우리가 어떤 생각이 날 때마다 작성하는 메모라는 뜻이 아닙니다. 여기서 Memo라는 건 Memoization을 축약한 Memo라는 뜻입니다. Memoization, 메모이제이..

원티드 프리온보딩 프론트엔드 코스 3주차 회고 (1) — Next.js

ETC 2022. 3. 22. 02:29

프리온보딩을 시작하고 나니 시간이 무지 빠르게 흐른다. 드디어 3주차! 이번에는 Next.js를 처음 써 보게 되었다. 이름만 들었을 때 어려울 것 같았던 Next.js는 막상 해 보니 생각보다 어렵지는 않았지만, 역시 처음이라 그런지 어렵긴 어려웠다. (모순덩어리) 사실 마감 기한까지도 완벽하게 이해하지 못했는데 프리온보딩 코스가 끝나고 복습하고 나서야 조금씩 이해하는 중이다.... 이번 과제에서 나는 상품 상세 페이지, 고객센터와 마이페이지, e2e 테스트를 맡았다. 아무튼 시작~ 1. 상품 상세 페이지 처음에는 리액트에서 components를 작성하는 것과 동일하게 components 폴더 내에 페이지마다 폴더를 나눠서 컴포넌트를 작성했다. 컴포넌트 분리 기준은 위 사진과 같이 분리했다. Optio..

원티드 프리온보딩 프론트엔드 코스 2주차 회고 (2) — Redux

ETC 2022. 3. 5. 21:39

채용 과제를 하거나, 취업해서 회사가 생기고 나면 전역 상태 관리 툴을 사용하는 경우가 많을 거다. (어마어마한 props drilling으로 모든 걸 해결하지 않을 거라고 생각....) 그래서 리액트를 하면서 redux, recoil 같은 전역 상태 툴을 알고 있는 게 필수라고 생각했는데, 나는 왜 그동안 사용하지 않았는지? 아무튼 이번에는 리덕스를 필수로 사용하는 과제였고, 이전에도 Context API나 리덕스 튜토리얼 (정도지만)을 통해 사용해 봤기 때문에 그닥 걱정은 되지 않았다! 우선 이번에는 과제 변경 사항이 많았기 때문에 족금 정신이 없었고... swit 과제는 프로토타입이 없었기 때문에 디자인은 어떻게 하지 생각하다가 swit은 이미 잘 사용되고 있는 메신저이기 때문에~ 웹 버전 디자인을..

원티드 프리온보딩 프론트엔드 코스 2주차 회고 (1) — TypeScript

ETC 2022. 3. 2. 23:13

설날 연휴에 푹~ 쉬는 척 이것저것 공부도 많이 하고 나서 다시 듣게 된 2주차 수업. TypeScript 수업이었는데 사실 바로 실전 프로젝트를 하게 될 줄은 몰랐다. 그나마 설 연휴에 React with TS로 TodoList 만드는 강의라도 보고 따라해서 망정이라고 생각했음. 그리고 직접 해 보니까 더 어려웠따...... TypeScript 사실 타입스크립트는 C언어, Java, Python 그리고 약간의 C++까지 배웠던 전공생으로써 익숙한 부분들이 많았다. 당연함. 그것이 OOP이니까. 어떻게 보면 자바스크립트가 되게 희한한 언어다. 변수의 타입도 지정해 주지 않아도 되고, 호이스팅으로 인해 변수 선언을 호출보다 밑에 해도 오류가 안 난다든지 그런 점을 보면 말이다. 그치만 React+TypeS..

원티드 프리온보딩 프론트엔드 코스 개인 과제 회고

ETC 2022. 2. 24. 19:15

내가 참여한 원티드 프리온보딩 프론트엔드 코스는 2022/01/24부터 시작해 중간에 설날 연휴가 껴 있다. 해서 1주차 배우고 한 주를 쉴 수 있었는데, 필수가 아닌 개인 과제도 하나 있었다. 연휴에 놀지 말고 공부나 하자 해서 시도하게 되었다. 사실 타입스크립트, 리덕스 등 엄청 배울 게 많았던 일주일이었음 기능은 이 링크에 있는 화면을 구현하는 거였고, 처음 봤을 땐 좀 어렵겠는데? 싶었으나 은근 빨리 끝난 과제였다. 1. API 연동 사실 API 연동하는 데 시간이 많이 걸렸다. 벨로퍼트 리액트로 리덕스를 조금 공부하고 나서 과제에 돌입했었는데, 거기서 배운 커스텀 훅을 쓰려다 뭐가 잘 안 되더라.... 아무튼 API 호출은 이런 식으로 진행했다. export async function getHo..

[React] Checkbox (1) — Context API로 Checkbox 상태 관리하기

TECH 2022. 2. 19. 20:00

프로젝트를 하면서 카테고리를 체크박스로 선택하고 버튼으로 해제하는 기능을 구현해야 했는데 버튼으로 체크박스를 해제하는 방식에서 고민을 많이 해, 포스팅으로 남겨 두려고 합니다. 임의의 배열 데이터로 체크박스를 만들고 Context API로 상태 관리하기 아래와 같은 데이터로 체크박스를 만들었습니다~ 더보기 // utils/sampleData.js export const data = [ "가을", "가람", "기쁨", "구름", "나리", "너울", "누리", "노을", "눈꽃", "다솜", "마음", "마루", "미르", "무늬", "맑음", "믿음", "뭇별", "바다", "방울", "보름", "봄꽃", "별빛", "별밤", "별숲", "사랑", "솔잎", "새벽", "새싹", "샛별", "아침", "..

ABOUT ME

Foresitory 🌳 Foresitory 🌳

티스토리툴바