전체 글 89

[GIT] git의 작업 영역

Git의 작업 영역은 어떻게 나뉠까? 크게 3가지로 나뉜다고 한다. 1. working directory - 작업을 하는 프로젝트 디렉토리 2. staging area - git add를 한 파일들이 존재하는 영역. - 커밋을 하면 staging area에 있는 파일들만 커밋에 반영됨. 3. repository - working directory의 변경 이력들이 저장, 즉 커밋들이 저장되는 영역 working directory에서 파일을 작성을 하고, git add를 해서 파일을 staging area에 올리고, git commit -m "커밋 할 이름"을 실행해서 staging area에 있는 파일들을 커밋으로 남기는 것.

GIT 2023.01.20

[GIT] error: remote origin already exists. 오류 해결 방법

VSCode에서 작업하던 중 error: remote origin already exists. 이런 에러가 발생했다. 해결방법은 너무 간단했다. 원래 연결되어 있던 저장소와의 연결을 끊고 소스 코드를 올리려고 하는 저장소와 새로 연결을 해주면 되는 그런 것..! 1. 우선 당황하지 않고 이렇게 원래 연결되어 있던 저장소를 없애주고 git remote remove origin 2. 올리려고 하는 깃허브의 주소를 연결해주면 git remote add origin "깃허브 주소" 3. 끄읕 참 쉽죠?

GIT 2023.01.20

[JS] Webpack 기초

WebPack 여러 개의 파일을 하나의 파일로 묶어주는 모듈 번들러 (Module Bundler) [ 장점 ] 웹 애플리케이션의 로딩속도를 줄이기 위한 방법 : 클라이언트 (브라우저) 에서 서버로 요청하는 개수를 줄이는 것 여러 파일의 자바스크립트 코드를 압축 -> 최적화 할 수 있음 -> 로딩에 대한 네트워크 비용 절감 모듈 단위의 개발이 가능 -> 가독성과 유지보수가 쉬움 최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환

JavaScript 2023.01.20

[Node] NPM 기초

NPM 이란? - Node Package Manager - 명렁어로 자바스크립트 라이브러리를 설치, 관리할 수 있는 패키지 매니저 - 패키지 = 라이브러리 = 모듈 = 프로그램이 사용하는 기능 같은 것 [ 장점 ] 프로젝트에서 필요한 라이브러리를 쉽게 다운받을 수 있음 프로젝트에서 사용하는 많은 라이브러리의 버전과 의존성 관리가 용이 필요한 라이브러리를 CDN 보다 편하게, npm 명령어를 통해 프로젝트 로컬 환경 및 전역 환경에 쉽게 설치, 관리할 수 있음 빌드하는 명령어를 자동화하여 프로젝트를 관리할 수 있음

Node 2023.01.20

[JavaScript] JavaScript의 모듈들

1. 모듈(Module)이란? - 개발하는 애플리케이션의 규모가 커지면 파일을 여러 개로 분리하는 것이 좋음 - 이 때 분리된 하나의 파일을 모듈이라고 부름 - 모듈을 대개 클래스 하나 혹은 특정한 목적을 가진 여러 개의 함수를 포함하는 라이브러리로 구성되어 있음 [ 장점 ] 유지보수 용이 기능들이 모듈화가 잘 되어 있는 경우, 의존성을 줄일 수 있기 때문에 기능의 개선이나 수정이 용이 네임스페이스화 코드의 양이 많아질수록 전역 스코프에는 존재하는 변수명이 겹치는 경우가 존재 -> 이때 모듈로 분리하면 모듈만의 네임스페이스를 따로 가지기 때문에 해당 문제를 해결할 수 있음 재사용성 같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 재활용 가능 2. 모듈 시스템 - 모듈을 필요시에 불러오는 방법 ..

JavaScript 2023.01.20

[JavaScript] JavaScript의 API들

2.1 자바스크립트 유용한 Array APIs 1) map ( ) 배열 내의 모든 요소에 대해 주어진 함수를 호출한 결과를 모아서 새로운 배열을 반환 const numbers = [1, 2, 3, 4, 5, 6, 7]; const result = numbers.map((number) => number * 2); console.log(result); // [2, 4, 6, 8, 10, 12, 14] 2) some ( ) 배열 안의 한 요소라도 주어진 판별 함수를 통과하는지 테스트 const animals = ["강아지", "고양이", "토끼", "병아리", "호랑이", "말"]; const result = animals.some((animals) => animals === "강아지"); console.lo..

JavaScript 2023.01.20

[JavaScript] IT 용어들 (API, 동기, 비동기, 프론트엔드, 백엔드)

1. IT 용어 이해 1.1 API란 무엇인가? - Application Programming Interface - 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스 - User Interface, 즉 사용자와 프로그램과 소통하기 위한 접점 1.2 동기와 비동기란? - 동기 : 답변을 기다리는 것 - 비동기 : 답변을 기다리지 않는 것 1.3 프론트엔드 & 백엔드란? 프론트엔드 : 사용자가 마주 보는 인터페이스로, 주로 웹 및 모바일의 사용자 인터페이스 (UI) / 사용자 경험 (UX)를 개발하는 데에 초점 - 언어 : HTML, CSS, JavaScript - 테크놀로지 : AngularJS, ReactJS, Bootstrap 백엔드 :..

JavaScript 2023.01.20

[JavaScript] JavaScript 입문

0. 자바스크립트 입문 강좌 0.1 DOM이란? - Document Object Model - 웹 문서를 제어하기 위해 웹 문서를 객체화 한 것 - 웹 문서, 즉 HTML을 객체화 함으로써 문서를 제어할 수 있음 0.2 BOM이란? - Browser Object Model - 웹 브라우저를 제어하기 위해 브라우저를 객체화 한 것 0.3 script 태그 defer, async - HTML에서 자바스크립트 파일을 사용할 때, 태그로 자바스크립트 파일을 불러옴 - 브라우저에서는 HTML 파일의 위부터 아래로 순차적으로 파싱 -> HTML이 파싱 되기도 전에 DOM 요소에 접근하려고 할 때, DOM 요소에 접근하려고 했기 때문에 발생한 문제 생성되지 않은 객체에 대한 문제 발생 [ 해결방법 1 ] body 태..

JavaScript 2023.01.20