제육을 앞에 두고 시작된 토론새로 입사하신 신입 프론트엔드 팀원분과 점심을 먹던 도중,번들 사이즈와 관련한 대화를 나누게 되었는데요.당시 제가 최적화 작업을 진행하고 있던 터라 이에 대한 팀원분의 견해를 여쭙고자 했습니다.그러던 중, 팀원분이 던진 질문에 저는 상당히 당황했는데요. "???: 지원님 devDependencies는 번들러에 영향을 미칠까요, 안 미칠까요?"라는 질문을 받자마자 저는 영향을 미치지 않는다고 답했습니다. 웹/앱 실행에 필요한 패키지를 dependencies로 설정하고, 번들러가 생성하는 결과물에는dependencies에 설치된 내용들만 포함된다고 덧붙였고요. 하지만 팀원분의 의견을 달랐습니다."devDependencies는 번들러에 포함됩니다!"라고요.팀원분이 주장하신 devD..

지난 8월 24일 개최된 프론트엔드 개발자를 위한 컨퍼런스인 FEConf 2024에 참여했습니다.단독으로 컨퍼런스에 참여해 보는 것은 처음이라 조금 긴장도 되고,현장에서 무엇을 배우고 올지 설레기도 했는데요. 결론먼저 말하면 참여하길 잘했습니다.제가 기대한 것보다 더 많은 정보를 얻고 개발도 배울 수 있었거든요. 대학교 건물 하나를 대여해 개최할 정도면 참여자가 많겠다고 막연한 상상만 했는데컨퍼런스 참여자가 예상보다 훨씬 많았습니다.8월 24일은 프론트엔드 개발자를 가장 많이 본 날로, 개인적으론 기념일처럼 여기게 되었어요.높은 수준의 개발을 느꼈던 첫 세션FEConf 2024는 A, B, C 3개의 트랙으로 구성이 되어있었습니다.A, B 트랙은 유튜브에 영상이 업로드되지만 라이트닝 토크는 현장에서만 경..

기존에 pdf 파일 첨부만 가능하게 구현된 feature에서image 파일도 파일 첨부가 가능하도록 처리해달라는 티켓이 생성되었습니다.화요일 티켓은 아주 달구나라고 생각하며 임했는데, 허를 찔렸습니다.1) input의 기본 속성으로 처리하려 했지만..input의 accept 속성에 사용할 확장자명을 추가해 원하는 파일만을 선택이 가능합니다.accept 속성에 쉼표(',')를 통해 허용 확장자를 추가할 수 있는데요.기존에는 pdf 확장자명을 지닌 파일만 선택하도록 설정해줬지만, 모든 이미지 파일도 포함되도록 변경했습니다. 그러나 QA 단계에서 제한 확장자가 아닌 파일도 업로드가 가능하다는 답이 돌아왔습니다.QA 응답을 보고선 바로 떠오른 게 있었는데요.바로 파일 업로드 시, 모든 파일로 변경하는 상황이었습..

기존 서비스에서는 클라이언트 측에서변경되는 배너나 홈화면에 대해 매번 코드 작성 후배포를 통해 업데이트하고 있었습니다. 하지만 이젠 서버로부터 UI 데이터를 전달받아 보여주는 것으로 변경했는데요.제가 왜 Server Driven UI를 적용했는지 그 이유와 얻을 수 있는 효과를 포스팅해보고자 합니다.1) SDUI란?UI의 구조와 내용을 서버에서 관리하고클라이언트는 서버에서 제공하는 데이터를 기반으로 UI를 생성하는 방식입니다.2) 기존에는 홈 UI를 어떻게 구성했느냐면요이전에는 홈 UI 요소를 구성하는 데이터를 상수 데이터로 직접 관리했습니다.로컬 환경의 이미지, 텍스트 등을 컴포넌트로 import 후 사용했었는데요.프로젝트의 성능 최적화를 위해 트리쉐이킹을 진행하던 중, 문득 이런 생각이 들었습니다. ..

2년 전, 신입으로 인터뷰를 진행하면서 받은 질문 중 하나가 고차 함수였습니다.제대로 답하지 못하자 일급 객체에 대해 알고 있는지 여쭤보셨고,이에 대해서도 답변을 못했던 기억이 있습니다. 그로부터 2년이 지난 지금, 고차 함수 개념을 이용해 타이머 기능을 구현하며다시 한번 고차 함수가 가능한 이유와 일급 객체가 무엇인지 복습할 수 있었습니다. 또한, custom hook과 HOC를 두고 어떤 방식으로 구현해야 할지고민한 이야기도 작성해보고자 합니다.일급 객체와 고차함수와의 연관성일급 객체는 함수가 변수에 할당될 수 있고,함수의 인자로 전달되거나 return 될 수 있는 특성을 의미하는데요.고차 함수는 함수를 인자로 받거나 함수를 반환하는 함수를 말합니다. React에서 컴포넌트는 함수 형태로 작성이 가능..

Tree 문제에 약하기도 하고 경험이 없어 쉬운 난이도부터풀이를 진행했어요. 문제 자체는 쉬웠지만 다른 분들의 코드를 보며 새로 배운 개념이 있어포스팅하게 되었습니다.문제 접근 root의 left와 right가 존재하지 않는 요소가 마지막 node이므로마지막 node라면 배열에 추가를 해준 후, root1의 node를 담는 배열과root2의 node를 담는 배열을 비교하면 될 것으로 예상되었습니다.나의 풀이 & 다른 풀이 첫 풀이 각 결과를 담는 배열들을 문자열로형변환을 통해 비교를 했는데요. 순서가 다를 시에도 true 값으로 결과가 발생하는 케이스가 존재해테스트 케이스에서 실패했습니다.var leafSimilar = function(root1, root2) { const arr1 = [], ar..

외주 프로젝트에서 결제 기능을 구현하며 값진 경험을 했습니다.개발자라는 길을 선택하며 꼭 직접 구현해보고 싶었던 기능이었는데외주로 목표를 이뤄 조금 아쉽지만.. 그래도 좋네요! 더 베스트페이라는 PG사에서 제공하는 결제 모듈을 사용해 개발을 진행했고,이번 포스팅에서는 결제를 위한 세팅 과정과결제 기능을 쉽게 구현하던 때는 몰랐던 부분들에 대해배운 점을 작성해보고자 합니다.불친절했던 PG사의 정보를 최대한 활용하자PG사와 결제는 어떻게 이루어지는지, 문서화된 자료는 어떤 것이 있는지 등의논의를 40분 정도 진행한 후 자료를 받아봤는데요,함수명만 명시된 js 파일 하나(= 로직 X), 카드 정보 요청과 결제 단말기 시작과 관련된restAPI 응답.txt가 끝이었습니다. 처음엔 잘못 받은 건가 싶어 PG사에 ..

카메라의 타이머 기능 구현이 필요한 상황이 발생했는데요.개발하며 비동기를 포함한 자바스크립트 기본 개념을 오랜만에 복습해 볼 수 있는좋은 시간이었습니다. 처음 문제가 발생한 시점부터 개념을 복습하며 문제를 해결하기까지의과정을 정리해보았습니다.타이머 1차 구현'use client';import { useRef, useState, useEffect } from 'react';import BeforeCamera from '@/components/Camera/BeforeCamera';import PhotoShoot from '@/components/Camera/PhotoShoot';import { Flex } from '@chakra-ui/react';const CameraContainer = () => { ..