최근에 Next.js 학습을 시작했습니다. 오늘은 학습하면서 정리했던 내용을 공유해보려고 합니다. 렌더링의 종류는 크게 4가지가 있습니다. CSR, SSG, ISR, SSR 4가지의 특징과 장단점을 이야기 해보겠습니다. 👉🏻CSR 특징 클라이언트(브라우저) 측에서 렌더링합니다. 1. 사용자가 Website 요청을 보냄 2. 브라우저는 HTML을 다운로드 합니다. 3. 이어서 브라우저가 JS파일과, React.JS파일를 다운로드합니다. 1. React.JS 소스코드 로드해서 메모리에 탑재하면서 리액트가 실행이되고, 2. HTML페이지에 있는 div root요소에 JS파일에 있는 root 컴포넌트를 연결시켜줘서 JS 소스코드를 하나씩 해석한 다음에 컴포넌트를 DOM요소로 변환을 하고, DOM트리 변환된것을 ..

안녕하세요 TriplexLab 입니다. 오늘은 macOS에 Homebrew로 Apache 설치하는 방법을 살펴보겠습니다. 👉🏻 1. macOS 11.4 Big Sur 개발환경 세팅 1. Big Sur 필수 라이브러리 설치를 위해 아래 명령어를 수행합니다. > brew install openssl 2. 내장 Apache가 이미 실행 중인 경우 먼저 종료하고 자동 로드 스크립트를 제거해야 합니다. > sudo apachectl stop > sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist 2>/dev/null 3. Brew에서 제공하는 Apache HTTPD (오픈 소스 기반 웹 서버)의 새 버전을 설치해야 합니다. >..

👉🏻 text 줄 간격 표현하기 안녕하세요 TriplexLab 입니다. 이번 시간에는 css로 text 줄 간격 표현하기에 관해서 2가지를 살펴보도록 하겠습니다. 일단 test를 위해서 임의 text를 html에 넣은 상태입니다. css 탭에 가서 보시면 주석으로 설명을 넣은 상태입니다. text 한 줄로 표현하기와, text 여러 줄 표현하기 대해서 살펴보도록 하겠습니다. 👉🏻참고 링크 작업하실 때 다음과 같은 링크를 참고하시어 지원해야 하는 브라우저에 맞게 적용하시면 됩니다. "-webkit-box-orient" | Can I use... Support tables for HTML5, CSS3, etc caniuse.com "-webkit-line-clamp" | Can I use... Support..

See the Pen Scrolling Text Animation by Katy Wellington (@katywellington91) on CodePen. 👍👍텍스트 애니메이션👏🏻👏🏻

안녕하세요 오늘은 캔버스 사이즈에 대해서 살펴보겠습니다. 👉🏻고해상도 이미지 표현하기 요즘에는 디스플레이 자체가 워낙 고해상도이다. 픽셀 집적도가 거의 기존의 2배 이상이 디폴트이기 때문에, 이미지 작업을 할 때도 300px짜리 이미지를 만든다고 하면, 300px로 만들지 않고, 600px로 만든 다음, CSS등으로 절반을 줄여서 표현해준다! 선명하게 표현해주기 위해서! 캔버스도 동일합니다. 위에 처럼 디스플레이의 해상도 dpr이 1 일때는 왼쪽과 같고, dpr이 2일때는 오른쪽과 같습니다.(하나의 1픽셀을 4등분으로 나눠서 표현) 따라서 dpr이 높을수로 더 선명한 그래픽을 보여주는 겁니다. 맥을 쓰고 있는 분들은 dpr이 2로 나올것이기 때문에 1픽셀을 실제로 그리는데 4개의 픽셀을 쓰고 있다고 보시..

안녕하세요 triplexlab 입니다. 오늘은 Vanilla JS로 직접한번 구현 해봤습니다. 👉🏻slider를 직접 한번 구현하기 마우스 휠 가로스크롤를 하셔도 slider가 적용됩니다. See the Pen 좌, 우slider영역의 스크롤 by 소윤호 (@younhoso) on CodePen.

