Daily Pogle

자바스크립트에서 map 을 통해 Array 에 함수를 적용할 수 있다. map() 은 Array 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아서 새로운 Array 를 반환한다. map() 메서드를 사용한 Array 는 변하지 않는다. map() 메서드의 로직을 표현해보았다. [5,10,15,20].map((n)=>n*5) map 을 통하여 Array 요소들을 계산한 값을 가지고 있는 새로운 Array 만들기 const numbers = [1, 4, 9]; const doubles = numbers.map((num)=> num *2); // doubles는 이제 [2, 8, 18] // numbers는 그대로 [1, 4, 9] map 을 통하여 list 만들기 React 예시 functi..

실제 프로젝트 구현 시 사용한 기능이다. 시행착오가 많아서 올린다. 프로젝트 채팅구현에서 사용한 코드 일부이다. Websocket 을 통하여 채팅메세지를 주거나 받게 된다면 채팅메세지가 채팅창 안에 한줄씩 쌓인다. 채팅이 계속 쌓이면 스크롤을 통해 모튼 채팅메세지를 쉽게 볼 수 있게 한다. 또한 채팅을 입력하거나 받으면 스크롤을 맨밑으로 이동시킨다. [HTML/CSS] 전체채팅방 [JS] function appendMessage(meesage) { // message를 받거나 보낼때마다 채팅창에 메세지가 한줄씩 쌓인다 /* ... ... ... 다른사람이 보낸 전체메세지 일경우... else if (writer != "" && recipient == "to All") { chatContent.classN..

나중에 잊어버릴까봐 세미프로젝트에서 사용한 ajax 예제를 가지고 정리하였다 $.ajax 는 jQuery 문법이기 때문에 먼저 jQuery 를 준비해야한다. 실제 프로젝트에 사용한 ajax 예이다. 예시1) [$.ajax] type = Request Method 를 지정한다. url = Request 를 보낼 url 을 작성한다. data = Request 에 담을 data 를 작성한다. dataType = 서버에서 보낸 응답(Response)을 담을 자료형을 지정한다. success = 성공적으로 작동했을 때 실행할 기능을 작성한다. error = 서버에서 error 발생 시 실행할 기능을 작성한다. [java.controller] @ResponseBody : Request 를 보낸 클라이언트에 Res..

jQuery 에서 jQuery-cookie 플러그인을 제공하고 있다. 이 플러그인으로 통해서 간편하게 Cookie 를 생성하고, Cookie 만료일을 설정할 수 있다. 1. Cookie 란? HTTP 의 일종으로 인터넷 사용자가 웹사이트를방문할 경우 사용자의 웹 브라우저를 통해 사용자의 컴퓨터나 다른기기에 설치되는 작은 기록 정보 파일이며, 이 기록정보는 같은 웹사이트를 방문할 때마다 읽히고 새로운 정보로 변경된다 현재도 많은 서비나 웹사이트에서 브라우저의 신속성을 위해 많이 사용되고 있다. 특성 정리 Cookie는 클라이언트에 저장되는 key, value 값이 들어있는 작은 데이터 파일이다. Cookie는 서버에서 HTTP Respones Header 에 Set-Cookie 속성을 이용하여 클라이언트에..

개요 jQuery 는 Javascript 의 라이브러리이다. 따라서 jQuery 를 사용하는데 있어서 HTML, CSS, Javascript 에 대한 기초적인 이해가 필요하며, Javascript 에 대해 이해도가 높을 수록 코드를 이해하고 구조화하고 디버깅하는 능력을 높이는 것이 우선적으로 필요하며, 이러한 이해를 토대로 jQuery 를 잘활용할 수 있다. JQuery 는 기존 Javascript 문법을 간략화시키고, 경량화시키기 위해 나온 라이브러리이다. 따라서 JQuery 의 문법은 기존 Javascript 문법보다 간략하다. 기존 Javascript 에 대한 기초적인 이해가 있으면 빠르게 JQuery 문법을 익힐 수 있다. 하지만 jQuery 는 현재 개발에서 지양되고 있다. 레거시 시스템을 다루..

XML API 관련 사이트(참고) XMLHttpRequest - Web APIs | MDN XMLHttpRequest (XHR) objects are used to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing. developer.mozilla.org XML API 공식문서 XMLHttpRequest Standard Abstract The XMLHttpRequest Standard defines an API ..

싱글페이지 애플리케이션(SPA) 를 만드는데 유용한 기능으로 한페이지 내에서 여러 탭키를 누르면 내용들이 바뀌는 효과를 보여줄 수 있습니다. ++ 사용할 메서드 classList.add classList.remove data- (target.dataset) 활용 addEventListener ++ HTML5 에서 추가된 태그 (semantic tag) - HTML 5 에서 추가된 태그 - 특정한 영역 그룹화 - 다른영역에서도 쓰일 수 있는 영역에 쓰임 - HTML 5 에서 추가된 태그 - 특정한 영역 그룹화 블로그 및 SNS 포스팅, 뉴스 기사영역, 신문 논평 등 [HTML] 연혁 사업구조 투자계획 사업구조 사업구조에 대해서 어쩌구저쩌구

2023.01.10 - [웹 개발/Javasript] - [Javascript] Canvas API - 그림판 구현하기 [Javascript] Canvas API - 그림판 구현하기 그림판에 필요한 기능에 대해서 하나하나씩 살펴보면서 코드를 구현한다. 그전에 이전 포스팅에서 간단하게 canvas 를 만들어서 그림판을 설정한다. body 태그 안에 canvas 태그를 설정한다, canvas 태 pogle-jeong.tistory.com 기능 5. 텍스트 입력해서 삽입하기 텍스트 바에 삽입할 텍스트를 적고, canvas 를 더블클릭하면 해당 텍스트가 십입 될 수 있도록 기능한다. [HTML] [JS] ctx.save() 는 현재 ctx 의 모든 속성을 저장하는 역할을 한다. ctx.restore() 는 ct..