본문 바로가기

전체 글140

[REACT] REACT 프로젝트 생성 React란? JavaScript 라이브러리 중 하나로서, 사용자 인터페이스(User Interface)를 만들기 위해 사용되는 도구 싱글 페이지 웹 어플리케이션, 모바일 어플리케이션 개발 시에 토대로 사용 React 프로젝트 생성 TO-DO 1. Node.js 다운로드 받기 2. npx 명령어를 이용해서 CRA(Create-React-App) 1. Node.js Node.js란 간단히 말해서 JavaScript 언어를 서버에서도 사용할 수 있도록 만든 프로그램이고 내장 HTTP 서버 라이브러리를 포함하고 있어 Apache 등의 별도 소프트웨어 없이 웹 서버에서 동작이 가능하다. React 프로젝트를 생성하기 위해서는 반드시 필요하다. Node.js Node.js® is a JavaScript runti.. 2023. 3. 7.
[SPRING] @ResponseBody란? [SPRING] dispatcherServlet, ViewResolver, Controller [SPRING] 스프링 설치 및 프로젝트 설정 이번 포스트에서는 스프링을 설치하고, 프로젝트 생성 및 초기 설정에 대해 다뤄보려고 한다. 스프링 설치 우선, 스프링은 아래의 링크에서 다운받을 수 있 itsmesunky.tistory.com 지난 포스트에서는 사용자의 URL 요청이 들어오면 dispatcherServlet이 해당 URL과 매핑되는 Controller를 찾아서 메소드를 실행한 다음 viewResolver를 통해 해당 view로 이동하는 과정을 살펴보았다. 그런데, 이번 포스트에서는 사용자의 요청 URL과 매핑되는 Controller에 @ResponseBody 어노테이션이 작성되면 어떤 흐름으로 진행.. 2023. 2. 23.
[jQuery] 로그인 시, ID를 쿠키에 저장하기 웹 브라우저에서 서버에 데이터를 요청하고 응답받는 과정에서 응답(response)에는 여러 데이터와 원하는 페이지 정보가 존재하게 된다. 응답(response)에는 웹 브라우저에 저장하고자 하는 쿠키(cookie)라는 것도 존재하는데 브라우저에 쿠키를 저장하면 유저가 해당 웹사이트에 방문할 때마다 브라우저는 요청(request)할 때 해당 쿠키도 같이 보내게 된다. 쿠키에는 유저의 정보 뿐만 아니라, 해당 웹사이트의 언어설정을 변경하면 서버에서는 쿠키를 주고 유저가 선택한 언어를 저장하게 된다. 다음 포스팅에서 자세히 설명하겠지만 쿠키와 세션(session)의 가장 큰 차이점은 쿠키는 브라우저에 저장 되는 것이고, 세션은 서버에 저장된다는 점이다. 이번 포스팅에서는 쿠키를 이용해서 유저의 아이디를 저장해.. 2023. 2. 22.
[SPRING] Controller/JSP 데이터 주고 받기 [SPRING] dispatcherServlet, ViewResolver, Controller [SPRING] 스프링 설치 및 프로젝트 설정 이번 포스트에서는 스프링을 설치하고, 프로젝트 생성 및 초기 설정에 대해 다뤄보려고 한다. 스프링 설치 우선, 스프링은 아래의 링크에서 다운받을 수 있 itsmesunky.tistory.com 지난 포스트에서는 Controller/JSP를 이용하여 정적 컨텐츠를 웹 브라우저에 출력하는 법에 대해 다뤄보았다. 오늘은 정적 컨텐츠가 아닌 Controller에서 JSP로 데이터를 송신하고 수신하는 방법에 대해 다뤄보려고 한다. Controller가 따로 존재하지 않았던 MVC Model1에서는 데이터를 송수신 하는 방법으로 request.setAttribute(), re.. 2023. 2. 21.
[SPRING] dispatcherServlet, ViewResolver, Controller [SPRING] 스프링 설치 및 프로젝트 설정 이번 포스트에서는 스프링을 설치하고, 프로젝트 생성 및 초기 설정에 대해 다뤄보려고 한다. 스프링 설치 우선, 스프링은 아래의 링크에서 다운받을 수 있다. Spring | Home Cloud Your code, any cloud—we itsmesunky.tistory.com 이전 포스트에서 스프링을 설치하고, 기본적인 프로젝트 초기 설정을 마쳤다. 오늘은 초기 설정을 이용하여, 웹 브라우저에서 URL 요청이 들어오면 어떤 흐름으로 브라우저에 데이터를 전송할 수 있는지에 대해 포스팅 하려고 한다. web.xml 웹 브라우저에서 사용자의 URL 요청이 들어오면 스프링 프로젝트에서는 제일 먼저 web.xml 파일을 찾는다. web.xml에 매핑 되어 있는 serv.. 2023. 2. 21.
[SPRING] 스프링 설치 및 프로젝트 설정 이번 포스트에서는 스프링을 설치하고, 프로젝트 생성 및 초기 설정에 대해 다뤄보려고 한다. 스프링 설치 우선, 스프링은 아래의 링크에서 다운받을 수 있다. Spring | Home Cloud Your code, any cloud—we’ve got you covered. Connect and scale your services, whatever your platform. spring.io 각 운영체제에 맞는 파일을 다운로드 받은 뒤, CMD창에서 명령어를 이용하여 설치할 수 있다. (필자는 이클립스를 기반으로 작동되는 Spring Tools 4 for Eclipse를 다운로드를 실행함) 해당 파일이 존재하는 위치로 이동한 뒤, java- 명령어를 이용해서 다운로드 받은 파일의 파일명을 입력한다. 그러면 위.. 2023. 2. 20.
[jQuery] AJAX로 서버에 다양한 데이터 주고 받기 웹 페이지, 웹 어플리케이션(Client)은 특정 데이터를 가지고 서버에 데이터를 요청하면 서버는 그에 응당하는 데이터를 클라이언트에게 전송한다. 이번 포스트에서 다뤄볼 주제는 데이터를 서버에 요청하고 객체 타입의 데이터들을 비동기방식으로 클라이언트에 전송하는 것이다. 특정 데이터를 가지고 서버에 데이터 요청하고 응답받기 1. String 데이터를 응답받기 클릭 $(document).ready(()=>{ $("button").on("click", function() { $.ajax({ url:"./hello", type: "get", data: {"id" : "abc", "pw" : "123}, success: function(data){ console.log(data); $("#demo").text(d.. 2023. 2. 8.
[JAVA] 싱글톤 패턴(SingleTon Pattern) 싱글톤 패턴이란? 우리가 개발을 하면서 마주치는 문제점들은 과거에 이미 누군가가 해결했을 가능성이 높다. 흔히 발생하는 문제들이라면 그에 응당하는 해결책이 있는데 그 해결책들을 모아서 정의한것을 디자인 패턴(Design Pattern)이라고 한다. 이 디자인 패턴은 총 23가지로 정리되는데 그 중 하나가 싱글톤 패턴(Singleton Pattern)이다. 싱글톤 패턴을 사용하는 이유 프로그램 전역에서 사용되는 유일한 클래스를 만들기 위해 사용하는데 이해하기 쉽게 객체 인스턴스가 오로지 한개만 생성되도록 설계하는 패턴이라고 말할 수 있다. 목적 ㆍ고정된 메모리 영역을 가지고 하나의 인스턴스만 사용하기 때문에 메모리 낭비를 방지할 수 있다. ㆍ싱글톤 클래스의 인스턴스는 전역에 사용될 수 있기 때문에 다른 클.. 2023. 2. 8.
[jQuery] AJAX AJAX AJAX(Asynchronous JavaScript And XML)는 웹 브라우저의 기본 객체인 XMLHttpRequest를 이용해서 클라이언트와 서버가 비동기 방식으로 데이터를 주고 받는 것을 의미한다. (* 비동기 방식: 웹 브라우저의 페이지 전환 없이 서버와 통신하는 방식) AJAX 사용법 AJAX 통신 방식을 사용하기 위해서는 JavaScript, jQuery, Axios 세 가지 방법을 이용할 수 있는데 이번에는 jQuery 라이브러리를 활용하여 AJAX 통신 방식에 관해 포스팅 할 예정이다. 1. 문법 // jQuery 라이브러리를 CDN 방식으로 이용 Click me! 전체적인 문법은 위와 같으며, Attribute를 하나씩 따져가면서 서버와 비동기적으로 통신을 해보자. 2. 데이터.. 2023. 2. 8.
[jQuery] append(), prepend(), attr() append(), prepend() 위와 같은 table이 있고 데이터 추가 버튼을 클릭했을 때 입력한 데이터를 테이블에 추가하려면 jQuery의 append() 함수를 이용하면 손쉽게 테이블에 데이터를 추가할 수 있다. 1. 코드 위의 코드처럼, append() 함수는 일치하는 요소 세트(예제에서는 )의 각 요소 끝에 마지막 자식으로 매개변수에 지정된 콘텐츠를 삽입하는 함수이다. 반대로, 첫 번째 자식으로 삽입하려면 prepend() 함수를 사용하면 된다. 2. 실행 이처럼, 에 데이터를 입력하고 데이터 추가 버튼을 클릭하면 테이블에 데이터가 잘 삽입된 것을 확인할 수 있다. 2.1 prepend() 실행 $("table").prepend( $("").append( $("").append(no), $(.. 2023. 2. 5.

티스토리툴바