Enjoy Programming

이번에 회사에서 새롭게 들어가는 커스터피아 웹페이지 프로젝트에서는 기존에 사용했던 css in js인 styled component 를 최대한 배제 하고 utility first인 tailwind css frame work을 사용하기로 결정 되었다. (새로 사용할 stack은 nextjs & reacQuery & tailwindcss & recoil 등등이다) 뭐 순전 내가 제안한 스택들이지만 tailwindf를 사용한 계기는 이렇다. 기존 styled-component는 아주 좋았다. 솔직히 그냥 써도 무방하다. 근데 한가지 단점을 느낀게 간단한 태그 하나 추가해서 box를 잠깐 조정 해줘야 한다거나 할때 마다 css 컴포넌트를 만들어줘야 하는 단점이 있었다. 뭐 그냥 css in html로 tag하나..

역시 오랜만에 글을 올린다. 런칭전 너무 많은 변화가 생겼고 거의 리뉴얼 수준으로 작업이 이루어졌다... 거의 끝났다. 작업을 진행하며 한가지 문제가 된 부분이 있는데 브라우저에서 로그인시 해당 상태가 다른 탭에 공유 되지 않는 현상이었다. 물론 새탭으로 열면 app의 상태는 공유 되어 있다. 하지만 로그아웃시? 또는 두개의 탭이 열린 상태에서 로그인시? apollo의 loggedinVar가 지속적으로 읽혀지고 있어서 새로고침으로 앱을 다시 시작하지 않으면 해당 상태는 역시 공유 되지 않았다. 우선 급한데로 apollo authLink에서 로그인 상태를 token의 유무에 따라 조정을 해줬다.. 이 경우 session의 상태에 따라 api호출시 로그인 상태가 결정되므로 즉각 반응은 아니지만 api호출 이..

최근 같은 프론트 개발자 동료가 데이터 필터를 하는데 어려움을 겪고 있어서 무언가 봤더니 두개의 array를 비교해서 정확히 같은 값을 가질때만 callback을 하고싶다고 하는 것이다.. 음 한번 만들어보자 싶어서 만들어 봤다. 먼저 bool이란 함수를 하나 만들어서 비교군이 될 arr2와 기준이 될 array의 개별 요소 인자로 받아준다. 그리고 arr2에 해당 item인자가 있는지 확인하고 없으면 false를 반환하고 있다면 true를 반환한다고 해준다. 그리고 실제 체크를할 함수를 하나 더 만드는데 여기에는 각각의 array가 인자로 들어가게 된다. 그럼 기준이 되는 array 를 map을 이용해 bool함수에 대입해주고 비교 대상을 인자로 넣어준다. 아 그리고 정확히 같으려면 위는 빠졌으나 각각..

오늘부터 기초적인 자바스크립트 내용부터 시작해서 차근차근 다시 포스팅하려고 한다. 모던자바스크립트 도서를 기준으로 작성하고~ react나 nextjs graphql은 프로젝트 도중 필요한 시점에 작성하겠다~! 먼저 짧게 변수의 선언과 할당에 대해 짚고 넘어가자. Runtime을 기준으로 생각하면 좀 더 쉽게 이해하기 쉽다고 생각한다. 먼저 score라는 변수를 선언하고 할당해보자 순서는 콘솔창에 선언되지 않은 score를 표시하고 그 다음 score를 선언한다. 그리고 score에 80을 할당하자. 결과부터 보면 먼저 undefined가 뜨고 80이 찍힌다. 자바스크립트는 순서대로 읽어 내려간다. 그럼 첫 console.log에 왜 reference오류가 아닌 undefined가 떴는가! 하면 이는 바로..

타입스크립트의 핵심중 하나인 인터페이스에 대해서 오늘은 써본다. 위 예제 코드는 printLabel함수를 호출 시 argument로 string타입 label을 갖는 labeledObj오브젝트를 갖는다. 객체가 더 많은 프로퍼티를 갖고 있더라도, 컴파일러는 최소한 필요한 프로퍼티가 있는지와 타입이 잘 맞는지만 검사한다. 이 타입작성을 label을 가진 interface로 다시 작성해보면 이러하다~ 위에 { label : string } 대신 interface에 이 타입을 넣어주고 오브젝트는 이런 인터페이스야~! 라고 알려준다. 다행인건 타입 검사에서는 props의 순서를 지킬 필요는 없다. 오직 인터페이스가 요구하는 props가 존재하는지와 props들이 적절한 타입을 가졌는지만 확인한다. - Optio..

오늘부터 타입스크립트 공식문서를 하나씩 정리해본다. 공홈은 뭔가 ui가 나랑 맞지않아서 gitbook으로 읽는다~ https://typescript-kr.github.io/pages/basic-types.html TypeScript 한글 문서 TypeScript 한글 번역 문서입니다 typescript-kr.github.io 자 오늘 정리할 내용은 기본타입에 대해서 알아보자. 자바스크립트와 거의 유사하다. 먼저 - Boolean - let isDone: boolean = false; 뭐 설명할게 없다. - Number - 마찬가지다. 일단 자바스크립트 처럼 모두 부동 소수 값이다. typescropt는 16진수, 10진수 리터럴에 더불어 ECMAScript2015에서 나온 2진수, 8진수 리터럴도 지원한..