Frorong

[React] react 19 버전에 대한 고찰 Svelte, Astro, Remix와 같은 js 프레임워크들이 떠오르고 있다. 하지만, React가 근본 프레임워크인 것은 부정할 수 없다. 신규 프레임워크들도 좋은 기술들과 성능들을 갖고 있지만, React의 역사와 유저풀은 결코 무시할 수 없기 때문이다. 지난 2024 04 25일자에 React의 19 버전이 베타 릴리스 되었다. 2022년 6월 14일 출시된 React 18.2.0 버전 이후로 처음이다. React 18 버전에서는 서버 컴포넌트가 공개되며 엄청난 이목을 끌었는데.. 19 버전은 또 얼마나 대단한 업데이트를 가져왔을지 기대되었다. 자, 지금부터 React 19 버전에 대한 변경사항을 알아보겠다. React 19의 새로운 기능Hooks비..

[Docker] NextJS 배포를 위한 도커 컨테이너화. 먼저 도커란 무엇인가?Docker란?도커는 컨테이너 기반 가상화 플랫폼이다. 소프트웨어를 컨테이너라는 단위로 패키징하여 빠르게, 어디서든 개발하고 배포할 수 있다.  도커는 서비스와 운영체제 간의 호환성을 해결하기 위해 등장하였다. 예를 들어 내 개발 환경이 Window이고, 배포 서버 환경이 Linux여서 문제가 발생한다면? 머리 아플 것이다. 도커는 다른 운영체제에서도 같은 환경을 구성할 수 있도록 해주기 때문에 이런 문제를 해결할 수 있다. 도커를 설치하고 원하는 환경을 지정해준다. 도커는 지정된 파일을 보고 파일에 명시된 구성으로 가상의 컨테이너를 형성한다. 한 개의 서버가 여러 개의 컨테이너들을 보유할 수 있고, 이 컨테이너들은 각각 독..

[JS] 자바스크립트는 객체지향 언어인가? 자바스크립트의 상속은 어떻게 구현되는가? 들어가기에 앞서, 클래스란 무엇일까?클래스는 객체를 찍어낼 수 있는 틀이다.그럼 객체는 무엇일까?객체는 클래스의 인스턴스이다. 이에 대한 붕어빵이라는 유명한 비유 대상이 있다. 붕어빵 틀에 반죽을 구우면 붕어 모양의 빵이 만들어진다.여기서 붕어빵 틀이 클래스이고, 붕어 모양의 빵이 객체이다. 자바스크립트에도 이런 클래스가 존재한다! 문법적으로..es6에서 class 문법이 추가되었다. 아래와 같이 기존 prototype을 사용한 문법에서 일반적인 class를 사용하는 문법이 추가되었다.이로 인해 class형 문법에 익숙한 사람들이 편하게 사용할 수 있게 되었다.function Example(argument1) { thi..

[Next] 인증되지 않은 사용자 OAuth 로그인 이후 이전 페이지로 리다이렉트 구현. NextJS App Router 배경 최근 gsm-networking(우리 팀에서 만든 서비스)에 게시판 기능이 릴리스 되었다. 다양한 주제의 게시글을 작성하고 서로 이야기할 수 있는 기능이다. 이 게시판 기능의 트래픽을 만들기 위해 단체 채팅방에 내가 작성한 글의 링크를 공유했다. 여기서 문제를 확인할 수 있었다. 인증되어있지 않은 유저가 링크를 통해 접속한다면, server side fetching 이후 이런 화면을 보게 된다. 로그인을 진행한다면 메인 페이지로 이동된다. 그럼 유저는 원래 목적인 공유된 게시글을 바로 확인할 수 없다. 로그인 이후 다시 링크를 통해 접속하거나, 메인 페이지부터 원하는 게시글까지 ..

[FE] 내가 만든 웹이 앱으로?? PWA Progressive Web App을 만들어보자! 웹을 만드는 기술로 앱과 유사한 사용자 경험을 제공할 수 있다면? 더욱 다양한 유형의 사용자를 만족시킬 수 있을 것이다. React Native인가? 아니다. 바로, PWA(Progressive Web App)이다. PWA (Progressive Web App) PWA를 왜 사용하는 걸까? 먼저, PWA는 브라우저에서 동작하기 때문에 다양한 앱스토어에 출시하기 위해 별도의 프로세스를 거치지 않아도 된다. 그렇다고 앱스토어에 출시할 수 없는 것은 아니다. Google Play Store를 비롯한, Microsoft Store나 Samsung Galaxy Store 등 다양한 앱스토어에서 PWA를 지원한다. 일반적인..

[JS] 코딩 테스트 문제가 너무 어려워? 앞만 보고 달려서 그래! 백 트래킹 Back Tracking. 어제 이야기하며 산에서 트레킹을 하다가 백 트래킹이라는 이야기가 나왔다. 백 트래킹이 코딩할 때 쓰는 방법이라고는 알고 있었지만, 정확히 무엇을 의미하는지, 어떤 것인지는 알지 못했다. 오늘은 백 트래킹에 대해 알아보려 한다. ! 참고 ! 오늘 알아볼 트래킹(tracking)과 트레킹(trekking)은 단어 자체가 다르다. Back Tracking 백 트래킹은 알고리즘 기법 중 하나이다. 주어진 조건에 따라 문제를 해결 가능한 해가 존재하는지, 존재하지 않은지 판별할 수 있는 알고리즘이다. 이를 결정 문제라고 한다. 주어진 조건에 따라 문제를 해결 가능한 해가 존재하는지, 존재하지 않은지 판별하는 ..

[Svelte] 1주일간 Svelte kit을 써보고 느낀 점. Svelte kit. 아직 생소한 프레임워크이다. 이 글에서는 svelte kit을 어떻게 사용하는지 svelte kit의 기본적인 정보와, svelte kit을 1주일간 써보고 느낀 점을 이야기하려 한다. 먼저 svelte kit이란 무엇인가? Svelte kit Svelte kit은 svelte 기반의 프레임워크다. svelte는 javascript 기반의 프레임워크이다. svelte는 컴파일 타임에 동작하며, 런타임에 프레임워크에 대한 소스코드가 필요하지 않다. 꼭 필요한 것만 최적화된 javascript로 변환되어 빠르게 작동한다. svelte의 특성을 하나만 꼽자면 DOM과 연관되어 있다. svelte는 React와는 다르게 가상 ..

[CS] DNS와 ARP가 무엇인가요? DNS가 무엇인가요? 그전에 도메인 주소와 IP 주소에 대해 알아봅시다. 도메인 주소와 IP 주소 https://frorong.tistory.com 위 주소는 우리가 흔히 볼 수 있는 주소이다. 알파벳으로 되어있다. 왜 주소가 알파벳으로 되어있을까? 알파벳은 세계 공용어로, 굉장히 많은 사람들이 사용하는 문자이다. 즉, 사람에 맞춤화된 언어이다. 웹 서비스의 인터넷상에서의 각각의 host의 위치가 구분되기 위해서는 주소가 필요하다. 그리고 (frorong.tistory.com)이런 알파벳으로 이루어진 주소를 도메인 주소라고 부른다. 이런 인간 맞춤 언어를 컴퓨터가 이해할 수 있을까? 그렇지 않다. 컴퓨터가 이런 도메인 주소를 이해하기 위해서는 IP 주소로 변환해야 ..