분류 전체보기 (487) 썸네일형 리스트형 [2024 여름방학 Node.js 스터디] 김지나 #4주차 5장. 패키지 매니저 5.1. npm 알아보기- npm: 노드 패키지 매니저 - 패키지: npm에 업로드된 노드 모듈- 자바스크립트 프로그램은 패키지로 npm에 등록되어 있으므로 필요에 따라 설치해서 사용하면 됨 5.2. package.json으로 패키지 관리하기- package.json: 설치한 패키지의 버전을 관리하는 파일- 노드 프로젝트를 시작하기 전에는 폴더 내부에 package.json부터 만들고 시작해야 함!!package name패키지의 이름version패키지의 버전entry point자바스크립트 실행 파일 진입점test command코드를 테스트할 때 입력할 명령어를 의미git repository코드를 저장해둔 깃(Git) 저장소 주소를 의미keywords패키지를 쉽게 찾을 수 있게 함li.. [2024 여름방학 Node.js 스터디] 이종윤 #4주차 NPM(Node Package Manager): Node.js의 패키지를 관리할 수 있는 도구이다. Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공한다. 자신이 작성한 패키지를 공개할 수도 있고 필요한 패키지를 검색하여 재사용할 수도 있다.* 명령줄 인터페이스(CLI)는 키보드를 이용해 운영 체제와 상호 작용하는 소프트웨어 메커니즘이다.NPM사용법먼저 npm을 사용하기 위해서는 npm을 설치하기 전에 먼저 package.json이라는 파일을 만들어야한다.package.json라는 파일은 설치된 패키지들을 보여주고 패키지들의 버전을 관리하는 파일이다. 1. 우선 콘솔창에 ' $ npm init.. [2024 여름방학 React.js 스터디] 정채은 #5주차 [2장 - 1] Sass Sass는 CSS의 기능을 확장해주는 전처리기이며, .scss와 .sass 두 가지 문법을 지원.scss 문법이 더 널리 사용되므로, 이 튜토리얼에서는 .scss를 중심으로 진행Sass 기본 개념Sass의 문법:.scss: CSS와 유사한 문법을 사용하여, 기존 CSS와의 호환성 굳.sass: 더 간결한 문법을 사용하지만, CSS와의 호환성은 떨어질 수 있음.변수 사용: Sass에서는 변수를 사용하여 반복되는 값들을 관리 가능 예를 들어, 버튼 색상을 변수로 정의하고 이를 여러 곳에서 재사용 가능Mixin: 반복되는 CSS 코드 블록을 재사용할 수 있는 방법 예를 들어, 버튼 색상에 대한 mixin을 정의하여 다양한 버튼 색상에 .. [2024 여름방학 React.js 스터디] 이가인 #5주차 리액트에서 컴포넌트를 스타일링 하는 가장 기본적인 방법: css 파일을 만들어서 컴포넌트에서 import 해서 사용하는 것 SassCSS Modulestyled-components 1. Sass시작node-sass 라이브러리 설치(Sass->CSS변환) cd styling-with-sass $ yarn add node-sass Button 컴포넌트 만들기& : 부모 선택자 참조 $blue: #228be6; // 주석 선언 background: $blue; // 주석 사용 &:hover { //:hover 상태(사용자가 요소 위에 마우스를 올렸을 때) background: lighten($blue, 10%); // 색상 10% 밝게 } &:active { //:ac.. [2024 여름방학 React.js 스터디] 김태일 #5주차 "리액트 컴포넌트 스타일링" 00. 리액트 컴포넌트 스타일링 방법- 컴포넌트를 스타일링 할 때 자주 사용되는 기술1) Sass2) CSS Module3) styled-components 01. Sass- CSS pre-processor- 복잡한 작업을 쉽게 할 수 있도록 해주고, 코드의 재활용성 및 가독성을 높여줌- 두 가지 확장자 (.scss/.sass) 를 지원01-1 시작하기1) 새로운 리액트 프로젝트 만들기$ npx create-react-app styling-with-sass 2) 해당 프로젝트 디렉터리에 node-sass(Sass를 CSS로 변환해주는 역할) 라이브러리 설치$ cd styling-with-sass$ yarn add node-sass 01-2 Button 컴포넌트 만들기1) src 디렉터리에 componen.. [2024 여름방학 React.js 스터디] 김민서 #5주차 Sass Css pre-processor, 복잡한 작업을 쉽게 할 수 있게 해주고 코드의 재활용성과 가독성을 높여준다두가지의 확장자 (.scss/ .sass) 를 지원한다 /* sass */$font-stack: Helvetica, sans-serif$primary-color: #333body font: 100% $font-stack color: $primary-color/* scss */$font-stack: Helvetica, sans-serif;$primary-color: #333;body { font: 100% $font-stack; color: $primary-color;} 1. 시작하기$ npx create-react-app styling-with-sas$ cd styling.. [2024 여름방학 React.js 스터디] 이종윤 #5주차 리엑트 컴포넌트 스타일링하기리액트에서 컴포넌트를 스타일링 하는 가장 기본적인 방법은 css 파일을 만들어서 컴포넌트에서 import 해서 사용하는 것 이다. 하지만 컴포넌트를 스타일링 할 때 다른 도구들을 사용하면 훨씬 더 편하게 작업을 할 수 있다.SassCSS Modulestyled-components이 블로그에서 위 3가지 기술들을 볼 것이다.1. Sass: CSS의 단점을 보완하기 위해 만든 CSS 전처리기이다. 보통 CSS를 사용하다보면 단순 반복되는 부분이 많은 등, 불편함이 느껴지기 마련인데, Sass는 이 부분을 거의 완전히 해소시켜주는 스타일시트 언어다. Sass에는 Sass와 SCSS가 있다.또한 CSS의 확장팩 같은 언어이기 때문에 CSS 파일 그 자체를 SCSS로 확장자만 바꾸어주어.. [2024 여름방학 React.js 스터디] 이정욱 #4주차 react 하기 힘들어요 10. useRef 로 특정 DOM 선택하기특정 DOM 을 선택하기 위해서 DOM selector를 사용할 수도 있지만, ex) getElementById리액트를 사용하는 프로젝트에서도 가끔 DOM 을 직접 선택해야 하는데그때 사용하는 것이 UseRef() 이다. 함수형 컴포넌트에서 ref를 사용하려면 useRef 라는 Hook 함수를 사용해준다. 사용하는 법은 1.react 라이브러리에서 useRef를 불러온다import React, { useState, useRef } from 'react'; 2. useRef 객체를 생성해준다.const nameInput = useRef(); 3. 생성한 객체를 선택하고 싶은 DOM 에서 ref 값으로 지정한다. 4. 선택한 DOM을 참조하고 싶을 때 해당 객체의 .. 이전 1 2 3 4 5 ··· 61 다음
