Front-end 검색 결과

106 개의 검색 결과가 있습니다.

Front-end

쿠키와 세션 개념 | 공통세션 : HTTP

쿠키와 세션 : 웹에서 상태유지를 위한 기술 HTTP프로토콜은 상태 유지가 안되는 프로토콜입니다. 웹 브라우저(클라이언트)의 요청에 대한 응답을 하고 나면 해당 클라이언트와의 연결을 지속하지 않기 때문에 이전에 무엇을 했고 지금 무엇을 했는지에 대한 정보를 갖고 있지 않습니다. 이러한 점을 보완하기 위해 상태를 유지할수 있는 Cookie와 Session기술이 등장합니다. 세션 동작방식 1) 클라이언트 요청시 서버에서 유지해야할 정보가 있다면 서버측에서 2)세션키 생성, 3)세션키 저장소 생성(저장소에 로그인에 필요한 아이디와 같은 데이터 저장) 4) 세션키 담은 쿠키 생성( 추후 클라이언트의 재요청시 클라이언트의 세션키를 통해 저장소 위치를 알기위한 데이터를 담은 쿠키) 5) 응답시 세션키를 담은 쿠키를..

2022. 5. 7. 20:04

Front-end/JavaScript

Vanilla js | 템플릿 리터럴 | HTML DOM insertAdjacentHTML()

템플릿 리터럴 자바스크립트에서 백틱(` `) 문자를 사용하여 문자열을 사용하는 것 ` ' 백틱과 작은따움표 차이 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals Template literals (Template strings) - JavaScript | MDN Template literals are literals delimited with backticks (`), allowing embedded expressions called substitutions. developer.mozilla.org Element.insertAdjacentHTML() 지정된 위치에 택스트를 HTML로 삽입한다. "after..

2021. 12. 21. 16:22

Front-end/React

React | useState | Hook

useState useState는 상태 변수를 가질 수 있게 해주는 Hook이다. 이 함수에 초기 상태를 전달하면 현재 상태 값(초기 상태일 필요는 없음)이 있는 변수와 이 값을 업데이트하는 다른 함수를 반환한다. 컴포넌트가 다시 랜더링 하는 동안 상태를 유지하기 위해서 사용한다. Hook Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용 let [변수, 변수 값 업데이트 함수] = useState(['스테이트 문법', '배열사용가능', '재랜더링 안하게끔']); https://ko.reactjs.org/docs/hooks-reference.html#usestate Hooks API Reference – React A JavaScript library for buildi..

2021. 12. 10. 15:02

Front-end/JavaScript

Vanilla JS | JavaScript | JSON | JSON.stringify

JSON 네트워크를 통해 객체를 어딘가에 보내거나 로깅 목적으로 객체를 출력해야 한다면 객체를 문자열로 전환해야 한다. JSON은 속성-값 쌍 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. JSON.stringify JSON.stringify – 객체를 JSON으로 바꿔줍니다. JSON.parse – JSON을 객체로 바꿔줍니다.

2021. 12. 8. 15:00

Front-end/JavaScript

Vanilla JS | JavaScript | 자바스크립트 this | 생성자 함수

this 자바스크립트에서 this는 런타임에 결정됩니다. 메서드가 어디서 정의되었는지에 상관없이 this는 ‘점 앞의’ 객체가 무엇인가에 따라 ‘자유롭게’ 결정된다. let user = { name: "John" }; let admin = { name: "Admin" }; function sayHi() { alert( this.name ); } // 별개의 객체에서 동일한 함수를 사용함 user.f = sayHi; admin.f = sayHi; // 'this'는 '점(.) 앞의' 객체를 참조하기 때문에 // this 값이 달라짐 user.f(); // John (this == user) admin.f(); // Admin (this == admin) admin['f'](); // Admin (점과 대괄..

2021. 12. 7. 13:54

Front-end/JavaScript

Vanilla JS | JavaScript | 객체 | object literal | object constructor | 대괄호 표기법 square bracket notation ☆

객체 만들기 let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법 객체 리터럴 - 중괄호를 이용해 만든다. 마지막 프로퍼티의 끝에 쉼표를 사용할 수 있다. 상수 객체는 수정될 수 있다. const는 user의 값을 고정하지만 안의 내용은 고정하지 않는다. 대괄호 표기법 ☆ 여러 단어를 조합해 프로퍼티 키를 만든 경우엔, 점 표기법을 사용해 프로퍼티 값을 읽을 수 없다. //문법 에러가 발생 user.likes iphone = true 키가 유효한 변수 식별자(공백이 없고 특수문자가 없는 경우)가 아닌 경우에는 점을 사용하는 대신 대괄호 표기법(square bracket notation)을 사용해서 키에 어떤 문자열이 있던지 상관없이 ..

2021. 12. 7. 11:34

Front-end/JavaScript

Vanilla JS | JavaScript | JSDOC | 자동 문서 생성 도구 JSDoc3

JSDOC 함수와 매개변수 정보를 담고 있는 주석 자바에는 JAVADOC이 있다. https://jsdoc.app/ Use JSDoc: Index Index Getting Started Getting Started with JSDoc 3 A quick-start to documenting JavaScript with JSDoc. Using namepaths with JSDoc 3 A guide to using namepaths with JSDoc 3. Command-line arguments to JSDoc About command-line arguments to JSDoc. Configuring jsdoc.app @author 작성자 식별 @version 라이브러리 버전 정보 @copyright 파일 ..

2021. 12. 6. 17:02

Front-end/JavaScript

