본문 바로가기

전체 글328

[웹개발/한줄정리] 코드 난독화 빌드된 결과(제품)는 브라우저에서 해석되는 용도이므로 용량을 축소하기 위해 파일을 압축하는 최적화를 거친다. 이렇게 개발시 작성된 코드를 최적화를 위해읽기 어렵게 만드는 작업을 코드 난독화라고 한다. 즉, 개발자가 보는 용도가 아닌 웹브라우저에서 동작시키는 용도로 만들어진 코드가 코드 난독화 과정을 거친 코드다. 2022. 5. 27.
[리액트] react-router-dom v6 사용법 ⚠️ 이 포스팅은 codevolution을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: React Router Tutorial React Router 라이브러리란? react-router는 특정한 주소와 컴포넌트를 연결시켜 주소 이동으로 다른 컴포넌트 화면을 보여줄 수 있도록 하는 라이브러리다. 1. react-router-dom 라이브러리 v6 설치하기 v6 다운받기 yarn add react-router-dom@6 가장 최신버전 다운받기 yarn add react-router-dom@latest 2. index.js에 BrowserRouter 적용하기 로 프로젝트에 라우터를 적용한다. 컴포넌트는 1) 사용자가 입력한 주소를 감지하는 역할 2) 여러 종류의 라우.. 2022. 5. 26.
[웹개발/한줄정리] LTS(Long Term Supported) 장기적으로 안정되고 신뢰도가 높은 지원이 보장되는 버전 유지, 보수, 보안에 초점을 맞춰 대부분 사용자에게 추천되는 버전 2022. 5. 26.
[Node.js] nvm 설치방법 1. nvm GitHub에 들어가서 Installing and Updating 섹션으로 이동 후 아래의 코드 복사 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash 2. 터미널에 해당 코드를 붙어넣는다 3. nvm이 설치되었는지 확인하고 싶다면 아래의 코드로 컴퓨터에 설치된 nvm의 버전을 확인한다 nvm --version 2022. 5. 26.
[Node.js] Node.js란? Node.js Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임. JavaScript 엔진: 자바스크립트 문법을 해석하고 동작시켜줄 수 있는 엔진 런타임: 프로그래밍 언어가 동작하는 환경 자바스크립트 런타임: 자바스크립트 프로그래밍 언어가 동작하는 컴퓨터 환경 자바스크립트가 동작할 수 있는 환경 2가지 1. Node.js가 설치된 컴퓨터 2. 웹 브라우저 (Chrome, Firefox, Safari…) 프론트엔드에서 Node.js의 쓸모 웹브라우저에서는 HTML, CSS, JavaScript만 동작 한다. 웹 개발시 개발을 도와주는 모듈을 사용하는데 모듈은 브라우저에서 동작 하지 못한다. 이때 Node.js 환경에서 모듈을 변환시켜 웹브라우저에서 동작시킬 수 있도록 컴퓨터에.. 2022. 5. 26.
[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.

티스토리툴바