Jieunny의 블로그

📣 Node.js 자바스크립트 런타임 런타임 : 어떤 프로그램이 동작할 때, 프로그램이 동작하는 곳 웹 브라우저가 아닌 곳에서도 JS를 실행할 수 있다. ✔️ nvm Node.js Version Manager Node.js의 다양한 버전을 관리하는 프로그램 'node 파일이름' 으로 js파일 실행 가능 Node.js의 버전이 달라 발생하는 에러 쉽게 해결 가능 ➰ Node.js 의 버전을 손쉽게 옮겨 다닐 수 있다. nvm ls # 현재 nvm 을 통해 설치한 Node.js 버전 출력 nvm install 12.18.3 # Node.js 특정 버전 다운 # 이미 설치된 버전은 삭제되지 않음. nvm use 버전넘버 # 사용하고 싶은 Node.js 버전 실행 📣 npm & package.json ✔️ np..

📣 패키지와 패키지 매니저 ✔️ 패키지 : 여러 파일을 모아 하나의 파일로 저장하고 있는 압축파일 프로그램 파일 프로그램 설치 파일 프로그램 설치 설명서 프로그램에 대한 정보를 담은 파일 ✔️ 패키지 매니저 : 패키지의 설치, 변경, 삭제 등 관리를 편리하게 해주는 도구 모든 패키지의 저장소 위치를 저장하고 있다. Homebrew 사용 ✔️ neofetch : CLI에서 사용자의 정보를 알 수 있게 한다.

📣 Command-Line Interface(CLI) ✔️ 입출력(I/O) Input : 키보드, 마우스, 마이크 등 컴퓨터에 새로운 명령을 전달하는 소스 Output : input에 의해 모니터에 화면을 나타내거나 소리를 스피커로 전달하여 사용자가 인식할 수 있도록 하는 일 리눅스 터미널 : GUI(Graphic User Interface)가 개발되기 전부터 컴퓨터를 조작하기 위해 사용 GUI는 아이콘 등 사람이 보기 쉬운 형태로 출력하고, CLI는 글자로 출력 리눅스에서 CLI를 이용해 서버 컴퓨터와 소통할 수 있어야 한다. .은 현재 폴더 / ..은 현재 폴더봅다 앞에 있는 폴더 📣 기본 명령어(1) ✔️ Terminal(CLI) 사용 프롬프트 : 키보드의 입력을 확인하고 편집할 수 있는 한 줄의 ..

📣 와이어 프레임 웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계 단순한 선이나 도형으로 단순한 구조만 보여주기 화연의 영역을 구분하는 일 ➰ 각 영역에서 사용할 주요 태그 적기 📣 목업 (Mock-up) 실제 작품이 작동하는 모습과 동일하게 HTML을 작성 하드코딩하는 방식 ➰ 변수를 하나하나 입력해주는 방법 📣 HTML 구성하기 ✔️ 수직분할 & 수평분할 1. 수직분할 : 화면을 수직으로 구분해서 콘텐츠가 '가로'로 배치되게 한다. 2. 수평분할 : 분할된 각각의 요소를 구형으로 구분해서 내부 콘텐츠가 '세로'로 배치되게 한다. 1, 2를 차례로 진행한다. ✔️ 레이아웃 리셋 HTML 태그들이 기본적으로 가지고 있는 스타일을 초기화 해주는 것 * { box-sizing : border-box;..

📣 CSS ✔️ CSS 란? 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어 ✔️ UI & UX 란? UI (사용자 인터페이스) : 컴퓨터에 무지한 일반 사용자가 쉽게 사용할 수 있는 인터페이스 UX (사용자 경험) 직관적이고 쉬운 UI 에서 좋은 UX 나온다. ✔️ CSS 문법 구성 셀렉터, 선언 블록, 선언, 속성명, 속성값, 선언 구분자 body { color: red; font-size: 30px; } ✔️ CSS 파일 추가 1. 외부 스타일 시트 html 파일 안에 태그 안에서 href 속성을 통해 html, css 파일을 연결 rel : 연결하고자 하는 파일의 역할이나 특징 href : 파일의 html과의 상대적인 위치 (절대 경로도 가능) 2. 내부 스타일 시트 css 내용을 별도 ..

📣 웹 개발 구성 요소 HTML : 구조 CSS : 스타일 JS : 상호작용 📣 HTML 기본 구성 ✔️ 웹페이지의 틀을 만드는 마크업 언어 ✔️ HTML은 태그들의 집합 ✔️ : 이 문서가 html 임을 명시 ✔️ : html 시작태그 ✔️ Hello 📣 HTML 태그 : opening태그와 closing태그로 구성 ✔️ 태그 한 줄을 차지 ✔️ 태그 컨텐츠 크기만큼 공간을 차지 ✔️ 태그 이미지 삽입 태그 ✔️ 태그 링크 삽입 target 지정해주면 새 탭에서 링크가 열린다. 링크 ✔️ 태그 리스트 태그 순서가 있는 리스트는 사용 first second third ✔️ 태그 checked unchecked a b ✔️ 태그 줄바꿈 가능 📣 HTML 속성(attribute) attribute name ..