목록2021/12 (7)
dev_eun
이번에 노션 포트폴리오를 v2.0으로 업데이트했습니다! 그리고 이전에 썼던 예비개발자 노션 포트폴리오 만들기 글이 그냥 아무생각 없이 작성한 건데 조회수가 꽤 높더라구요. 예비개발자 노션 포트폴리오 만들기 미루고 미뤄두었던 포트폴리오 초안을 드디어 완성했다. 여러 개발자 포트폴리오를 서칭하고 참고했지만 가장 도움을 많이 받았던 건 tngusmiso님의 노션 포트폴리오이다. [Notion] 노션으로 모바일 programmer-eun.tistory.com 이걸 보면서 많은 사람들이 같은 고민을 하고 있구나 라는 생각이 들었습니다. 그래서 이번에 업데이트한 내용도 함께 공유하려고 합니다. 먼저, 저의 v2.0 이력서와 포트폴리오입니다. 정말 부끄럽지만 도움이 되시는 분이 있길 바라면서 공유합니다☺️ 이은성 |..
Directory Structure 처음에 저는 React와 React Native를 유사한 기술이라 생각하고 덤볐었는데, 반성하고 있습니다😊 애초에 구동되는 환경이 다른데, 어떻게 유사하다고 생각할 수 있었을까요? 하하 그냥 문법만 유사한 거지 완전히 다른 생태계였습니다. 그래서 디렉토리 구조도 다시 한 번 고민해보게 되었습니다. 많은 리서칭 후에 나온 결과는 아래와 같습니다. react app과 크게 차이가 나는 것같지는 않긴한데.. 가장 다른 점은 screens와 navigation입니다. page 대신 screen, router대신 navigation으로 세팅하였습니다. Navigation Structure React Native에서는 router역할을 하는 것이 navigation입니다. RN에..
크루 스페이스 서비스 플랫폼은 "모바일"입니다. 모바일 앱을 만드는 방법은 크게 총 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년을 지내다 보니 저는 공모전에 중독되어 있었습니다. 아마 "공모전에 중독되지 마라"는 말을 들어보신 분도 꽤 있을 겁니다. 공모전이나 해커톤은 대부분 단기간에 기획과 개발이 이루어집니다. 그리고 아마도 공모전에 제출했던 프로젝트를 계속 이어나가서 런칭 후 운영까지 가지고 가는 프로젝트는 흔하지 않을 겁니다. 바로 이게 문제입니다. 공모전이나 해커톤의 결과가 주는 성취감은 달콤하지만, 이게 끝이라는 것. 그 때 작성했던 코드는 다시 볼 일도 없고, 데모만 잘..