후원자 관리는 창작자들이 자신을 후원한 유저들에게 여러 벌크 액션을 취할 수 있게 해주는 웹 애플리케이션 입니다.

후원자 관리 회고록

고물가 시대에 들어서면서 사람들이 소비를 아끼려는 큰 니즈를 보였습니다. 이는 카카오톡 오픈 채팅방 ‘거지방’과 같은 것들이 유행함을 통해 파악할 수 있었습니다.

사이드 프로젝트(자린고비) 회고록

최근에 nextjs 13.4가 release되면서 App Router가 Stable 상태가 되었습니다.

RSC(React Server Components) 이해하기

회고록은 처음이라… gpt에게 물어보았습니다. “회고록은 어떻게 쓰는거야 ??”

텀블벅에서의 첫 프로젝트(광고 플랫폼) 회고록

HTTP는 stateless라는 특징을 갖습니다. 이로 인해 서버는 요청에 대한 정보를 식별할 수 없고, 이는 사용자가 매번 번거로운 인가 절차를 진행하게 했습니다. 이를 보완하기 위해 나온 개념이 Cookie입니다. 

Cookie, Session, Token, Storage

뤼튼에서는 글로벌한 유저들에 대비하기 위해 국제화를 진행하였습니다. 국제화는 한국어로 된 문구들을 다른 나라 언어로도 제공하는 기능을 말합니다.

구글 스프레드시트를 통한 국제화 자동화

i18n이란 internationalization을 i18n으로 나타낸 것이며, 웹사이트를 구축할 때 다국어 처리에 자주 쓰이는 라이브러리이다.

react-i18next을 사용하여 국제화하기

나는 뤼튼에서 일하면서 하루종일 코딩만 했다고 생각하는데, 막상 나에게 어떤 챌리지들이 있었지 ? 라고 떠올리면 마땅히 떠오르지 않았다. 한편으론, 너무 거창한 것들을 생각하려고 하다보니 더 부담으로 다가왔다는 생각이 든다. 그래서 지금 이렇게 생각날 때 내가 겪었던 트러블들과 그것들을 어떻게 해결 했었는지 간략하게 적어보고자 한다. 

기억에 남는 트러블 슈팅 경험

최근 리액트를 사용하면서 클래스 문법을 마주친 적이 없긴 하지만..! 자바스크립트에서 클래스는 너무나도 중요한 개념이다. 객체 지향 언어의 뼈대를 이루는 클래스, 특히 자바스크립트의 클래스를 다시 학습하면서 자바스크립트에 대한 이해도를 높이고자 함이다.

자바스크립트 클래스

저는 어렸을 적부터 수학을 굉장히 좋아했습니다.암기를 잘 못하던 저에게 수학은 너무나도 재밌는 과목이었습니다. 문제와 관련된 개념의 원리만 이해하고 있으면, 언제 어디서든 그 개념을 꺼내서 쓸 수 있었습니다.

나에 대한 이야기

맵은 키가 있는 데이터를 저장한다는 점에서 객체와 유사합니다. 다만, 맵은 키에 다양한 자료형이 올 수 있다는 차이점이 있습니다.

맵과 셋

평소에 REST API 혹은 RESTful한 API에 대해서 듣게됩니다. 이 용어 자체에는 굉장히 익숙하지만 REST API가 무엇인지 그리고 RESTful한 API가 무엇인지에 대해서 고민해보고 공부해본적은 없는 것 같습니다. 따라서 오늘은 REST API와 더 가까워지기 위해서 REST API에 대해 고민해봤습니다.

REST API

프로그램이란, 파일이 저장 장치에 저장되어 있지만 메모리에는 올라가 있지 않은 정적인 상태를 말합니다.

프로세스와 스레드

실행 컨텍스트란 코드가 실행되기 위해 필요한 환경입니다. 실행 컨텍스트는 스택 구조를 가집니다. 실행되는 순서대로 콜 스택에 쌓였다가, 가장 위에 쌓여있는 컨텍스트와 관련있는 코드를 실행하는 식으로 동일한 환경과 순서를 보장합니다.

