본문 바로가기

분류 전체보기328

[Node.js] npm(Node Package Manager) 정리 npm(Node Package Manager) Node.js가 설치될때 npm도 같이 설치된다. npm이란 전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)을 관리하는 페키지 매니저다. 패키지란? 특정 기능과 관련된 여러 모듈을 한 폴더 안에 넣어 관리하는데 이를 패키지라고 한다. 모듈이란? 프로그램을 이루고 있는 독립적이고 재사용할 수 있는 코드의 집합체를 의미한다. 하나 또는 여러개의 모듈이 모여서 프로그램이 만들어진다. 패키지를 웹 프로젝트에 사용하는 방법 과거 링크, 스크립트 태그로 어떤 기능을 프로젝트에서 연결해 사용 요즘 최신의 웹 프론트앤드 개발에서는 프로젝트에 패키지를 직접 설치해 별도의 가공처리를 거쳐 결과물로 만들고 그렇게 만들어진 결과물을 웹사이트로 동작시킨다 Node.js 환경.. 2022. 5. 26.
[Node.js] package.js 파일 정리 package.json이란? 프로젝트 터미널에 npm init 명령어를 실행하면 package.json 파일이 루트 디렉토리에 자동으로 생성된다. package.json에 작성되는 정보는 크게 2개로 나눌 수 있다: 프로젝트의 정보: 현재 프로젝트에 관한 정보를 명시 패키지 버전 정보: 패키지 매니저(npm, yarn)를 통해 설치한 패키지의 목록과 버전 명시 package.json 파일 해석 package.json 파일 생성 npm init -y 개발용으로 사용할 parcel bundler 패키지 설치 npm install parcel-bundler -D 패키지를 설치하면 node modules에 해당 패키지가 다운받아진다. node_modules 폴더 안을 확인해보면 설치한 parcel bundler.. 2022. 5. 26.
[자바스크립트] DOM 요소에 접근하기 (DOM이란? DOM API 정리) 문서객체모델(DOM) DOM(Document Object Model) Document Object Model의 줄임말로 일반적으로 DOM이라고 부른다 DOM이란 HTML 문서(document)를 객체 기반 모델로 표현한것을 말한다 HTML 문서의 모든 요소를 자바스크립트로 조작하기 위해 객체로 해석한다 DOM을 사용하면 웹 문서의 모든 요소를 객체로 해석이 가능해 웹 문서의 텍스트, 이미지, 표 등 모든 요소를 객체로 생성, 접근, 수정, 삭제가 가능하다 Document HTML 문서가 웹 브라우저에 로드되면 document 오브젝트가 된다 document 오브젝트는 HTML 문서의 최상단 노드다 document 오브젝트는 window 오브젝트의 프로퍼티다 즉 window.document로 접근할 수 있.. 2022. 5. 26.
[자바스크립트/한줄정리] Getter와 Setter의 개념 Getter 값을 얻는 용도 const boxEl = document.querySelector(‘.box’); console.log(boxEl.textContent) Setter 값을 지정하는 용도 const boxEl = document.querySelector(‘.box’); box.textContent = ‘maple’; 2022. 5. 26.
[자바스크립트/한줄정리] 메서드 체이닝(Method Chaining)이란? 자바스크립트에서 메서드를 체인처럼 연결해서 사용하는 기법 const a = ‘Hello’; // 메서드 체이닝 기법 사용 const b = a.split(‘’).reverse().join(‘’); console.log(a); // ‘Hello’ console.log(b); // ‘~olleH’ 예제에서 사용한 배열의 메서드 정리: split: 문자를 인수 기준으로 쪼개서 배열로 반환 reverse: 배열 뒤집기 join: 배열을 인수 기준으로 문자로 병합해 반환 2022. 5. 26.
[자바스크립트/한줄정리] 인자(parameter)와 인수(argument)의 차이 함수를 선언할때 사용하는 값 parameter는 한국어로 매개변수, 인자라고 불리며 함수를 호출할때 사용하는 값 argument는 한국어로 인수라고 한다. function add(a, b) { // a, b는 매개변수, 인자, parameter return a + b; } add(1, 2); // 1, 2는 인수, argument 2022. 5. 26.
[자바스크립트] 조건문 if문, switch문 정리 ⚠️ 이 포스팅은 드림코딩을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁 조건문(Conditional Operator) 조건문이란 특정한 조건 아래서만 코드가 실행되게 하는 구문 if문 조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문 if (name === "maple") { console.log(`welcome, ${name}!`); } else if (name === "guest") { console.log(`welcome, ${name}!`); } else { console.log("unknown"); } switch문 해당 조건에 맞는 값을 case.. 2022. 5. 25.
[자바스크립트] 함수(function) 정리 (함수 선언과 호출, 매개변수와 인수, 기본값 매개변수, 나머지 매개변수, 함수의 선언식과 표현식, 함수의 종류 6가지) ⚠️ 이 포스팅은 드림코딩을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 자바스크립트 5. Arrow Function은 무엇인가? 함수의 선언과 표현 | 프론트엔드 개발자 입문편(JavaScript ES6) 자바스크립트 기초 2. 함수 | 함수 정의, 호출, 그리고 콜백함수 1. 함수(function) 반복되는 명령어를 묶어 뒀다가 필요할 때마다 부르는 것 특정 일을 하는 명령어의 묶음 한가지의 일을 하거나 값을 연산하기 위해 사용된다 하나의 함수는 한가지의 일만 해야한다 input(ingredient: parameter) and output(result: return or operation)의 묶음 2. 함수를 사용하는 이유 반복되는 코드를 재사용할 수 있다 3.. 2022. 5. 24.
[자바스크립트] 변수 선언과 할당 (var, let, const의 차이, 변수명 규칙) 1. 변수(variable) 변수키워드 변수명 = 데이터; const myName = 'maple'; 데이터를 저장하고 참조(사용)하는 데이터의 이름 컴퓨터가 데이터를 담아 두기 위해서 사용하는 공간 계속 변하는 값이면서, 그 값을 저장하는 공간 변수에 데이터를 할당할 때는 '='이라는 기호를 사용 수학의 '같다'의 의미와는 다르게 기호 왼쪽(변수이름)에 오른쪽의 정보(내용)을 넣는다는 의미 2. 변수 선언과 할당 변수선언 변수키워드 변수명; var age; 변수할당 변수 선언이 미리 되어있어야 한다. 변수명 = 값; age = 10; 변수 선언과 할당 동시에 하기 변수키워드 변수명 = 값; var age = 10; 3. 변수명 규칙 1. 변수명 첫글자로 숫자가 올 수 없다 2. 변수명 첫글자로 언더바(.. 2022. 5. 24.
[자바스크립트] 자바스크립트의 데이터 종류 6가지 (원시타입과 참조타입) 자바스크립트에서 데이터가 저장되는 2가지 방식 1. 원시타입 (Primitive Type) 더 이상 작은 단위로 나눠질 수 없는 싱글 타입 값(value) 자체가 메모리에 저장 종류: string, number, boolean, null, undefined, symbol 원시타입이 메모리에 저장되는 방식 1. 변수 a에 숫자형 데이터 1이 할당되었다 메모리 주소 M1에 숫자형 데이터 1이 저장되고 변수 a는 메모리 주소 M1을 가리킨다 2. 변수 b에 변수 a를 할당하였다 변수 a가 가리키는 메모리 주소를 변수 b도 가리키게된다 결과적으로 변수 b에는 숫자형 데이터 1이 할당된다 3. 변수 b에 새로운 값 7을 다시할당하였다 메모리 주소 M2에 숫자형 데이터 7이 저장되고 변수 b는 메모리 주소 M2을 .. 2022. 5. 24.
[자바스크립트/한줄정리] 제로베이스 넘버링(Zero-based Numbering)이란? 자바스크립트에서 0을 기반으로 번호를 시작하는 것 예시 배열의 첫번째 데이터에 접근하기 위해 중괄호 안에 인덱스값 0을 입력한다 let fruits = ['Apple', 'Banana', 'Cherry']; console.log(fruits[0]) // 'Apple' 2022. 5. 24.
[웹개발] 프로그래밍 변수명 표기법 4가지 (dash case, snake case, camel case, pascal case) 1. dash-case (kebab-case) lorem-ipsum-dolor-sit-amet 단어와 단어를 대쉬(-)로 이어준다 HTML, CSS에서 주로 사용 2. snake_case lorem_ipsum_dolor_sit_amet 단어와 단어 사이를 언더바(_)로 이어준다 HTML, CSS에서 주로 사용 3. camelCase loremIpsumDolorSitAmet 처음에는 소문자, 연결되는 단어는 대문자로 시작 JS에서 주로 사용 4. PascalCase LoremIpsumDolorSitAmet 모든 단어의 첫글자는 대문자로 시작 JS에서 주로 사용 (클래스를 선언) 2022. 5. 24.
[CSS] transform에서 자주 사용하는 함수 정리, perspective 함수와 속성, backface-visibility 속성 transform 변환함수를 속성값으로 사용해 요소를 변환시키는 속성 원근거리를 나타내는 함수 perspective()를 transform의 value로 제일 앞에 사용해야한다 원근거리함수를 속성값으로 주고 싶지 않다면 변환함수만 속성값으로 넣을 수 있다 div { transform: perspective(), 변환함수1 변환함수2 변환함수3…; } transform의 속성값 종류 (변환함수 종류) 1. translate(x, y) 요소를 화면에서 X축으로 x만큼, Y축으로 y만큼 이동 단위: px 개별함수로도 사용 가능 translateX(x): 요소를 화면에서 X축으로 x만큼 이동 translateY(y): 요소를 화면에서 Y축으로 y만큼 이동 2. scale(x, y) 요소의 크기를 X축으로 x배,.. 2022. 5. 23.
[Node.js/한줄정리] 모듈(Module) vs 패키지(Package) ​모듈 모듈이라는 단어는 모듈화 프로그래밍이라는 소프트웨어 디자인 기법에서 나온 말이다. 모듈화 프로그래밍이란 프로그램을 개발할 때 코드를 독립적이고 재사용할 수 있는 작은 모듈로 이루어지게 해야한다는 컨셉이다. 즉, 모듈이란 프로그램을 이루고 있는 독립적이고 재사용할 수 있는 코드의 집합체를 의미한다. 하나 또는 여러개의 모듈이 모여서 프로그램이 만들어진다. 기능을 가지고 있는 파일로 주로 자바스크립트에서 자주 사용되는 용어다. 패키지 특정 기능과 관련된 여러 모듈을 한 폴더 안에 넣어 관리하는데 이를 패키지라고 한다. 비슷한 기능을 가지고 있는 파일의 모음집(폴더)로 npm에서 자주 사용되는 용어다. 2022. 5. 15.
[Node.js] package.json에서 안쓰는 패키지 삭제하기 사용하고 싶지 않은 모듈을 dependencies에서 삭제해준다 { "name": "test", "version": "1.0.0", "main": "index.js", "license": "MIT", "devDependencies": { "parcel-bundler": "^1.12.5", "sass": "^1.51.0" }, "scripts": { "dev": "parcel index.html", "build": "parcel build index.html" }, "dependencies": { "@popperjs/core": "^2.11.5", "bootstrap": "^5.1.3", "regenerator-runtime": "^0.13.9" } } @popperjs/core와 bootstrap 삭제 .. 2022. 5. 15.
[Sass/Scss] package.json에서 Scss를 CSS로 변환하는 명령어 생성하기 package.json 파일에서 scripts 안에 명령어 등록해주기 "scripts": { "명령어이름": "sass 파일이름.scss:파일이름.css" } { "name": "test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "sass-to-css": "sass main.scss:main.css" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "sass": "^1.51.0" } } 터미널에 다음 명령어를 실행하면 Scss 파일이 CSS 파일로 변환되어진다 npm run 명령어이름 npm run sass-to-css 2022. 5. 13.
[웹개발/한줄정리] 파셀(Parcel) vs 웹팩(Webpack) 간단비교 Parcel과 Webpack 모두 모듈화된 코드를 브라우저에서 실행할 수 있도록 파일을 합쳐주는 번들러의 한 종류다. Parcel Webpack 보다 빠르고 설정이 필요 없다 (zero-configuration) 기능이 제한적이다 Webpack Parcel 보다 더 많은 기능을 제공한다 구성파일에 대한 설정이 필요하다 2022. 5. 13.
[Firebase] 프론트엔드만으로 웹서비스 만드는법 (서버와 파이어베이스소개, Baas 서비스, 서버리스 서비스 설명) ⚠️ 이 포스팅은 스파르타코딩클럽 리액트 기초반을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 리액트 기초반 4-5 Firebase란? 4-6 Firebase 설정하기 4-7 FireStore 설정하기 리액트로 웹서비스를 만들때의 문제점 리액트 프로젝트로 투두 리스트라는 웹 서비스를 만들었다고 가정하자. 투두 리스트에 새로운 리스트를 생성하고 웹브라우저를 새로고침하면 추가했던 리스트가 유지되지 않고 내가 변경해준 데이터가 사라진다. 새로고침했을때 데이터가 유지되지 않는 이유는 데이터가 프론트에만 저장이 되고 있기 때문이다. 즉 업데이트한 데이터가 영구적으로 저장되는 것이 아니라 자바스크립트 메모리와 브라우저 캐시에만 저장된다. 또한 내가 만든 투두 리스트는 로컬 .. 2022. 5. 13.
[리액트/에러해결] Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML` ⚠️ 에러내용 ❓ 에러발생이유 styled-components를 사용해 input 컴포넌트를 생성한후 input 컴포넌트 안에 자식 태그를 넣어주었다 추가하기 const Input = styled.input` max-width: 350px; min-height: 10vh; background-color: #fff; padding: 16px; margin: 20px auto; border-radius: 5px; border: 1px solid #ddd; `; ❗️ 해결방법 input 태그는 자식 태그를 가질 수 없기 때문에 태그를 감싸주고 싶다면 div를 사용해야한다 2022. 5. 13.
[CSS/문제해결] input 태그에 focus했을때 border 색깔 변경하는 방법 ❓ 문제내용 input 태그에 focus했을때 CSS로 border 속성을 줬는데 적용이 안된다 input:focus { border: 1px solid orange; } ❗️ 해결방법 브라우저에 기본값으로 설정되어 있는 outline 속성값을 none으로 지정해주어야 border 색깔을 변경할 수 있다 input:focus { outline: none; border: 1px solid orange; } 2022. 5. 13.

티스토리툴바