[클라우딩 어플리케이션 엔지니어링 TIL] 240201 - 피그마 컴포넌트 / Node.js 기초

Intro

---

오늘은 리액트에 들어가기 앞서, 리액트 소개와 Node.js에 대해 학습했다.

내일부터 배우게 될 리액트 기대가 된다.

 

 

 

 

오늘 학습한 내용

: 피그마 / Node.js

---

피그마 - 컴포넌트

• 레이어 클릭 시 Create Component 버튼이 활성화 된다. 

 

• 컴포넌트는 레이어 상위에 생성이 되고 최초 컴포넌트가 메인 컴포넌트가 된다.
• 메인 컴포넌트를 가지고 여러 인스턴스를 다른 페이지에서도 생성할 수 있다.
• 메인 컴포넌트에 업데이트가 발생하면 자동으로 인스턴스에도 업데이트가 된다.
• 인스턴스를 수정하는 것은 가능하나 가급적 지양한다.
• 독립 레이어를 사용하고 싶다면 컴포넌트를 해제하는 Detach Instance를 클릭해야 한다.
• 오른쪽 사이드바에 있는 Properties는 메인 컴포넌트에서만 설정이 가능하다
  • variant: 설정한 옵션 값을 인스턴스에서 선택할 수 있다.

 

피그마 컴포넌트 실습

 

• variant에서 값을 true/false나 on/off로 설정할 경우 인스턴스에서 스위치 아이콘으로 보여지게 된다.

 

 

 

피그마 - 반응형 Constraints

 

 

• CSS에서 Position과 유사하다. (부모에 맞춰 동작하는 기능)
• 프레임 하위 레이어 클릭 시 Constraints 활성화 됨
• constraints: 제약, 제한
• 수평, 수직 조정 가능
• scale: 부모의 넓이에 따라 크기가 조정이 됨
• cmd + 프레임 resize를 할 경우, constraints 관계 없이 프레임 사이즈를 자유롭게 바꿀 수 있다.

 

👩‍💻 Top bar (header)에는 Left and right, Top을 주고 Bottom bar (footer)는 Left and right, Bottom을 설정하면 반응형 UI를 편하게 제작할 수 있음!!

 

 

min width, max width

• 피그마에 새로 추가된 기능
• 오토레이아웃이 설정되어 있어야 한다.
• min width, max width 설정 시 크기가 줄어들어/커져도 min/max width 이하 크기로 줄어들/커지지 않는다.

 

 

 

 

---

 

Node.js 기초

자바스크립트는 웹 브라우저에 내장된 자바스크립트 엔진으로 실행이 된다.

기존에 자바스크립트는 웹 브라우저 외에선 사용할 수 없었는데 Chrome 브라우저에서 사용하는 자바스크립트 런타임인 V8엔진으로 브라우저 외에서도 사용할 수 있는 자바스크립트 런타임인 Node.js가 등장하게 되었다.

이후, 어떤 환경에서도 자바스크립트를 실행할 수 있게 되었다.

 

Node.js를 서버 개발 기술로 잘못 알고 있는 경우가 꽤 있으나 Node.js는 단순 자바스크립트 런타임이다.

(자바스크립트는 게임이고 Node.js는 게임을 구동하는 게임기에 비유할 수 있다.)'

 

 

Node.js 설치

 

https://nodejs.org/en

Node.js

 

LTS(Long Term Support)는 장기적으로 지원하는 안정적인 버전이라는 뜻으로, 보안 취약점이나 결함에 대한 유지 보수를 오랫동안 지원하는 의미로 LTS 버전을 설치해 사용하는 것을 권장한다.

 

 

모듈 내보내기

require이라는 Node.js 내장 함수로 모듈 내보내기를 할 수 있다. (node.js에서만 가능하므로 바닐라 자바스크립트에선 불가함)

• index.js

require('./calc')

console.log(calc.add(1, 2)) // 3
console.log(calc.sub(10, 2)) // 8

• calc.js

const add = (a, b) => a + b
const sub = (a, b) => a - b

module.exports = {
  moduleName: 'calc-module',
  add: add,
  sub: sub
}

 

 

module.exports로 내보내고 require로 불러오는 모듈 시스템 ➡️ commonJS

외에도 모듈 시스템으로 ES modules이 존재함 (import/export)

 

패키지 생성 - NPM (Node Package Manager)

https://www.npmjs.com/

npm | Home

• npm init
  • node.js 패키지 초기화 명령어
  • package.json이 생성됨
• package-lock.json
  • npm install시 생성됨 
  • 정확한 버전 명은 package-lock.json에서 알 수 있다.

 

 

마무리

---

1/30일 강의와 오늘 강의를 다 들었다. 😃

내일은 1/31일 강의와 내일 강의 다 끝내야지..!!