profile
배운 것을 기록하는 곳 💻🙂

CSS Flexbox

HTML CSS - container CSS - item

2021년 12월 13일
·
0개의 댓글
·

package.json과 package-lock.json

package.json은 프로젝트의 정보를 정의하고, 의존하는 패키지 버전 정보를 명시하는 파일이다.일반적으로 루트 디렉토리에 위치하며, 작성되는 정보를 크게 프로젝트의 정보, 패키지 버전 정보로 나눌 수 있다.프로젝트의 정보: name, version 영역패키지 버전

2021년 12월 1일
·
0개의 댓글
·

npm ci

npm install은 package.json 내의 dependencies와 devDependencies를 기준으로 패키지 파일을 설치하는 명령어이다. package.json에는 ^를 이용하여 버전을 범위로 표현하는데, 협업하는 과정에서 오류가 생길 수 있다.npm

2021년 12월 1일
·
0개의 댓글
·

Vue/vite 프로젝트 생성

npm 을 통해 vue 설치g 옵션(전역설정)을 지정하지 않으면 node_modules라는 폴더를 생성하고 해당 폴더 내에 다운로드한 라이브러리를 위치시킨다.npm을 이용하여 Vue를 설치하면 Webpack이나 Rollup같은 다양한 모듈 번들러를 이용해 프로젝틀를 컴

2021년 11월 30일
·
0개의 댓글
·

Javascript this 키워드

결과: Window결과: Window ('use strict' 모드에서는 undefined)결과: 메소드를 가지고 있는 object1 { data: 'kim', function1: \[Function: function1] }결과: 메소드를 갖고 있는 object2.da

2021년 11월 30일
·
0개의 댓글
·

예외처리

구문 오류(syntax error) 프로그램 실행 전에 발생하는 오류. 코드가 실행 되지 않다. 콘솔에 Syntax Error 라는 오류 메세지가 뜬다. 예외 (exception) 또는 런타임 오류(runtime error) 프로그램 실행 중에 발생하는

2021년 11월 22일
·
0개의 댓글
·

API

서로 다른 프로그램에서 요청과 응답을 주고 받을 수 있게 만든 체계. 클라이언트가 요청을 보내면 서버가 요청을 받아서 응답을 주는 방식으로 진행된다.API는 서버 개발자가 개발하고, 클라이언트 개발자는 그 API를 사용한다.API를 만들 때는 데이터를 주고 받는 기능도

2021년 11월 22일
·
0개의 댓글
·

Git

다음은 깃을 사용하기 위해서 반드시 알고 이해하고 넘어가야 하는 용어들입니다.작업공간 (working space)개인 컴퓨터 환경에서 소스코드를 편집하는 일반적인 프로젝트 폴더를 일컬어 작업공간이라고 합니다.저장소 (저장공간; 레포지토리; repository)작업공간을

2021년 11월 22일
·
0개의 댓글
·

정규 표현식

정규표현식은 문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴이다. 주로 프로그래밍 언어나 텍스트 에디터 등에서 문자열의 검색과 치환을 위한 용도로 쓰이고 있다.정규 표현식은 복잡한 조건이 필요한 경우,사용자에게 입력을 받을 때 여러가지 조건을 주면서

2021년 11월 22일
·
0개의 댓글
·

Javascript 배열 관련 메서드

배열 뒷부분의 값을 삭제배열 뒷부분에 값을 삽입배열 앞부분에 값을 삽입배열 앞부분의 값을 삭제배열의 특정위치에 요소를 추가하거나 삭제splice( index, 제거할 요소 개수, 배열에 추가될 요소 )slice(startIndex, endIndex)배열의 startIn

2021년 11월 22일
·
0개의 댓글
·

CSSOM (CSS Object Model)

