DEVELOP (50) 썸네일형 리스트형 [React] Redux Toolkit 을 이용한 로그인 상태 관리 (1) Redux Toolkit 을 이용한 로그인 상태 관리 1. Redux ? Toolkit ?리액트를 공부중이라면 State 변수를 들어봤을 것이다. import React, {useState, useEffect} from 'react'const Login = () => { const [email, setEmail] = useState('') const [pwd, setPwd] = useState('') return ( //... )} email, pwd 라는 state 변수는 현재 컴포넌트 내부에서만 사용되기 때문에, 컴포넌트 간의 상태를 공유할 수 없다. 만약 현재 로그인한 상태임을 확인하는 로직을 짜야할 때 useState 와 .. [Node.js/Express] Node.js + Express 프레임워크로 웹 서버 구축하기 Node.js + Express 프레임워크로 웹 서버 구축하기 0. Express 기반 서버?브라우저 외부에서 자바스크립트를 실행할 수 있는 환경을 제공하는 Node.js.브라우저에서 할 수 없던 *서버 측 애플리케이션, 파일 시스템 접근, 네트워킹 등의 작업을 수행할 수 있다.*서버 측 애플리케이션 : 클라이언트로부터 요청을 받아 처리하고, 결과를 다시 클라이언트로 반환하는 서버에서 실행되는 프로그램이나 서비스 그리고 이런 Node.js 기반으로 된 애플리케이션 설계 및 구현을 도와주는 도구(프레임워크) Express.js.이 둘을 가지고 백엔드를 맛보려고 한다. 1. 환경설정개발 환경은 Visual Studo Code 다. ▶ Node.js 설치가장 중요한 node.js 부터 깔자. http.. [JavaScript] Promise 문법과 async/await 자바스크립트의 Promise 문법 알아보기 1. Promise 문법이란?Promise 는 비동기 작업의 상태 및 결과를 나타내는 객체다.자바스크립트에서 ① 비동기 작업을 처리하고, ② 성공(resolve) 또는 실패(rejected) 상태를 처리할 수 있는 구조를 제공한다. 라고 하면 처음 봤을 때 이해가 하나도 안 되니까 쉽게 풀면... ① 비동기 작업 → 연산이 시작되고 끝나는 순서가 정해진 건 아니다.② 성공 또는 실패 상태 처리 → 성공하면 resolve() 가 호출, 실패하면 reject() 가 호출된다.③ 객체 → 익명 함수를 품고 있어서 그렇다. 이정도가 되겠다. 정리하면...익명함수를 품고 있는데, 그 익명함수를 실행했을 때 성공하면 resolve 호출, 실패하면 reject 함수를 호.. [SpringBoot] 게시글 이미지(파일) 미리보기 & 업로드 (ver.팝업창) 게시글 이미지(파일) 미리보기 & 업로드 (팝업창 버전) 0. 과정 게시판 등록란에서 '이미지 선택' 버튼을 누른다. 파일 선택 팝업창에 있는 '파일 선택' 버튼으로 이미지를 가져온다. 선택한 이미지를 미리볼 수 있다.이때 본래 이미지(파일)명과 새롭게 저장한 파일 이름이 함께 뜬다. 이렇게 저장된 이미지는 '작성완료' 버튼을 누르기 전즉, 게시물 등록 전에 webapp 에 만든 upload 디렉토리 (path지정) 에 저장된다. 이 과정을 정리하자면...board/insertBoard.jsp 에 이미지 선택 버튼과 미리보기 버튼을 div로 분리한다.이미지 선택 버튼 div : 누르면(onclick) selectImg() 로 이동이미지 미리보기 div : 이미지 미리보기, 화면에 표시하고 폴더에.. [ECLIPSE] 웹개발을 위한 이클립스 설치 웹개발을 위한 이클립스(Eclipse) 설치 오랜만에 노트북을 펼쳐 파일 정리를 하던 도중 약 4년 전 설치한 이클립스 파일과 조우하고 말았다.상당한 귀차니즘이 몰려왔으나 착잡하고 통탄한 마음을 금치 못해 결국 새로운 버전을 설치하고자 한다 1. SDKSDK(Software Development Kit) 는 특정 소프트웨어 꾸러미, 프레임워크, 하드웨어 플랫폼, 운영체제 등을 위한 응용 프로그램 등을 만들 수 있게 해주는 개발 도구의 집합이다. 자바 개발환경을 구축하면서 JDK(Java Development Kit) 를 더 많이 들어봤을텐데 JDK는 자바만 개발할 수 있는 개발 도구를 의미한다. 사실상 둘은 같은 말인 것이다. SDK가 '소프트웨어 개발 도구' 라는 큰 의미를 갖고 있다. SDK(J.. [JSP/SERVLET] 게시판 페이징(Paging) 처리 & 구현 게시판 페이징(Paging) 처리 & 구현 게시판 기능에 필수적인 페이징을 구현해보고자 한다. 해당 예시는 쇼핑몰 제작 실습에서 관리자가 상품을 관리하는 페이지다. 0. 과정관리자 상품 관리 페이지를 작성하는 과정을 정리해보면.. 관리자가 상품을 관리하는 과정을 담은 servlet에서 (AdminProductAction.java)Paging 클래스 객체 paging 생성displayPage, displayRow 보여질 페이지 개수 10개로 재설정 (초기 설정: 5)session 혹은 getParameter로 전달 받은 page 값이 있다면 해당 값으로 page 설정, 그렇지 않다면 1paging.setPage(page) 페이지 설정총 상품이 몇개인지 세고 count 변수에 넣기 (AdminDao에 ge.. [JavaScript] form 안에 같은 name 의 버튼(radio/checkbox) 값을 구분하기 form 안에 같은 name 의 버튼(radio/checkbox) 값을 구분하기 쇼핑몰을 구현하는 과정을 배우고 있는데, form 내의 같은 이름의 입력란들을 처리하는 과정이 제법 흥미로워 작성해보려고 한다. 1. radioform 태그에서 radio 버튼을 통해 동의 or 비동의 여부를 받았다. 이때, 각 radio 버튼의 name을 동일하게 주었다.이후 radio 버튼의 name 을 자바스크립트를 통해 구분짓고, 자바스크립트로 submit 까지 해보려한다. 더보기 회원 가입 약관 언제나 새로운 즐거움이 가득한 Shoes Shop의 회원가입 페이지입니다. Shoes Shop의 회원가입은 무료이.. [JSP/EL] 서버 객체에 저장된 값을 EL 문법으로 출력하기 서버 객체에 저장된 값을 EL 문법을 이용해 출력하기 1. EL표현언어(Expression Language, EL) 은 JSP의 자료(전달값이나 변수값)를 출력할 때의 번거로움을 간단히 해결하기 위해 만들어진 출력 문법이다. JSP의 문법을 HTML5 에서 좀 구분하기 쉽도록 하여 오류를 줄이기 위해 개발됐다.주로 pageContext, request, session, application 서버 객체에 전달되는 Attribute 의 값을 getter 를 이용하지 않고 출력할 때 많이 사용된다. 2. 변수 출력${} 변수 출력을 위한 기본형은 위와 같다.{중괄호} 안에 출력하고자 하는 값을 작성한다.2-1. 변수값 출력 1 EL 문법으로 출력 정수형 변수 값 : ${10} 실수형 변수 .. 이전 1 2 3 4 5 ··· 7 다음
