체유의 IT일지

프론트: React, 백: Node.js 백에서 쿠키에 JWT토큰을 담아서 전송해주고 페이지를 이동할 때마다 프론트에서 api 요청을 하면 헤더에 있는 쿠키로 백에서는 사용자 인증을 처리하고 응답을 보내주는 방식으로 프로젝트를 진행했다. 이 부분까지는 1차 프로젝트에서도 동일하게 진행했던 방식이라서 이해를 하고 있었고 1차 프로젝트 때는 백을 맡았고 지금 2차 프로젝트에서는 프론트를 맡게되어 백으로 어떻게 요청을 하는지 몰라서 한참을 헤멨다. 찾아보는 곳마다 너무 다양하고, 잘 모르다보니 프론트에서도 쿠키를 또 생성할 뻔 했다...ㅎ 그렇게 2시간 넘게 헤메다가 해결... 생각의 흐름 첫 번째, 브라우저에 쿠키가 저장이 되기 때문에 프론트에서 쿠키를 긁어와서 백으로 api 요청을 보..

2차 프로젝트에서 달력을 만들어보고자 했다. 코치님께서는 직접 만들어보는 것도 좋은 경험이 될 것이라고 해주셨는데 프로젝트 기간이 정해져있다보니 시간이 얼마나 걸릴지 몰라서 우선은 라이브러리를 사용했다 직접 달력을 만들어보는 작업은 나중에...! FullCalender 라이브러리를 사용해서 캘린더를 만들어보았다 이미지 넣기 주말에 색 넣기 날짜 포맷 이미지 클릭하면 값 변경 다른 달로 넘어갔다가 today 버튼을 누르면 오늘 날짜의 값으로 변경하기 비어있는 날짜 클릭해도 값 띄우기 1. FullCalender 라이브러리 설치 FullCalender 라이브러리 사용을 위해서는 npm으로 설치가 필요하다. 가장 많이 사용되는 react, daygrid만을 설치했다. npm install -..

1차 프로젝트에서 직접 VM 배포에 관여하지는 않았지만, 각 팀에서 배포 과정에 많은 어려움들을 겪었었다. 우리 팀은 발표 전날에 VM 서버가 문제가 생겨서 늦은 밤까지도 코치님들이 총 출동해서 해결해주셨다. 2차 프로젝트 때는 우선 프론트만 초기 틀 잡고는 바로 배포를 진행해보았다. 로컬에서 build 파일을 생성한 후에 VM 서버로 보내서 배포를 하려고 했으나, 로컬에서 생성한 build 파일을 VM 서버로 보내는 방식에서 막혀서 한참을 헤멨다. 그렇게해서 찾은 방식은 VM 서버에서 git clone으로 파일들을 가져오고 VM서버에서 build 파일을 생성을 하고 nginx로 배포를 진행했다. VM 이란? Virtual Machine의 약자로 가상 머신 OS로 리눅스가 있어서 유닉스 커맨드로 작업을 ..

프로젝트에서 프로필 사진을 변경할 때, 이미지를 미리보기로 띄울 수 있도록 구현하고자 했다. 미리보기로 띄울 수 있는 방식으로 FileReader와 createObjectURL 방식 두 가지를 알게되었다. FileReader를 흔히 들어서 처음엔 당연하게 FileReader를 사용해서 구현했지만, 두 방식을 비교하는 글을 보게되었고 실제로 테스트도 해보면서 두 방식 간에 차이가 있어서 남겨보고자 한다. FileReader 파일 이미지를 업로드 한 후, 미리보기로 보여줄 수 있는 FileReader 객체가 있다. FileReader 객체는 file이나 blob 객체가 저장하고 있는 데이터를 웹 애플리케이션에서 '비동기적'으로 읽는 객체로, 파일 내용을 읽고 사용자의 컴퓨터에 저장하도록 해준다. FileRe..

useRef ref는 reference로 '참조'를 뜻 js를 사용할 때 특정 DOM을 선택하기 위해 querySelector나 getElementById 등의 함수를 사용한다. 리액트에서도 DOM을 직접 선택해야하는 상황이 필요한데 그때 React Hook으로 useRef를 사용한다. useRef는 일반적인 자바스크립트 객체로 heap 영역에 저장이 된다. 따라서 같은 메모리 주소를 가지게 되기 때문에 값이 변하더라도 화면이 렌더링되지 않는다. useRef를 사용하면 current를 통해서 값을 변경해준다. 반환된 useRef 객체는 컴포넌트의 전 생애주기를 통해 유지가 된다. useRef로 만들어진 객체 vs useState로 변경되는 변수 vs 로컬변수 로컬변수 -> 렌더링 x -> 렌더링되면 변수..

프론트에서의 상태 변경과 관련해 매번 백에 API를 요청하는 것이 아닌 일정 시간을 두고 요청하는 것과 관련해, 코치님께서 '디바운싱과 쓰로틀링'을 언급해주셨다. '디바운싱과 쓰로틀링'을 개발과정에서 사용해보고자 정리를 해본다. 디바운싱 함수 실행 요청이 연속적으로 들어온 경우 가장 마지막(혹은 제일 처음) 요청만 수행 ex. 검색창에 "front"를 검색한다고 해보자. 일반적인 경우에는 글자를 입력할 때마다 API 요청을 하게 된다. 이 경우에는 너무 많은 요청이 들어가게 되고 서버에서는 자원 부담 및 부하로 이어질 수 있다. 더불어 아무 글자나 마구잡이로 계속해서 입력하다보면 그 때마다 API 요청이 되어 호출 낭비가 된다. 디바운싱의 경우, 정해진 시간이 지나기 전에 입력이 들어온다면 기존 시간은 ..

파이썬에서 데이터프레임을 다루는 함수들 중 groupby, aggregate, pivot_table을 복습하고 예시문제들로 활용법을 연습해보자. Groupby groupby는 데이터를 그룹화하는 함수이다. df.groupby('그룹화할 컬럼') 옵션 axis: 그룹화 적용 축 level: 멀티 인덱스가 있을 경우의 레벨 지정 dropna: 결측값 계산에서의 제외 여부 df = pd.DataFrame({ 'key': ['A', 'B', 'C', 'A', 'B', 'C'], 'data1': [0, 1, 2, 3, 4, 5], 'data2': [4, 4, 6, 0, 6, 1] }) key를 기준으로 그룹화하고 그룹화는 평균값으로 계산 df.groupby('key').mean() Aggregate aggrega..

파이썬에서 고급함수 lambda, map, filter를 사용해서 코드를 더욱 간결하고 효율적으로 짤 수 있다. lambda lambda argument : expression 파이썬에서는 def로 함수를 정의한다. 만약 함수를 정의할 때 def 대신에 lambda를 사용한다면 보다 간결하게 정의할 수 있다. def 함수 def add(x, y): return x + y lambda 함수로 변경 lambda x, y: x + y 2줄의 코드를 lambda 함수를 사용해서 한 줄로 간결하게 정의할 수 있다. 모든 def 함수를 lambda로 변경해서 사용하는 것은 아니다. def의 함수가 길고 복잡한 형태라면 lambda 함수는 한 줄로 나열하기 때문에 오히려 가독성이 떨어지는 경우도 많다. 다소 간단한 ..

세션 상태 - 클라이언트와 서버간 통신 인증이 된 상태 - 인증된 상태에서 데이터 송수신 가능 세션 정보 - 한 세션 내에서 클라이언트가 서버에 전송할 데이터 정보 Stateful (상태유지) 서버가 클라이언트의 상태를 보존 -> 세션 정보를 서버에 저장 서버에서 클라이언트가 이전 단계에서 제공한 값을 저장하고 다음 단계에서도 저장하는 상태 ex. 홈페이지에서 로그인하고 페이지 이동해도 로그인이 풀리지 않은채 유지되는 것 Stateful한 구조를 따르는 프로토콜 ex. TCP의 3-way handshaking 1) 클라이언트는 서버에 접속 요청하는 SYN 패킷을 보냄 2) 서버는 SYN 요청을 받고 클라이언트에게 요청을 수락한다는 ACK와 SYN 패킷을 발송 3) 클라이언트는 서버에게 다시 ACK 패킷을..

프로젝트에서는 가장 처음엔 토큰을 생성해서 '로그인을 유지' 시키기 위해 브라우저의 로컬 스토리지에 저장을 했다. 그러나 최종 프로젝트에서는 쿠키와 토큰을 사용했다 쿠키로 바꾼 이유는 ? 로컬 스토리지는 브라우저를 종료해도 데이터가 남아있다는 특성을 지니기 때문에 보안에서 취약하다. 쿠키와 토큰을 사용함으로써 만료 기간을 설정해 보안성을 높이고자 했다. 구현한 Flow를 요악하면, 첫 로그인 시 JWT 토큰을 쿠키에 담아서 클라이언트로 보내고 유저가 페이지를 접속할 때마다 클라이언트는 헤더에 쿠키정보를 담아서 서버로 보내면 서버는 JWT 토큰을 검증하고 유효하다면 요청값을 보내주는 방식으로 인증 과정을 거쳤다. 모든 데이터를 서버에서 저장해야한다는 부담과 (물론 소규모 프로젝트라 서버거 터질일은 절대절대..