MyStory 개발일지

기존에는 데이터베이스에 연결할 때마다 connection을 새로 생성하고 반환하는 방법을 사용하였다. 하지만 데이터베이스와 매번 연결을 새로 생성하고 종료하는 데에는 많은 오버헤드가 발생한다고 한다.이것을 해결하기 위해서 커넥션 풀을 사용했다. 커넥션 풀을 사용하면 일

Gmail API 사용배경 웹 사이트에서 비밀번호 찾기를 할 때 주로 휴대폰 인증, 이메일 인증을 통해 본인인증을 한다. 이러한 기능을 본 프로젝트에 추가하기로 하였다. 한 유튜브 강의를 보면서 학습하였다. 밑에는 해당 강의이다. How to send email usi

이전에 Gmail API를 통해 메일 발송하는 것까지 구현하였다. 그러면 메일에서 어떻게 사용자 인증을 할 수 있을까?라는 생각을 가지게 되었다.아이디어는 악보공장이라는 사이트에서 힌트를 얻었다.패스워드 변경하기 url을 확인해봤는데 userID와 code가 get방식

개발하다가 민감한 정보들이 있었다. 비밀번호, 주민등록번호 등이 있다. 이것을 DB에 그대로 저장하게 되면 보안상에 문제가 생길 거라 생각했다. 그래서 Bcrypt라는 암호화 모듈을 이용하여 DB에 해시값을 저장하게 하였다.\[NODE] 📚 bcrypt 모듈 암호화

로그인을 성공하였을 때 서버와 클라이언트가 연결되어 있다는 정보를 구현해야 했다. 주로 세션과 jwt를 사용하는데 이번에는 jwt를 사용하기로 하였다. 이 프로젝트를 구현하면서 jwt를 알게 되었는데 참으로 매력적인 기술인 것 같다.자바스크립트로 JWT 토큰을 발급하고

서버와 클라이언트간 연결을 jwt를 사용하여 구현하였다. jwt는 클라이언트 쿠키에 저장되어 관리된다. 클라이언트에서 서버에 요청을 보낼 때 쿠키도 같이 보내주어야 했다.(쿠키를 보내야 jwt값이 보내짐) 해결책으로 cookie-parser을 알게 되었고 프로젝트에 적

SPA는 Single-Page-Application의 약자로 말 그대로 하나의 페이지에서 필요한 부분만 불러와서 렌더링 한다는 의미이다. 즉 Header나, Nav같은 중복되는 요소들을 매번 불러오지 않고 필요한 부분만 렌더링 한다.이 프로젝트를 진행하면서 href나

기존에 로그인 성공하면 jwt를 생성하여 서버와 연결 체크를 하였다. 여기서 30분이라는 만료시간을 설정하였는데 이것을 클라이언트 사용자가 인식할 필요가 있었다.많은 웹 페이지들이 자동 로그아웃 타이머를 보여주는 것을 보고 아이디어를 얻었다.처음 개발하였을 때 시간 3

jwt를 통해 30분간 서버와 클라이언트 간 연결 여부를 타이머를 통해 확인하였고 사용자가 30분 이상 사용할 수 있으므로 연장기능을 구현해야 했다. 또한 언제든지 로그아웃을 할 수 있도록 로그아웃 기능을 구현해야 했다.연장은 쉽게 개발하였다. 단순히 토큰을 재발급받고

모든 컨텐츠를 한 번에 로드하려고 하면 초기 로딩 시간이 길어질 수 있다. 또한 모든 컨텐츠를 한 번에 서버에서 가져와야 한다면 서버 부하가 증가할 것 이다. 그래서 사용자에게 필요한 페이지 컨텐츠만 불러올 필요가 있다. 호출할 때 post방식으로 전송되는 data

단순히 페이지 마다 필요한 컨텐츠만 select하는 것이 아니라 다양한 조건, 정렬 등을 적용하여 select하고 싶었다. 이것을 구현하기 위해서 다이나믹한 쿼리가 필요했다. iBatis, myBatis처럼 살짝 복잡하다고 생각했는데 node에서는 JS문법으로 쉽게할

현재 게시판 컴포넌트 구조는 다음과 같다.즉 BoardMain컴포넌트를 렌더링하게 되면 하위 컴포넌트들도 렌더링하게 된다. BoardMain 컴포넌트에 useState를 사용하여 하위 컴포넌트의 변수를 관리했다. 여기서 발생하는 문제점은BoardConditionFor

실제 서비스하는 개시판 같은 경우 텍스트 뿐만 아니라 이미지 등을 업로드 할 수 있다. 이 프로젝트에서 단순히 텍스트만 작성할 수 있는 것이 아니라 이미지를 업로드 할 수 있고, 텍스트 스타일도 변경할 수 있게 하고 싶었다. 이러한 것을 지원하는 것이 React-qui

