O612의 데브런닷 스튜디오

React와 Next.js는 a 태그(anchor)를 만났을 때 내부 링크인 경우에 새로 페이지를 로딩하는 게 아닌, 다른 부분만 DOM을 업데이트 하는 방식을 취해서 로딩 속도를 개선합니다. 그러기 위해서 Link를 사용합니다. 주의 html의 와는 전혀 다른 기능입니다. React / Gatsby Next.js JavaScript TyepScript 응용 React/Gatsby/Next.js 경로만 다르고 사용하는 방법은 동일 바로 위 코드에서 href 값이 http 또는 https 프로토콜이 사용되면 자동으로 target과 rel이 붙습니다. emotion에서 LinkButton에 스타일링을 하고싶다면 AnchorLink를 감싸는 태그에 스타일링을 지정해서 사용해야 합니다. CSS/SASS…

'알쓸없코' 시리즈는 코딩과 관련된 단편 포스팅을 묶어서 내보내는 시리즈입니다. function(함수)형 문법과, 지금은 퍼포먼스 문제로 사용율이 많이 줄어든 class(클래스)형 문법을 비교합니다. Vue.js Class Function React Class Function 잘 아네 Svelte는 기본적으로 function형 문법을 쓰기 때문에 따로 언급은 하지 않겠습니다.

Prologue CSR 방식으로 동작하는 Angular, React, 그리고 Vue는 여기에 언급한 Angular Universal, Next.js 그리고 Nuxt를 사용하면 SSR 방식으로 사용할 수 있습니다. 참고로 Svelte는 SvelteKit과 별개로 SSR 방식으로 동작합니다. React를 베이스로 만들어진 것 중에 Gatsby라고 하는 프레임워크도 있는데 Gatsby는 CSR, SSR 둘 다 아닙니다. 빌드를 하면 코드가 html 파일처럼 생성되는데 Next.js와 다르게 component도 특별한 서버 없이 동작합니다. 이와 같은 형태를 SSG라고 합니다. (이 블로그가 Gatsby로 만들어졌습니다.) 스티커 구해서 맥북에 붙이고 싶다. 프로젝트 생성 및 실행하기 If, Angular…

Prologue 이번 글에서는 Angular, React, Svelte, 그리고 Vue에서는 어떻게 스타일링 코드를 작성해야하는지, CSS 파일은 어떻게 작성해야하는지 알려드립니다. 이 글은 원래 지난 글에 통합할 예정이었는데 생각보다 지난 글 내용이 너무 길어져서 분리했습니다. 이 글은 지난 글과 마찬가지로 포스타입에 올렸던 글을 통합한 글이며, 스타일과 CSS로 각각 분리되어있던 내용을 하나로 합친 글입니다. Inline 방식 If, HTML If, Angular 위 HTML 방식처럼 style="..." 방식을 사용할 수도 있고, 아래와 같이 class형을 사용할 수도 있습니다. If, React 방식 #1. 방식 #2. If, Svelte Svelte도 Angular처럼 HTML…

Prologue Angular, React, Svelte, 그리고 Vue로는 어떻게 개발할까요? CSS 작업은요? 4가지 프레임워크 모두를 __찍먹__하기 위해서는 일단 __집중력__이 필요합니다. 글이 약간 긴 관계로 집중 빡! 해주세요 변수없이 '헬로 월드' 보여주기 개발의 기본이죠. 헬로 월드를 화면에 뿌려보기. 변수로 지정한 '헬로 월드' 보여주기 Angular와 Vue는 변수를 불러올 때 {{...}} 처럼 괄호를 2번 써야하고 React와 Svelte는 {...} 처럼 괄호를 1번만 사용합니다. If, Angular If, React If, Svelte If. Vue 컴포넌트 작성하기 Angular는 TypeScript를 사용하여 작성해야 합니다. Component를 불러오는 파일은 html…

Prologue Angular, React, Svelte, 그리고 Vue를 macOS에서 시작해 봅시다! 공통 설치과정 4개의 프레임워크는 JavaScript 또는 TypeScript 기반이기 때문에 Node.js가 필요합니다. Node.js 공식 웹사이트 LTS를 선택하세요 글 작성 날짜 기준으로 LTS 버전은 16.13.1 입니다. 버전을 맞출 필요 없으니 가장 최신의 LTS 버전으로 설치해 주세요. 다만 취미 또는 테스트 용도로 사용할 생각이라면 Current 버전 설치도 상관 없습니다. 설치 및 세팅시 root가 아닌 user local로 경로를 설정해서 사용하는 것을 추천합니다. 이렇게 세팅하면 npm, yarn 패키지 설치시 root 권한이 아닌 user…

Prologue Angular, React, Svelte, 그리고 Vue의 장단점을 알려드리겠습니다. 글 작성일 기준으로 한국에서 실무 프로젝트로 많이 사용되는 순서는 React > Vue > Angular > Svelte 입니다 확장 프레임워크에서 단점이 해결된 경우에는 혼란을 주지 않기 위해 추가 설명을 붙였습니다 Angular 단점. 허들(러닝 커브)이 높음 (Module, RxJS, Pipe, JavaScript, TypeScript, ... etc) 가상(Virtual) DOM이기 때문에 SEO(Search Engine Optimization)에 취약 → 'Angular Universal' 사용해서 해결 초기 로딩 속도 이슈 Angular CLI 관련 문서의 불친절함 장점. 개발사가 Google…

Prologue Angular, React, Svelte, 그리고 Vue의 차이점을 간단히 비교해 보도록 할게요 각 프레임워크 기본 정보 각 프레임워크 기반의 확장 프레임워크 각 프레임워크 기반으로 확장된 프레임워크가 있습니다. Angular는 Angular Universal, React는 Next.js, Svelte는 SvelteKit, 그리고 Vue는 Next.js의 Vue버전이라고 불리는 Nuxt. Angular Universal의 Universal은 Universal Design에서 영감을 받았다고 하죠. Next.js는 React가 CSR이라서 가지고 있는 단점을 해결하기 위해서 SSR 렌더링 방식의 프레임워크로 개발되었습니다. Epilogue…

Prologue ReactJS(이하 React)는 Facebook(현 Meta)의 Jordan Walke에 의해 탄생된 JavaScript library framework 입니다. React Native(이하 RN)는 React가 탄생한 2년 뒤인 2015년에 공식 발표되었습니다. 뼈대는 React이기 때문에 기본적으로 사용법은 React와 비슷하며 React에서 사용하는 NodeJS, Yarn 패키지들도 사용이 가능합니다. Native 특성으로 인해 호환에 문제가 있어 RN 전용 패키지를 써야하는 상황이 꽤 발생함 React Native RN은 Native 특성상, 웹에서 사용하는 태그 개념이 없습니다. Text는 RN의 Core Component 중 하나입니다. (Core Component: View…