브라우저가 HTML을 DOM으로 만들었다면, HTML에 임베디드된 스타일, CSS 파일에 정의된 스타일, HTML 태그에 정의한 스타일, 브라우저의 기본 스타일 등 모든 스타일 정보를 합쳐서 CSSOM을 만든다.즉, DOM와 CSS의 요소를 병합해서 CSSOM을 만든다

2021년 11월 4일
·
0개의 댓글
·

CSR과 SSR

출처: https://www.youtube.com/watch?v=iZ9csAfU5Os 엘리의 드림코딩 - 서버사이드 렌더링 (개발자라면 상식으로 알고 있어야 하는 개념 정리 ⭐️) 1990년 중반까지는 모두다 static 사이트였다. 서버에 만들어진 HTML문서가 있

2021년 11월 2일
·
0개의 댓글
·

TypeScript로 DOM 조작하기

출처: https://youtu.be/iZjfnoF784k코딩애플 - TypeScript로 웹개발하려면 HTML 조지는법을 알아야html, tsconfig.json 파일을 아래와 같이 세팅한다.객체를 선택한 후 바로 조작하려고 하면 에러가 난다.선택한 객체가

2021년 11월 1일
·
0개의 댓글
·

TypeScript를 쓰는 이유 & 필수 문법

출처: https://youtu.be/xkpcNolC270코딩애플 - 타입스크립트 쓰는 이유 & 필수 문법 10분 정리JavaScript 문법을 그대로 이용하면서, 타입 부분을 사용할 수 있는 JavaScript 업그레이드 버전 언어.JavaScript는 Dy

2021년 11월 1일
·
0개의 댓글
·

자바스크립트 프로미스 | JavaScript Promise

출처: https://youtu.be/JB_yU6Oe2eE (엘리의 드림코딩)Promise is a Javascript Object for asynchronous operation.Promise는 자바스크립트 안에 내장된 object.비동기적인 것을 수행할 때

2021년 8월 10일
·
0개의 댓글
·

자바스크립트 콜백함수 | JavaScript Callback

출처: https://www.youtube.com/watch?v=s1vpVCrT8f4&t=1093s (엘리의 드림코딩)Javascript is synchronousExecute the code block in order after hoisting자바스크립트는

2021년 8월 10일
·
0개의 댓글
·

CSS - content-visibility, contain

content-visibilitycontent-visibility는 2020년 8월에 Chrome 85에 추가된 CSS 속성이다.화면 밖 콘텐츠의 렌더링을 생략함으로써 초기 로드 시간을 개선한다.UserAgent가 layout, painting을 포함한 요소의 렌더링

2021년 3월 9일
·
0개의 댓글
·

이번 프로젝트에서 알게 된 것들 - 2

swiperhttps://swiperjs.com/슬라이더를 구현하게 해주는 라이브러리다양한 메서드와 설정을 지원해서 사용하기 편하며 하위 브라우저에서도 문제없이 사용 가능하여 크로스브라우징 측면에서도 뛰어나다.필수적으로 다음 순서로 클래스를 지정해 주어야 한다

2021년 2월 1일
·
0개의 댓글
·

이번 프로젝트에서 알게 된 것들 - 1

Xd 로 작업된 디자인은 폰트의 line-height 값이 폰트 영역의 높이값과 일치하지 않음.—> 제플린에 폰트의 라인헤이트 값과 동일하게 스타일을 주어도 디자인과 동일하게 맞출수 없음.—> 해결 방안: 폰트 사이즈별 line-height, letter-spacing

2021년 2월 1일
·
0개의 댓글
·

Nunjucks

Nunjucks란?모질라의 자바스크립트 템플릿 언어다국어 처리, 공통역역 Include, 페이지별 분기처리, 재사용 컴포넌트 작성 등에 사용한다.변수를 사용하려면 {{}} 안에 사용할 변수를 넣어준다.객체를 전달하는 경우에는 객체에 .을 붙여서 {{ food.fruit

2021년 1월 28일
·
0개의 댓글
·