IT with Life

ajax 로 대량의 데이터를 불러와서 화면에 출력을 할 때 스타일을 지정을 해주는게 적용이 잘 안 될 때도 있고 해서 어쩔 수 없이 스타일로 지정을 해주는데 일일히 조건을 다 넣자니 복잡해져서 좀 간단한 방법을 찾아봤더니 있네요. 우선 ajax 로 데이터 불러오는 건 2022.07.06 - [Programming/Javascript & jQuery] - [jQuery] AJAX 기본 사용법 [jQuery] AJAX 기본 사용법 서버와의 통신을 하기 위해서 ajax 를 사용하는데, 쉽고 편하게 잘 만들어져 있습니다. 기본 틀은 $.ajax({ type: 'GET or POST', url: '요청 보낼 url', error: function(request, status, error) {}, success: ..

서버와의 통신을 하기 위해서 ajax 를 사용하는데, 쉽고 편하게 잘 만들어져 있습니다. 기본 틀은 $.ajax({ type: 'GET or POST', url: '요청 보낼 url', error: function(request, status, error) {}, success: function(data) {} }); 단순히 데이터만 받아오면 될 경우에는 GET을 사용하고 파라미터를 넘겨줘야 될 경우라면 POST 를 사용하는게 좋습니다. url 의 경우에는 절대경로를 사용해서 요청을 하는 게 좋습니다. error의 경우 요청이 실패했을 때 이유를 확인하기 위한 용도로 사용할 수 있는데요 request.status 를 출력하면 에러 코드가 나오고 request.responseText 를 출력하면 에러 메세..

정규식은 정리할게 많아 다음에 하기로 하고 우선 기본적으로 문자열을 합치거나 자르거나 하는 것만 말씀드리겠습니다. 1. 문자열 합치기(혹은 문자와 문자 합치기) var a = 'IT'; var b = '따라잡기'; 라는 두 변수가 있다고 할 때 두개를 합치고 싶을 경우 간단하게 + 로 연산을 해 주면 됩니다. var c = a + b; 그러면 c는 'IT따라잡기' 가 됩니다. 그리고 a와 b 사이에 다른 문자를 넣고 싶다면 마찬가지로 + 로 연산을 해주면 되는데 자바스크립트에서는 문자열을 '' 나 "" 로 감싸주면 됩니다. var c = a + ' 제대로 ' + b; 라고 할 경우 c 의 값은 'IT 제대로 따라잡기' 가 됩니다. 2. 문자열 자르기 a. substr() substr은 문자열의 인덱스를 ..

사람마다 주로 사용하는 건 다를 거라고 생각되지만 주로 for 문을 사용하게 되는 거 같네요. 기본 형식은 다른 언어들과 크게 다르지는 않습니다. 1. for 문 기본 형은 for (var i=0; 조건; i++) {} 이런 식이죠. for (var i=0; i

자바스크립트는 클라이언트 단에서 실행이 되는 언어라서 서버와 통신을 통해서 데이터를 주고 받을 때 많이 사용합니다. 또, HTML 만으로는 기능 구현이 어려워 좀 더 다양한 기능을 사용하고 싶을 때 쓰기도 하고요. 자바스크립트는 기본적으로 HTML 문서 내에서 부분적인 기능을 담당하도록 사용이 가능하고 다양한 라이브러리를 통해 좀 더 편하고 강력한 기능들을 사용할 수 있지만, 저는 기본적인 것들에 대한 것들만 올리게 될 것 같네요. 각설하고. HTML 파일 내에서 로 둘러싸인 영역에 스크립트를 작성하게 되면 실행이 되는 구조입니다. 별도의 javascript 는 별도로 임포트를 하거나 하지 않아도 잘 작동하지만, jQuery의 경우에는 HTML 을 로드 할 때 불러와 줘야 사용이 가능합니다. 우선 jQu..

vue create 명령어를 통해 프로젝트를 생성하게 되면 기본 구조를 가진 프로젝트가 생성이 되는데요. 기존까지 사용해왔던 html, javascript 등과는 좀 다른 구조를 가지고 있어서 간단히 정리 해볼까 합니다. 저도 이제 막 시작을 한 참이라 모르는 부분이 많으니 잘못된 부분이나 애매한 부분이 있다면 말씀해주세요. vscode 등으로 프로젝트를 생성한 후 같이 보면 좀 더 이해하기 쉬울 것 같네요. 우선 아무것도 건드리지 않았을 때의 기본 구조는 이렇게 되어 있는데요. 익숙한 파일들도 보이고 vue확장자를 가진 파일이 보이네요. index.html 의 구조를 간단히 보니 내용이 보여질 div 태그 와 vue 를 지원하지 않을 경우에 메시지를 표시할 영역으로 되어 있는 것으로 보이네요. 일단 대..

1. Node.js 설치 사이트 : https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 링크로 이동하여 원하시는 버전을 받으시면 됩니다. LTS 버전이 일반적으로 많이 사용되는 거 같네요. 지원 일정은 이렇다고 하니 참고 정도로만 봐주세요. 다운받은 파일을 실행하고 쭉 다음 누르다가 요 화면에서 체크를 해 준 후 진행하면 됩니다. 윈도우 설정에 따라 실행 권한을 요구하기도 하는데 승인 후 진행하면 됩니다. 설치 완료 후 프로그램을 닫으면 이러한 화면이 나올텐데요 아무키나 눌러서 넘어가고 다음 화면에서도 마찬가지로 넘어가시면 됩니다. 윈도우 설정에 따..

0. 들어가기 div 태그를 이용해 영역을 미리 만들어 주고 해당 영역의 디폴트 값은 보여주지 않는 상태로 둡니다. 그리고 클릭 등이 일어났을 때 설정했던 영역을 이용해 모달박스를 보여주게 되는 건데요 CSS와 JavaScript, PHP 를 이용해서 간단하게 구현해볼까 합니다. 1. 모달 영역 modal-back 클래스인 div는 모달 박스가 열렸을 때 다른 영역을 검게 칠하거나 해서 강조 해주기 위해 사용되는 영역입니다. modal-wrap 영역은 모달 박스가 나오는 부분의 영역이고 modal-body 영역은 내용이 나오는 영역입니다. 2. CSS 사이에 table, tr, td, thead, th{ margin : 1px auto; border: 1px solid; border-collapse: c..

데이터를 보기 편하게 하는 방법 2 이전 포스트 에서 각 행 별로 스타일을 적용했었는데요 이번 포스팅에서는 마우스를 가져갔을 때 색을 변경하는 방법을 설명하겠습니다. 스타일은 table,tr,td{ border:1px solid #000000; border-collapse:collapse; } tr.colored:nth-child(even){ background-color:#aaaaaa; color:#000000; } tr.colored:nth-child(odd){ background-color:#444444; color:#FFFFFF; } tr.colored:hover td{ background-color:#f3e9e9 !important; color:#303f39 !important; } 테이블은 테..

테이블에 열이 한두개가 아닐 경우에는 행이 길어지면 헷갈릴 때가 좀 있긴 합니다. 이럴 때 조금이라도 보기 편하게 만들어 주는 방법 중 하나가 각 행의 색을 다르게 주는 것입니다. 스타일과 클래스를 적용해서 간단하게 할 수 있습니다. 우선 스타일은 table,tr,td{ border:1px solid #000000; border-collapse:collapse; } tr.colored:nth-child(even){ background-color:#FFFFFF; color:#000000; } tr.colored:nth-child(odd){ background-color:#000000; color:#FFFFFF; } 요런 식으로 되어 있다고 하고 테이블이 테스트1-1 테스트1-2 테스트1-3 테스트1-4 테..