본문 바로가기

🌌 | WEB DEV115

[React] 0. React를 사용하는 이유 & 초기 세팅 현재 웹 프레임워크 중 가장 많이 사용하고 시장에서 원하는 React에 대해서 알아보자! 1. React를 사용하는 이유 장점 1_ 리액트는 SPA(Single Page Application)를 만들 수 있다. 즉, 모바일 어플처럼 새로고침을 하지 않고 페이지 전환 등이 부드럽게 구현이 되도록 제작할 수 있다. 물론 Vanilla JS로도 SPA를 구현할 수 있지만 React를 이용하는 쪽이 훨씬 간편하게 만들 수 있다. 장점 2_ Html의 재사용이 편리해진다. html을 함수, array, object 등에 담아서 활용할 수 있기 때문에 재사용이 편리하다. 장점 3_React Native를 이용해 모바일 어플 구현도 가능하다. 이러한 장점들 뿐아니라 시장이 가장 요구하는 기술이기 때문에 웹 개발자로서.. 2023. 5. 5.

[WEB] 토큰 (Token) 1. 인증(Authentication)과 인가(Authorization) 인증과 인가는 언뜻 비슷하지만 명확히 다른 단어이다. 인증은 '로그인' 그 자체이라고 생각하면 된다. 즉, 사이트에 특정 권한을 가진 사용자임을 고유 ID, pw 등을 통해서 인증을 받는 것이다. 인가는 로그인이 '유지되는 상태에서 일어나는 일'이다. 인증을 받은 사용자가 사이트 내에서 '자신의 계정으로만' 할 수 있는 활동을 할 때 사이트에서 허가하는 것을 의미한다. 사용자가 자기 계정을 사용하려할 때 어센틱케이쎤!! 응 어서와라이제이션~ -얄코쌤 2. JWT(JSON Web Token) 1) 서버에서 알아야하는 것은? JWT는 인가에 관련된 기술이다. 어떤 사이트를 사용자가 이용할 때에는 '해당 유저가 로그인한 상태인지 아닌지.. 2023. 5. 4.

[Electron] 1. Electron에 React 탑재하기! 2023.05.01 - [🌌 | WEB DEV/Electron] - [Electron] 0. Electron이란? & 초기설정 Electron은 JS기반 프레임워크이기 때문에 React 역시 함께 활용할 수 있다. 저번 포스트에서 진행한 프로젝트에 React를 탑재해보자! 1. React 패키지 추가하기 npm install --save react react-dom 위 명령어를 통해 설치가 완료된 경우 package.json에는 이처럼 추가가 된다. "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", } 2. 소스파일 만들기 main_react라는 이름으로 js파일을 생성하였다. (이름은 임의 작성) main_react.js import Reac.. 2023. 5. 2.

[Electron] 0. Electron이란? & 초기설정 JS 기반으로 크로스플랫폼 데스크톱 앱을 개발할 수 있는 프레임워크인 Electron에 대해 알아보자! 1. 소개 Electron은 JS, HTML, CSS를 활용해서 크로스플랩폼 데스크톱 앱을 개발할 수 있는 프레임워크이다. 2013년 Atom Editor를 만들기 위해 시작된 Atom Shell에서 시작하였고 2015년 그 명칭이 현재의 Electron으로 변경되었다. Electron의 아키텍쳐는 백엔드의 경우 Node.js, 프론트엔드의 경우 Chromium 이라는 구글 Chrome 브라우저의 기반이 되는 오픈소스 프로젝트를 사용한다. 따라서 Web 기반의 기술은 Chromium에서 처리하고 OS 기반 기능은 Node.js에서 처리하게 된다. 이를 이용하는 대표적인 예시는 Atom Editor, V.. 2023. 5. 1.