게시판 쓰기 개발을 진행 중이 였다. 게시판 쓰기버튼을 누르면 bbs테이블에 입력한 게시판 정보들이 저장하는 SQL문과 게시판 ID별로 구분된 recommend테이블에 추천현황 정보를 저장하는 SQL문이 필요했다. 위에 이미지는 bbs테이블이다.위에 이미지는 recom

개발을 진행하다보니 conn.query부분이 비동기적으로 작동하여 순서를 보장받지 못하였다. 내가 원하는 것은 순서를 보장을 받고 싶었고 conn.query의 콜백 함수의 함수를 넣고 그 콜백 함수의 콜백함수의 함수를 넣었고... 이렇게 반복이 되었다.위에 이미지를 보

React의 장점 중 하나는 컴포넌트를 클래스처럼 재활용 할 수가 있다는 것이다. 이 프로젝트에서는 게시판 쓰기 페이지와 게시판 수정 페이지가 해당된다. 이미지를 통해 알아보자(글쓰기 페이지 이미지)(글수정 페이지 이미지)즉 컴포넌트는 동일하고 제목, 내용만 안에 들어

페이징 방법으로는 앞서 설명한 게시판처럼 페이지를 버튼을 통해 이동하는 방법도 있지만 스크롤 방법으로 페이지를 이동하는 방법도 있다. 이것은 유튜브 댓글을 보고 아이디어를 얻었다.즉 스크롤이 맨 밑에 도달하면 페이지를 이동한다. 이것을 본 프로젝트에 적용시켰다.스크롤

본인이 올린 댓글은 수정, 삭제를 할 수 있어야 한다. 리펙토링 전에는 수정, 삭제를 할 때 page를 0으로 하여 처음부터 불러오도록 하였는데 이것은 좋지 않은 것 같았다. 그래서 바꾼 컴포넌트만 다시 랜더링 되도록 하였다.삭제가 완료되면 모든 컨텐츠를 다시 불러올

댓글에 대한 답글이 필요하다고 생각했다. 답글 컴보넌트의 부모 컴포넌트에서 해당 로직이 실행된다. 그 이유는 답글은 여러개가 select 될 수 있기 때문이다. 답글 같은 경우 따로 페이지 설정은 하지 않았다. select된 데이터들은 rerelyData state변수

1주간 생활코딩, 나동빈 님의 유튜브 강의를 보면서 공부했다.

현재 내가 사용하고 있는 velog는 정말 좋은 블로그이다. 하지만 사용하면서 느꼈던 점은 팔로우 기능이 있었으면 좋겠다는 생각이 들었다.velog에서 글을 읽다보면 유익한 글을 포스트하는 분이 굉장히 많다. 그런 분들을 팔로우하여 관리하면 좋겠다고 생각했다.또한 gi

DB 설계 및 정규화에 대한 지식이 없어서 효율적으로 설계하지 못하였다. 추후에 DB설계 쪽을 학습할 예정이다.❗️❗️bbs테이블 => bbsID(기본키), 게시물의 정보를 저장하는 역할을 한다.reply테이블 => bbsID(외래키), replyID(기본키), bbs

1\. Profile 페이지ProfileBox컴포넌트를 조금 더 세분화 해서 팔로우 버튼, 좋아요 div를 컴포넌트화 했으면 더 좋을 것 같다는 생각이 든다, ProfileDropBox도 drop부분과 input부분을 나누어서 컴포넌트화 했으면 재사용 가능한 컴포넌트로

위 velog에서 트렌딩일 때 막대의 margin-Left가 0인 상태이고 최신일 때 margin-Left가 트렌딩 width만큼 주면 된다. 그리고 트랜지션을 주면 된다.위에 코드는 탭바를 클릭했을 때 실행하는 함수이다.tabData 변수는 props로 배열을 받아오

실제 velog를 보게 되면 탭마다 고유 ICON이 있는 것을 볼 수 있다. 이것은 Font Awesome이라는 사이트에서 얻어 올 수 있다.font-Awsome위에 사이트에서 원하는 icon을 HTML코드로 가져오고이런식으로 사용하면 된다.물론 이 링크를 사용해야지

본 프로젝트에서 ProfileTab 컴포넌트의 재사용이 필요하였다.여기서 다른 페이지에서 탭들이 다른 것을 볼 수 있다. tabData배열에 대하여 ProfileTab컴포넌트를 생상하는 것을 볼 수 있다.tabData는 무엇일까? props로 부모컴포넌트에서 전달받은

위에는 개발환경에서 사용한 package.json파일에 proxy설정이다. 이렇게 하여 axios에서 따로 호출 URL을 적지 않아도 개발환경에서 proxy를 타고 서버 API를 호출했다. 하지만 실제 Deploy환경에선 작동하지 않았다.그래서 스택오버플로우를 찾아보았