👉 Truthy and Falsy 이것은 자바스크립트 문법까지는 아니지만, 알아둬야 하는 개념입니다. Truthy: true 같은거... Falsy: false 같은거... 라고 이해를 하면 되는데요, 예를 들어서 다음과 같은 함수가 있다고 가정해봅시다. function print(person) { console.log(person.name); } const person = { name: 'John' }; print(person); 만약에 이러한 상황에서, 만약 print 함수가 다음과 같이 파라미터가 비어진 채로 실행됐다고 가정해봅시다. function print(person) { console.log(person.name); } const person = { name: 'John' }; print()..

안녕하세요 TriplexLab 입니다. 이번 시간부터 JavaScript에서 유용한 Tip정보를 예시와 함께 알려드리고자 합니다. 오늘은 삼항연산자에 대해서 먼저 이야기를 해보겠습니다. 👉🏻삼항연산자 첫번째로 배울 문법은, 삼항 연산자입니다. 이 문법은 ES6 문법은 아닙니다. 조건 ? true일때 : false일때 라인의 길이가 너무 길어진다면 다음과 같이 작성하기도 합니다. const array = []; let text = array.length === 0 ? '배열이 비어있습니다' : '배열이 비어있지 않습니다.'; console.log(text); 예시)👇🏻👇🏻 삭제 라인의 길이가 너무 길어진다면 다음과 같이 작성하기도 합니다. 버튼 클릭 엘리먼트에 토글 클래스를 핸들링한다. const $btn..

UI/UX 디자인 아이디어 공유 Data and Analytics by Diana Palavandishvili Creating digital products with heart & mind. 📊 Data and Analytics Hi Dribbblers 🏀, it’s me again with another update from the company management tool fluorine. Today I want to show you some key metrics flourine provides. In this section, admins and project managers can find all the figures on the use of the tool and dribbble.com

🎦 Video Gallery Easy Tutorials 안녕하세요 TriplexLab 입니다. 이번 시간에는 Video Gallery의 간단한 쉬운 예제를 가져왔습니다. 섬네일을 클릭하면 해당 영상이 활성화되어서 나오는것 입니다. How To Make A Video Gallery Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta maiores, accusamus eum voluptatem ipsam tempora Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta maiores, accusamus eum voluptatem ipsam tempora Lorem ipsum dolor..

안녕하세요 TriplexLab입니다. 오늘은 webpack5으로 Lit.js을 세팅하는 방법에 대해서 살펴보도록 하겠습니다. 먼저 Web Component에 대해서 궁금하신다면 아래 글을 참고하시고👇🏻👇🏻 이어서 글을 보시면 이해하는데 더 도움이 됩니다. Web Component 정리 Web Component 는 복잡해진 마크업 요소들을 코드의 충돌없이 재사용 가능하고, 캡슐 화 시키기 위한 목적으로 만들어 졌습니다. WebComponent 의 장점으로는 아무래도 웹표준을 따르는 만큼 어떤 FE 프 triplexblog.kr 👉🏻Lit.js 소개 여러분 혹시 lit.js 라고 아시나요?? Playground – Lit Simple. Fast. Web Components. lit.dev React, Vue..

👉🏻스티커 메모 앱(Sticky Notes App) 안녕하세요 TriplexLab 입니다. 이번에는 브라우저에서 스티커 메모장을 만들어 보겠습니다. 이번 포스트는 dcode라는 외국 유튜버를 보고 참고 했습니다. 👉🏻로직의 차이점 위에 외국인 dcode 유튜브의 코드와 저의 코드에는 약간의 차이점이 있습니다. main.js에서 그 차이점을 볼수 있습니다. 1. javascript의 class 문법을 사용해서 구조화 시킴.(외국인 유튜브는 함수형으로 만듬) 2. Template literals를 사용 (외국인 유튜브는 document.createElement를 사용) 3. UI 측면으로 삭제 휴지통 버튼을 제공(외국인 유튜브는 더블클릭을 해야지 삭제 가능) 👉🏻소스코드 공유 👉🏻파일 공유 작업한것 파일 공..