괴발개발: 우당탕탕 개발하기

Chrome 엑셀 업로드가 안 된 이유: MIME 타입과 react-dropzone의 파일 검사

엑셀 업로드가 한 자리의 Chrome에서만 실패했다. 같은 파일과 계정으로 네이버 웨일에서는 성공했고, 다른 PC의 Chrome에서도 정상이었다. 파일 선택창은 열리지만 파일을 고른 뒤 화면에 변화가 없었다. 개발자 도구 Network에도 업로드 요청이 나타나지 않았다. 처음에는 로그인 상태나 서버 오류를 의심하기 쉽다. 하지만 이 증상에서 중요한 단서는 서버 요청 자체가 없었다는 점이었다. 파일이 서버에 도달하기 전, 브라우저의 파일 선택 결과를 프런트엔드가 처리하는 단계에서 흐름이 끊겼다. 파일 이름과 MIME 타입은 별개다 브라우저에서 사용자가 고른 파일은 File 객체로 전달된다. 여기에는 name과 type이 따로 있다. 예를 들어 이름은 orders.xlsx여도 type은 브라우저와 운영체제 ..

1주차 — Python 기본기와 Batch 코드 읽기이번 주 목표이번 주의 목표는 Python을 완벽하게 배우는 것이 아니다.회사에서 사용 중인 Python Batch 코드를 읽고, 데이터가 어디서 들어와 어디로 가는지 따라갈 수 있는 수준까지 익히는 것이 목표다.React/TypeScript와 Java 개발 경험이 있기 때문에 Python 문법을 처음부터 깊게 공부하기보다, 실무에 필요한 부분만 빠르게 익힌다.이번 주 학습 비중Python 문법 학습: 30%직접 코드 작성: 30%회사 Batch 코드 분석: 40%하루 1시간~1시간 30분 정도를 기준으로 한다. Day 1 — Python 기본 자료형공부할 내용변수문자열 / 숫자 / Booleanlistdicttupleset특히 list와 dict를 집..

올해는 Copilot, Codex, Claude 등 다양한 AI 툴을 사용하고, 바쁜 일정 속에서 개발을 해왔다. AI를 활용한 데이터 매핑 툴, 데이터 배치 및 검사 프로그램, 금융사 통합 등록 및 관리 프로그램, 온라인 견적 비교 프로그램, Nest.js를 제거하고, Next.js만 활용하는 리팩토링, 2개의 DB 스키마 마이그레이션 및 매핑 구조 변경 등. 대략 3월부터 프로젝트를 맡기 시작하면서 얼마 안되는 기간 속에서 많은 일은 해왔고, 그만큼 AI 활용에는 익숙해졌고 퍼포먼스도 어느정도 만들었다. 하지만 늘 마음 속에는 일부 구조나 라이브러리 등을 제대로 이해하지 못하는 것에 대한 불안함이 있었고, 이번에 개발자이신 대표님이 새로 오시면서 네트워크 학습과 AWS에서 사용중인 서비스를 자체 서버..

올해 업무를 하거나 면접을 보면서 React Query를 사용하거나 물어보는 경우가 많았다.특히 외국인 개발자분은 면접 중에 특이한 케이스를 주시고 이때 React Query를 어떻게 사용할건지 물어보시는 경우도 있었다.그래서 공부하면서 자주 잊는 부분들을 정리하고 가려고 한다. useMutation의 경우, onSuccess, onError등 적은 갯수의 옵션을 갖지만 useQuery를 옵션 값이 많아 useQuery에 대해 정리하였다.참고로 자주 사용되는 옵션은 queryKey, queryFn, staleTime, enabled, refetchWindowFocus, select 정도이다. useQuery의 옵션들queryKey캐시를 구분하는 고유한 키로 키가 같으면 동일한 캐시를 공유함 queryF..

