parkcw0325 님의 블로그

기본적인 API들은 모두 구성되었고 이제 프론트를 만들기 위한 기초를 다지는 과정이다. 먼저 index.html파일을 만들어서 ! 를 사용하여 기본 세팅을 진행하고 pico를 사용하기 위하여 pico와도 연결하였다.pico란 html을 만들때 도움을 주는 css를 지원하는 패키지이다기본적인 빠른 상용법으로는 npm을 통하여 다운받거나 cdn을 연결하여 사용할 수 있다.예를 들어이런식으로 pico을 사용하면 아래 코드만 입력해도 저런 자연스럽게 입력박스가 나타나게 된다 !일단 프론트는 해본 적도 많이 없고 정보가 없는 상태라 기본적으로 이런 식으로 사용할거다! 라는 의미로 간단하게 완성한 초안이다 여기에 여러가지 기능들과 테마들을 더 추가해볼 생각이다.  그리고 여러가지 html을 서로 어떤 방식으로 연결..

오늘은 뉴스피드 과제를 진행하면서 겪은 트러블 슈팅이다. 댓글 생성 API부분에서 오류를 겪었었는데,인섬니아에서 생성 API를 실행하면 무한로딩이 걸리는 상황이 발생하였다. 팀원들과 해결하기 위하여 다양한 방법들을 시도해 보았다.예를 들어 checkLike함수의 위치를 변동한다던가, 변수로 받는 값을 조정한다는 등다양한 시도를 해보았지만, 1시간 동안 원인을 찾을 수 없어서 한참을 헤메다 결국 튜터님께 도움을 구하였다. 튜터님께 조언을 구하고 나온 결과는 너무나도 기초적인 실수였다. 이 부분에 if절 안에서 retrun 값을 받아서 res로 전달하지만if절 조건에 맞지 않을 경우 return 되는 코드를 넣지 않았기 때문에 api작동 시 결과값을 반환하지 못하여 계속 로딩이 걸리는 것이었다.... 결과를..

본격적으로 api만들기에 진입하였다. 오늘 내가 맡은 부분은 프로필 조회 api와 프로필 수정 api이다. 먼저 프로필 조회 api이다 주석으로 상세하게 설명을 해두었다. 먼저 인증미들웨어를 거쳐 로그인이 완료된 유저들 만이 본인의 프로필을 확인할 수 있으며, 인증미들웨어에서 설정한 id값을 받아와서 userId 값으로 사용하였다. 중간에 고민했던 부분이 있는데  이 부분에서 db에 저장된 password를 bcrypt를 사용하여 자체적으로 ****으로 변환하여 가져오게 할 수 있나? 고민을 했는데 팀원분께서 있긴 할텐데 bcrypt는 불가능하다고 알려주셔서 다음에 찾기로 하고 지금은 시간과의 싸움이기에 일단 하드코딩으로 넘어갔다.  다음은 프로필 수정 api이다 프로필 수정은 프로필 조회와 초반은 동일..

웹서버 반에서 새롭게 시작하는 프로젝트이다.  뉴스 피드란? 내 게시물을 포함한 모든 게시물을 볼 수 있는 공간즉 블로그가 될 수도 있고, 인스타, 페이스북 같은 SNS가 될 수도 있다. 저희가 구상한 뉴스 피드는 게임과 관련된 소식들을 플랫폼 별로 확인할 수 있는 뉴스 피드 사이트를 구상하였다. 프로젝트 명 : 게임의 민족(게임소식을 배달하는 의미)소개한 줄 정리 : 다양한 게임소식(모바일, PC, 콘솔)들을 전달하는 뉴스피드 구상한 와이어 프레임 처음으로 구상한 와이어 프레임에는 모바일, PC, 콘솔로 탭을 나누어서 해당 플랫폼에 관한 새로운 뉴스들이나 본인의 생각 등을 게시글로 작성할 수 있게 구성하였다. 또 각 게시글에 댓글을 추가로 남길수도 있고, 개인 프로필에 들어가서 프로필 수정도 가능하다...

일단 OSI 7계층에 대하여 한번 복습! POINT 1.   OSI 7 계층이란?( Open Systems Interconnection Reference Model)의 약자로 컴퓨터 네트워크의 통신을 계층으로 나누어 설명한 것! 쉽게 풀어 설명하자면 네트워크에서 통신이 발생할 때 일어나는 모든 과정을 7단계로 분할한 것을 의미한다! POINT 2. 그렇다면 왜 개발자는 OSI7계층을 알아야 하는가? 왜 알아야 하는가? 에 대한 대답은 일단 네트워크 통신 과정을 왜 7계층으로 나누어야 했는지를 이해해야한다. 통신이 일어나는 과정을 단계별로 알 수 있고, 7 단계 중 특정한 곳에 이상이 생기게 되면 다른 단계와 독립적으로그 단계만 수정이 가능하기 때문이다!! 따라서 개발자들은 이러한 7 계층의 자세한 이해가..

