-
멀티플레이 게임 - < 8 > TOP NEW
-
멀티플레이 게임 - < 7 > TOP NEW
-
멀티플레이 게임 - < 6 > TOP NEW
-
컴퓨터 구조 - < CPU > TOP NEW
-
서버 프로그래밍 - < 보안 > TOP NEW
-
멀티플레이 게임 - < 5 > TOP NEW
유니티 클라이언트 연동 클라이언트 ProtoType 서버측 코드를 구성하며 클라이언트와 통일된 HANDLER_ID 및 PACKET_TYPE 을 맞춰 주었다! 서버 응답 구조 변경 원래 서버에서 주는 Response 의 경우 Packet 형태는 Proto Message 를 이용하지만, 안에 들어가는 Payload(data) 는 JSON 형태를 사용해 클라이언트에서 파싱해주고 있다! 사실 동작 자체는 문제가 없지만.. ProtoBuffer 구조를 사용하다 JSON 형태를 쓰는게 부자연스러워 보여 수정해주려 한다! 기존 서... Read More
-
멀티플레이 게임 - < 4 > TOP NEW
-
이론 - < 역, 삼각함수 > TOP NEW
-
멀티플레이 게임 - < 3 > TOP NEW
-
멀티플레이 게임 - < 2 > TOP NEW
-
멀티플레이 게임 - < 1 > TOP NEW
NET을 이용한 서버 기존에 웹 서버를 구성하려면 node.js 위에 express 와 socket.io 등 여러 라이브러리를 사용하여야 했다! 이번엔 node.js에 기본 포함된 net 을 이용해 서버 통신을 직접 구현하는 프로젝트이다! 서버<>클라이언트 net을 이용해 socket 통신을 구현해준다! // 서버 import net from 'net'; const server = net.createServer((socket)=> { // socket.io 의 emit과 같은 기능! 클라이언트에게 송신 socket.write() ... Read More
-
알고리즘 - < 정렬/재귀 > TOP NEW
알고리즘 퀵 정렬 분할 후 정복(Divide and Conquer) 방식으로 데이터를 나눈 후 정렬하며 정리하는 방식 피벗(Pivot) 이라는 기준점을 정하여 왼쪽과 오른쪽으로 그룹을 나눈다. ( 피벗보다 작은 값을 왼쪽 그룹, 큰 값을 오른쪽 그룹 ) 왼쪽 끝과 오른쪽 끝에서부터 피벗과 비교를 시작하며 중앙으로 향한다 각 끝에서 시작한 윈도우들은 피벗과 비교해 그룹에 맞지 않는 값을 발견하면 멈춘다 두 윈도우가 맞지않는 값을 찾았다면 교환을 실시한다 이러한 과정을 재귀(Recursive)과정을 통해 정렬을 마무리... Read More
-
서버 프로그래밍 - <가용성> TOP NEW
-
웹소켓을 이용한 타워디펜스 - 회고록 TOP NEW
-
알고리즘 - < 탐색/검색 > TOP NEW
-
웹소켓을 이용한 타워디펜스 - <6> TOP NEW
프로젝트 병합 현재 프로젝트에 파일이 많아 병합하는 과정에서 오류가 자주 뜬다 UserInterFace 연결 클라이언트 game.js에서 유저의 점수, 골드를 내부에서 관리하였는데, 이를 사용자에게 보여주기위해 새로운 userInterface.model 을 만들면서 get/set 오류가 있었다 콘솔 로그를 보며 관련 코드들을 함수를 import하여 수정하는 것으로 해결하였다 /* 이전 */ // 점수 바꾸기 if(Object.keys(Monsters.getInstance().getInfo()).length !== 0){ score = Monsters.getIns... Read More
-
서버 프로그래밍 - <DB 최적화+> TOP NEW
샤딩(Sharding) 데이터베이스를 물리적으로 쪼개는 기술 동시 접속자( CCU: Concurrent connected User )를 늘릴 수 있으며 물리적 한계의 안정성을 어느정도 보장해줄 수 있음 ( DB 중 하나가 망가지거나 없어져도 시스템은 작동할 수 있음 ) 데이터를 여러 샤드(쪼개진 DB)에 분산시켜 병렬적 처리가 가능해 성능이 향상됨 관리 샤딩된 DB들을 균등하게 사용할 수 있도록 설계해야하며, 샤드의 수는 가변적일 수 있음 단점 분산 트랜잭션 분산된 데이터 베이스는 분산 트랜잭션을 수행함 ( 이 때 트랜잭션... Read More
-
웹소켓을 이용한 타워디펜스 - <5> TOP NEW
-
OSI 7계층 - <4> TOP NEW
-
웹소켓을 이용한 타워디펜스 - <4> TOP NEW
대기 방 구현 어제 마지막 회의로 방에 들어가면 대기하는 공간을 구현하기로 하였다 클라이언트 디자인 부트 스트랩을 이용해 대략적으로 구현하였다 기능 결합 기존 방 생성 시 게임이 시작되게 설정하였는데 이를, 서버에 요청하여 대기방으로 이동하도록 변경한다 // socket.js < 통신을 관리하는 파일 > socket.on("response", (data) => { console.log(data) if (data?.status === "fail") return alert(data.message) // 방 생성 핸들러 인식 시 if... Read More
-
웹소켓을 이용한 타워디펜스 - <3> TOP NEW
-
서버 프로그래밍 - <DB 최적화> TOP NEW
Connection Pool 이전에 배웠던 Thread Pool 처럼 데이터 베이스와의 연결(Connection)에도 Pool을 만들어 효율적으로 재활용 하는 기술을 말한다. max_connections max_connections 란 생성가능한 새로운 연결(Connection) 수를 의미하며 이로인해 연결들을 효율적으로 관리를 하지 않으면 문제가 생길 수 있다. max_connections를 넘기 시작하면 아무도 데이터베이스에 접근을 할 수 없게 될 수 있다. max_connections는 시스템이 실제로 핸들링 가능할 수 있는 설정 값으로 세팅을 해... Read More
-
웹소켓을 이용한 타워디펜스 - <2> TOP NEW
-
서버 프로그래밍 - 네트워크 최적화 TOP NEW
-
웹소켓을 이용한 타워디펜스 - <1> TOP NEW
-
OSI 7계층 - <3> TOP NEW
전송 계층 PDU(Protocol Data Unit/계층의 전송 단위) 프로토콜에 따라 (TCP)Segment 또는 (UDP)Packet(Datagram) 네트워크에서 송신지와 수신지 간의 응용 프로그램 간 통신 서비스(논리적 통신)를 제공함 그럼 네트워크 계층과 다른게 뭐에요? 네트워크 계층은 기기(호스트) 간 연결 이라면, 전송 계층은 기기 내의 프로그램 작업(프로세스) 간의 연결 입니다 (집을 찾는 것과 집 주인을 찾는 게 다른 느낌인 거죠) 포트/포트 번호를 사용하여 여러 네트워크 서비스를 동시에 지원할 수 있음 ( IP Ad... Read More
-
웹소켓을 이용한 웹게임 - <7> TOP NEW
기능 추가 랭킹 시스템 (최고점수 기록) 현재 클라이언트에서는 최고점수를 local.storage에 저장해 불러오는 형식으로 구현이 되어있다 이를 서버에서 최고점수를 관리해 불러오도록 수정할 예정이다. (대신 uuid를 local.storage에 저장해 정보를 가져오자) 서버의 최고 점수 기록 서버에서 유저마다 최고 점수들을 기록하기 위해 user.model에 함수를 추가 해준다. // 최고점수 변경 함수 export const setHighSore = (uuid, highScore) => { const userIdx = users.findInde... Read More
-
웹소켓을 이용한 웹게임 - <6> TOP NEW
Back-End(Node.js) Back-End 생성 서버를 구축하고 websocket을 사용하기 위해 express, socket.io 를 yarn을 통해 프로젝트에 설치해준다! # yarn 초기화 yarn init -y # express, socket.io 설치 yarn add express, socket.io 추가로 유저 아이디를 관리하기 위해 uuid Package도 설치해준다! yarn add uuid init folder socket을 생성하고 express로 연 서버와 연결하기 위해 socket.js를 생성해준다! import { Server as SocketI... Read More
-
웹소켓을 이용한 웹게임 - <5> TOP NEW
Front-End 개발 맵과 카메라 고정 뱀파이어 서바이벌처럼 특정 맵의 크기를 정해주고, 사용자는 가운데에 플레이어가 고정된 화면을 보아야 한다! 화면 고정 player를 중심으로 화면을 고정시키기 위해 플레이어가 이동할 때 화면도 같이 이동하는 것처럼 그리려고 한다! 이를 위해 ctx.translate(x,y)를 사용해본다! (translate를 선언한 후 그려지는 이미지들은 x,y 값만큼 이동한다음 그려지게 된다) class Map { constructor(ctx, width, height, scaleRatio) { this.ctx ... Read More
-
웹소켓을 이용한 웹게임 - <4> TOP NEW
-
웹소켓을 이용한 웹게임 - <3> TOP NEW
Front-End 개발 Back-End 부분은 기존의 자료들을 이용할 예정이기에, Front-End 부분을 먼저 구현하기로 하였다 (Back-End 는 스켈레톤 코드가 있지만 Front-End는 없으니까..) 일단 AI를 통해 스켈레톤 코드를 구성하고, 이를 분석해 가며 원하는 기능들을 추가할 예정이다! Player와 Monster Canvas 일단 플레이어와 적을 그려주기 위해 html의 canvas로 활동영역을 구현해준다. <head> <!-- 브라우저의 최신 표준을 준수하여 렌더링하도록 강제 --> <meta http-equiv="X-UA-Compatible... Read More
-
OSI 7계층 - <2> TOP NEW
Network 계층 PDU(Protocol Data Unit/계층의 전송 단위) : Packet(Datagram) Data의 전송과 이를 위한 길찾기를 담당하며 아래와 같은 기능들을 통해 Data가 효율적으로 전송되도록 함 핵심 기능 Address 지정 네트워크에 연결된 각 장치에 고유한 IP 주소를 할당하여 Packet이 올바른 목적지로 전송되도록 해주는 기능 Routing Router를 사용해 Packet의 경로를 결정하는 기능으로 Routing Protocol을 통해 네트워크의 상태를 파악하고, 최적의 경로를 계산하는 기능 Data 조각화(Pa... Read More
-
웹소켓을 이용한 웹게임 - <2> TOP NEW
-
OSI 7계층 - <1> TOP NEW
OSI 7계층 OSI(Open System Interconnection model)는 네트워크 통신 방법을 개념적으로 설명한 국제 표준 모델이다. OSI 7계층 덕분에 통신 주체(시스템/언어/기기)가 달라져도 서로 통신이 가능한 것 이었다! OSI는 각 계층마다 자신의 역할을 마치고 아래와 같은 작업을 수행하게 된다. OSI 계층 중 1~4 계층을 하위 계층, 5~7 계층을 상위 계층이라 칭한다. 하위 계층(Lower layers)은 Network 상에서 Data 전송 및 경로 설정 초점이 맞춰져 있다. 상위 계층(Upper ... Read More
-
Transaction TOP NEW
Transaction Data Base 관점에서의 Transaction이란 하나의 작업으로 취급되는 묶여진 모든 작업을 뜻하며, Transaction은 통칭 ACID 이라는 4가지 특징을 가진다! 원자성(Atomicity) 트랜잭션 내부에 있는 작업들은 모두가 하나인 것 처럼 취급이 된다! 작업들이 전부 성공하거나, 하나라도 실패하면 모두가 실패하는 연대책임을 지게 된다! => 이러한 특성 덕분에 오류 상황에서의 데이터 손실/손상이 방지된다! 일관성(Consistency) 트랜잭션의 각 작업들에 의해 변경될 테이블들의 데이터들은 모두 테이블의 제약조건을 만족해야 한다! 다시말해, 테이블의 규칙을 만... Read More
-
웹소켓을 이용한 웹게임 - <1> TOP NEW
Node.js 게임Server개발 강의 게임 개발의 흐름 기획 단계 PD(Project Director)가 게임 프로젝트의 기획안을 문서화하여 AD(Art Director) / TD(Technical Director) 에게 전달한다. 기획안을 보고 AD는 컨셉아트를, TD는 프로토타입 게임을 여러 시안으로 제안한다. 기획안과 프로토타입의 가능성을 보고 폐기 또는 새로운 프로젝트로 승격시킨다. 개발 단계 백엔드(Server) 개발 입장에선 인프라 구성, 팀원 모집, Server 로직 개발 등을 진행하지만 전체적으로 업무강도가 강하지 않다. ... Read More
-
Blog - <1> TOP NEW
블로그 관리 현재 블로그를 작성할 때 보는 사람의 입장이 아닌, 그냥 되는대로 작성하는 것 같다는 지적을 받게 되었다. 그래서 작성 방식에 대한 개선점을 찾아보았다. 디버깅 접근성 개선 블로그에 글을 작성할 때, VScode의 마크다운 화면만 확인하기 때문에 블로그의 실제 페이지를 확인해가며 수정하기 어렵다! Github Page가 아닌 로컬에서 실시간 빌드 하는 방법을 찾아 화면을 확인하며 수정해보자! 로컬에서 Github Pages에서 쓰는 Jekyll(블로그 생성 프로그램)을 사용하기 위해 설치를 진행한다! 설치를 진행하기 위해 Ruby(... Read More
-
Petit-TFT-Project - <Feedback> TOP NEW
-
Petit-TFT-Project - <5> TOP NEW
-
Petit-TFT-Project - <4> TOP NEW
-
Petit-TFT-Project - <3> TOP NEW
쁘띠 TFT 프로젝트 유효성 평가 미들웨어 조정 기존에 agent를 찾는 변수로 agent_name(str)과 agent_key(int)를 사용했는데, 이를 통합하여 key만 사용하게 설계함 기존 팀편성 / 대표 챔피언 설정 api 수정 찾는 변수를 name에서 key로 변경 및 에러 메시지를 수정하였다. // 팀편성 API 내부 myAgent[i] = await prisma.myAgents.findFirst({ where: { agentKey: +formation[i], userKey: +key } }) //보유 챔피언 확인 ... Read More
-
Petit-TFT-Project - <2> TOP NEW
오늘의 Troubleshooting 쁘띠 TFT 프로젝트 Insomnia 생성 및 공유 API 명세서를 작성한 김에 Insomnia를 이용한 입력들을 일괄작성하여 팀원분들께 배포하면 좋을 것 같아 시작했다 작성한 http request를 Collection채로 보내기! (Json파일) 보낸 파일에서 필요한 세팅을 알려드리고 작업을 마쳤다 API 명세서 수정 기존에 response[Error] 를 통해 경우에 따른 에러 메시지를 정리 해두었는데.. => 이중 중복되는 에러 부분들은 중복표시를 하여 API 구현 때 무시하도록 표시를 해주었다! (유효성 평가와 인증... Read More
-
Petit-TFT-Project - <1> TOP NEW
오늘의 Troubleshooting 쁘띠 TFT 프로젝트 기존의 형식인 풋살 온라인 프로젝트의 컨셉을 바꾸어 쁘띠 TFT(전락적 팀 전투)로 구현하기로 하였다! 컨셉을 정한 뒤 구현할 API를 회의를 통해 정하였고 이를 구체화하여 명세서를 작성하는 일을 하였다! 추가로 협업을 위해 Github의 repository를 연결하여 branch 명을 정해주고 각자 역할을 분담하였다 API들을 기능과 관련있는 경우 파일을 통합하기로 결정했다. (기능과 관련되있는 경우 숫자로 묶고, 전체와 관련된 경우 체리로 표시하였다.) 개선점 분석 알고리즘 ... Read More
-
Item-Simulator - <5> TOP NEW
-
Item-Simulator - <4> TOP NEW
-
Item-Simulator - <3> TOP NEW
오늘의 Troubleshooting 아이템 시뮬레이터 과제 아이템 판매 기능 구현 구매 기능을 구현했기에 판매는 그렇게 어렵지 않았다. 인벤토리에서 아이템이 수량만큼 존재하는지 확인해주는 기능을 추가로 구현하였다. // 판매 할 아이템이 없을 시 const { charId } = req.params; const perchase = req.body; const item = await prisma.itemTable.findFirst({ where: { itemCode: +perchase.item_code } }) const items = await prisma.invent... Read More
-
Item-Simulator - <2> TOP NEW
오늘의 Troubleshooting 아이템 시뮬레이터 과제 API 명세서 작성 조장님이 API 명세서를 작성하며 과제를 진행하는 것이 설명/관리 하기 쉬울 것 같다하셔서 명세서를 작성하게 되었다! API 명세서 명세서를 작성하는 동안 http 응답코드에 대해 알아보게 되었다. 나무위키 - HTTP/응답코드 아이템 생성 API 아이템 생성 시, 필요한 인수를 받지 못하면 그에 관한 에러를 반환해주게 설계 //입력값 확인 const {item_code, item_name, item_stat, item_price} = req.body; //이름 유효성 검사 확인 if (!item_n... Read More
-
Item-Simulator - <1> TOP NEW
오늘의 삽질 아이템 시뮬레이터 과제 오늘은 팀이 새롭게 편성되어 아이스브레이킹 시간을 지니며 팀 노션을 작성하였다. 추가로 조장님이 Github의 Pull request를 응용하여 코드리뷰 하는 방법을 설명해 주셨다! => branch를 분리한 후, 회의시간에 Pull request를 통해 dev branch에 병합 시, 변경사항을 한눈에 보기 쉽고 comments를 각자 달 수 있기에 원활하게 코드리뷰를 진행할 수 있다! 개선점 분석 저녁 식사 이후 회의가 끝나면, 과제 진행보단 자료정리를 하며 계획을 세우는 방향으로 진행해야겠다. 지식창고... Read More
-
Node.js 숙련 - <3> TOP NEW
-
Node.js 숙련 - <2> TOP NEW
지식창고 Node.js 숙련주차 강의 ORM / Prisma Prisma는 ORM(Object Relational Mapping)으로써, Javascript 객체(Object)와 데이터베이스의 관계(Relation)을 연결(Mapping) 해주는 도구라고 한다.. 한줄 요약 : ORM은 Javascript하구 RDB를 이어주는 친구 만약 ORM 이란 친구들이 나오지 않았더라면? 아마도 SQL에 명령문을 직접적으로 입력해줬을 것이다.. 그렇게 사용했던 것이 Raw Query라는데? (흠.. 한 번쯤은 사용해 볼 수도..?) 그래서 준비한 Raw Query 실전 압축 사용법! ... Read More
-
Node.js 숙련 - <1> TOP NEW
지식창고 Node.js 숙련주차 강의 관계형 데이터 베이스(Relational DataBase) 데이터의 정규화와 무결성을 보장하면서 정형화된 데이터를 효과적으로 관리할 수 있는 데이터베이스 => 데이터를 지정한 형식에 맞춰주고, 절대 틀리지 않게 만들어 주는 데이터 베이스 관계형 데이터베이스(RDB, Relational DataBase)는 각 데이터를 ‘테이블’이라는 표형태의 구조에 저장한다 여기서, 각 ‘테이블’은 여러 정보를 저장하며,(=DB) ‘테이블’간에 연관 관계를 설정하여,(=관계형) 여러 테이블에 분산된 데이터를 서로 연결하여 관리할 수 있습니다. SQL(Structured Q... Read More
-
Git CodeConvention TOP NEW
-
RogueLike-TextGame - <5> TOP NEW
-
RogueLike-TextGame - <4> TOP NEW
-
RogueLike-TextGame - <3> TOP NEW
오늘의 삽질 RogueLike TextGame 플레이어 행동(버프) 만들기 player.buff 메서드 구현! 적이 방어하는 경우, 힐을 할 수도있지만.. 좀 더 공격적으로 할 수 있는 선택지를 주고 싶었다! //복습하기 buff(logs) { this.buff = Math.round(Math.random() * 10) / 10 logs.push(chalk.greenBright(`문제를 풀기 전, 배웠던 내용을 복습합니다..`)); logs.push(chalk.greenBright(`다음 문제 풀기의 Page 수 ${this.... Read More
-
RogueLike-TextGame - <2> TOP NEW
-
RogueLike-TextGame - <1> TOP NEW
오늘의 삽질 RogueLike TextGame 애니메이션 효과 넣기 텍스트 게임으로써 한 번에 모든 문장이 나오는게 몰입감이 떨어지는 느낌이라 약간의 애니메이션 효과가 있으면 좋겠다 생각을 했다. 스켈레톤 코드를 뜯어보았을 때, logs[] 에 값을 저장하고 while을 돌려 console.log()를 쓰는 것을 발견헀다. while(player.hp > 0) { console.clear(); displayStatus(stage, player, monster); logs.forEach((log) => console.log(log)); ... Read More
-
프로그래밍 심화 주차 - <5> TOP NEW
-
프로그래밍 심화 주차 - <4> TOP NEW
한줄평 시간이 애매하게 남거나 숨돌릴 겸 못 풀었던 알고리즘/SQL 문제들을 푸는 것도 나쁘지 않을 것 같다! 오늘의 삽질 최대 공약수 구현 최대 공약수 알고리즘을 구현하는데.. 최대 공약수의 정의를 헷갈려 약수가 “소수”인 것처럼 생각해 버렸다. 그렇게 소수를 찾아서 최대 공”소수”를 찾는 알고리즘을 만들었다. 그 후 테스트에서 성공률이 50%가 나오길래 뭐가 문제인지하고 검색을 하게 되었다.. => 수정본은 맨 하단에 (약수가 소수가 아니란걸 알아버린 나의 세상은 무너졌다..) function solution(n, m) { ... Read More
-
프로그래밍 심화 주차 - <3> TOP NEW
한줄평 며칠간 강의만 시청하다보니 아무리 실습을 따라해도 조금 지루한 감이 있다. 내일부터는 강의를 다보고 프로젝트(과제)를 시작할 수 있을꺼 같다 오늘의 삽질 강의보다가 중간에 졸아서 영상을 다시 보게되었다.. 사실 어제부터 강의를 보기 시작했는데 요약하기에 너무 내용이 많고 중요해서 정리하는데 시간이 좀 걸렸다.. 개선점 분석 졸리면 10분 정도 휴식시간을 갖고 다시 시작하자 지식창고 오늘은 실습(예제)보단 이론 위주로 작성할 예정이다. [Node.js 입문] 강의 웹과 HTTP의 동작 방식 사용자가 웹 브라우저의 주소... Read More
-
프로그래밍 심화 주차 - <2> TOP NEW
오늘의 삽질 오늘은 강의 시청 및 과제 제출이 주를 이뤄 실습간 큰 문제가 없었다. 개선점 분석 위와 동일하게 능동적인 작업이 없었다. 지식창고 [JS 문법 종합반] 강의 콜백함수(Callback function) ‘다른 코드’의 인자로 넘겨주는 함수로, 다른 코드가 끝난 뒤에 실행되는 함수를 말한다! => 호출하는 ‘다른 코드’가 콜백함수의 제어권을 가지고 있음 콜백함수를 호출한 ‘다른 코드’ 만이 콜백함수의 매개변수(인자)를 제어할 권리를 가짐 콜백함수의 this는 기본적으로 ‘함수’ 이기 때문에 전역 객체가 반환되지만, 예외... Read More
-
프로그래밍 심화 주차 - <1> TOP NEW
오늘의 삽질 1. Node.js 설치 [node.js 문법 종합반] 강의를 보며 안내받은 대로 Node.js를 터미널에 명령어를 입력하는 방식으로 설치를 해보았다. => 왠지모르게 node 명령어를 쳐도 없는 명령어라 뜨길래 검색해봄 시스템 환경변수 편집 설정 환경변수에서 시스템 변수 Path에 nodejs가 연결되어있지 않으면 그렇다하여 연결을 해보려 했으나.. 설치한 경로를 터미널 명령어로 통해 설치했기에 몰랐음 => 바로 파일형으로 설치함 (파일형으로 하니까 환경변수 알아서 설정해줌) npm -v 명령어 오류 ... Read More
-
멤퍼 소개 페이지 프로젝트 - <KPT> TOP NEW
-
멤퍼 소개 페이지 프로젝트 - <5> TOP NEW
WIL(Weekly I Learned) Facts 처음으로 팀 프로젝트를 해보았다. GitHub를 사용해서 서로의 코드를 공유 및 병합해가며 프로젝트를 진행했다. 일단 각자 회의를 통해 정해진 구역을 구현해보고 코드들을 병합하기로 했다. 병합한 코드들을 로직으로 묶어서 GitHub Page의 Jekyll로 빌드하면서 문제점을 발견했다. 각각의 구역들이 스타일을 침범해서 조정이 필요하고, 피드백으로 css(Style) 파일과 js(Script) 파일을 분리하여 관리해야 한다는 것을 알게 되었다. 그렇게 주어진 문제들을 직... Read More
-
멤퍼 소개 페이지 프로젝트 - <4> TOP NEW
오늘의 공부 1. 프로젝트 분리 및 연결 오늘 아침 결과물들을 어떻게 이어붙여서 디렉토리 구조를 분리/관리 할까에 대해 고민을 하고있었다.. 그 때 팀원분들 중 한 분이 디렉토리 구조와 스타일을 정리해서 와주셨다! (협업 유경험자 감사합니다 ㅠㅠ) 만세! 빨리 뜯어서 적용 시켜야지 뜬금 디렉토리 연결용 함수 정리 HTML <!-- 디렉토리 구조 내의 css파일을 연결--> <link rel="stylesheet" href="./css/style.css" /> <!-- 디렉토리 구조 내의 js파일을 연결--> <scri... Read More
-
멤퍼 소개 페이지 프로젝트 - <3> TOP NEW
오늘의 공부 1. 프로젝트 방명록 수정하기 문제점 확인 기존의 댓글을 입력하면 객체를 만들어 바로 삽입하는 방식의 경우, 사이트를 새로고침할 경우 데이터가 날아간다! 이러한 오류를 고치기 위해 API를 연동하기로 하였다! (팀 프로젝트이기에 팀원분의 FireBase 에 연동하게 되었다.) 실전 함수 데이터 불러오고 사용하기 // Firebase 서비스 패키지 가져오기! import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app js"; import { get... Read More
-
멤퍼 소개 페이지 프로젝트 - <2> TOP NEW
오늘의 공부 1. Git / GitHub 를 이용한 협업 강의 Git 이란 협업 간 버전을 관리하기 위한 “도구” 이다. GitHub 는 Git을 이용해 코드들을 저장해주는 “장소” 이다. GitHub를 사용할 때 중요한 개념이 3가지 정도 있다. Clone / Fetch 저장 공간인 ‘Repository’를 생성하면 이 공간은 GitHub라는 서버에 저장되어 있기에, 이를 내 컴퓨터 속에 옮기는 작업이 바로 Clone(복제) 이다. 복제된 Clone을 수정하다 원본(Github에 있는)을 다시 받아오는 역할이 Fetch(가져오다) 이다. Branch 팀... Read More
-
멤퍼 소개 페이지 프로젝트 - <1> TOP NEW
-
사전캠프 15일차 TOP NEW
TIL(Today I Learned) - 오늘의 공부 현재 블로그 사이트 스타일 정리하기 Jekyll 를 기초로 한 블로그 이기 때문에 관련 문서들을 읽으면서 블로그 스타일을 개선해 보았다. 날짜 페이지에서 년도별 정렬이 아닌 년도-월별 정렬로 바꾸었다. 날짜 / 태그 페이지에서 쓸데없이 작성일이 나오는 부분을 삭제 하였다. 기본 페이지에서 5개씩 나왔단 포스트들을 8개로 늘렸다. 왼쪽 사이드바의 이미지를 조금 더 올려 두었다. 파비콘을 설정해 보았다. => 이 글은 11월에 진행한 블로그 테마를 바꾸기 전에 있던... Read More
-
사전캠프 14일차 TOP NEW
TIL(Today I Learned) - 오늘의 공부 Javascrip 응용하기 도전과제! 과제 04 까지 완료 Javascript와 css를 이용하여(+부트스트랩) 할 일을 적어 추가하고 체크/삭제 가 되는 사이트를 만들어 보았다. TIL(Today I Learned) - 학습 과정 중 특이사항 할 일을 적어 [추가] 버튼을 누르면 입력되어있던 값이 초기화 되며 하단에 추가되게 만들었다 (이 과정에서 배운 구문들) // todolist 라는 값에 #id값으로 찾은 객체를 선택하여 부여한다는 의미이다. const t... Read More
-
사전캠프 13일차 TOP NEW
-
사전캠프 12일차 TOP NEW
-
사전캠프 11일차 TOP NEW
-
사전캠프 10일차 TOP NEW
TIL(Today I Learned) - 오늘의 공부 [왕초보] 웹개발 종합반 4주차를 수강했다 FireBase의 정의 및 세팅 방법! // Firebase SDK 라이브러리 가져오기 import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js"; import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js"; import { collection, addDoc } from "https://www.gs... Read More
-
사전캠프 9일차 TOP NEW
TIL(Today I Learned) - 오늘의 공부 [왕초보] 웹개발 종합반 3주차 3-12까지 수강을 하였다 클라이언트 - 서버가 어떻게 작용하는지 알게되는 시간이었다. 클라이언트(웹페이지) -> 서버(API) : GET 요청으로 정보를 가져온다 Fetch(가져오기)에 대한 기본 구조에 대해서 이해하게 되었다. fetch("여기에 URL을 입력") // 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET! .then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다 .then(data => { ... Read More
-
사전캠프 8일차 TOP NEW
TIL(Today I Learned) - 오늘의 공부 팀 공부 아티클 스터디 SQL의 종류와 특징에 대해 알아보는 시간을 가졌다. 엑셀보다 쉽고 빠른 SQL 5주차까지 완강 및 과제 제출을 하였다 4주차 내용 SubQuery 와 JOIN 에 대한 사용 방법을 배웠다. /* 서브 쿼리는 쿼리의 내부 속 쿼리를 뜻하며, 이를 이용하여 연산을 분배하여 식을 간략화 할 수 있다. */ SELECT column1 , special_column FROM ( SELECT column1 , column2 special_column FROM table1... Read More
-
사전캠프 7일차 TOP NEW
이번주도 열심히 해따 TIL(Today I Learned) - 오늘의 공부 팀 공부 아티클 스터디 JavaScript와 ECMAScript는 무슨 차이점이 있을까?에 대해 알아보는 시간을 가졌다. [왕초보] 웹개발 종합반 3주차 3-5까지 수강 JQuery를 이용하여 사이트에 기능을 넣는 방법에 대해 배웠다. Toggle 함수를 이용하여 일정 영역 및 구조물을 안보이게 조정했다가 보이게 할 수 있다. input 값들을 읽어 변수에 저장 시키는 방법과 이를 이용하여 새로운 구조물을 만드는 것을 실습해 보았다. $('#id').toggle(); let 변수이름 = $('#id').va... Read More
-
사전캠프 6일차 TOP NEW
-
사전캠프 5일차 TOP NEW
-
사전캠프 4일차 TOP NEW
열심히 하고 있다! TIL(Today I Learned) - 오늘의 공부 팀과 같이 아티클 스터디를 통하여 소프트웨어 학습 태도에 대해 알아보는 시간을 가졌다. 왕초보웹개발 종합반 2주차 2-4 까지 강의를 따라하며 ‘스파르타플릭스’ 라는 사이트를 구성해 보았다. 기존에 배웠던 구문들 및 부트스트랩 사이트를 이용하여 사이트를 꾸몄다. 다음 강의부터는 Javascript에 대해 배울 예정이다. 엑셀보다 쉽고 빠른 SQL 1-5까지 시청하기 SQL 문법 공부 걷기반을 통해 이미 배운 내용이여서 복습하는 느낌으로 시청하였다.... Read More
-
SQL 과제 제출 TOP NEW
-
사전캠프 3일차 TOP NEW
주마다 WIL을 쓴다는 걸 알게 되었다. TIL(Today I Learned) - 요약 팀과 같이 아티클 스터디를 통하여 게임서버의 트랙에서 자바스크립트를 학습하는 이유에 대해 알아보는 시간을 가졌다. SQL 문법 과제들을 풀면서 기초를 다지는 시간을 가졌다. 현재 문제 28에서 ORDER BY COUNT 사용에 오류가 뜨는 것에 대해 찾아보는 중이다. 웹개발 강의를 조금씩 보면서 GITHUB.IO 블로그에 활용할 방법들을 찾아보는 중이다. (1주차 강의 시청 끝) TIL(Today I Learned) - 중간 과정 아티클 스터디 도중 ... Read More
-
사전캠프 2일차 TOP NEW
TIL(Today I Learned)을 오늘부터 작성하기 시작했다! TIL(Today I Learned) - 요약 팀과 같이 아티클 스터디를 통하여 게임서버의 역사에 대해 알아보는 시간을 가졌다. SQL 문법 과제들을 풀면서 기초를 다지는 시간을 가졌다. 웹개발 강의를 조금씩 보면서 언어에 대한 기초를 다시금 키웠다. TIL(Today I Learned) - 중간 과정 게임서버의 역사에 대해 조사할 때 최대한 큰 흐름으로 찾아보기 위해 영어로 검색을 해보았더니 여러 정보가 나왔엇다. SQL 문법 과제들에 정답을 추론하... Read More
-
사전캠프 1일차 TOP NEW
처음으로 블로그를 만들어보고 깃허브를 만져본 날이다. Q1. 내가 게임서버 트랙에 참여한 계기는 무엇인가요? A. 고등학교 2학년 때부터 게임 개발에 꿈을 가지고 혼자 공부를 하다가 좋은 기회를 발견하여 참여하게 되었습니다. Q2. 내가 이해한 개발자(혹은 생각했던 직무)는 어떤 역할을 하는 사람인가요? A. 상상한 기술(꿈)들을 직접 구현하면서 다듬어가는 사람인 것 같습니다. Q3. 서버 개발 혹은 게임 개발 관련 경험해보셨나요? 해보셨다면 어떤 경험을 하셨는지를 작성해주시고, 아니라면 찾아본 것을 작성해주세요 A. 강의를 보고 따라해본적은 있으나 직접 개발을 해본 경험은 없었습니다. Udemy 강의를... Read More
-
Jekyll에 어서오세요! TOP NEW
이 게시물은 _posts. 디렉토리에서 찾을 수 있습니다 계속해서 편집하고 사이트를 다시 빌드하여 변경 사항을 확인해보세요! 여러 가지 방법으로 사이트를 다시 빌드할 수 있지만 가장 일반적인 방법은 jekyll serve.를 실행하는 것입니다! 이렇게 하면 웹 서버가 시작되고 파일이 업데이트되면 사이트가 자동으로 다시 생성됩니다. 새로운 게시물을 추가하려면, YYYY-MM-DD-name-of-post.ext 규칙을 따르고 _posts 디렉토리 에 파일을 추가하기만 하기만 하면 됩니다. 이 게시물의 소스를 살펴보면 어떻게 작동하는지 알 수 있습니다. 섹션 1 Jekyll 은 코드 스니펫에 대한 강료크한 지원을... Read More
-
Markdown 예제1 TOP NEW
일반적으로 markdown 언어를 여기에 작성하면 Jekyll이 자동으로 멋진 웹페이지로 변환시켜줘요! markdown 공부에 5분정도는 투자하는 걸 매우 권장해요.. 일반 텍스트를 굵게/기울임/제목/표 등으로 변환하는 방법을 알려줘요! 이 문서는 Markdown 으로 무엇을 할 수 있는지 보여드립니다! Markdown 예시 참고: 이 페이지를 자유롭게 쓰세요. 이 노트는 자동으로 저장되지 않습니다! 기본 서식 문단은 다음과 같이 쓸 수 있습니다. 문단은 마크다운의 기본 블록입니다. 문단은 다른 것이 될 이유가 없을 때 텍스트가 바뀌는 것입니다. 문단은 빈 줄로 구분해야 합니다. 기본서식의 기울임체 와 ... Read More