Vanilla JS | JavaScript | 함수 표현식 | 콜백 함수 | 화살표 함수

함수 표현식 자바스크립트에서 함수는 특별한 종류의 값으로 취급한다. 구조로 취급되지 않는다. 함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성합니다. 따라서 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있다. 함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있다. 스코프 함수 표현식은 블록 밖에서도 동작한다. 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근할 수 있다. 하지만 블록 밖에서는 함수에 접근하지 못한다. 콜백 함수 함수를 함수의 인수로 전달하고, 필요하면 인수로 전달한 함수를 나중에 호출하는 것 화살표 함수 기본 (arrow function) 동적인 화살표 함수 사용 예제 중괄호를 사용할 경우 리턴값을 표시해주어야 한다.

2021. 12. 6. 14:58

Front-end/JavaScript

Vanilla JS | JavaScript | use strict | BigInt 자료형 | 문자열

use strict 이 지시자가 스크립트 최상단에 오면 스크립트 전체가 '모던한' 방식으로 동작 "use strict"; //현대적인 방식으로 동작 최상단에 위치해야만 한다. 브라우저 콘솔에서는 적용되지 않는다. Big Int 자료형과 문자열 bigint 자료형은 리터럴 끝에 n을 붙인다. 문자열은 따옴표를쓰고 ${변수명}에 감싸면 중간에 문자열이나 다른 자료형을 넣을 수 있다. 자바스크립트는 문자를 지원하지 않는다.

2021. 12. 6. 10:41

Front-end/JavaScript

Vanilla JS | JavaScript | 함수의 기본 문법 | 함수 이름 정하기 | Parameter & Argument | 매개변수 | 인자

함수의 기본 문법 Function Basic Parameter & Argument Return 함수 이름 정하기 "show"로 시작하는 함수는 대개 무언가를 보여주는 함수 이 외에 아래와 같은 접두어를 사용할 수 있습니다. "get…" – 값을 반환함 "calc…" – 무언가를 계산함 "create…" – 무언가를 생성함 "check…" – 무언가를 확인하고 불린값을 반환함 Parameter & Argument (매개변수와 인자) Parameter & Argument Return Return (리턴) 표현식 1=1 -> true라는 값의 표현식 sum(2,3) -> 5가 되기 위한 표현식 만들기 Return

2021. 12. 5. 19:17

Front-end/JavaScript

Vanilla JS | JavaScript | 제어할 태그 선택 | 배열

제어할 태그 선택 정정인 코드 body인 태그의 스타일을 동적으로 변경 주간/야간 모드 JavaScript 프로그래밍 언어 Programming 순서를 만드는 행위 사용자와 여러가지 명령어로 시간의 순서에 따라 상호작용 조건에 따라서 기능실행 반복에 따라서 기능 실행 복잡해진 순서를 정리 Array 배열 데이터중 연관된 데이터를 정리해서 담아두는 수납상자 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array Array - JavaScript | MDN JavaScript Array 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다. developer.mozilla.org my name a..

2021. 12. 4. 21:23

Front-end/JavaScript

Vanilla JS | JavaScript | 콘솔제어 | div span 차이 | 3wschool

https://www.w3schools.com/ W3Schools Free Online Web Tutorials W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 자바스크립트 콘솔 제어 실행 Enter 실행 미루기 Shft + Enter 태그 선택자 JavaScript JavaScript div 태그 화면 전체를 쓰는 어떠한 기능도 없는 정보제어를 위해 감싸주는 태그 spa..

2021. 12. 2. 21:16

Front-end/JavaScript

Vanilla JS | JavaScript | 콘솔 | 데이터타입 | mozilla

콘솔 사용하기 브라우저 콘솔을 사용하여 자바스크립트 사용 개발자도구에서 콘솔창 밑에 띄우기 F12 -> Elements -> ESC 현제 웹페이지 대상으로 자바스크립트가 실행된다. 데이터타입 표현 - 문자열, 숫자사용 Numver String https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String String - JavaScript | MDN String 전역 객체는 문자열(문자의 나열)의 생성자입니다. developer.mozilla.org

2021. 12. 1. 20:55

Front-end/JavaScript

Vanilla JS | JavaScript | event | Atom

https://atom.io/ A hackable text editor for the 21st Century At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it. atom.io document.querySelector('body').style.backgroundColor='bleck'; 바디테그의 스타일 속성의 백그라운드 색을 블랙으로 적용 event onclick onchange 속성 등등 이벤트가 일..

2021. 11. 28. 20:07

Front-end/JSP

JSP | 웹스토어 게시판 추가 모델2 방식 적용 - 4 | 게시글 삭제 추가 | 게시글 넘버링 수정 | 게시글 비로그인 예외처리 | 관리자 게시글 삭제 추가

kjh95.tistory.com/298 JSP | 웹스토어 게시판 추가 모델2 방식 적용 - 3 | 글 상세정보 | 게시글 수정하기 kjh95.tistory.com/293 JSP | 웹스토어 게시판 추가 모델2 방식 적용 - 2 | 글쓰기 기능 추가 kjh95.tistory.com/291 contriller 받음(유용한 패턴참고) model1 model2 command를 기능에 따라 분리한다. 계시판의.. kjh95.tistory.com 프런트 컨트롤러 수정 view.jsp boardDeleteAction.do 삭제 경로를 컨트롤러에서 받아준다. package kr.gov.mvc.controller; import java.io.IOException; import javax.servlet.RequestDi..

2021. 2. 16. 11:16