WEB/Insight

✨  TEOConf2024 스피커로 참여하게 된 이유 지난 feconf에서는 처음 사회에 나온 주니어 개발자들에게 어떤 마인드 셋으로 임해야 하는지, 이상적인 개발 환경이 아닌 곳에서 어려움을 헤쳐 나가고 있는 개발자들에게 자신감을 심어주기 위해 라이트닝 스피커로 참여한 경험이 있었다.  이번에는 1년 동안 개발을 진행하면서, 프론트엔드 개발자가 어려워지는 순간은 프론트엔드가 서버에 의존적으로 되어서 수정작업을 빠르게 할 수 없는 것이 문제라고 생각했다.  이를 해결하기 위해 함께 고민하고, 도전해 봤던 기술적인 경험과 인사이트를 다른 개발자분들과 공유하고 싶어, 해피라는 이름으로 '어댑터 아키텍처를 통해 클라이언트 환경 개선하기'라는 주제를 가지고 TEOConf 2024의 스피커로 참여하게 되었다.  ..

✨ 내가 라이트닝 스피커를 신청하게 된 이유현재 중고나라에서 웹 개발팀 매니저로 근무하게 된 지 0년 차, 약 6개월 된 주니어 개발자인 내가 라이트닝 스피커를 신청하게 된 이유는 2가지이다.나와 같은 상황에 놓인 개발자들에게 우당탕탕 성장기를 공유하며 그들에게 또 다른 자신감을 불어넣어 주기 위해.주니어 개발자들이 어떤 마음으로 개발에 임하고, 회사에 다니면 좋을지 알려주기 위해.그래서 시니어 개발자분들이 보시기에는 어쩌면 당연한 이야기일 수도 있겠지만,Feconf에는 다양한 환경에서 개발하시는 분들이 모이는 거대한 환경이었기 때문에 단 한 사람에게라도 나의 경험담이 도움이 된다면, 그 당연한 이야기를 나만의 이야기로 재밌게 전달하고 싶었다. 부수적으로는 앞으로 내가 만들어 갈 스피커 경험의 시작을 F..

✨ 들어가기프론트엔드 개발을 할때 확정된 기획으로 개발에 들어가게 된다. 하지만, 시간이 지나면서 사용자 피드백을 통한 요구사항이 변하는 건 당연한 과정이기도 하다. 지난 시간동안 여러가지 프로젝트를 해보면서, 요구사항에 빠르게 대응하기 위해서는 컴포넌트 그 자체의 역할을 할 수 있도록 만들고, 비즈니스 로직은 컴포넌트 외부에서 관리하는 것이 필요하다고 깨달았다. 이 부분이 뒷받침되는 설계로 프로젝트를 관리하면 뷰와 로직을 분리할 수 있게 될 거고, 개발 속도도 보다 빠르게 진행할 수 있을 것이라고 판단했다.그래서 이번에 새롭게 시작한 Few 프로젝트에 Model계층을 기반으로 개발한 내용을 공유하고자 한다.  우선, Few는 매일 아침 8시에 뉴스레터를 이메일로 보내주고 매일 조금씩 읽는 습관 더 나아..

✨ 들어가기 코드에 대한 설계를 자신할 수 있다는 것은 소프트웨어 설계를 잘했다는 이야기이다. 그렇다면, 소프트웨어 설계는 어떻게 잘할 수 있는 것일까...? 바로 이를 도와주는 것이 계층형 설계이다. 지금부터는 계층형 설계가 무엇이고, 어떻게 활용하면 되는지 차근차근 살펴보자. 💡 계층형 설계란..? 위의 예시처럼 소프트웨어를 고치고, 읽고, 테스트하고, 재사용하기 쉬운 코드를 만드는 것이 바로 계층이다. 사실, 각 계층을 정확히 구분하기는 어렵지만 계층을 구분하기 위한 다양한 변수를 찾고, 찾은 것을 기반으로 어떻게 이를 활용해야 하는지 알아내야 한다. 좋은 설계를 위한 신호를 찾는 방법을 입력과 출력으로 나눈 것이다. 입력 함수 본문 계층 구조 함수 시그니처 길이 화살표 길이 함수명 복잡성 응집도 ..

📍들어가기 리액트는 함수형 프로그래밍이다. 하지만, 이에 맞게 기능을 개발하지 않고 함수를 만들게 된다면 의존성이 깊은 함수를 구현해내 의도하지 않은 버그를 마주할 가능성이 높아진다. 그래서 [원티드]프리온보딩-12월챌린지를 수강하면서 알게 된 액션/계산/데이터로 구현하기를 정리해보려 한다. ✨ 액션 / 계산 / 데이터 함수형 프로그래밍에서 구분해야 될 것은 단 3가지이다. 액션 👉 실행 시점과 횟수에 의존, 즉 부수효과가 있는 순수하지 않는 함수 ex) 이메일 보내기, 데이터 베이스 읽기 단점 외부 세계에 영향을 줄 수 있음, 테스트 시 로직과 외부 세계를 함께 재현해야 하는 문제 발생 실행하기 전까지 어떤 일이 발생하는지 알 수 없음 계산 👉 입력으로 출력을 계산, 순수함수 ex) 최댓값 찾기, 이메..

