-
Etc
모바일 웹에서 키보드에 가려지는 input 스크롤 이슈 해결기 (iOS & Android)
모바일 웹을 개발하다 보면 생각보다 자주 마주치는 문제가 있다.바로 input에 포커스를 주었을 때 키보드가 올라오면서 입력창이나 유효성 메시지가 가려지는 현상이다.처음엔 scrollIntoView() 한 줄이면 간단히 해결될 줄 알았지만,기기마다 다르게 동작하는 브라우저 환경, iOS와 Android의 뷰포트 처리 차이,내부 스크롤/외부 스크롤 문제 등 예상치 못한 상황들이 연이어 발생했다. 이 글은 그 과정에서 겪은 시행착오와 최종적으로 어떻게 해결했는지를실제 코드와 함께, 하나씩 천천히 분석한 기록이다. 1. 문제 상황1) 유효성 체크 문구가 잘린 상태로 노출됨2) 전체 문구가 보이도록 input 포커스 시 자동 스크롤되도록 수정3) 자동으로 올라오는 키보드로 인해 Input 자체가 가려져서 노출..
-
Etc
개발자 투잡 추천, Outlier.ai 하는 방법 및 후기 & 추천인
안녕하세요!오늘은 Outlier.ai 후기를 남기려 합니다. “시간도 없고, 체력도 부족한데… 나도 뭔가 의미 있는 부업이 없을까?”이런 생각 한 번쯤 해보신 적 있지 않나요?저도 그랬어요. 바쁜 일상 속에서 틈틈이 할 수 있는 재택 부업을 찾다가우연히 알게 된 사이트가 Outlier.ai(아웃라이어)입니다. "AI 알바", "AI 훈련 참여자", "UI 평가 아르바이트" 등으로 검색해보면 종종 나오는 이름인데,처음엔 반신반의했지만 지금은 너무 만족스럽게 참여하고 있고,저처럼 조용히 돈 벌면서 의미 있는 일을 하고 싶은 분들에게 소개하고 싶어서 이렇게 포스팅을 하게 되었어요. 또, 어느 정도 일을 해서 그런지 추천인 등록 할 수 있는 권한이 주어졌더라고요!관련 이야기는 하단에 나와있습니다. 혹시 필요하신..
-
front
[스터디] 내가 선호하는 CSS 전략과 클래스 네이밍 방식
‼️내가 선호하는 CSS 전략과 클래스 네이밍 방식 개발을 하다 보면 자연스럽게 선택하게 되는 것이 있다.바로 CSS 스타일링 방식과 클래스 네이밍 전략이다. 하지만 평소에 무심코 사용하던 것들에 대해 진지하게 고민해 본 적이 있는가?나 역시 이번 스터디 주제로 이 내용을 처음 접했을 때는 꽤 당황스러웠다. 하지만 오히려 이 기회를 통해 나의 CSS 전략을 정리하고, 어떤 기준으로 스타일링을 선택하고 있었는지를 되돌아볼 수 있었다.이번 글에서는 CSS 사용 방식의 종류, 내가 실제로 선호하는 방식, 그리고 클래스 네이밍 전략에 대해 정리해보려 한다.✅ CSS를 사용하는 여러 가지 방식CSS는 웹 페이지의 스타일을 정의하는 핵심 기술이다.그러나 프로젝트 환경이나 개발자의 성향에 따라 다양한 방식으로 사용..
-
front
[스터디] 토이 프로젝트 - pomodoro, 배포부터 pwa 적용까지
이번 스터디 주제는 토이 프로젝트로, 내가 스피커였다.그동안 만들고 싶었지만 계속 뒤로 미루던 것들을 다같이 해보면 어떨까 싶어서 주제로 선정하게 되었다. 4주차 동안 진행하는 건데, 1주차는 기획안 작성이라 사실상 3주만에 프로젝트를 완성해야 했다.목표는 "실제로 운영 가능한 프로젝트"를 만드는 것이였다. 💡 토이 프로젝트 주제내가 정한 주제는 사이트 프로젝트 주제는 "뽀모도로 웹사이트"로 이전부터 생각해오던 것이었다. 원래 집중을 정말 못하다가 이대론 안되겠다 싶어서 시작한게 뽀모도로였는데,생각보다 나한테 잘맞아서 취준시절부터 꾸준히 사용하는 방법이다. 집에서는 뽀모도로 전용 시계를 사서 잘 애용하고 있는데,막상 회사에서 사용하려니 소리가 너무 크게 날 것 같아서 웹 사이트가 있으면 좋겠다..
-
카테고리 없음
[스터디] React 폴더 구조, FSD Atomic Design 모노레포까지
❓폴더 구조 : 그게 뭔데지금까지 나는 폴더 구조에 대해 별 생각이 없었다.이전 회사에서는 혼자서 일했었고, 새로운 사람이 오고 나서도 프로젝트가 급박해서 다른 생각을 할 여력이 없었다. 그러다 퇴사를 하고 이직을 준비하면서 항해 부트캠프를 듣게 되었고, FSD를 알게 되었다.FSD를 공부하면서 느꼈던 것은 ‘왜 이렇게까지 해야 하지?’였다.처음 보는 개념에, 그 개념에 따라 폴더를 나눠야 하니 감이 오지 않았다.팀원들과 이야기를 나누면서 해봐도 의견이 나뉘었다.회사에서 프로젝트 진행하기도 바쁜데 이거 하나까지 이렇게 정해야 한다고?라는 생각에 ‘FSD는 별로다’라고 정해버렸다. 그리고 이 생각을 끝으로 폴더 구조는 다시 저 멀리 사라졌다. ‼️ 깨달음의 순간 그러다 새로운 직장에 들어오게 되고, 다른..
-
react
React 19 톺아보기 - use
스터디의 두 번째 주제로 정한 hook은 use였다.이번 주는 갓생 살기로 다짐해서 나름 열심히 공부해 봤다. 1. Useconst value = use(resource); Promise나 Context와 같은 데이터를 참조하는 hook. 다른 React hook과 달리 use는 조건문과 반복문 내부에서 호출이 가능하다.다만, 컴포넌트 또는 훅 안에서만 호출해야 한다. resource : 참조 데이터. Promise나 Context일 수 있다.Promise나 Context에서 참조한 값을 반환한다. 1) Context 참조import { createContext, useState } from "react";import ThemeDisplay from "../components/ThemeDisplay"..
-
react
React 19 톺아보기 - useTrasition
항해 플러스 부트캠프가 완료되고, 항해 사람들끼리 비대면 스터디를 진행하기로 했다.주제는 React19 톺아보기로 한 달 동안 진행하기로 했다! 신규 메서드 혹은 hook을 살펴보고,실무에 도입할만한 메서드가 있는지, 기존 코드를 어떻게 효율적으로 개선할 수 있을지 고민하는 것이 목표이다. 첫 주자차에는 hook을 살펴보며 어떤 변화가 있었는지 이야기하는 시간을 가졌다.대체로 "굳이 왜 사용해야 하는지 모르겠다"는 의견이 강했다.그래서 그 중 메서드들을 몇 개 꼽아서 실제로 구현해 보기로 했다.사용해 보면 다를 수도 있으니까! 처음 선택한 메서드는 useTransition이다. 1. UseTransitionconst [isPending, startTransition] = useTransition() u..
