prefer2 Log

UI/UX에 변화를 주자 메인페이지 사용자를 늘리기 위하여 회의를 하던 중 UI/UX적으로 부족한 점이 많다는 것을 알게되었다. '롤링페이퍼' 서비스인데 롤링페이퍼를 만들기가 너무 어렵다는 의견이 많았다. 이를 개선하기 위해 기존에 내가 참여하고 있는 팀만을 보여주던 메인페이지의 개선이 필요하다는 결론이 났다. 사용자가 원하는 정보들을 메인에서 바로 제공하기 위해 아래와 같이 메인페이지를 수정하였다 Nav 버튼에 서비스에서 가장 핵심적이라고 생각되는, 가장 쉽게 접근이 되어야하는 기능들을 넣어주었다. 기존에 Header에 있던 검색 아이콘도 어떤것을 위한 검색인지 모르겠다는 의견이 많았기에 이를 메인 페이지에서 글과 함께 설명해주었다. 가입한 모임들을 가로로 볼 수 있게 변경하였다. 내가 받은 롤링페이퍼..

기존의 내편의 로그인은 1시간이 지나면 무조건 로그아웃이 되고 있다. 만약에 롤링페이퍼를 작성하고 있다가 확인 버튼을 눌렀을 때 로그아웃이 된다면 사용자는 매우 당황스러울 것이다. 또한 일반 사용자에게 ‘토큰이 만료되었습니다’ 라는 메시지를 보여주는 것은 상당히 어색하고 당혹스러운 일이다. 사용성과 기술적 시도를 위해 refresh token 도입을 결정하였다. Access Token을 길게 하면 안되나요? access token은 서버에서 저장하지 않는 jwt 값이다. 만약 이 정보를 해커가 탈취한다면? 이 토큰 값만을 가지고 모든 일을 수행할 수 있게 된다. 거의 모든 요청마다 access token을 실어서 보내고 있기 때문에 이 값은 탈취되기 매우 쉽고 탈취되어도 이를 알 수 있는 방법이 없다. ..

웹개발을 하다보면 한번쯤은 만나는 녀석 CORS에 대해 알아보자! 동일 출처 정책(Same-Origin Policy) 어떠한 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 정책. 두 URL의 프로토콜, 포트, 호스트가 모두 같아야 동일한 출처라고 말한다. 예를 들어 알아보자. http://example.com/a/a.html 과 동일한 출처인지를 비교하는 예시이다. 리소스 요청 허용 여부 이유 http://example.com/b/other.html ✅ 경로만 다름 http://example.com/a ✅ 경로만 다름 https://example.com/another.html ❌ 프로토콜이 다름 http://example.com:81/a/a.html ❌ 포트 다름(기본 포트 ..

Template Literal Type? Template literal types build on string literal types, and have the ability to expand into many strings via unions. 기존 TypeScript의 String Literal Type을 기반으로 새로운 타입만들기. 타입스크립트 4.1에 들어서 새롭게 도입되었다고 한다. 간단한 예시로 알아보자. type World = "world"; type Greeting = `hello ${World}`; 기존의 World라는 타입을 기반으로 새로운 타입 Greeting을 쉽게 만들 수 있다. Union Type type Citrus = "lemon" | "orange"; type Berry =..

기존에 프로젝트를 세팅할 때 loader에 관해서는 크게 고민하지 않고 여러 블로그를 보며 셋팅을 했다. 이유를 크게 생각하지 않고 babel-loader와 ts-loader를 모두 넣어두었다. 좋은 계기로 엄청난 에러를 발견했고, 두 로더의 차이와 프로젝트에 어떤 적용을 했는지 자세히 적어보려고 한다. 에러 발견 children으로 배열을 스프레드 해놓은 엄청난 문법에러를 저질러놓았다. 하지만 기존의 설정으로는 빌드시에 이를 발견하지 못하고, 동작시에도 문제를 발견하지 못했다. 로더에 변화를 주기 전까지는 놀랍게도 이 에러를 발견하지 못했다. babel-loader와 ts-loader의 차이를 알아보기 위해 하나씩만 적용해 보았을 때야 이러한 문제를 찾을 수 있었다. babel-loader에서는 이러한..

