parkcw0325 님의 블로그

이메일 인증 기능은 사실 기존에 다른 팀원분께서 맡아주셔서 훌륭하게 만들어 내주셨다nodemailer 패키지를 사용하여 실제로회원가입 진행시 메일을 발송하여 코드를 입력해야 최종 가입이 완료되는 로직인데,이번에 따로 복습하면서 다른 팀에도 알려주면서 학습한 내용들을 기록하려한다. 1. 패키지 설치일단 nodemailer패키지를 설치하여야 한다npm i nodemailer터미널에 npm을 사용하는 프로젝트라면 이러한 명령어로 다운 받을 수 있다.yarn을 사용하는 경우 yarn add nodemailer를 입력하면 된다! 2. 임포트로 패키지 사용하기nodemailer패키지를 다 다운 받았으면 본격적으로 사용할 수 있게 된다.일단 이번 팀프로젝트에서 nodemailer를 사용하는 router부분은 회원가입..

기존에는 HTML파일 안에서 script를 사용하여 관련된 js 기능들을 넣었는데튜터님과 상의 후에 js 파일을 따로 분리하게 되었다.대신 이런 식으로 사용할 js 파일의 경로를 입력해 주어야한다.해당 js 파일에는 기존에 사용하던 모달이나 관련된 내용을 profile.js 파일에 옮겼다.이 부분은 닉네임 변경 부분인데 api를 사용하여 credentials 부분을 포함하여 내가 가지고있는 쿠키를 참고 하는 부분이다. 참고하는 쿠키라서 저런식으로 가능하고 헤더를 사용하면보다 복잡해진다고 한다.이건 profile을 조회하는 건데 html이 나타남과 동시에 실행되어 화면에 표시되는  기능이다api를 사용하여 응답으로 받은 post 데이터를 가공하여 브라우저 화면에 띄우도록 구성되어 있다. 이 코드를 사용하여..

기본적인 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..

1.  IP란?**IP(Internet Protocol)**는 인터넷 통신 규약으로, 데이터를 수신하고 통신하는 방법을 규정한 표준입니다.     - 운영체제나 언어의 차이에도 불구하고, 통신 규약(프로토콜)을 설정하여 데이터 전송이 가능하도록 합니다.    - OSI 7 계층은 통신 프로토콜의 표준화를 위해 고안된 모델이지만, 오늘날에는 TCP/IP가 더 널리 사용됩니다. 2. IP 주소 체계IP 주소는 통신을 위해 전자기기를 식별하는 고유 주소입니다.IPv4: 32비트(약 43억 개의 주소 제공). 현재 주소 부족 문제로 인해 한계에 도달.IPv6: 128비트로 설계되어 사실상 무한에 가까운 주소 제공. 3. 서브넷 마스크란?서브넷 마스크는 IP 주소를 네트워크 부분과 호스트 부분으로 나누는 데 사용..

웹소켓을 활용하여 만드는 사이드뷰 점프 액션 게임 과제의12/17일 진행내용을 담은 TIL이다. 게임 스테이지 시스템 구현하기 1. 초기 문제 상황 아이템 획득 시 점수가 증가하지 않는 문제 발견스테이지 시스템이 하드코딩되어 있어 유연하지 않음JSON 파일로 관리되는 게임 데이터를 활용하지 못하고 있었음 2. 단계별 해결 과정  2.1 아이템 휙득 점수 수정### 2.1 아이템 획득 점수 수정```javascript// 이전 코드 (버그)getItem(itemId) { this.score + 20; // 연산만 하고 할당하지 않음}// 수정된 코드getItem(itemId) { this.score += 20; // 실제로 점수 증가}```  2.2 스테이지 시스템 구현    2.2.1 서버의 에셋..