티스토리

Happhee

검색하기

블로그 홈

Happhee

happhee-dev.tistory.com/m

선한 영향을 주는 개발자, 햅히입니다

구독자: 11

방명록 방문하기

주요 글 목록

P.E.C 캠프 ) 데이터의 관점에서 FSD와 Next.js 결합해보기 들어가기이번에 P.E.C 캠프 6기로 참여하면서 FSD의 개념을 Next.js와 결합해보는 과정을 진행했었다.P.E.C 캠프 Product Engineer Camp - pec8주동안 진행하는 Camp 를 통해서, 내 주변에 실제 문제를 해결하며 진짜 성장을 경험하세요. 다양한 UX framework 를 활용하여 설계하고, 이를 토대로 AI 와 효율적으로 협업하는 방법을 학습합니다.slashpage.com 흔히 알고 있는 역할 중심의 설계를 벗어자세한 FSD의 개념은 하단 블로그에서 상세하게 소개시켜주고 있기에 여기서는 내가 정립했던 FSD와 Next.js의 개념에 대해서만 다뤄보고자 한다.https://velog.io/@teo/fsd FSD 관점으로 바라보는 코드 경계 찾기이번 글의 주제도 FSD(Fe.. 공감수 0 댓글수 0 2025. 3. 16.
TEOConf 2024 해피로 말하다 ✨ TEOConf2024 스피커로 참여하게 된 이유 지난 feconf에서는 처음 사회에 나온 주니어 개발자들에게 어떤 마인드 셋으로 임해야 하는지, 이상적인 개발 환경이 아닌 곳에서 어려움을 헤쳐 나가고 있는 개발자들에게 자신감을 심어주기 위해 라이트닝 스피커로 참여한 경험이 있었다. 이번에는 1년 동안 개발을 진행하면서, 프론트엔드 개발자가 어려워지는 순간은 프론트엔드가 서버에 의존적으로 되어서 수정작업을 빠르게 할 수 없는 것이 문제라고 생각했다. 이를 해결하기 위해 함께 고민하고, 도전해 봤던 기술적인 경험과 인사이트를 다른 개발자분들과 공유하고 싶어, 해피라는 이름으로 '어댑터 아키텍처를 통해 클라이언트 환경 개선하기'라는 주제를 가지고 TEOConf 2024의 스피커로 참여하게 되었다. .. 공감수 5 댓글수 2 2024. 11. 26.
Suspense 와 Errorboundary Suspense와 ErrorBoundary에 대해 알아보자React에서 비동기 로딩과 에러 핸들링을 위해 Suspense와 ErrorBoundary는 각각 중요한 역할을 하는 것은 모두가 알고 있는 내용이다.이 글에서는 두 컴포넌트의 개념을 직접 구현해보는 과정을 통해 내부 구조를 이해하며, 최종적으로 두 컴포넌트의 차이점과 활용 방안을 정리해보고자 한다.✨ 들어가기Suspense와 ErrorBoundary는 React에서 각각 비동기 작업의 로딩 상태와 컴포넌트 트리에서 발생하는 오류를 관리하는 데 사용되는 컴포넌트이다.Suspense: 비동기 로딩 상태를 처리하기 위해 사용되며, 주로 React.lazy와 함께 활용한다. 즉, Suspense는 컴포넌트를 렌더링하기 전에 로딩 중인 컴포넌트 대신 로.. 공감수 0 댓글수 0 2024. 10. 31.
중앙화된 인증 처리 시스템 구축하기 중고나라 셀러 지원 센터의 다양한 부분을 개발하면서, 특히 interceptor를 활용해 인증/인가 기능을 구현한 배경과 마주했던 문제와 느낀 점을 전달하고자 이 글을 쓰게 되었다. ✨ 셀러 지원 센터에서의 인증/인가 구조셀러 지원 센터에서 인증/인가 구조는 셀러와 관리자가 분리되었다. 두 사용자 그룹에 따라 각각 다른 접근 방식이 필요했다. 셀러 회원셀러는 중고나라 웹사이트 회원가입 절차를 거쳐 셀러 지원 센터의 회원가입 절차를 진행할 수 있다. 그러나 회원 계정의 상태가 블랙이거나 이미 회원가입이 완료된 상태라면 회원가입이 제한되는 흐름이었다.정상적으로 회원가입 화면에 진입했을 경우, 셀러는 아이디와 비밀번호를 입력하고 마케팅 수신 동의 항목을 거쳐 가입이 진행된다. 이 때, 중복되는 아이디는 사용 .. 공감수 1 댓글수 1 2024. 9. 25.
개발자가 만들어가는 어드민 시스템의 UI/UX 들어가기, 첫 사내프로젝트의 시작 정규직으로 입사하자마자 2024년 상반기 중고나라의 핵심 프로젝트인 셀러 지원 센터가 시작되었다. 프로젝트 초기에는 기획자와 개발자가 함께 모여 이 시스템이 어떤 비즈니스 모델과 계획으로 발전할지 논의하는 시간을 가졌다. 수차례 회의를 통해 기획안이 하나씩 확정되기 시작했고, 우리 팀도 이에 맞춰 기술 스택을 선정하고 업무를 분담을 진행하였다. 그렇게 순조롭게 진행되고 있는 줄 알았던 가운데,,, 알게된 사실이 하나 있었다. 바로 디자이너 없이 개발을 스스로 진행해야 한다는 것이었다. 디자이너 부재가 만들어낸 초기 셀러지원센터 화면당연히, 디자인 시스템도 없었기에 폰트와 색상 모두 제 각각 이루어진 화면으로 Figma 기획안이 전달되었다. 아래와 같은 사진이었다. 색상은.. 공감수 1 댓글수 0 2024. 9. 24.
Refine 이관 작업 ( feat. 중고나라 - 셀러지원센터 ) 📍 이관을 하게 된 배경기존에 셀러지원센터는 Next.js, react-query, shadcn/ui 의 환경에서 개발을 진행했었다. 짧은 시간 안에 빠른 개발, 빌드 시간 단축, 확장 할 수 있는 커스텀 조건이 위 기술의 채택 이유이기도 했다. (참고 아티클) 1차,2차 배포까지만 해도 우리가 선택한 기술이 올바르다고 판단했다.3차 오픈을 준비하기 전에, 이전에 빠른 개발로 인해 미뤄두었던 코드 개선작업을 시작한 것이 이관의 시초점이다. 1️⃣ 개발자마다 다른 코드 스타일우리의 컨벤션을 정하긴 했지만, 페이지마다 작성한 개발 코드의 스타일이 온전히 일치하지는 않았다.그래서 오류가 발생 했을때 해당 코드를 작성하지 않은 사람이 개선을 진행하려고 하면 개발 비용이 많이 필요했다. 2️⃣ 직관적이지 않은.. 공감수 1 댓글수 1 2024. 9. 15.
FEConf 2024 - Lightning Speaker를 통해 ✨ 내가 라이트닝 스피커를 신청하게 된 이유현재 중고나라에서 웹 개발팀 매니저로 근무하게 된 지 0년 차, 약 6개월 된 주니어 개발자인 내가 라이트닝 스피커를 신청하게 된 이유는 2가지이다.나와 같은 상황에 놓인 개발자들에게 우당탕탕 성장기를 공유하며 그들에게 또 다른 자신감을 불어넣어 주기 위해.주니어 개발자들이 어떤 마음으로 개발에 임하고, 회사에 다니면 좋을지 알려주기 위해.그래서 시니어 개발자분들이 보시기에는 어쩌면 당연한 이야기일 수도 있겠지만,Feconf에는 다양한 환경에서 개발하시는 분들이 모이는 거대한 환경이었기 때문에 단 한 사람에게라도 나의 경험담이 도움이 된다면, 그 당연한 이야기를 나만의 이야기로 재밌게 전달하고 싶었다. 부수적으로는 앞으로 내가 만들어 갈 스피커 경험의 시작을 F.. 공감수 3 댓글수 2 2024. 9. 1.
이미지 최적화로 성능 개선하기 ( feat. FEW ) ✨ 들어가기글에 들어가기에 앞서, FEW 서비스를 아직 다운받지 않았다면..? 아래의 링크로 웹 서비스를 이용해 보고 앱을 다운로드받아서 사용하길 바란다..! ㅎㅎFEW : WEBFEW : APP Download link Few - Just a few minutes!퀴즈로 뉴스레터 끝까지 읽기www.fewletter.com ‎FEW - 퀴즈로 뉴스레터 끝까지 읽기‎# 학습지 - 학습지를 구독하여, 매일 이메일로 뉴스레터를 받아보세요! # 아티클 읽기 - 퀄리티 높은 아티클 컨텐츠를 읽으세요! # 문제 풀기 - 내가 잘 읽었는지 문제를 풀며 문해력과 독해력을apps.apple.com 위 서비스는 뉴스레터를 워크북 단위로 모아서 보여주고, 문제 풀이를 통해 지속적인 학습을 유도하는 데에 초점이 맞춰져 있.. 공감수 0 댓글수 0 2024. 8. 23.
모델 계층으로 유연하게 컴포넌트 관리하기 ( feat.FEW ) ✨ 들어가기프론트엔드 개발을 할때 확정된 기획으로 개발에 들어가게 된다. 하지만, 시간이 지나면서 사용자 피드백을 통한 요구사항이 변하는 건 당연한 과정이기도 하다. 지난 시간동안 여러가지 프로젝트를 해보면서, 요구사항에 빠르게 대응하기 위해서는 컴포넌트 그 자체의 역할을 할 수 있도록 만들고, 비즈니스 로직은 컴포넌트 외부에서 관리하는 것이 필요하다고 깨달았다. 이 부분이 뒷받침되는 설계로 프로젝트를 관리하면 뷰와 로직을 분리할 수 있게 될 거고, 개발 속도도 보다 빠르게 진행할 수 있을 것이라고 판단했다.그래서 이번에 새롭게 시작한 Few 프로젝트에 Model계층을 기반으로 개발한 내용을 공유하고자 한다. 우선, Few는 매일 아침 8시에 뉴스레터를 이메일로 보내주고 매일 조금씩 읽는 습관 더 나아.. 공감수 9 댓글수 1 2024. 8. 11.
[ 중고나라 - 셀러지원센터 ] 신입 개발자의 프로젝트 첫 시작 2023.09 - 2023.12 , 중고나라 웹 개발팀에서의 4개월 이라는시간 동안 인턴십을 수행하고 나서, 정규직 전환이 이루어져 2024.02.01에 신입 웹 개발자로 입사를 하게 되었다. 2024년도 중고나라의 핵심 프로젝트인 셀러지원센터를 웹 개발팀 리딩의 자리에서 이끌어가면서 느꼈던 부분들을 회고로 기록하고자 이 글을 작성하였다. 셀러 지원센터의 시작한 달의 공백기 이후 입사하게 되었지만, 인턴의 경험이 있었기 때문에 그간의 중고나라 웹 개발팀의 작업 내용들을 수월하게 따라올 수 있었다. 올해의 중고나라 핵심 프로젝트는 셀러 지원센터와 J쿠폰 이었다. 물론 두 가지 프로젝트에 관심이 있었지만, 웹 개발팀 전체가 비슷한 수요를 가지고 있었기에 우리는 공정하게 사다리 타기를 진행해서 어떤 프.. 공감수 12 댓글수 2 2024. 4. 26.
[ 쏙쏙 들어오는 함수형 코딩 ] 계층형 설계 ✨ 들어가기 코드에 대한 설계를 자신할 수 있다는 것은 소프트웨어 설계를 잘했다는 이야기이다. 그렇다면, 소프트웨어 설계는 어떻게 잘할 수 있는 것일까...? 바로 이를 도와주는 것이 계층형 설계이다. 지금부터는 계층형 설계가 무엇이고, 어떻게 활용하면 되는지 차근차근 살펴보자. 💡 계층형 설계란..? 위의 예시처럼 소프트웨어를 고치고, 읽고, 테스트하고, 재사용하기 쉬운 코드를 만드는 것이 바로 계층이다. 사실, 각 계층을 정확히 구분하기는 어렵지만 계층을 구분하기 위한 다양한 변수를 찾고, 찾은 것을 기반으로 어떻게 이를 활용해야 하는지 알아내야 한다. 좋은 설계를 위한 신호를 찾는 방법을 입력과 출력으로 나눈 것이다. 입력 함수 본문 계층 구조 함수 시그니처 길이 화살표 길이 함수명 복잡성 응집도 .. 공감수 1 댓글수 0 2024. 1. 4.
[ ICT 인턴십 ] 중고나라 : 웹개발팀에서의 4개월 💡 준비 2023년 상반기는 파트장으로 가득 차있었다면, 하반기는 4-2라는 막학기만 남은 상태였다. 누군가에게 개발의 재미와 실력을 쌓게 해주는 사람으로 달려왔기에, 이번에는 배움의 위치에서 성장해나갈 수 있는 시간들을 보내고 싶었다. 그렇게 여러 기업들에 부딪혀보며 취준으로 달려나가는 중. 세종대 학사 공지에서 ICT 학점 연계 프로젝트 인턴십을 발견하게 되었다. 총 3군데에 지원이 가능했고, 프론트엔드 직무에 관심이 있었기 때문에 직무 적합도를 우선으로 살펴보았다. 이후에는 내가 관심있는 도메인의 영역인지, 해당 기업을 가게 된다면 어떤 기여를 할 수 있을지 고민하며 기업 서류를 작성하였다. 그렇게 코테를 무사히 진행하고 나서, 기업 면접에는 중고나라로부터 연락이 왔다. 긴장되는 마음으로 그동안 공.. 공감수 5 댓글수 2 2024. 1. 2.
Hydration failed because the initial UI does not match what was rendered on the server. 우선 , Next.js는 기본적으로 모든 페이지를 pre-rendering한다. 즉, 모든 페이지의 HTML를 미리 생성하고, 생성된 HTML은 자바스크립트 코드와 연결되어 유저와 페이지가 상호작용 할 수 있는 interactive한 페이지를 만들어낸다. 이것이 hydration이다. 🔥 문제상황 중고나라 웹사이트를 개발하며 처음으로 sentry를 들여다보며 자주 발생하는 error를 확인했다. Hydration failed because the initial UI does not match what was rendered on the server. 오류 문구 그대로 서버에서 그려지는 HTML 페이지와 클라이언트에서 그려지는 HTML 페이지가 다르기 때문에 문제가 발생하는 것이다. 즉, Pre-Rende.. 공감수 3 댓글수 0 2023. 12. 21.
[ React ] 비즈니스 로직 분리하기 ✨ 들어가기 우선, 뒤죽박죽 섞여있는 회사 코드 안에서 비즈니스 로직을 분리하기 전에 프론트엔드 개발자로써 view와 business logic이 어떻게 다른지 명확하게 알고 있어야 한다. 📍 View 우선, view는 기본적으로 HTML을 보여주는 UI이며 사용자 이벤트를 통해 HTML을 업데이트 하는 것이다. 즉, view는 단순히 주입받은 정보를 보여줄 뿐이다. 여기서 주의할 점은 해당 과정안에 business logic과 관련된 부분이 있다면 view가 아닌 비즈니스 로직으로 작동하게 된다는 것이다. 다른 말로 비즈니스 로직이 개입되지 않아야 컴포넌트를 재사용할 수 있다는 것이다. 📍 View Logic isValid, errorText와 같은 UI/UX를 개선하는 코드 예를 들면, 비밀번호를 6.. 공감수 3 댓글수 0 2023. 12. 9.
액션/계산/데이터를 활용한 useMuation 기능 개선 💡 들어가기 현재 개발 중인 중고나라 기능에서 useMutaion을 내부에서 호출하는 커스텀 훅을 만들게 되면서 중첩 구조가 발생하는 문제가 발생했다. 그래서 지난 화요일에 수강하였던, [원티드] 프리온보딩 챌린지 12월 에서 알게 되었던, Function의 액션/계산/데이터로 리팩토링하기를 적용하고자 해당 기능개선 작업을 진행했다. 📍 문제상황 거래 하기 전, 상품 상세에서 채팅하기 or 안전거래 버튼을 눌렀을때, 일일 채팅방 생성 횟수 제한에 걸리게 되면 안내 모달을 띄워야 했다. 그러나, 두 버튼의 비즈니스 로직이 달랐다. 커스텀 훅으로 api 결과값을 확인했던 로직에서 클로저 문제가 발생해 중첩 모달을 제어하지 못하는 문제가 발생되었다. 버튼 작동 방식은 아래와 같았다. 채팅하기 채팅방 생성 ap.. 공감수 4 댓글수 3 2023. 12. 7.
[ 쏙쏙 들어오는 함수형 코딩 ] Function 액션/계산/데이터 📍들어가기 리액트는 함수형 프로그래밍이다. 하지만, 이에 맞게 기능을 개발하지 않고 함수를 만들게 된다면 의존성이 깊은 함수를 구현해내 의도하지 않은 버그를 마주할 가능성이 높아진다. 그래서 [원티드]프리온보딩-12월챌린지를 수강하면서 알게 된 액션/계산/데이터로 구현하기를 정리해보려 한다. ✨ 액션 / 계산 / 데이터 함수형 프로그래밍에서 구분해야 될 것은 단 3가지이다. 액션 👉 실행 시점과 횟수에 의존, 즉 부수효과가 있는 순수하지 않는 함수 ex) 이메일 보내기, 데이터 베이스 읽기 단점 외부 세계에 영향을 줄 수 있음, 테스트 시 로직과 외부 세계를 함께 재현해야 하는 문제 발생 실행하기 전까지 어떤 일이 발생하는지 알 수 없음 계산 👉 입력으로 출력을 계산, 순수함수 ex) 최댓값 찾기, 이메.. 공감수 0 댓글수 0 2023. 12. 6.
React의 패키지 구조와 용어 정리 🌼 들어가기 모던 리액트 : Deep Dive 책을 정독하던 도중, useState의 lazy initialization에 대한 원리를 이해하고 싶었다. 콜백 함수로 넘기면 처음 초기화일때만 실행되는것일까...? 내부 구조가 어떻게 되어있길래, 값과 함수, 콜백함수의 양상이 다르게 발생되는 것일까...? 그냥 그렇구나..하기에는 너무 이해하고 싶었다. 이를 위해서 React 패키지의 구조를 살펴보며 useState를 불러오는 react 코어를 알아야 했다. 따라서 이번 글에서는 리액트의 패키지 구조를 살펴보고자 한다. ✨ React 패키지 구조 리액트 패키지는 총 5가지로 나눌 수 있다. 1️⃣ react 코어 컴포넌트 정의와 관련된 패키지이며, createElement( ) 와 다른 패키지의 모듈을 제.. 공감수 0 댓글수 0 2023. 12. 3.
[ React ] useQuery 와 useMuataion를 활용한 기능개선 💡 들어가기 어떤 경우에 useQuery와 useMutation 사용하는지, 또 타입 지정의 방식은 어떻게 이루어지는지 살펴보면서 기능개선을 한 작업을 바탕으로 해당 내용을 공유하려 한다. ✅ useQuery react 개발자라면 모두가 알고 있는 fetching, caching, 서버 데이터와의 동기화를 지원하는 라이브러리일 것이다. useQuery의 데이터 타입은 아래와 같다. export declare function useQuery (queryKey: TQueryKey, queryFn: QueryFunction, .. 공감수 2 댓글수 0 2023. 11. 30.
[ 모던 리액트 : Deep Dive ] - 리액트 개발에서 반드시 알아야하는 JS 📍 들어가기 이번에는 리액트 Deep Dive의 첫번째 장을 톺아보며 부족한 부분을 메꿔보려고 한다. 간단한 요약보다는 중요하거나 미처 간과했던 부분들을 짚어보고자 한다. ✅ 자바스크립트의 또 다른 비교, Object.is == 👉 같음을 비교하기 전에 양쪽이 같은 타입이 아니라면, 비교할 수 있도록 강제로 형변환을 진행한다. === 👉 강제 형 변환을 진행하지 않으며, Object.is와 달리 개발자가 기대하는 방향으로 비교되지 않을 수 있다. 5 == '5' // true Object.is(5, '5'); // false Number.NaN === NaN// false Object.is(Number.NaN, NaN)//true ❗️다만, 주의해야 할 점은 객체 비교에서는 차이가 없다는 것이다. Obj.. 공감수 0 댓글수 0 2023. 11. 28.
[ 모던 리액트 : Deep Dive ] - 리액트에 대해 📍 들어가기 인턴으로 입사한지 어느덧 2달이 지났다. 개발에 대해 무엇을 배웠는가...? 실력은 얼마나 성장했는가...? 대한 물음에 답을 하자면, 스스로에게 아쉬운 마음이 들었다. 단순한 기능 구현이 아닌, 원리와 체계를 갖춘 코드로 만들어내고 싶었기 때문이다. 이 책이 출간되자마자 설레는 마음을 감출 수 없었다. 꼼꼼하게 챕터들을 살펴보며, 리액트에 대한 지식의 구멍들을 막아보려고 한다. ✅ 리액트에서의 렌더링 여기서 말하고 있는 렌더링은 브라우저의 렌더링과의 개념과는 다르다. 리액트 애플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고, 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 과정 최초 렌더링 리렌더링 .. 공감수 2 댓글수 1 2023. 11. 13.
[ 좋은 코드, 나쁜 코드 ] 가독성 높은 코드를 작성하라 📍 들어가기 중고나라 웹 오픈을 준비하면서, 빠듯한 리뷰시간을 직접 경험했다. 그 안에서 기능 구현에 대한 만족도는 있었지만, 나의 코드 & 팀원들의 코드에 대한 리뷰 실력에 대한 부족함을 느끼게 되었다. 따라서 좋은 코드와 나쁜 코드를 구별할 수 있는 능력. 또, 팀원들과 코드 공유의 깊이를 확장 시키고 싶은 목표가 생겨, 이 책을 읽게 되었다. 어느 회사를 가도, 서비스를 온전히 혼자 만들어내는 곳은 없을 것이다. 즉, 내가 맡은 기능이더라도 언젠가는 다른 사람이 이 코드를 보고 버그를 수정해야 할 것이며, 그 과정에서 나쁜 코드가 나오게 된다면, 작업 속도는 느려질 수 밖에 없을 것이다. 만약, 퇴사를 한 사람의 코드라면 더더욱 어려움에 빠질 수 있는 가능성이 높아지게 된다. 그래서 코드의 가독성만.. 공감수 0 댓글수 0 2023. 11. 2.
32기 GO-SOPT : 해피 🌼 웹팟 - 파트장 회고 2023년의 가장 중요했던 시기를 뽑았을 때는 SOPT 웹파트장의 역할을 수행한 시기인 것 같아서..! 올해가 가기 전에, 회고록을 남겨보았다!! ✨ 웹파트장의 시작 01/28 (토) 그 날의 떨림과 긴장감은 아직도 잊지 못하고 있다. SOPT 32기 웹파트장 후보로 나가기 위해 사전 공개 자료를 노션에 업로드하고, 당일에는 15분 내외의 발표를 준비하였다. 나는 어떤 사람이고, 왜 SOPT 웹파트장을 하고 싶으며, 어떻게 SOPT의 WEB파트를 만들어 낼 것인지, 세심하게 고민하고 문장을 적어보며, 올바르게 나아가는 웹파트장이 무엇인지 정립하는 시간이었다고 생각한다. 실제로 그 결론은 다음과 같다. 긍정적인 에너지를 통해 웹개발을 두려워하지 않는 자신감을 만들어주는 웹파트장 이를 도출해내면서 과연 나는.. 공감수 7 댓글수 4 2023. 11. 1.
Link 태그와 SEO 🌈 들어가기 next.js를 기반으로 동작하고 있는 중고나라 웹사이트에서 seo를 개선하기 위한 첫 작업으로 rel 속성에 대한 작업을 진행하게 되었다. 🤔 문제 상황 현재 중고나라 웹사이트에서 상품검색을 진행하면 상품리스팅에 광고가 포함되는 경우가 있다. 하지만, 아래의 화면처럼 광고에 대한 rel 속성이 정의되어있지 않아 검색엔진이 인지하지 못하는 문제가 발생하였다. ✨ 링크 태그와 검색엔진 SEO 검색엔진이 문서 내에 a 태그 ( 👉 next.js 에서의 Link) 를 만나게 되면, 그 속성에 연결된 url의 html을 읽으려는 시도가 시작될 것이다. 그렇기 때문에 a 태그의 rel 속성을 정의하여 검색엔진이 이를 읽을 수 있게 할 것인지, 현재 페이지와 관련이 없음을 알려줄 것인지를 지정할 수 있.. 공감수 0 댓글수 0 2023. 9. 26.
CORS ✨ 들어가기 웹 프론트엔드 개발자라면 한 번씩 겪어보았을 에러가 바로 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.. 공감수 0 댓글수 0 2023. 7. 9.
PWA + Safari ✨ 들어가기 앞선 포스팅에서 PWA 기술에 대해 살펴보았다. 해당 기술에 대한 장점을 살려 지속적인 사용자 유입을 위해 Pic.me 서비스에 도입을 하게 되었다. 사실 chrome으로 구현하는 것은 이미 PWA에 대한 API가 대부분 제한되어 있지 않기에 단순히 service-worker를 등록해주기만 하면 구현이 가능했다. 하지만, 나 역시도 그렇고 대부분의 사람들이 아이폰을 사용하고 있었기에 우리는 safari 환경에서 이를 구현할 수 있게 만들어야 했다. 하지만 Push 알림에 대한 제한사항이 많아서 어려움을 겪었고, 해당 과정에서 알게 된 Safari + PWA 과정을 포스팅 해보고자 한다. ✅ Push 알림 구조 우선 Push 알림 구조에 대해 파악해보자. 클라이언트가 데이터를 요청하지 않아도 .. 공감수 0 댓글수 0 2023. 7. 3.
Intersection Observer API 를 활용한 무한스크롤 구현 ✨ 들어가기 리액트로 Pic.me를 개발하면서 가로 & 세로 무한스크롤을 개발해야 하는 뷰가 생성되었다. 리액트에서 무한 스크롤을 구현하는 방법은 2가지가 있다. scroll event를 감지 Intersection Observer API 라이브러리 사용 우선 직접 scroll event를 감지하는 것은 해당 이벤트가 발생할 때마다 scrollHeight와 scrollTop + offsetHeight를 비교하면서 페이지의 끝에 도달했는지를 계산해야 한다. 하지만, 말에서도 알 수 있듯이 scroll 이벤트가 발생할 때마다 와 같은 과한 이벤트는 성능저하를 야기할 가능성이 높다. 때문에 나는 Intersection Observer API 를 통해 무한스크롤을 구현하기로 했다. 더불어 이를 활용한 라이브러리.. 공감수 0 댓글수 0 2023. 7. 3.
PWA (Progressive Web App) ✨ 들어가기 우선 PWA는 모바일 기기에서 네이티브 앱과 같은 사용자 경험을 제공하는 웹 앱이다. 그래서 기존의 웹 앱과는 달리 네이티브 앱과 유사한 기능들을 제공 받을 수 있다는 것이 장점이며, PWA를 통해 사용자는 앱의 다운로드나 업데이트 필요없이 웹 브라우저로 앱을 바로 사용할 수 있게 되었다. 하지만, 여태까지는 안드로이드와 Chromium기반 브라우저에서만 거의 모든 기능을 제공하고 있었으며, Safari는 폐쇄적인 모습을 보이고 있었다. 그래서 웹을 개발할 때, Safari 브라우저에서만 지원하지 않는 API들이 많이 존재하고 있었다. 그러나 macOS, iOS, iPadOS 유저들의 점유율이 빠른 속도로 증가하면서 애플은 드디어 Web Push를 지원(Meet Web Push for Saf.. 공감수 1 댓글수 0 2023. 6. 29.
모바일 어플리케이션의 종류 PWA를 배우기 앞서 Native Application, WebApp, Hybrid-App, Cross Platfrom 에 대해 학습해보자. ✅ Native Application 가장 기본적인 형태의 앱이다 === 모바일 기기에 최적화된 네이티브 언어로 개발된 앱 👉 해당 스마트폰에 깔린 OS, 안드로이드 또는 iOS 환경 전용으로 개발된 소프트웨어이다. Android 모바일 앱 개발의 경우는 Kotlin 또는 Java iOS의 경우 Swift 또는 Objective C 덕분에 앱의 실행 속도가 빠르고 유용한 API의 지원도 받을 수 있다. 반면 ‼️다른 운영체제 ‼️에서도 실행되기 위해서는 시간도 노력도 돈도 많이 드는 단점이 있다. 장점 단점 사용자에게 가장 빠르고 안정적이며 반응이 빠른 환경을 제공.. 공감수 0 댓글수 0 2023. 6. 29.
자바스크립트는 객체지향언어인가? 결론부터 말하자면...! 자바스크립트는 멀티-패러다임 언어로 명령형, 함수형, Prototype 기반의 객체 지향 언어이다. 자바스크립트를 이루고 있는 거의 모든 것이 객체이며, 자바스크립트가 클래스가 없어서 객체지향이 아니라고 생각하겠지만 프로토타입 기반의 객체지향 언어임을 주의하자! ✨ 자바스크립트에서 객체 생성 방법 객체 리터럴 Object( ) 생성자 생성자 함수 총 3가지이다. const object1 = {}; object1.name = "서히"; const object2 = new Object(); object2.name = "지수"; function ObjectFunction(name) { // 👇 프로퍼티 this.name = name; } const object3 = new Object.. 공감수 0 댓글수 0 2023. 3. 8.
OOP (Object-Oriented Programming) ✨ 객체지향 프로그래밍이란? 프로그래밍하려는 대상을 하나의 객체(=사물)로 정의하는 설계 방법이다. 다시 말해, 객체의 관점에서 단순히 자료 구조가 아닌 기능을 포함한 메소드를 형태로 객체를 만들고 사용하는 방법이다. 그래서 객체들간의 상호작용을 통해 로직을 만들 수 있게 된다. ⚠️ 주의사항 ⚠️ 객체지향 프로그래밍의 반대 === 절차지향 프로그래밍 아니다! 객체지향 프로그래밍도 절차가 있고, 절차지향 프로그래밍도 객체를 다룬다. ✨ 특징 ✅ 추상화 불필요한 정보는 숨기고 중요한 정보만을 나타내 프로그래밍을 간단하게 구현하는 것이다. ✅ 캡슐화 변수와 함수를 하나로 묶어 낮은 결합도를 유지할 수 있도록 설계하는 것이다. 더불어 캡슐화를 통해 정보은닉을 활용할 수도 있다. ✅ 상속 상위 클래스의 속성과 .. 공감수 0 댓글수 0 2023. 2. 28.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.