interface Person { name: string; } interface Lifespan { birth: Date; death?: Date; } type PersonSpan = Person & Lifespan; // PersonSpan = { // name: string; //birth: Date; //death?: Date; // } 타입스크립트를 처음 접했을 때 가장 이해가 가지 않았던 부분은 교집합이었다. 일반적인 관점으로 바라보면 Person과 Lifespan 집합에는 교집합이 없어보인다. 그래서 결론으로 never(공집합)이 나오지 않을까라고 예측하기 쉽다. 하지만 결과는 두 집합의 모든 속성들을 가지는 집합이 나오게 된다. 이를 이해하기 위해서는 구조적 타이핑을 먼저 이해해야 한다. 구..

함수형 컴포넌트와 클래스형 컴포넌트, 두 코드는 완전히 동일할까? function ProfilePage(props) { const showMessage = () => { alert('Followed ' + props.user); }; const handleClick = () => { setTimeout(showMessage, 3000); }; return ( Follow ); } class ProfilePage extends React.Component { showMessage = () => { alert('Followed ' + this.props.user); }; handleClick = () => { setTimeout(this.showMessage, 3000); }; render() { retur..

같은 건 매번 새로 요청하지 않기 캐시(cache)는 데이터나 값을 미리 복사해 놓는 임시 장소를 가리킨다. 캐시는 캐시의 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용한다. 리소스의 사본을 저장해두었다가 같은 요청이 들어왔을 때 저장해둔 사본을 제공하는 것 캐시를 적절하게 사용하면 동일한 리소스에 대한 불필요한 작업을 줄일 수 있어 경제적이다. 하지만 잘못 사용하면 올바르지 않은 오래된 값을 가져와 부작용을 야기할 수 있으므로 적절하게 캐시를 설정하는 것이 중요하다. HTTP Cache 캐시는 크게 Shared(공유) 캐시와 Private(사설) 캐시가 있다. 캐시는 요청을 보내는 클라이언트에서 보관할 수도 있고, 클라이언트와 ..

기본 설정 강력 새로고침(cmd+shift+r)을 매번 사용하지 않고 사이트에 처음 방문한 것 과 같은 환경을 유지하기 위해 Chorme의 Network의 캐시사용 중지를 활성화시켜주었다. 측정하기 성능을 개선하기 위해서는 어떤 점을 개선해야 할 지 찾아야 한다. 이를 위해 기존의 사이트의 성능을 측정해보았다 lighthouse Chrome의 개발자도구에 들어가면 Lighthouse 탭을 확인할 수 있다. 원하는 조건을 선택하여 성능을 측정해보자. memegle은 데스크탑에서 주로 사용될 것이라 여겨져 데스크탑 기준으로 성능을 측정하였다. 성능, 접근성, 권장사항, SEO, PWA에 대해 측정이 가능하다. 이 값은 어디서 측정하는지 그리고 어떤 기기를 사용하는지에 따라 매번 측정 결과가 다르게 나온다. ..

프로젝트를 진행하기 전 가장 막막했던 부분이 UI 개발이었다. 디자이너분이 주신 디자인을 따라 구현하거나, 기존에 존재하는 사이트들을 따라만들기만 해본 터라 어디서부터 시작해야할지 감이 잡히지 않았다. 직접 figma를 사용해보는 것도 처음이었고 이뻐야 만들 맛이 나는 사람이라 이쁘게 만들고 싶었다. 일반 사용자가 볼 때 가장 영향이 큰 부분이랑 생각되어 고민을 다양하게 하는 것이 맞다는 생각도 들었다. 시간을 많이 잡아먹었지만 나름 즐기면서 작업을 이어나갔기 때문에 이 과정을 글을 남겨본다. 초기 프로토타입 백엔드 팀원과의 소통을 위해 소피아가 만든 프로토타입이다. 디자인은 전혀 신경쓰지 않은 채 플로우를 이해하기 위해 만들었다. 팀원들과 공유하며 각자 프로젝트에 대해 가지고 있던 의견과 방향성을 맞추..