📍 들어가기 중고나라 웹 오픈을 준비하면서, 빠듯한 리뷰시간을 직접 경험했다. 그 안에서 기능 구현에 대한 만족도는 있었지만, 나의 코드 & 팀원들의 코드에 대한 리뷰 실력에 대한 부족함을 느끼게 되었다. 따라서 좋은 코드와 나쁜 코드를 구별할 수 있는 능력. 또, 팀원들과 코드 공유의 깊이를 확장 시키고 싶은 목표가 생겨, 이 책을 읽게 되었다. 어느 회사를 가도, 서비스를 온전히 혼자 만들어내는 곳은 없을 것이다. 즉, 내가 맡은 기능이더라도 언젠가는 다른 사람이 이 코드를 보고 버그를 수정해야 할 것이며, 그 과정에서 나쁜 코드가 나오게 된다면, 작업 속도는 느려질 수 밖에 없을 것이다. 만약, 퇴사를 한 사람의 코드라면 더더욱 어려움에 빠질 수 있는 가능성이 높아지게 된다. 그래서 코드의 가독성만..

✨ 들어가기 웹 프론트엔드 개발자라면 한 번씩 겪어보았을 에러가 바로 CORS 에러이다. 그만큼 정확하게 원리를 이해하고 있어야 문제 상황을 빠르게 해결할 수 있기에 해당 개념을 살펴보고자 한다. ✅ SOP 은 무엇인가? Same Origin Poclicy 로 같은 출처에서만 리소스 공유를 허용하는 정책이다. 🤔 같은 출처는 무엇인데? URL의 Protocol, Host, Port 가 모두 동일한 출처이다. 출처라는 것은 Protocol + Host + Port 까지 모두 합친 URL로 이해할 수 있다. 예를 들면, https://with-picme.com:8080/home?nickname=happhee#sop Protocol 👉 https Host 👉 with-picme.com Port 👉 8080 P..

✨ 들어가기 우선 PWA는 모바일 기기에서 네이티브 앱과 같은 사용자 경험을 제공하는 웹 앱이다. 그래서 기존의 웹 앱과는 달리 네이티브 앱과 유사한 기능들을 제공 받을 수 있다는 것이 장점이며, PWA를 통해 사용자는 앱의 다운로드나 업데이트 필요없이 웹 브라우저로 앱을 바로 사용할 수 있게 되었다. 하지만, 여태까지는 안드로이드와 Chromium기반 브라우저에서만 거의 모든 기능을 제공하고 있었으며, Safari는 폐쇄적인 모습을 보이고 있었다. 그래서 웹을 개발할 때, Safari 브라우저에서만 지원하지 않는 API들이 많이 존재하고 있었다. 그러나 macOS, iOS, iPadOS 유저들의 점유율이 빠른 속도로 증가하면서 애플은 드디어 Web Push를 지원(Meet Web Push for Saf..

PWA를 배우기 앞서 Native Application, WebApp, Hybrid-App, Cross Platfrom 에 대해 학습해보자. ✅ Native Application 가장 기본적인 형태의 앱이다 === 모바일 기기에 최적화된 네이티브 언어로 개발된 앱 👉 해당 스마트폰에 깔린 OS, 안드로이드 또는 iOS 환경 전용으로 개발된 소프트웨어이다. Android 모바일 앱 개발의 경우는 Kotlin 또는 Java iOS의 경우 Swift 또는 Objective C 덕분에 앱의 실행 속도가 빠르고 유용한 API의 지원도 받을 수 있다. 반면 ‼️다른 운영체제 ‼️에서도 실행되기 위해서는 시간도 노력도 돈도 많이 드는 단점이 있다. 장점 단점 사용자에게 가장 빠르고 안정적이며 반응이 빠른 환경을 제공..

그동안 여러 번의 웹 프로젝트를 진행하면서 yarn install을 진행하는 시간, yarn start로 프로그램이 실행되기까지 시간이 꽤 걸린다는 것을 체감하였다. 왜 이렇게 오래 걸리는 걸까..? 라는 생각을 하며 node_modules 폴더 구조를 이해하고자 했다. NPM...? NPM은 Node Package Manager의 줄임말로 Node.js 설치 시에 자동으로 설치되는 기본 패키지 관리자이다. npm은 파일 시스템을 이용해 의존성을 관리하고, 누구나 온라인 플랫폼인 npm 레지스트리에 게시된 캐피지를 사용할 수 있도록 공유 공간을 만들어 준다. 더불어 이런 온라인 플랫폼과 상호작용하기 위해 명령 줄 인터페이스를 사용하면서 패키지 설치 및 제거가 가능하다. Yarn Yarn은 페이스북에서 개..