1. 요즘.. 현재 진행 중인 토이프로젝트인 https://www.link-archive.com/ 는 북마크가 가능한 SNS 서비스이다. 관심 있는 URL을 저장할 수 있고 다른 사람의 URL을 둘러볼 수 있으며 북마크를 해서 가져올 수 있는 서비스이다. 요즘 구직활동 + 이슈해결 + 스터디로 블로깅을 최근에 못했다. 많고 많은 이슈 중에 오늘은 토큰을 재발급하는 이슈를 해결해서 블로그를 작성하려고 한다. 2. 정책 우선 현재 우리 서비스 정책을 간단하게 알려보자면, AccessToken, RefreshToken을 이용 중이고 AccessToken은 JWT로 stateless 하게 보안을 확인 중이다. AccessToken은 만료기한은 2시간, RefreshToken은 만료기한이 30일이다. Refres..
1. 클로저(Closure)란? 클로저는 기본적으로 함수와 그 함수가 선언될 당시의 렉시컬 환경과의 조합입니다. 렉시컬 환경은 어떤 변수가 어디에 있는지를 알려주는 식별자-값 쌍의 모음입니다. 따라서, 클로저를 이해하는 것은 함수와 그 주변의 코드를 이해하는 것입니다. function outerFunction() { let outerVariable = 100; function innerFunction() { console.log(outerVariable); } return innerFunction; } let myFunction = outerFunction(); myFunction(); // 100 위의 코드에서 innerFunction은 outerFunction의 outerVariable에 접근할 수 ..
JavaScript는 단일 스레드(single-threaded) 언어로, 한 번에 하나의 작업만 처리할 수 있습니다. 그렇다면 비동기(asynchronous) 코드가 어떻게 가능한 것일까요? 그것이 바로 JavaScript의 Event Loop 때문입니다. 비동기 자바스크립트 소개 JavaScript는 웹에서 가장 널리 사용되는 언어 중 하나입니다. 이는 대부분의 웹 브라우저에 내장되어 있으며, 서버 사이드 개발(Node.js)까지도 가능하게 합니다. JavaScript는 동기(synchronous) 코드와 비동기(asynchronous) 코드를 모두 지원합니다. 동기 코드는 순차적으로 실행되며, 각 작업이 완료될 때까지 다음 작업은 대기 상태에 있습니다. 이와 반대로 비동기 코드는 작업이 완료되기를 기..
라이브러리에 대한 나의 생각 라이브러리를 사용해서 똑같은 기능을 아주 쉽게 가져다가 쓸 수 있다. 하지만 나는 라이브러리를 사용해서 기능을 붙이는 것에 대해 보수적으로 생각한다. 왜냐하면 사용한 라이브러리는 내가 직접 조작할 수 없고 만들어 놓는 대로. 그대로 사용해야 한다. 나중에 그 라이브러리가 더 이상 업데이트를 하지않거나 업데이트 과정에서 핵심적인 기능이 변경되면 나는 그 라이브러리에 또 맞춰 코드를 수정해야 한다. 즉, 의존성이 생겨버린다. 이러한 이유로 최대한 라이브러리는 안 쓰려고 노력하고, 바닐라로 직접 구현하는 것을 선호한다. 그래서 이번 캐러셀도 직접 구현을 할 생각이다. 설계 우선 평평한 캐러셀 말고 이번엔 좀 독특하게 입체적으로 구현해보고 싶단 생각이 들었다. 각 카드가 원형으로 둘..
프로젝트 시작 계기 거의 6개월 동안 프론트는 혼자서 공부하다 보니까 점점 내 실력에 대해서 체크를 해보고 싶었다. 협업은 회사 들어가기 전에 꼭 경험해 보고 싶었고 Git관련해서 브랜치전략, 충돌에 대한 경험 등을 겪고 싶었다. 그리고 이제는 사람들이랑 프로젝트를 시작해도 피해는 주지 않겠다 싶어서 인프런에서 스터디 공고를 쭉 봤다. 인프런이 확실히 개발자들이 스터디 구하기 좋은 플랫폼인 거 같다. 물론 강의도 훌륭하지만. 쭉 보던 중 바로 시작하고 싶어서 인원이 어느 정도 차있고 금방이라도 시작할 거 같은 스터디에 카톡을 보냈다. 연락은 거의 바로 왔고 내 github 주소를 보내주고 그쪽 팀원분들도 오케이 하셔가지고 참여하게 됐다. 프로젝트 시작 인원은 백앤드 2명, 프론트 4명이었다. 원래 2명 ..
근황 코로나 이슈 + 기존에 하던 프로젝트 마무리 + 새로 시작하는 프로젝트 + 프론트엔드 인턴십으로 너무 정신없이 시간이 지나가서 블로깅을 못했다... 새로운 과제 이번 두번 째 과제는 검색기능을 구현하는 것이다. 기업과제이고 기업에서 api를 제공해 준다. 이번 과제의 핵심은 검색기능을 구현할 때 API호출을 최소한으로 할 수 있도록 구현하는 것이다. 일단 이 부분을 들었을 때 가장 먼저 떠 올린 건 '디바운스'이다. 디바운스는 사용자 인터페이스에서 일반적으로 발생하는 빈번한 이벤트를 처리하는 방법 중 하나이다. 내가 구현한 디바운스 훅은 import { useState, useEffect } from 'react'; function useDebounce(value: T, delay: number):..
1. 서버란? 서버는 무언가를 제공해 주는 컴퓨터로, 우리가 인터넷을 통해 접근하는 대상은 웹사이트나 리소스 자체가 아니라, 해당 웹사이트와 리소스를 응답해 주는 컴퓨터에 접속하는 것입니다. 서버는 서비스를 운영하기 위해 특정 컴퓨터를 가동하고, 그 컴퓨터에서 특정 프로그램을 실행하여 네트워크를 통해 접근하면 특정 리소스를 응답해 주도록 만듭니다. 인터넷을 통해 이 컴퓨터 외부에서 접근 가능하도록 설정하며, 이러한 동작을 하는 컴퓨터를 우리는 '서버'라고 부릅니다. 서버는 물리적인 실체가 있는 컴퓨터로, CPU, GPU, RAM, 메모리 등으로 구성되어 있고 각기 다른 사양을 가지고 있습니다. 서버가 '터졌다'라고 말하는 것은 서버 컴퓨터가 사용 가능한 사양을 초과하는 계산이 필요한 경우, 컴퓨터가 제대..
ChatGPT를 이용한 자동화 블로그를 완성했다. 자동화 블로그의 목적은 순수 나의 재미를 위해 만들었고, 구글 에드센스로 부터 수익은 전혀 기대하지 않고 있다. 생각보다 까다롭고 개발자가 아니라면 따라 하기 어려울 거라고 생각이 든다. 준비물 서버 1대, 파이썬 초급이해, 리눅스 환경 구축 경험, github action에 대한 이해, ChatGPT 유료 결제 자 그럼 시작해 보자 1. 블로그 선택 처음으로 해야 할 일은 블로그를 선택하는 일이다. 티스토리, 네이버 블로그, github 페이지 등등 다양한 블로그가 있지만, ChatGPT가 마크다운 형식으로 파일을 저장해 주기 때문에 github페이지를 사용했다. 2. jekyll theme 선택 나는 Type-on-Strap을 선택했다. 전에 Chir..
