본문 바로가기

전체 글

 (40)
CSS에서 KeyFrame 사용해보기 1. 개념 CSS에서만이 아닌 그냥 KeyFrame의 뜻 자체는 주로 동영상 작업에서 사용하는 용어로, 시작 프레임과 끝 프레임 중에 전체 정보를 가지고 있는 중ㅇ심 프레임을 KeyFrame이라고 부른다. 그리고 CSS에서의 KeyFrame의 뜻은 웹 애니메이션을 만들때 사용되는 중요한 개념으로, 요소의 스타일을 시간, 혹은 조건에 따라서 변경할 수 있게 해주는 것입니다. 2. -webkit-과의 차이점 -webkit-keyframes는 webkit 기반의 브라우저에서 사용하기 위해서 쓰이며, keyframes는 모든 브라우저에서 쓰입니다. 그렇다면 keyframes는 모든 브라우저에 쓰이는데 왜 굳이 -webkit-이라는 글자를 붙여가며 사용하냐? -webkit-keyframes를 사용하는 이유는 we..
Swiper js React에서 사용하기 일단, 왜 Swiper 이냐? 뭘 해야할지 잘모르고 구글링을 해보다가 자주쓰이는 라이브러리 top10이라는 블로그를 우연히 들어가서, 찾아보니까 다른건 다 한번씩 본 것 같은데 Swiper js 를 처음 봐서 써보면 좋을 것 같아서 한번 사용해봤다. 1. Install $ npm i swiper 2. Use import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; export default () => { return ( console.log('slide change')} onSwiper={(swiper) => console.log(swiper)} > Slide 1 Slide 2 Slide 3 Slide 4 ... ); }; 기본적으..
Draggable 이용해서 축구 포메이션 만들어보기 1. Draggable 이란? React-Draggable은 드래그로 아이템의 순서를 변경하기보다, 컴포넌트를 드래그해서 위치를 옮기는 기능에 강점이 있는 라이브러리입니다. 2. React-Beautiful-DnD, React DnD랑의 차이점은? 일단 사용량 자체만 보자면 내가 사용한 React-Draggable이 사용량이 훨씬 많다. React-Draggable과 React-Beautiful-DnD, React-DnD의 차이점은 React-DnD, Beautiful-DnD : 아까 언급했듯이 Draggable은 요소보단 컴포넌트에 중점이라면, React-DnD와 Beautiful-DnD는 요소가 중점이라고 생각하면 된다. 드래그로 아이템의 순서를 변경할때 편하며, 둘의 차이점을 보자면 React-Dn..
SASS(SCSS)란 뭘까? SASS(SCSS) 란? SASS(SCSS)는 Syntactically Awesome Style Sheets로, CSS를 확장한 언어입니다.  SCSS를 왜 사용할까? 1. 변수의 사용$primary-color: #3498db;$secondary-color: #2ecc71;// 변수 활용.navbar { background-color: $primary-color;}.button { background-color: $secondary-color;} 2. 조건문과 반복문// 반복문을 이용한 그리드 시스템 생성$total-columns: 12;$column-width: 60px;@for $i from 1 through $total-columns { .col-#{$i} { width: $column-..
SSG? 쓱? 쇼핑몰? 이젠 제대로 한번 알아보자 1. SSG가 뭔지 SSG란 (Static Site Generation) CSR의 단점을 보완하기 위해 나왔지만 배포할땐 정적으로 배포하기 위해 사용이 되는 것이다. 언제 렌더링 되냐에 따라 ISR, SSR, SSG로 나뉜다고 한다. 2. 장점 페이지 로딩 속도가 빠르다. JS코드를 적용시켜서 오는게 아닌, SSR처럼 서버에서 만든 HTML파일을 미리 띄우기 때문이다. SEO 최적화가 좋다. SSR처럼 크롤러가 페이지를 확인 할 수 있다. 보안이 뛰어나다. 소스코드를 클라이언트에 보낼 필요가 없다고 한다. CDN에 캐시가 된다. 첫 요청을 서버에 보내서 html 파일을 얻은 후 캐싱을 한 후에 요청을 보낼 때마다 캐시 되있는 html 파일을 불러오는 방법이다. 3. 단점 데이터가 정적이다. 빌드할때 렌더..
React, Vue, Angular 난 React만 아는데.. Vue? View??? 1. Vue가 뭔지 + 왜 사용하는지 Vue란? Vue.js는 웹 페이지 화면을 개발하기 위한 프레임워크입니다. 근데 이걸 왜 react, angular와 비교해서 3 대장으로 놓냐? - 주 문법이 자바스크립트와 많이 다르지 않아서 접근성이 react와 angular에 비해서 높다. - 가볍고 성능이 빠르다 - React의 virtual DOM, Angular의 data Binding의 장점을 갖고 있습니다. virtual DOM이란? virtual DOM은 실제돔에서 처리를 하는게 아니라, 가상 돔과 메모리에서 미리 처리를 한 후 실제 DOM에 반영이 되는 것이다. data Binding이란? 바인딩(Binding)이란 묶는다는 의미로, 웹 프로그래밍에서는 UI를 통해 표시하고자 하는 데이터를 실제 데..
CSR, SSR 이건 또 뭘까? 1. CSR CSR이란 Client Side Rendering의 약자로 클라이언트에서 렌더링을 하는 방식입니다. CSR이 작동하는 방식은 1. 유저가 서버에 요청을 보냅니다. 2. CDN(클라이언트와 물리적으로 가까운 서버에서 응답하는 방식)이 JS 파일에 접근할 수 있는 링크를 다시 보내줍니다. 3. 클라이언트가 받은 파일을 다운로드 하기 전까지 웹사이트를 손댈 수 없습니다. 4. 다운로드가 완료될 시 HTML, JS 파일을 실행되고 웹사이트를 작동시킬 수 있습니다. 2. SSR SSR이란 Server Side Rendenring의 약자로 서버에서 렌더링 준비를 마치고 클라이언트에 전달해주는 방식입니다. SSR이 작동하는 방식은 1. 유저가 서버에 요청을 보냅니다. 2. 서버는 바로 실행 가능한 HTM..
Web은 어떻게 동작할까? 1. 브라우저의 기본 구조 이렇게 구성이 되어있다. 각 구성요소들은 이러한 역할들을 하는데 User Interface : 주소 표시, (이전, 다음, 세로고침) 버튼 등등 Browser Engine : 사용자 인터페이스, 렌더링 엔진 사이 동작 제어 Rendering Engine : HTML, CSS를 파싱해서 유저가 요청한 화면을 보여줌 Networking : 네트워크 동작에 사용 ex) HTTP JS Interprefer : 자바스크립트 코드 파싱 UI Backend : 기본 위젯을 그릴 떄 이용한다 Data Storage : 정보들을 저장해주는 웹 데이터베이스 2. 렌더링 엔진과 동작과정 렌더링 엔진이란 화면에 텍스트와 이미지를 그리는 소프트웨어 입니다. 종류로는 Blink, Gecko, EdgeH..

티스토리툴바