실행 컨텍스트

Hoisting은 단어 그대로 끌어올린다는 뜻이 있습니다. 코드 하단에서 선언되는 변수나 함수를 끌어올려서 코드 상단에서 미리 선언해준다는 것을 의미합니다.

호이스팅

자바스크립트의 큰 특징 중 하나는 싱글 스레드 기반의 언어라는 점입니다. 스레드가 하나라는 말은 곧 동시에 하나의 작업만을 처리할 수 있다라는 말입니다. 하지만 실제로 자바스크립트가 사용되는 환경을 생각해보면 많은 작업이 동시에 처리되고 있는 것을 볼 수 있습니다. 어떻게 스레드가 하나인데 이런 일이 가능할까요 ?

이벤트 루프

혹시 프론트 공부를 하시면서 위의 그림을 본 적이 있으신가요 ?  만약 없으시다면 운이 좋으신 겁니다. 왜냐하면 웹 프론트엔드 개발이 결국 위의 구조에서 일어나는 변화이기 때문입니다. 즉, 웹 프론트엔드 개발의 뼈대가 되는 핵심 개념이기 때문입니다.

브라우저의 동작 원리

react-router를 직접 구현해보고자 한다. 근데 막상 시작하려고 하니 무엇부터 시작해야 할지 전혀 감이 잡히지 않았다. 그래서 30분정도 고민하다가 인터넷에서 레퍼런스를 막 찾아보기 시작했다.

React Router

context를 이용하면 부모 컴포넌트에서 자식 컴포넌트로 props를 일일이 넘겨주지 않아도 됩니다. context를 통해 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.

React Context

예전에 뤼튼에서 진행했던 프로젝트에서 서비스를 배포한 경험이 있었다. 그 때는, 각각의 서비스들이 대략적으로 어떤 역할을 하고 있는지 파악하고 배포를 하는데 집중 하였기 때문에 각각의 서비스들의 기능을 명확히 하고 싶었다. 따라서 이번 기회에 각각의 서비스들을 심도있게 정리 해보았다. 

Amazon S3 + CloudFront + Route 53

1부터 자연수를 이어쓰면 1234567891011121314…가 됩니다. 이렇게 이어쓴 숫자를 A라 할 때, n번째에 위치하는 숫자를 반환하는 함수 solution을 완성해주세요. 

알고리즘(Nth digits)

두 문자열의 앞뒤를 겹쳐서 만들 수 있는 문자열 중, 더 짧은 문자열을 구하려 합니다.  예를 들어 “xyZA”와 “ABCxy”가 주어졌을 때, 두 문자열을 겹치는 방법은 다음과 같습니다.

알고리즘(문자열 합치기)

기존에 웹 페이지는 Server에서 받은 html을 바탕으로 Client가 화면을 그렸지만, CSR 방식은 서버에서 받는게 아니라 Client에서 알아서 화면을 그리는 방식입니다. React나 Vue같은 라이브러리/프레임워크는 SPA를 만드는 것을 지원하고 CSR 방식으로 동작합니다.

CSR / SSR with Next.js

개발자는 코드를 통해서 새로운 결과물을 만들어 냅니다. 그 결과물에는 애플리케이션, 응용 프로그램, 프로그램 등이 있습니다.  그럼 웹에서의 결과를 무엇이라고 할까요 ? 바로 웹 페이지 입니다. 이 웹 페이지가 모이면 웹 사이트가 되고, 기능이 많아지면 웹 애플리케이션이 됩니다.  그 중에서 웹 페이지를 만드는 코드를 우리는 HTML이라고 합니다. 

All Posts

후원자 관리 회고록

사이드 프로젝트(자린고비) 회고록

RSC(React Server Components) 이해하기

텀블벅에서의 첫 프로젝트(광고 플랫폼) 회고록

Cookie, Session, Token, Storage