JS_기본 문법 (26)_ 접근자 프로퍼티와 private필드 JS의 객체 프로퍼티 중 접근자 프로퍼티에 대해서 알아보자! 1. 접근자 프로퍼티 접근자 프로퍼티는 스스로 값을 갖지 않고 다른 프로퍼티의 값을 읽거나(get) 저장할 때(set) 사용한다. 다른 언어에서도 찾아볼 수 있고 getter함수, setter함수라고 부르기도 한다! getter - 반드시 값을 반환해야 한다. - 특정 프로퍼티를 원하는 방식으로 가공하여 내보낼 때 사용한다. setter - 특정 프로퍼티에 값이 저장되는 방식을 조작하거나 제약사항을 적용할 때 사용한다. - 하나의 인자를 받는다. 사용방법 방법 1) 객체 리터럴 방식 예시 1) 물체의 길이 단위 (인치와 센티미터) const obj1 = { inch : 1, get cm() { return this.inch * 2.54; }, .. 2023. 4. 10.

JS_기본 문법 (25)_ 클래스 2023.03.31 - [🌌 | WEB DEV/Vanilla JS] - JS_기본 문법 (24)_ 생성자 함수 저번에 다루었던 생성자 함수에 이어서 이번에는 클래스에 대해서 알아보자! 1. 클래스 // 클래스 class Player { constructor(name, job){ this.name = name; this.job = job } info () { return `소환사명 : ${this.name} | 직업군 : ${this.job}`; } } const player1 = new Player('Kassid', '전사'); const player2 = new Player('Nyang', '마법사'); console.log(player1, player1.info()); console.log(playe.. 2023. 4. 2.

JS_기술 (3)_ Hoisting(호이스팅) 뿌수기 JS의 호이스팅에 대해서 자세히 알아보았다! 1. 호이스팅이란? ( 1 ) 호이스팅(Hoisting)이란 무엇일까 JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. - MDN (https://developer.mozilla.org/ko/docs/Glossary/Hoisting) MDN 문서에서는 위와 같이 번역을 하였다. 즉, JS의 인터프리터가 코드를 읽기 시작할 때 선언된 변수, 상수, 함수 등을 모두 미리 할당을 하는 작업을 의미한다. 글의 본격적인 시작에 앞서 모든 식별자(변수, 함수, 클래스 등)는 호이스팅이 된다! ( 2 ) var의 특징 JS에서 변수, 상수를 선언하는 방법은 3가지가 있다. 1.var .. 2023. 3. 31.

JS_기본 문법 (24)_ 생성자 함수 1. 생성자 함수 함수는 재사용가능한 코드를 묶는 것 외에도 객체를 생성하는 역할을 수행할 수 있다. ※ function으로 선언된 함수는 기본적으로 생성자 함수의 기능을 갖는다. 예시) 객체 생성 const student1 = { name : 'Sam', idNum : 20, say () { return `안녕하세요. ${idNum}번 ${name}입니다.`; } }; const student2 = { name : 'Tom', idNum : 25, say () { return `안녕하세요. ${idNum}번 ${name}입니다.`; } }; 위와 같이 비슷한 형태의 객체를 여러개 만들어야하는 경우 같은 코드를 반복하는 것이기 때문에 함수를 활용하면 더욱 편리하게 구현할 수 있다. 생성자 함수 생성 Ru.. 2023. 3. 31.

JS_기본 문법 (23)_ 객체 + 2022.02.10 - [🌌 | WEB DEV/Vanilla JS] - JS_기본문법 (3)_객체 기존에 다루었던 JS의 객체에 대해서 조금 더 알아보자! 1. 객체 생성 & 접근 예전 포스트에서 다루었던 대괄호 표기법은 다양한 방식으로 활용할 수 있다. 1) 식별자 명명 규칙에서 벗어난 키 이름에 접근 const obj = { 'ab-1' : 100, 'c d' : 'Hello' }; console.log( obj['ab-1'], obj['c d'] ); >>> 100 >>> 'Hello' 위처럼 명명 규칙을 어긴 경우에도 ' '(따옴표)를 이용하여 키 이름으로 설정하고 이를 대괄호 표기법으로 접근할 수 있다. 2) 표현식에 이용 연산을 하여 키값으로 설정을 할 경우에도 대괄호를 이용한다. let id.. 2023. 3. 26.

이전 1 ··· 3 4 5 6 7 8 9 ··· 13 다음

티스토리툴바