dev_eun

크루 스페이스 서비스 플랫폼은 "모바일"입니다. 모바일 앱을 만드는 방법은 크게 총 3가지입니다. Native WebView로 감싸기 Hybrid 저는 javascript 개발자이기 때문에 1번은 선택지에 있지 않았습니다. 새로 배울 마음도 없지만 배운다고 해도 러닝 커브가 너무 높고, 크루 스페이스 특성상 무조건 android&ios 모두 한 번에 출시해야 했기 때문에 저 혼자로는 역부족이기 때문이죠! 2번과 3번 중 어느 것을 고를 지는 꽤 오래 고민했습니다. 제가 고민하던 포인트는 아래 2가지 였습니다. 네이티브의 제스처 가장 비중을 뒀던 부분입니다. 웹뷰로 감쌀 경우 네이티브에 맞는 제스처 동작이나 액션을 구현하기가 까다롭다는 것입니다. 예를 들면 아이폰의 경우 화면이 전환될 때 오른쪽에서 왼쪽으..

Dynamic Routes /posts/:id 경로의 post를 라우팅하고 싶을 경우 pages/posts/[id].ts 파일을 생성 getStaticPaths()가 id 값들의 리스트를 반환 리스트 원소의 타입은 object이다. 그리고 이 객체는 반드시 params안에 key가 id인 객체를 가지고 있어야 한다. return fileNames.map(fileName => { return { params: { id: fileName.replace(/\.md$/, '') } } }) filename([id].js)의 id와 같은 key여야 한다. getStaticProps()가 id에 필요한 데이터들을 fetch getStaticPaths() Fallback fallback: false일 ..

Pre-rendering Next.js는 기본적으로 모든 페이지마다 pre-rendering한다. 이것은 CSR보다 SEO가 더 좋다는 말! 각 HTML은 해당 페이지에 필요한 js코드와 연관되어 있다. 페이지가 브라우저에 의해 로드되었을 때, js 코드가 실행되고 페이지를 인터렉티브하게 만든다.(이 과정을 hydration이라고 함) 순수 React 앱이었으면 아마 로딩도 되지 않았을 거다. 왜냐면 React.js는 pre-rendering하지 않기 때문. Next.js에는 Static Generation과 Server-side Rendering 두 가지 방법이 있으며 페이지마다 다르게 적용할 수 있다. Static Generation build타임에 HTML을 생성하는 방법이다. pre-render된..

Page끼리 이동하기(Navigate) Pages /pages 디렉토리에 있는 파일로부터 export된 React Component가 페이지가 된다. pages/index.js => / route pages/posts/first-post.js => /posts/first-post route Link Link 컴포넌트 안에는 a태그가 가장 상위에 있어야 한다. href 속성을 사용하여 다른 페이지로 라우팅할 수 있다. 만약 내부 라우트가 아닌 외부 페이지로 링크하고 싶다면 Link가 아닌 a 태그를 사용한다. 그리고 className같은 속성을 사용해야 할 경우 Link가 아닌 a 태그에 추가해야 한다. import Link from 'next/link' this page! Client-side Navig..

💉 공모전 중독 대학교 3학년 때부터 개발을 본격적으로 시작하면서 자주 공모전과 해커톤에 참여하고, 가끔 수상도 했었습니다. 그 당시에는 개발을 거의 해본 적이 없어서 좋은 코드나 좋은 설계가 무엇인지도 모른 채 기능 구현에만 급급했습니다. 그렇게 2년을 지내다 보니 저는 공모전에 중독되어 있었습니다. 아마 "공모전에 중독되지 마라"는 말을 들어보신 분도 꽤 있을 겁니다. 공모전이나 해커톤은 대부분 단기간에 기획과 개발이 이루어집니다. 그리고 아마도 공모전에 제출했던 프로젝트를 계속 이어나가서 런칭 후 운영까지 가지고 가는 프로젝트는 흔하지 않을 겁니다. 바로 이게 문제입니다. 공모전이나 해커톤의 결과가 주는 성취감은 달콤하지만, 이게 끝이라는 것. 그 때 작성했던 코드는 다시 볼 일도 없고, 데모만 잘..

webpack을 왜 사용하는데? 여러 개의 js 파일이 있고, 그 많은 파일을 한 번에 실행한다고 하면 변수 이름이 중복될 수 있다. 변수 이름이 중복되면 마지막에 선언된 변수만 살아남고 그 전 변수는 아무 의미 없게 된다. 기존의 html에서 js를 가져오는 방식인 는 브라우저에서도 js 파일에 선언된 변수에 접근할 수 있는데, ES Module인 import, export 를 사용하면 접근할 수 없게 된다. 이러한 방법을 모듈화라고 한다. 최신 브라우저에서는 모듈화를 거의 지원한다. 모듈을 사용하려면 로 명시해주면 된다. 웹에서 사용하는 굉장히 많은 파일을 하나로 묶고 모듈을 사용하게 해주는 것이 bundler 라고 한다. bundler의 대표 주자는 webpack! bundle한 후 용량을 줄이기 ..

Node로 패스워드를 저장하기 전에! 이론을 먼저 살펴보자. 용어 설명 다이제스트 : 암호화된 메세지(결과물) avalanche 효과 : 아주 조그만 변화에도 결과물은 완전히 달라지는 효과 레인보우 공격 : 공격자가 전처리된 다이제스트를 굉장히 많이 확보한 뒤, 탈취한 다이제스트와 비교해 원본 메세지를 찾아내는 방법 레인보우 테이블 : 레인보우 공격에 사용되는 전처리된 다이제스트 테이블 salt : 단방향 해시 함수에서 다이제스트를 생성할 때 추가되는 임의의 문자열 먼저, 패스워드는 당연히 안전하게 암호화해서 저장해야 한다. 그리고 이론적으로 공격자가 무한한 컴퓨팅 능력을 갖고 있다면, 해독할 수 없는 패스워드는 없다. 하지만 공격하는 사람들은 그만한 자원을 갖고 있지 않기 때문에, 암호화 시간이 길어질..

First-class Function 함수가 변수처럼 취급된다. 변수에 할당할 수 있다. 매개변수를 전달받을 수 있다. 리턴값을 리턴할 수 있다. anonymous function 이름이 없는 함수 const print = function() { console.log('print'); }; callback function 매개변수로 함수를 전달한다. 클라이언트에게 구현을 맡기는 것과 같음 function randomQuiz(answer, printYes, printNo) { if(answer === 'love you') { printYes(); } else { printNo(); } }; const printYes = function() { console.log('Yes!'); } const printN..