웹프로그래밍11 [Nuxt3] 프로젝트 생성하여 시작하기 요즘 react를 주로 이용하다가 새롭게 vue를 시작했습니다. vue를 접하면서 느낀점은 심플하고 프레임워크와 비슷하다는 점입니다. 실제로도 react는 라이브러리에 vue는 프레임워크에 비교하여 이야기하는 사람들이 많은것 같습니다. 결과적으로는 저에게는 vue가 더 잘 맞는거 같습니다. react는 아무래도 라이브러리에 가깝다보니 개발하는 방법이 너무나도 자유로워 개발자의 스타일에 따라 구현방법에 차이가 크고, vue에서는 기본으로 제공하는 기능들을 react는 외부의 라이브러리에 의존하는 경우가 상대적으로 더 많다보니 프로젝트마다 스타일의 차이가 너무크고 내가 개발하는 방식이 좋은 방식일까? 라는 의구심이 자주 드는 반면 vue는 정해진 가이드대로 개발이 강제되는 경우가 많아 코드들이 서로 비슷하여.. 2022. 4. 30. [Redux] 1. 리덕스 세팅과 개념정리 Redux(리덕스) 란? 내용작성 제목 내용작성 제목 내용작성 제목 내용작성 제목 내용작성 2021. 7. 27. [CSS] input [type=text] 기본입력 한글로 세팅하기 웹페이지의 완성도를 위해서 input type text부분에 커서를 위치하고 키보드로 정보를 입력했을 때 기본적으로 한글이 입력되도록 해달라는 요청을 받았다. 결과를 먼저 이야기 하자면 여기저기서 많이 찾아본 결과 익스플로러에서는 css를 통해서 간단히 수정이 가능했지만 크롬에서의 방법은 없는 것을 잠정 결론을 내렸다 -_-;; 따라서 이 포스팅을 보는 사람들은 익스플로러라도 해당기능을 적용하고 싶다면 아래의 코드를 사용하면 되며 크롬에도 적용되는 방법을 찾고 싶다면 나를 믿고 포기하거나 다른곳에서 좀 더 정보를 찾아보길 바란다(혹시라도 방법을 찾으면 댓글로 남겨주었으면 좋겠다...) CSS코드 수정 input[type=text]{ -webkit-ime-mode:active; -moz-ime-mode:a.. 2020. 2. 9. [jQuery] Ajax사용하기 jQuery에서 Ajax사용하기 웹 프론트에서 가장 중요한 기능을 물어본다면 고민을 해봐야겠지만 지금 당장 대답한다면 저는 아마도 Ajax라고 대답할것 같습니다. 그만큼 Ajax는 많이사용하고 중요하고 또 웹페이지를 멋지게 해주는 기능입니다. ajax를 사용하는 방법은 여러가지가 있겠지만 이 포스팅에서는 JSP에서 jQuery를 이용한 Ajax로 Spring 백엔드와 통신하는 방법에 대해서 설명하고자 합니다. 1. Ajax란? 과거의 웹은 모든것이 동기화방식으로 운영되어 졌습니다. 예를들어 페이스북의 좋아요 버튼을 누르게되면 단지 좋아요 카운트만 올려주면 되는데 좋아요 카운트 한개를 화면에서 변경하기 위해 전체페이지를 리로딩하는 것이 바로 동기화 방식입니다. 하지만 곰곰히 생각해보면 페이스북의 좋아요기능.. 2019. 5. 15. [jQuery] 기본 세팅방법(CND, 직접선언 등) jQuery는 브라우저 호환성이 있는 다양한 기능을 제공하는 자바스크립트 라이브러리이다. jQuery에서 제공하는 오픈 라이브러리들을 통해 java script로 ajax, event, 다양한 ui 기능 등을 구현할 수 있으며 이 포스팅에서는 jQuery를 사용하기 위해서는 어떻게 세팅하는지에 대해서 알아보고자 한다. jQuery를 추가하는 방법은 2가지가 있다. URL을 이용해서 라이브러리를 추가하거나 혹은 라이브러리를 다운받아 나의 프로젝트의 특정폴더에 넣어두고 가져다 사용하는데 이는 개발자가 선호하는 방향으로 결정하면 되겠다. URL이용 방법(CND 방식) 직접 추가하는 방법 참고로 jQuery는 아래 사이트에서 다운로드 가능하다. https://jquery.com/download/ 다운로드 받는 .. 2019. 5. 14. [JavaScript] XMLHttpRequest를 이용한 바닐라자바스크립트 ajax XMLHttpRequest를 이용한 바닐라자바스크립트 ajax 웹을 개발하면서 ajax기술은 거의 필수라고 해도 무방할정도로 널리 사용되어지고 있습니다. 하지만 대부분의 ajax들이 과거 jquery가 유행하던 시절에 jquery를 기반으로 하여 작성되어 지다보니 jquery를 사용하지 않는 프로젝트에서는 어떻게 ajax를 작성하는지 궁금해 졌습니다. 더군다나 jquery를 점점 제거하는 추세여서 라이브러리가 없는 순수 자바스크립트에서는 ajax를 어떻게 작성하는지 알아볼 필요가 있다고 생각되어졌고 오늘 이에 대하여 포스팅을 남겨보려고 합니다. 앞서 설명한것처럼 그 어떤 라이브러리 없이 순수한 자바스크립트 즉, 바닐라자바스크립트로만 ajax를 구현하며 서버백단은 java를 이용하여 통신하는 코드를 기술할.. 2019. 5. 14. <JavaScript>배열과 객체에 함수를 넣어서 사용하기 개인적으로 javascript의 꽃은 객체라고 생각한다. 자바스크립트에서의 객체는 JSON타입의 데이터라고 생각하면 되는데 이 객체 안에는 일반적인 int, string과 같은 데이터 타입외에도 또다른 객체가 들어간다거나 혹은 배열 심지어 함수도 넣어서 사용할 수 있으니 그 활용도가 무궁무진하다. 이 포스팅에서는 배열안에 객체를 넣고 그 객체안에 있는 함수를 호출하여 사용하는 소스코드를 통해서 어떤식으로 객체를 이용하는지 확인해 보고자 한다. 위의 코드의 결과는 아래와 같다. 2019. 5. 14. <JavaScript>html객체의 style값 가져오기 자바스크립트를 이용해서 html 요소의 속성과 속성값을 가져올 수 있다. 특히 style속성의 속성값을 가져오는 것은 상당히 유용한데 이를 이용해서 style diplay속성값을 none으로 수정하여 html객체를 사라졌다 보였다하게 만드는 toggle(토글)기능도 구현할 수 있게 해준다. 아래의 예시를 통해서 버튼을 누르면 텍스트입력창이 사라지는 기능을 구현해 보겠다. 처음 실행한 화면이다. 위의 화면에서 버튼을 누르면 텍스트입력창이 사라진다. 다시 버튼을 누르면 텍스트입력창이 활성화가 된다 소스코드를 본다면 아마 어렵지 않게 이해가 가능하리라 생각한다. 참고로 아래의 hidden type의 input태그는 보이지가 않는다. 그래서 상태값을 저장하는 변수처럼 사용하는데 이는 개발하는 사람마음이라 hid.. 2019. 5. 14. <JavaScript>객체 사용법 자바스크립트에서의 객체는 key값과 value값이 있어서 이를 한대 묶어 저장할 수 있습니다. var test = { name : "홍길동", age: 20 }; 자바스크립트의 객체를 보면 JSON이 떠오르는데요 실제로 JSON은 자바스크립트의 객체구조를 본따 서버와 웹브라우저간의 데이터를 주고 받을 때 사용하기 위해서 만들어 졌다고 합니다. 이러한 객체에는 배열처럼 배열안에 숫자나 텍스트 타입의 데이터 뿐만 아니라 함수나 배열도 들어갑니다. 2019. 5. 11. 이전 1 2 다음
