react25 CSS in CSS | CSS전처리기 Sass(SCSS) + 직접 사용해보고 느낀점 CSS전처리기 Sass & SCSS [index] 1. CSS전처리기( CSS Preprocessor) 2. Sass (Syntactically Awesome Style Sheets) 3. Sass 적용하기 4. Sass 활용하기 5. 직접 Sass를 사용하면서 느낀점 해당 글에서는 CSS 천처리기 종류 중 하나인 Sass에 대한 개념정리와 Sass를 사용하는 이유 및 활용 방법에 대해 다룹니다. 기존에 작성했던 글에 추가된 내용이 있습니다.(2023.10) 1. CSS전처리기( CSS Preprocessor) 1-1. CSS전처리기( CSS Preprocessor) 개념 정리 CSS 문서 작성에 도움을 주는 도구로, 작업을 하며 발생하는 다양한 문제들을 programmatically 한 방식으로 해결해.. 2023. 4. 23. React/ part.2 Routing과 Router Routing과 Router 리액트에서 중요한 개념중 하나가 바로 라우팅이다. 라우팅은 무엇인지, 라우터는 무엇인지에 대해 제대로 알고 리액트를 사용해야 기초적인 실수를 피할 수 있다. 해당 글에서는 라우팅이란 무엇인지 알아보고 라우팅과 관련된 중요한 개념들에 대해서도 함께 다루고 있다. Routing, Router, react-router-dom, react-router-dom을 이용해 Routing을 하는 방법 2가지 1. Routing (라우팅)이란? 간단히 말해 다른 경로(url 주소)에 따라 다른 화면(view)을 브라우저에 출력하는 것을 말한다. 리액트는 UI를 그리는 라이브러리라서 routing기능이 내장되어 있지 않다. 그래서 따로 Routing Library라우팅 라이브러리가 필요하다. .. 2023. 4. 23. React/ part.2 component Components란? 이번 글에서는 component에 대한 기본적인 내용들을 다룹니다. Hook과 state에 대해서는 다른 글에서 더 자세히 설명하고 있습니다. 1. 컴포넌트의 정의 재사용이 가능한 UI 구성 단위 컴포넌트 기반의 개발로 복잡한 UI도 효과적으로 구성이 가능하다. 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고 그 조각들을 사용할 수 있다. 쉽게 말해, 레고블럭 같은 역할이다. 페이지 내부 여러 곳에서 호환될 수 있도록 만든 UI 레고블럭이라고 생각하면 된다. 개념적으로 컴포넌트는 JavaScript 함수와 유사하다. 2. 컴포넌트의 특징 1. 필요한 곳에 가져와서 재사용이 가능하다. ⇒ export와 import 방식으로 2. 독립적으로 사용되어 유지보수에 용이.. 2023. 4. 22. React/ part.2 JSX JSX란? JSX(JavaScript Syntax eXtension) 리액트에서 사용하는 자바스크립트 확장 문법 HTML과 자바스크립트 로직을 하나의 자바스크립트 파일 안에서 모두 처리하기 위해 확장한 문법 태그처럼 생긴 문법 자바스크립트 정식 문법은 아니기 때문에 작성한 코드는 브라우저에서 동작하기 전에 Babel이라는 transcompiler를 통해 일반 자바스크립트 코드 형태로 변환된다. 자바스크립트 문법을 가져와 쓰기 때문에 편하다. 하지만 자바스크립트보다 직관적이다. JSX 문법에 맞게 작성하는 것이 제일 중요하다. JSX element 자바스크립트 파일 어디에서나 HTML처럼 작성이 가능하다. javaScript 표현식 값.. 2023. 4. 21. React / part.1 CRA CRA(Create-React_App)란? 리액트 프로젝트를 시작하는데 필요한 개발 환경을 구축해주는 도구(toolchain)이다. 1. CRA를 이용한 프로젝트 구축 터미널에서 프로젝트를 시작하고자 하는 폴더에 진입한다. cd [ 프로젝트를 구축할 폴더명] 프로젝트를 설치한다.이때 프로젝트명은 대문자 혹은 소문자로 작성한다(~!()^*)등의 일부 특수문자는 에러 발생 npx create-react-app [프로젝트명] 프로젝트 폴더 진입 cd [프로젝트명] 로컬 서버에 띄우기 npm start http://localhost:3000 이라는 로컬 서버주소를 확인 2. CRA 초기 폴더 및 파일 구성 node_modules, .gitignore, package.json 상관관계 이해하기 node_modul.. 2023. 4. 21. React/ Part.1 Node.j & npm 1. Node.js 등장 배경 자바스크립트는 웹 브라우저에서 동작하기 위한 언어로 웹브라우저 밖에서는 사용할 수 없었다 하지만 자바스크립트를 웹 브라우저 밖에서 사용하고자하는 개발자들의 니즈가 늘어남에 따라 웹 브라우저가 아닌 작업환경에서 동작할 수 있도록해주는 도구가 필요해졌다. ⇒ 자바스크립트의 탈 웹 2. Node.js란? Node.js는 브라우저 밖에서도 자바스크립트를 실행할 수 있게 해주는 자바스크립트 실행 환경이다. 3. npm(Node Package Manager)이란? Node.js를 이용해서 실행할 수 있는 자바스크립트 파일들의 묶음이 package이다. 패키지를 손쉽게 설치하고 관리하기 위한 도구가 NPM(Node Package Manager) node = ios / npm (Node .. 2023. 4. 21. React / intro : 리액트란? 리액트란 무엇인가? 들어가기에 앞서 리액트의 등장 배경을 통해 리액트의 필요성을 알아보자. 새로운 기술을 이해하기 위해서는 그 기술이 나오게된 배경을 먼저 이해하는 것이 중요하다. 어떤 배경에서 어떤 문제를 해결하기 위해 만들어 졌는지를 알면 그 기술을 더 쉽게 이해할 수 있다. 1. Web Application의 발전 상호작용이 적고 단순한 과거의 웹페이지와 달리 현재의 웹페이지는 상호작용이 많고 페이지의 규모 또한 커졌다. 쉽게 말해 예전에는 사용자가 수동적으로 정보를 받는 입장이었다면, 현재의 사용자는 다양한 액션을 취해 다양한 결과를 얻을 수 있게되었다. 2. 프론트엔드, 프레임워크(Framework)와 라이브러리(Library)의 등장 규모가 커짐에 따라 복잡해진 웹어.. 2023. 4. 21. 이전 1 2 3 다음
