본문 바로가기

분류 전체보기

데덴찌 서비스 오픈 친구들이랑 게임을 하다가 편가를 일이 생겼다.​채팅으로 가위바위보해도 되지만 무승부가 자꾸 나다보니 참 귀찮았다.​그래서 만들었다.​편가르기 서비스 "데덴찌".https://dedenjji.3jun.store데덴찌만 넣기엔 뭔가 허전해서 추가로 있으면 좋을만한 기능들을 같이 넣어보았다.메인화면팀 자동 분배제비뽑기 많관부​버그 제보 환영합니다.​사용 기종 + 버그 내용 알려주시면 감사하겠습니다 (_ _ )​ex. 아이폰 14 pro / 팀 확인하기 버튼 화면에 잘려서 안보임​(검색엔진 크롤링 되라고 블로그 글 쓴건 안비밀)​(오징어게임에 데덴찌 나와서 떡상하게 해주세요) https://dedenjji.3jun.store 더보기
블록체인과 비트코인을 최소한으로 이해해보자 컴퓨터공학과 전공자이지만, 블록체인에 대해 제대로 공부해본적이 없어서 GPT 질문을 기반으로 공부해보았다. GPT 기반 공부법이라 정석적인? 순서가 아닐 수도 있다는 점 이해를 구한다.블록체인이 무엇인지, 비트코인이란 무엇인지, 어떻게 거래되고 가치를 가지는지에 대해 탐색해보았다.아래는 그 내용이다.1. 블록체인한마디로 말하자면 "여러 사람이 공유하는 분산형 장부 시스템" 이다.거래 내역(데이터)을 블록 단위로 묶어서 체인처럼 연결하고, 그 내용을 여러 대의 컴퓨터(노드)에 복제해 저장하는 기술이다. 여러대의 노드에 복제되어 있기 때문에, 위변조를 할 경우 다른 노드에서 검증을 통해 바로 들통이 난다. 여기서 중요한건 "블록"이라고 할 수 있다.1.1. 블록일정 시간 동안 발생한 데이터를 묶어놓은 것으로.. 더보기
[JavaScript] 등장 배경과 의의, 특징 1. JavaScript의 등장 배경1995년 웹 브라우저 강자 넷스케이프 커뮤니케이션즈사에서 브라우저용 언어 만들기로 결정96년 3월, "모카Mocha" 등장 -> 9월 "라이브스크립트LiveScript"로 이름 변경 -> 12월 "자바스크립트JavaScript"로 이름 변경 96년 8월 마이크로소프트사에서 Jscript 개발. JScript 와 JavaScript는 애매하게 호환됨 -> 크로스 브라우징 이슈 발생 컴퓨터 시스템 표준을 관리하는 비영리 표준화 기구인 ECMA 인터네셔널에 표준화 요청.97년 표준화된 자바스크립트 초판 ECMAScript 탄생.99년 ECMAScript3 (ES3) 공개09년 ECMAScript5 (ES5) 공개15년 ES6 공개이후 매년 버전업하기로 발표1.1. ECMA.. 더보기
웹소켓 이해하기 웹소켓에 대해 공부하며 알게된 내용들을 정리해보았다.1. 개요웹소켓은 클라이언트와 서버 간의 양방향, 지속적인 통신을 가능하게 하는 프로토콜이다. 일반적인 HTTP 통신과는 다르게, 한번 연결이 성립되면 서버와 클라이언트가 끊기지 않고 계속해서 데이터를 주고받을 수 있다는 점이 가장 큰 특징이다. 이 때문에,실시간 채팅온라인 게임실시간 주식/환율 데이터 전송등의 분야에서 자주 사용되곤 한다.2. 웹소켓 vs HTTP항목HTTPWebsocket통신 방식요청/응답 (Request/Response)양방향 (Full-duplex)연결 유지요청마다 새로 연결한 번 연결 후 계속 유지실시간성느림빠름 (실시간 게임, 채팅 등에 적합)사용 용도웹페이지 로딩, API 통신 등채팅, 주식 실시간 데이터, 게임 등HTTP .. 더보기
홈서버 구성기 (Node.js Express, MySQL) 간단한 게임을 만드는 중인데,게임 결과(스코어)를 이름과 함께 저장해둘 서버를 만들고 싶었다.이참에 집 컴퓨터를 서버로 운영해보면 좋은 경험이 될 거 같아서 하루 정도 꼬박 써서 구성해봤다.다 하고 보니 생각보다 복잡하기도 했고,무료로 서버를 만들고 싶은 사람에게 참고 자료가 될 수 있을 거 같아서 글로 남겨두고자 한다.아래는 그 과정이다.1. MySQL 설치DB는 MySQL과 MongoDB 중 MySQL로 선택.선택의 이유는 정형 데이터에 강함 (정해진 구조: 이름, 점수, 날짜)정렬, 검색, 집계 (예: 점수 높은 순 정렬, 날짜별 통계)에서 강력함JOIN이나 복잡한 쿼리를 나중에 확장하고 싶을 때 유리데이터 무결성 보장 (예: 이름은 꼭 있어야 한다 같은 제약 조건) MySQL 홈페이지에 들어가 설.. 더보기
CSS 아키텍쳐와 BEM 1. CSS 아키텍쳐1.1. CSS 아키텍쳐란?CSS를 더 체계적이고 유지보수하기 쉽게 짜는 방법을 의미함.1.2. CSS 아키텍쳐의 종류BEM (Block Element Modifier)OOCSS (Object-Oriented CSS)SMACSS (Scalable and Modular Architecture for CSS)Atomic CSSITCSS (Inverted Triangle CSS)실무에서는 BEM이 가장 많이 쓰이는데, 그 이유는 단순하고 명확해서 (클래스 이름만 봐도 구조가 눈에 보임)협업에 강해서 (여러 명이 같은 코드 작업할 때 충돌이 적음)CSS 유지보수에 좋아서 (나중에 스타일 고칠 때 어디에 영향 가는지 예측 가능)프레임워크랑 잘 어울려서 (React, Vue 같은 컴포넌트 개발할.. 더보기
가상 메모리(Virtual Memory) 그냥다이브 (딥다이브X) OS 관련 공부를 하던 중 기존에 내가 알던 가상메모리 내용과 다른 부분이 있어 혼란이 생겼다. GPT와 질의응답하며 정리해보았다.질문1. 가상메모리 기술에 대해 설명해줘.가상 메모리(Virtual Memory)는 운영체제(OS)에서 물리적 메모리(RAM)의 한계를 넘어서는 프로세스에게 더 큰 주소 공간을 제공하는 기술입니다. 즉, 프로세스가 실제 메모리보다 더 많은 메모리를 사용할 수 있도록 해주는 기법이에요. 가상 메모리 기술은 디스크 공간을 가상의 RAM처럼 사용하는 방식으로, 실제 물리적 메모리의 용량이 부족할 때 디스크를 사용하여 메모리 부족 문제를 해결합니다.가상 메모리의 주요 목적은 메모리 자원의 관리, 프로세스 간의 메모리 보호, 그리고 메모리 용량을 효율적으로 사용하는 것입니다. 이제 가.. 더보기
리액트 개발자를 위한 서버사이드 렌더링 딥 다이브(SSR Deep Dive for React Developers) 본 게시물은 공부를 위해 아래 게시물을 손수 번역하며 작성한 게시물입니다.일부 오역, 의역이 있을 수 있습니다.https://www.developerway.com/posts/ssr-deep-dive-for-react-developers SSR Deep Dive for React DevelopersExplore step-by-step how Server-Side Rendering (SSR), pre-rendering, hydration, and Static Site Generation (SSG) work in React, their costs, performance impact, benefits, and trade-offs.www.developerway.com ※ SSR, 프리-렌더링, 하이드레이션, 그리.. 더보기

티스토리툴바