728x90 반응형 SMALL 리액트독학4 AUTOPREFIXER CSS에서 비교적 최신 기능을 사용하려면 벤더 접두사(Vendor Prefix) 가 붙은 이름을 사용합니다. 벤더 접두사를 붙이는 것은 create-react-app 에서는 autoprefixer 패키지를 통해서 벤더 접두사가 자동으로 붙습니다. create-react-app 에서 최신 CSS 기능을 사용했을 때 실제로 벤더 접두사가 자동으로 붙는지 확인해 보겠습니다. 최신 CSS 기능을 사용했을 때 실제로 벤더 접두사가 자동으로 붙는지 확인해 보겠습니다. src 폴더 밑에 test.css 파일을 만들고 다음 내용을 입력한 후 App.js 에서 test.css 파일을 가져오면 되겠습니다. .prefix-example { writing-mode: horizontal-tb; scroll-snap-type: .. 2022. 1. 21. 웹팩의 기본 개념 이해하기 웹팩은 자바스클비트로 만든 프로그램을 배포하기 좋은 형태로 묶어주는 도구입니다. 2000년대 초반의 웹페이지는 페이가 전활 될 때마다 새로운 HTML파일을 요청새허 화면을 새로 그렸습니다. 그 당시 자바스크립트는 돔을 조작하는 간단한 역할만 했기 때문에 코드의 양이 많지 않았습니다. 한두개의 자바스클비트 파일을 HTML의 script 태그를 이용해서 서비스하는 방식이면 충분했습니다. AJax가 유행했을 때는 자바스크립트의 비중이 조금더 커졌지만 많이 봐야 페이지당 자바스크립트파일 열개 정도 수준이었습니다. 그런데 웹사이트 제작 방식이 단일 페이지 애플리케이션으로 전환 되면서 상황은 달라졌습니다. 한 페이지에서도 자바스크립트 파일이 수십 또는 수백개가 필요했기 때문에 더는 기존 방식이 통하지 않았습니다. .. 2022. 1. 19. 바벨 사용해 보기 바벨(bable)은 자ㅏㅂ스크립트 코드를 변환해 주는 컴파일러 입니다. 바벨을 사용하면 최신 자바스크립트 문법을 지원힞 않는 환경에서도 최신 문법을 사용할 수 있습니다. ES6가 막 나왔을 때는 대부분의 브라우저가 ES5가 지원하고 있었기 때문에 ES6문법을 사용할 수 없었습니다. 그때 바벨(ekdtl dlfmadms 6to5)이 ES6 문법으로 작성된 자바스크립트 코드를 ES5 문법으로 변환해 주었습니다. ES6 문법을 사용하고 싶어 하는 개발자가 많았기 때문에 바벨의 인기도 높아졌습니다. 바벨은 자바스크립트 최신 문법을 사용하는 용도 외에도 다양하게 활용될 수 있습니다. 이를테면 코드에서 주석을 제거하거나, 코드를 압축하는 용도로 사용될 수 있습니다. 리액트에서는 JSX 문법을 사용하기 위해 바벨을 .. 2022. 1. 19. 리액트 개발 환경 직접 구축하기 리액트는 UI라이브러리이기 때문에 UI를 제외한 나머지 요소들은 개발자가 신경써서 관리해야한다. 웹 어플리케이션을 만들기 위해서는 테스트 시스템, 빌드 시스템, 라우팅 시스템 등 UI외에도 신경써야할 부분들이 많습니다. 리액트로 웹 애플리케이션을 제작할 때는 다양한 외부 패키지를 활용하는게 일반적입니다. 하지만 이런 다양한 외부 패키지의 존재는 처음 리액트를 접하는 사람에게 오히려 큰 부담이 됩니다. 사용되는 외부 패키지가 너무 많아서 각 패키지의 용도도 모르는 경우가 많습니다. 우선 패키지를 전혀 사용하지 않고 리액트로 간단한 웹페이지를 만들어 보도록 하겠습니다. 다음 경로에서 리액트 자바 스크립트 파일을 4개를 내려받습니다. https://unpkg.com/react@16.14.0/umd/react... 2022. 1. 19. 이전 1 다음 728x90 반응형 LIST
