
💣 개요최근 프로젝트에서 화면 하단에 고정된 버튼을 구현하면서, 버튼의 위치가 동적으로 변경되지 않는 문제를 겪었습니다. 특히, 입력창(input)이 포커스될 때 버튼의 위치가 자동으로 조정되어야 했지만, 예상대로 동작하지 않아 사용자 경험에 문제가 발생했습니다. 1. 고정된 버튼의 위치 문제화면 하단에 고정된 버튼이 position: fixed 속성으로 설정되어 있어, 사용자가 input을 포커스할 때, 버튼이 키보드에 의해 가려지거나 위치가 적절히 변경되지 않아 사용성이 떨어졌습니다.2. 기존 해결 방법의 한계CSS만으로 문제를 해결하려 했으나, 다양한 화면 크기와 상황을 고려했을 때 고정된 bottom 값으로는 모든 상황에 적절히 대응할 수 없었습니다.이 문제를 해결하기 위해 React 포털을 도..

리드미 몬스터 서비스가 궁금하다면!서비스 둘러보기 : https://www.readme-monster.com/깃허브 둘러보기 : https://github.com/Readme-Monster/readme-monster/wiki 🏃🏻♂️ 시작하기사용자들이 자유롭게 피드백을 남길 수 있는 공간이 필요했습니다. 익명성을 보장하여 사용자의 직접적인 피드백을 듣기 위함입니다. 아래는 익명게시판 완성된 페이지 이미지 입니다.사용자는 게시판에 댓글을 남길 수 있으며, 댓글 목록은 실시간으로 업데이트됩니다. Firebase Firestore를 사용하여 데이터를 저장하고 불러옵니다.1. Import 및 초기 설정import React, { useState, useEffect } from "react";import {..

자기소개안녕하세요, 저는 항해플러스 1기 수료한 이지홍입니다. 대학에서는 멀티미디어공학을 전공했고, 그 후 2년동안 다양한 IT 부서에서 근무습니다. 특히 프론트엔드 개발에 흥미를 느껴, 에이블리 익스턴십, 공모전 등 관련된 여러 부트캠프와 워크샵에 참여해왔습니다. 이러한 경험들은 제게 중요한 기술적 토대를 마련해 주었고, 결국 전문 프론트엔드 개발자로의 길을 선택하게 만들었습니다.항해 플러스에 들어오기 전, 프론트엔드 개발자로 일하며 갖고 있던 고민프론트엔드 개발자로 일하면서, 실무에서 발생하는 복잡한 문제들을 보다 효과적으로 해결하고 싶다는 고민이 있었습니다. 특히, 최신 기술 트렌드에 대한 깊이 있는 학습과 실전 경험의 부족이 항상 마음에 걸렸습니다. 또한, 효율적인 코드 작성과 성능 최적화에 대한..
- Total
- Today
- Yesterday
- 알고리즘
- 구름톤
- JWT토큰
- 항해플러스프론트엔드
- react
- vue3
- 개발자
- 더미데이터
- 시스템설계
- Vue.js
- 레포지토리패턴
- 항해솔직후기
- 결제기능
- event종류
- eventListner
- 그림으로 이해하는 시스템 설계
- React18v
- props
- 디자인시스템
- 항해플러스후기
- vue.js3
- 이벤트리스너
- store.js
- 프로덕트설계
- focus와blur
- vite
- Repository pattern
- 로그인 인증
- http
- 회고
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |