체유의 IT일지

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 토큰을 검증하고 유효하다면 요청값을 보내주는 방식으로 인증 과정을 거쳤다. 모든 데이터를 서버에서 저장해야한다는 부담과 (물론 소규모 프로젝트라 서버거 터질일은 절대절대..

"우리도 CORS에서 자유롭지는 못했다." 프로젝트를 진행하면서 그전에는 CORS 오류가 나지 않았지만 배포한 후에 CORS 에러가 발생 했고, 그 원인으로는 배포하면서 출처가 다른 url에 대한 설정이 없었기 때문으로 이해를 했었다. 📍CORS란? Cross origin Resource Sharing (교차 출처 리소스 공유) " 다른 출처로의 리소스 공유 및 사용 가능 "하도록 하는 메커니즘 출처 : 프로토콜(Protocol), 호스트(Host), 포트번호(Port) -> 서버 위치를 찾기 위해 필요한 가장 기본적인 것들 출처를 비교하는 로직은 브라우저에서 이루어진다. 브라우저가 CORS 위반 등을 분석한다. 📍CORS 이해를 위한 SOP 개념 관련한..

데이터 조작어(DML) : DB에 저장된 데이터 조회, 수정, 삭제 ex. select, insert, delete, update 함수 종류 및 형식 INSERT INSERT INTO 테이블명(컬럼명) VALUES 값 ex. INSERT INTO fashion(name, size, color) VALUES ("면바지", 90, "블루"); UPDATE UPDATE 테이블명 SET col = value WHERE (col = value); ex. UPDATE fashion SET size = 105 WHERE (size = 100 AND name="카고바지"); DELETE DELETE FROM 테이블명 WHERE (col = value); ex. DELETE FROM fashion WHERE name =..