전체 글34 첫 Gatsby 사이트 만들고 Gatsby Cloud에 배포하기 사이트를 만드는 과정의 전체 프로세스는 다음과 같습니다. 로컬에서 Github로 소스를 push 합니다. Gatsby Cloud에서 Github에 있는 소스를 빌드하고 배포합니다. 사용자들이 사이트에 접속할 수 있습니다. Gatsby 사이트 만들기 Gatsby 사이트를 만들기위해 Gatsby CLI에서 명령어를 사용해야 합니다. gatsby new 위 명령어를 입력하면 여러 질문들이 터미널에 나타납니다. What would you like to call your site? → 사이트 이름 입력 What would you like to name the folder where your site will be created? → 사이트의 폴더 명 Will you be using CMS? → CMS를 사용할 지.. 2022. 1. 23. [GetX] 같은 Controller를 사용하는 여러 페이지가 있는 경우 구현하고 있는 상품 상세 페이지에는 상품을 업로드한 사람이 올린 다른 상품을 보여주는 Gridview가 있었습니다. GridView에 있는 item 중에서 하나를 선택하면 선택한 상품의 상세 페이지로 이동하는 시나리오 입니다. 각 상품들은 id를 갖고 있고, 이 id를 이용해서 서버에 데이터를 요청해야 합니다. React를 개발한 경험을 갖고 Getx를 사용하면서 페이지가 이동하면 당연히 onInit이 다시 실행되고, Controller 역시 페이지별로 할당될 줄 알았습니다. 그런데... 이동한 페이지에서는 이전 페이지에서 사용하던 Controller를 그대로 사용하고, onInit 함수 역시 호출되지 않았습니다. 게다가 페이지에서 사용하는 scrollController도 중복되어서 에러가 발생했습니다... 2022. 1. 19. [Gatsby] 환경 구축 시작하기 앞서... Gatsby는 React기반으로 정적사이트(Static Site), 일반 웹사이트를 구현할 수 있는 오픈소스 프레임워크입니다. Gatsby라는 프레임워크를 알고만 있었고, 이를 이용해서 사이트를 개발해보고 싶었는데, 이번 기회에 Gatsby로 사이트를 만들어보면서 공부한 내용을 하나씩 정리해보려고 합니다. 주로 공식사이트를 기준으로 정리를 할 예정이고, 다른 블로그나 사이트에서 참고하면 아래의 참고자료로 남길 예정이니 자세한 내용은 아래 참고자료를 확인해주세요. 사전지식 Gatsby를 이용해서 사이트를 만들기 위해서는 Web 기술과 친해져야하고, 필요 소프트웨어 툴을 설치했는지 확인해야 합니다. 아래 4가지는 Gatsby에서 요구하는 사전지식 입니다. HTML (https://www... 2022. 1. 19. [정리] 브라우저 동작 원리 요약 HTML 마크업을 처리하고, DOM 트리를 빌드한다. (”무엇을” 그릴 지 결정한다.) CSS 마크업을 처리하고, CSSOM 트리를 빌드한다. (”어떻게” 그릴 지 결정한다.) DOM 및 CSSOM을 결합하여 렌더링 트리를 형성한다. (”화면에 그려질 것”만 결정한다.) 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다. (”Box-Model”을 생성한다.) 개별 노드를 화면에 페인트한다. 브라우저의 주요 기능 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고, 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서지만, PDF나 이미지, 다른 형태일 수 있다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다. 브라우저의 기.. 2022. 1. 16. REST API 정리 REST API란, REST란, REpresentational State Transfer의 약자이다. 2000년도에 로이 필딩(Roy Fielding)의 박사학위 논문에서 최초로 소개되었다. 그는 웹(HTTP) 설계의 우수성에 비해 제대로 사용하지 못해 웹의 장점을 최대한 활용할 수 있는 아키텍처로 REST를 발표했다. REST의 구성 자원(Resource) - URI 행위(Verb) - HTTP Method 표현(Representations) REST 특징 Uniform Interface URI로 지정한 리소스에 대한 조작은 통일되고, 한정적인 인터페이스로 수행하는 아키텍처 스타일이다. Stateless REST는 작업을 위한 상태 정보를 따로 저장하거나 관리하지 않는다. 세션이나 쿠키를 별도로 저장하.. 2022. 1. 7. [Flutter] Incorrect use of ParentDataWidget. 순조롭게 앱을 개발하고 있었는데, 디버그콘솔에서 다음과 같은 Warning이 발생했다. ════════ Exception caught by widgets library ═══════════════════════════════════ The following assertion was thrown while applying parent data.: Incorrect use of ParentDataWidget. The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible typ.. 2022. 1. 7. [Flutter] setState() or markNeedsBuild() called during build. Flutter를 이용해서 회원가입을 만들고 있었다. 회원가입 Form의 UI 시나리오는 다음과 같다. 처음 접속하면 Email Input과 하단의 확인 버튼만 등장한다. 사용자가 Email을 입력하는 동시에 validation을 체크한다. validation에 통과하면, 확인 버튼이 enable 된다. 확인 버튼을 누르면 Password Input이 나타나면서 focus가 password input으로 이동한다. password input에서도 1-3번과 같이 동작한다. 확인 버튼을 누르면 핸드폰 인증 화면으로 넘어간다. 이런 시나리오로 구현하기 위해서 아래 방법으로 구현을 진행했다. import 'package:flutter/material.dart'; import 'package:get/get.dar.. 2022. 1. 4. Next.js에서 styled-component를 사용하기 위한 방법 babel-plugin-styled-components 설치 yarn add -D babel-plugin-styled-components .babelrc 문서 생성 및 작성 _document.tsx 생성 styled-components 사용 참고자료 Advanced Features: Next.js Compiler | Next.js next.js/examples/with-styled-components at canary · vercel/next.js 2021. 12. 6. react-router-dom v5, v6 비교 안녕하세요. 이번에 회사에서 react-router-dom의 버전을 업그레이드하는 작업을 진행하면서 v5에서 사용하던 기능들이 v6에서 어떻게 변경되었는지 공유합니다. 1. Switch → Routes 변경 v5에서 사용하던 가 로 변경되었습니다. // v5 // v6 2. exact 옵션 삭제 속성 중, path가 정확히 일치할 때만 사용하는 exact 가 삭제되었습니다. // v5 // v6 3. component 방식 변경 v5에서 사용하던 component, render 속성이 element 속성으로 변경되었습니다. // v5 ( )} /> // v6 4. 중첩 라우팅 방법 변경 4.1 Basic 기존 v5와 동일하게 중첩라우팅을 사용할 수 있습니다. 여기서 차이점은 상위 path에 *가 추가되어.. 2021. 12. 4. 이전 1 2 3 4 다음