웹소켓 게임 만들기 과제 중 겪었던 상황과 그 상황을 대처하기 위한 트러블슈팅 기록입니다. 기본적으로는 강의를 보면서 진행했던 과제라서 기본적인 베이스는 갖추어져 있었다. 강의만 들으면 나오는 공룡 점프 액션 게임 다들 한 번씩은 봤을 법한 그 게임이다. 이 기본적인 베이스에 넣어야하는 기능들이 과제이다 1. 시간에 따른 점수 획득 1-1 스테이지 구분 1-2. 스테이지에 따른 점수 획득 구분 2. 아이템 획득 2-1. 아이템 획득 시 점수 획득 2-2. 스테이지 별 아이템 생성 구분 2-3. 아아템 별 획득 점수 구분 등이 있다.  1. 어려움을 겪게 된 배경 스테이지 별로 아이템을 생성해야하는 과제에서 많은 어려움이 있었다. 어디를 먼저 건들어야 하는지 중요한 부분은 무엇인지 JSON파일로 가져온 i..

POINT 1.   웹소켓이란? 간단한 설명! **웹소켓(WebSocket)**은 클라이언트와 서버 간의 양방향 통신을 실시간으로 가능하게 하는 프로토콜이다.HTTP 요청 후 연결을 유지하며 데이터를 주고받는 방식으로, 기존의 요청-응답 방식보다 효율적이다.이를 통해 서버와 클라이언트는 지속적인 연결 상태에서 데이터 송수신이 가능하다. POINT 2.   이러한 웹소켓을 사용하는 이유는 뭘까? 웹소켓은 기존 HTTP 기반의 통신 방식보다 더 적은 오버헤드로 실시간 양방향 통신이 가능하다.이를 통해 아래와 같은 상황에서 유리하다: ---- 채팅 애플리케이션: 실시간으로 메시지를 주고받는 기능.---- 실시간 데이터 업데이트: 주식, 날씨, 스포츠 경기 스코어 등 빠르게 변하는 데이터를 처리.---- 게임 ..

POINT 1.   트랜잭션이란? 간단한 설명! **트랜잭션(Transaction)**은 데이터의 완전성을 보장하기 위한 개념으로, 작업을 전부 처리하거나 전부 실패하게 만들어 데이터의 일관성을 보장하는 기능이다이를 통해 사용자는 어플리케이션이 안전하게 실행되도록 구성할 수 있다. POINT 2.   이러한 트랜잭션을 사용하는 이유 트랜잭션을 통해 다양한 문제 상황(예: 은행 계좌이체, 영화 예매 시스템 등)에서 데이터의 일관성을 유지할 수 있다 예를 들어, A 계좌에서 금액을 차감하고 B 계좌로 금액을 추가하는 과정 중 하나라도 실패하면 작업 전 상태로 복구되게 된다. 만약 복구가 되지 않는다면 A 계좌에서 돈이 차감되었는데 B 계좌에 금액이 들어오지 않아 혼란을 야기할 수 있기 때문이다. POINT ..

일단 OSI 7계층에 대하여 한번 복습! POINT 1.   OSI 7 계층이란? ( Open Systems Interconnection Reference Model)의 약자로 컴퓨터 네트워크의 통신을 계층으로 나누어 설명한 것! 쉽게 풀어 설명하자면 네트워크에서 통신이 발생할 때 일어나는 모든 과정을 7단계로 분할한 것을 의미한다! POINT 2.  그렇다면 왜 개발자는 OSI7계층을 알아야 하는가? 왜 알아야 하는가? 에 대한 대답은 일단 네트워크 통신 과정을 왜 7계층으로 나누어야 했는지를 이해해야한다. 통신이 일어나는 과정을 단계별로 알 수 있고, 7 단계 중 특정한 곳에 이상이 생기게 되면 다른 단계와 독립적으로그 단계만 수정이 가능하기 때문이다!! 따라서 개발자들은 이러한 7 계층의 자세한 이..

일단 OSI 7계층에 대하여 한번 복습! POINT 1.   OSI 7 계층이란? ( Open Systems Interconnection Reference Model)의 약자로 컴퓨터 네트워크의 통신을 계층으로 나누어 설명한 것! 쉽게 풀어 설명하자면 네트워크에서 통신이 발생할 때 일어나는 모든 과정을 7단계로 분할한 것을 의미한다! POINT 2.  그렇다면 왜 개발자는 OSI7계층을 알아야 하는가? 왜 알아야 하는가? 에 대한 대답은 일단 네트워크 통신 과정을 왜 7계층으로 나누어야 했는지를 이해해야한다. 통신이 일어나는 과정을 단계별로 알 수 있고, 7 단계 중 특정한 곳에 이상이 생기게 되면 다른 단계와 독립적으로그 단계만 수정이 가능하기 때문이다!! 따라서 개발자들은 이러한 7 계층의 자세한 이..