Front-end Developer

웹 푸시 알림이란? (Web Push Notification) 웹 푸시 알림이란, 사용자가 해당 웹 애플리케이션을 사용하지 않을 때에도, 웹 페이지를 열어놓지 않아도, 서버에서 알림을 보내는 것을 가능하게 하는 기술입니다. 예를 들어, 소셜 미디어 알림, 쇼핑몰 할인 이벤트 등을 실시간으로 알려주는 기능을 생각해볼 수 있습니다. 📇웹 푸시 아키텍처란? 웹 푸시 알림 아키텍처는 크게 다음과 같은 4가지 구성 요소로 이루어져 있습니다. 서버 서버는 웹 푸시 알림을 생성하고, 푸시 서버를 통해 브라우저에 전송합니다. 이때 서버에서는 사용자가 구독한 주제(topic)에 대한 정보를 유지하고 있어야 합니다. 이 정보는 사용자가 푸시 알림을 받기 위해 브라우저에서 구독한 주제를 나타내며, 서버에서는 해당 주제에 대..

💡 RouteGuard는 page route간에 auth check하는 middleware 컴포넌트입니다. 도입하게된 이유❓ 로그인이 필요한 페이지를 로그인 하지 않거나 JWT 토큰이 만료된 경우에 라우팅을 시도할경우 로그인 페이지로 redirect하기 위해서 로그인 한 상태에서 페이지를 reload할 경우 JWT 토큰으로 날아간 유저정보를 가져오기 위해서 컴포넌트 로직 정리 💡 MyApp 컴포넌트는 Next.js app의 root component입니다. 는 현재 렌더링되는 page Component 를 children으로 감싸서 auth 로직을 실행시키는 middleware의 역할을한다. RouteGuard 컴포넌트는 위에서 말했듯이 페이지 routing 이벤트가 시작될 때 auth 체크 로직을 실행..

모노레포 란? 모노레포란 같은 레포지토리에서 서로 다른 프로젝트를 관리하는 소프트웨어 개발 전략. 각 프로젝트를 서로 다른 레포지토리에서 관리하는 전략과 비교했을 때 코드 재사용, 외부 의존성 관리, 모든 프로젝트를 아우르는 리팩토링. 코드 재사용, 외부 의존성 관리, 모든 프로젝트를 아우르는 리팩토링 측면에서 장점이 있다. 소수의 FE 엔지니어가, 다수의 FE 프로젝트를 개발 및 운영해야 하는 상황에서 유리하다. FE 프로젝트 소스를 한곳에서 관리함으로써 소스의 변경사항을 보다 쉽게 파악할 수 있고, 신규 입사자가 합류했을 때 개발환경을 세팅하는 데 비용을 줄일 수 있다. 이미 개발해 둔 공통 UI 컴포넌트 라이브러리와 같이 모듈화된 코드를 여러 프로젝트에서 재사용 할 수 있다. 코드 정적 분석 및 테..

😃 글또를 시작하게된 계기 안녕하세요. 먼저 간략하게 글또에 대해서 소개하자면, 글또는 글쓰는 개발자들의 모임입니다. 2주의 한 번씩 개발 관련된 글을 적고 서로 쓴 글들을 피드백 해주면서 글 쓰는 습관도 기르고 실력도 키우는 아주 유익한 모임입니다. 글또에 대해서 더 자세한 내용을 알고 싶으시다면 글또 노션 페이지에서 확인하시면 좋을 것 같습니다. 저는 회사 동료분을 통해서 글또에대해서 알게되었고 글또를 지원하게되었습니다. 글또를 지원하게된 이유는 두 가지가 있습니다. 첫째는 제가 그때쯤에 유투브에서 어떤 한 시니어 개발자분께서 이 사람이 개발을 잘 하는 사람인지 알기 위해서는 이것 한 가지만 보면 된다고 말씀하시는 영상을 보게되었는데, 그 한 가지가 글을 잘 쓸줄 아느냐 였습니다. 좀 더 분명하게 이..

HTTP 프로토콜이란? 먼저 프로토콜은 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계입니다. HTTP(Hypertext Transfer Protocol)는 웹 통신 프로토콜로써 웹 브라우저와 서버 간에 데이터를 주고받게 해줍니다. HTTP 특징 (Connectless & Stateless) HTTP에 두 가지 특징이 있는데, Connectless와 Stateless가 있습니다. 그리고 이 두 특징은 연관이 있습니다. HTTP는 웹 브라우저가 서버에 연결을하고 데이터를 요청해서 서버에서 응답을 받으면 바로 서버와의 연결을 끊어버립니다. 이러한 특징을 Connectless라고 합니다. 데이터 요청이 독립적으로 되기때문에 다수의 요청을 처리할 수 있고 서버의 부하를 줄일 수 있습니다. 하지만, 이전..

Javascript this를 공부해야지 해야지 하다가 드디어 공부를 하고 이렇게 정리를 해봅니다. this는 어떤 함수나 객체를 가르키게 되는데 어디서 호출되냐에 따라서 가르키는 함수 또는 객체가 달라집니다. 총 크게 6가지 경우가 있는데 어떤 경우에서 어떻게 변하는지 정리해보겠습니다. 1. 전역에서 쓴 this 전역에서 this를 호출하면 this는 Window라는 전역 객체를 가리키게 됩니다. (Node.js에서는 Global) Window(전역 객체)는 javascript의 모든 객체, 함수, 변수들을 포함하고 있습니다. //1. 전역에서 호출 var x = this; console.log(x); //Window 2. 일반 함수 안에서 쓴 this 일반 함수 안에서 this가 호출이 되면 this..

문제 코딩테스트 연습 - 소수 찾기 한자리 숫자가 적힌 종이 조각이 흩어져있습니다. 흩어진 종이 조각을 붙여 소수를 몇 개 만들 수 있는지 알아내려 합니다. 각 종이 조각에 적힌 숫자가 적힌 문자열 numbers가 주어졌을 때, 종이 programmers.co.kr 문제풀이 from itertools import permutations import math def prime_number(n): num = math.sqrt(n) if n < 2: return False for k in range(2, int(num)+1): if n % k == 0: return False return True def solution(numbers): answer = [] #permutation 혹은 combination을..

문제 코딩테스트 연습 - 영어 끝말잇기 3 ["tank", "kick", "know", "wheel", "land", "dream", "mother", "robot", "tank"] [3,3] 5 ["hello", "observe", "effect", "take", "either", "recognize", "encourage", "ensure", "establish", "hang", "gather", "refer", "reference", "estimate", "executive"] [0,0] programmers.co.kr 문제풀이 import math def solution(n, words): answer = [] #words에 첫번 째 idx에 있는 값을 넣어서 비교할 수 있게 한다. lst = [..