카페에서 코딩하다가 옆 테이블에 있는 외국인 개발자분과 대화할 기회가 있었다.경력은 주니어 레벨이었지만 혼자 프론트와 백엔드를 구현하고 자동으로 배포까지 하신다고 하셔서 궁금해서 이것저것 물어보다가 정보를 얻게 되었다.그 중에서 본인이 직접 사용하신다고 강력하게 추천한 사이트가 있어서 기록으로 남기려고 한다. 조사해보니 간단하고 비용도 저렴해서 1인 개발 혹은 작은 규모의 개인사업을 시작한다면 도움이 될 것 같다.(소개해주실때 대략 비용이 서비스당 월 10달러에서 13달러 근처라고 했다.) 1. VarcelNext.js를 만든 회사 Varcel이 만든 서비스로 프론트엔드 전용 클라우드 플랫폼이다.Github의 레파지토리를 연동하고 push하면 자동으로 배포를 해준다. 특징- React, Next.js,..

현업에서 다른 분들의 코드를 보다보면 자주 보이는 T 외에도 K, V, S 등 다양하게 사용되는 제네릭 타입을 볼 수 있다.개인적으로 주니어로서 사수나 팀장 없이 일을 하면서 해당 내용이 늘 궁금했었는데 최근 다른분의 코드를 보다가 E를 또 발견하면서 다시 궁금증이 생겨 정리하고 가고자 한다. 해당 내용은 단순히 타입스크립트에 제한되지 않고 Java, C#등 다른 언어에서도 관용적으로 사용되는 표현으로 보인다.아래 내용이 절대적인 것은 아니니 혹시 해당 글을 보게 된다면 참고용으로만 사용하길 바란다. 약자의미사용 예시TTypefunction identity(value: T): T KKeyK extends keyof T VValueRecord EElementArrayRReturnReducerPProps/P..

최근 프론트엔드를 개발하면서 AI와 동료들의 코드에서 자주 보았고 잘 활용한 것이 제네릭 타입이다.하지만 주로 간단하게 변수에만 사용하게 되어 이참에 다시 한 번 정리하고 가려고 한다. 제네릭에 대한 설명제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 사용되는 타입이다.타입스크립트에서 보면 특정 타입을 상속하거나 사용할 때 타입을 매개변수로 전달 받아서 사용한다.즉, 제네릭으로 선언된 타입은 사용할 때 타입을 추론하여 사용하고, 타입을 변수처럼 사용한다. 제네릭의 주요 사용방법 1. 제네릭 함수 함수의 파라미터와 반환값의 타입을 호출하는 시점에 결정한다. function identity(value: T): T { let newValue: any; if (typeof..

기존에 개발할 때 unknown 타입은 "as unknown as Type" 형태로만 활용했는데,"우아한 타입스크립트 with 리액트" 를 읽으면서 any보다 안전하고 더 다양한 쓰임새가 있다는 것을 알게 되어두 타입을 다시 정리하게 되었다. any 타입이란any는 모든 타입의 값을 허용하는 특수한 타입이다.(단, never 타입은 예외)any로 선언된 변수는 타입 검사를 건너뛰기 때문에, 어떤 연산을 해도 오류가 발생하지 않는다.let value: any;value = 123;value = "Hello";value = { name: "Hyon" };console.log(value.toUpperCase()); // 오류 없음 (런타임 에러 가능) any의 주요 사용방법1. 임시로 타입을 유연하게 처리할..

보호되어 있는 글입니다.

면접에서 받은 질문과 유사한 진로 고민이 제로초(ZeroCho)님 유튜브 쇼츠로 나왔다.내가 면접에서 받은 질문은 'AI 시대에 나의 대처 방안은?'이었고, 제로초님이 받으신 질문은 'AI시대에 프론트엔드 개발자의 진로는?' 이라는 질문과 함께 '1. 백엔드/앱도 같이 한다, 2. 프론트를 더 깊게 판다.'라는 선택 가능한 대답이 있었다. 제로초님의 의견을 정리해보면 다음과 같다.프론트엔드 개발자로 회사를 계속 다닐것 같으면 '2. 프론트엔드를 더 깊게 판다'를 추천하고,회사에서 이직/퇴사 가능성이 있으면 (1인 개발자/외주 개발자 등 포함) 나 혼자서 다양한 업무를 할 수 있도록 '1. 백엔드, 앱쪽도 같이 한다.' 내 면접을 되돌아보자.나는 예상하지 못한 질문이 나와서 2년전쯤 업무를 하며 대답하였다..