본문 바로가기

전체 글328

[자바스크립트/한줄정리] 제로베이스 넘버링(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.
[웹개발/한줄정리] 컴파일(Compile) vs 빌드(Build) 차이점 컴파일(Compile) 사람이 프로그래밍 언어로 작성한 소스코드를 컴퓨터가 이해할 수 있는 바이너리 언어로 작성된 코드로 변경하는 것 컴파일러(Compiler)는 개발자가 작성한 소스코드를 컴퓨터가 이해할 수 있는 코드로 변경해주는 프로그램이다 빌드(Build) 소스코드 파일을 컴퓨터에서 실행할 수 있게 변환하는 과정으로 빌드과정에 컴파일이 포함되어 있다 2022. 5. 13.
[웹개발/한줄정리] dist 폴더란? distribution의 약어로 배포할 수 있는 파일이 들어있는 디렉토리 2022. 5. 13.
[Node.js] npm 명령어 정리 명령어 의미 npm help npm 명령어의 종류와 사용법을 알고 싶을때 사용 npm init 프로젝트를 npm에서 관리하도록 설정 (package.json 파일 생성) 프로젝트 시작시 가장 먼저 해야할일 npm init -y 기본 설정을 위한 질문을 생략한 후 프로젝트를 바로 npm에서 관리하게 설정 (package.json 파일 생성) npm install package.json에 dependencies 맞춰 프로젝트에 필요한 패키지를 모두 설치 npm install 패키지 설치 npm install 패키지를 해당 버전으로 설치 npm i npm install 패키지이름 축약형 npm install —save-dev 패키지를 개발용으로 설치 (개발할때만 필요하고 브라우저에서는 필요없는 패키지를 설치할.. 2022. 5. 13.
[CSS] transition 속성으로 애니메이션 효과 주기 transition 요소의 전환(시작과 끝) 효과를 지정하는 단축속성 div { transition: 속성명, 지속시간(필수), 타이밍함수, 대기시간; } div { transition: transition-property, transition-duration(필수), transition-timing-function, transition-delay; } transition의 속성값 1. transition-property 전환 효과를 사용할 속성 이름을 설정 all: 모든 CSS 속성에 적용 (default) 속성이름: 전환 효과를 사용할 속성 이름 명시 div 요소에 있는 어떤 속성에 변화가 생길때 transition 효과를 1초동안 적용한다 div { transition: all 1s; } div 요.. 2022. 5. 11.
[Bootstrap] Bootstrap을 패키지로 설치할때 사용법 정리 패키지 설치 yarn add bootstrap으로 부트스트랩 설치 node modules에 bootstrap 모듈이 설치된다 스타일 적용 CSS, Sass 둘 중 하나 선택 CSS 파일을 사용할경우: import 'bootstrap/dist/css/bootstrap.min.css';코드로 부트스트랩 스타일 내 프로젝트에 적용하기 Sass 파일을 사용할경우: @import '~bootstrap/scss/bootstrap';코드로 부트스트랩 스타일 내 프로젝트에 적용하기 JS 적용 yarn add @popperjs/core 로 popperjs 라는 패키지 설치 JS 파일에: import * as Popper from '@popperjs/core';와 import { 사용할 컴포넌트 이름 } from '../.. 2022. 5. 10.

티스토리툴바