쥰뎁

들어가며본 프로젝트는 Next.js와 Firebase를 사용하여 개발한 P2P 기반의 실시간 채팅 플랫폼이다.여러 프로젝트를 개발하면서 실시간 채팅 플랫폼을 개발해보고 싶다는 생각으로 시작하게 되었다.실시간 통신이라고 하면 제일 먼저 socket 통신이 떠오르는데, 본 프로젝트는 서버리스를 기반으로 하여 Firebase의 실시간데이터베이스를 활용하였다.개요개발 기간7일인원1명 (개인 프로젝트)역할프로젝트 구상전체 개발프론트엔드Next.jsTailwind CSSFigma백엔드-데이터베이스Firebase형상관리Github배포gh-pages 프로젝트 명세회원 가입된 사용자는 친구 추가를 할 수 있다.회원은 회원명과 태그로 구분한다.디스코드의 네이밍 시스템을 벤치마킹했다.회원명은 회원 가입 시 제공된 이름, 태..

개요LeetCode문제 명Reverse Integer난이도Medium체감 난이도Easy풀이 시간15분 정도 문제 설명Given a signed 32-bit integer x, return x with its digits reversed.If reversing x causes the value to go outside the signed 32-bit integer range [-231, 231 - 1], then return 0.Assume the environment does not allow you to store 64-bit integers (signed or unsigned). 주어진 32비트 정수 x의 자릿수를 뒤집어서 반환하라.만약 뒤집은 값이 32비트 정수 범위인 [-2^31, 2^31 - 1..

요약정보처리기사 시험은 공부해야 할 범위가 엄청나고, 깊은 지식을 요구하는 시험이 아니다.편법은 존재하지 않는다.정면돌파만이 자격증 취득의 길이고, 내가 공부한 만큼의 양이 결과로 돌아온다. 정보처리기사란?정보처리기사(Engineer Information Processing)는 우수한 프로그램을 개발하여 업무의 효율성을 높이고, 궁극적으로 국가발전에 이바지하기 위해서 컴퓨터에 관한 전문적인 지식과 기술을 갖춘 사람을 양성할 목적으로 제정되었다. 국가자격 종목별 상세정보 | Q-net www.q-net.or.kr정보처리기사는 컴퓨터 관련 국가기술자격 중 소프트웨어 개발 분야의 자격증이다.기사 등급의 시험으로 관련학과 학사 수준의 지식을 갖추었음을 검증할 수 있는 자격증이라는 의미이다. 본 자격증은 취득하기..

개요사용자가 URL을 입력하여 엔터를 눌렀을 때 브라우저가 페이지를 로드하는 과정에 대해서 공부하고 글로 남기려고 한다. 브라우저 동작 원리1. URL 파싱 및 DNS 조회URL 파싱브라우저는 사용자가 입력한 URL을 파싱 하여 프로토콜, 호스트명, 경로, 쿼리 문자열 등으로 나눈다.예: `https://www.example.com/path?query=123`DNS 조회브라우저는 URL의 호스트명을 IP 주소로 변환하기 위해 DNS 서버에 요청을 보낸다.예: 'http://www.example.com → 93.184.216.34'* 파싱(Parsing): 특정 형식으로 구성된 데이터를 분석하고 그 의미를 이해하는 과정* DNS(Domain Name System): 도메인 이름을 IP 주소로 변환하여 주는..

개요React를 사용하여 개발을 했던 사람이라면 element 요소 내 className을 사용하는 것을 알 것이다.본인은 React에서는 class 대신에 className을 사용하는구나 정도로 이해했지만, 문득 "왜 그럴까?" 라는 의문이 생겨 찾아 공부하고 글을 남기려고 한다. JavaScript 예약어 충돌 회피'class'는 자바스크립트에서 예약어로 사용된다.클래스 정의에 사용되며, 이를 속성명으로 사용할 경우 혼란이 발생할 수 있다.따라서, JSX에서는 혼동을 피하기 위해 'class' 대신 'className'을 사용하여 CSS 클래스를 지정한다.React의 JSX 문법JSX는 자바스크립트 코드 안에서 XML을 사용하는 문법으로, XML과 자바스크립트가 혼합된 형태이다.JSX는 자바스크립트로..

Next.jsNext.js는 React 애플리케이션 개발을 위한 프레임워크로, 다양한 기능과 장점을 제공하여 개발자들이 더 효율적이고 성능 좋은 웹 애플리케이션을 만들 수 있도록 도와준다. 서버 사이드 렌더링(SSR, Server-Side Rendering)Next.js는 서버 사이드 렌더링을 쉽게 구현할 수 있도록 도와준다.서버 사이드 렌더링은 클라이언트 사이드 렌더링(CSR)에 비해 SEO(검색 엔진 최적화)에 유리하고, 초기 로딩 시간을 줄이는 장점이 있다.// pages/index.jsexport async function getServerSideProps() { const res = await fetch('https://api.example.com/data'); const data = awa..

RESTful API는 REST(Representational State Transfer) 아키텍처 스타일을 따르는 API를 의미한다.REST는 웹 서비스 디자인을 위한 아키텍처 원칙 및 패턴으로, 클라이언트와 서버 간의 상호 작용을 구조화된 방식으로 정의한다.RESTful API는 HTTP를 통해 데이터를 전송하며, 다음과 같은 특성을 가진다. REST의 핵심 개념자원(Resource)모든 것은 자원으로 표현된다.자원은 URI(Uniform Resource Identifier)로 식별된다.예: '/users', '/posts/1'HTTP 메서드자원에 대한 동작은 HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하여 정의된다.'GET': 자원의 조회'POST': 자원의 생성'PUT':..

생명주기(Lifecycle)생명주기(Lifecycle)는 특정 개체나 시스템이 존재하는 동안 거치는 여러 단계와 각 단계에서 수행되는 작업들을 말한다.소프트웨어 개발에서는 다양한 컴포넌트나 객체의 생명주기를 정의하여, 각 단계에서 어떤 작업이 수행되는지 명확히 함으로써 관리와 유지보수를 용이하게 한다.컴포넌트 생명주기특히 프론트엔드 개발에서, 컴포넌트 생명주기는 중요한 개념이다.대표적으로 React와 같은 라이브러리에서는 컴포넌트가 생성, 업데이트, 소멸되는 과정을 명확히 정의하여, 개발자가 적절한 타이밍에 필요한 작업을 수행할 수 있도록 한다.React 컴포넌트 생명주기React에서는 컴포넌트가 마운트, 업데이트, 언마운트되는 과정에서 다양한 생명주기 메서드를 제공한다.마운트(Mount): 컴포넌트가 ..

Virtual Dom(Virtual Document Object Model)Virtual Dom은 자바스크립트 객체로 메모리에 가상으로 존재하는 DOM 트리의 일종이다.실제 DOM의 경량화된 복사본이며, DOM 조작의 효율성을 높이기 위해 사용된다.이는 특히 React와 같은 현대적인 프런트엔드 라이브러리에서 널리 사용된다.실제 DOMDOM은 HTML 문서의 구조를 계층적(Tree)으로 표현한 모델이다.각 HTML 태그에는 DOM 트리의 노드로 표현되며, 웹 페이지의 내용을 변경하거나 조작하는 작업은 DOM을 통해 이루어진다.단점실제 DOM 조작은 비용이 많이 든다.DOM을 변경할 때마다 브라우저는 레이아웃, 페인트, 리플로우 등의 작업을 수행하며, 이는 성능에 큰 영향을 미칠 수 있다.Virtual D..

Promise와 Async자바스크립트에서 비동기 처리를 다루기 위한 두 가지 주요 패턴인 'Promise'와 'async/await'는 각각 고유한 특징과 사용 방법을 가지고 있다.이 두 패턴은 비동기 작업을 더 쉽게 관리할 수 있도록 도와주지만, 사용 방식과 코드의 가독성 측면에서 차이가 있다.Promise'Promise'는 비동기 작업의 완료 또는 실패를 처리하기 위한 객체이다.'Promise'는 비동기 작업이 완료된 후의 결과를 약속(promise)하고, 그 결과에 따라 'then' 또는 'catch' 메서드를 통해 처리할 수 있다.// Promise를 사용하는 예제function fetchData() { return new Promise((resolve, reject) => { set..