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: ..

1. 기본형 implode(구분자, 배열); 각 배열안에 있는 값이 숫자형이든 문자형이든 리턴값은 문자열이 됩니다. 예제1 $array_test = array(1, 2, 3, 4, 5); $res = implode($array_test); echo $res; 결과 12345 예제2 $array_test = array(1, 2, 3, '4', '5'); $res = implode($array_test); echo $res; 12345 예제3 $array_test = array( 'test1' => 'stest1', 'test2' => 'stest2', 'test3' => 'stest3', 'test4' => 'stest4' ); $res = implode($array_test); echo $res; 결과 ..

기본형 explode(원본문자열, 잘라낼 기준, 제한) 잘라내는 기준은 하나의 문자여도 되고 문자열이어도 가능합니다. 여기서 제한은 생략 가능하며, 제한을 둘 경우 그 뒤의 문자열은 처리하지 않고 하나의 문자열로 배열에 저장됩니다. 예제1. $str = 'name1,name2,name3,name4'; $res = explode(',', $str); print_r($res); 결과 Array ( [0] => name1 [1] => name2 [2] => name3 [3] => name4 ) 예제2. $str2 = 'name1, name2, name3, name4'; $res2 = explode(', ', $str2, 3); print_r($res2); 결과 Array ( [0] => name1 [1] =>..

서버와의 통신을 하기 위해서 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. 길이 구하기 strlen(string $string): int 리턴 값은 int 형입니다. $str = 'test string'; $str_len = strlen($str); echo $str_len; // 11 출력 2. 잘라내기 substr(string $string, int $offset, ?int $length = null): string 첫번째는 원본 문자열, 두번째는 시작점, 마지막은 시작점부터 몇자리의 문자를 잘라낼지 입니다. 리턴은 문자열입니다. $str = 'test string'; $res = substr($str, 5, 3); echo $res; // str 출력 $res = substr($str, 5); // string 출력 여기서 만약 문자열의 길이를 모를 때, 어떤 문자열..

정규식은 정리할게 많아 다음에 하기로 하고 우선 기본적으로 문자열을 합치거나 자르거나 하는 것만 말씀드리겠습니다. 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 버전이 일반적으로 많이 사용되는 거 같네요. 지원 일정은 이렇다고 하니 참고 정도로만 봐주세요. 다운받은 파일을 실행하고 쭉 다음 누르다가 요 화면에서 체크를 해 준 후 진행하면 됩니다. 윈도우 설정에 따라 실행 권한을 요구하기도 하는데 승인 후 진행하면 됩니다. 설치 완료 후 프로그램을 닫으면 이러한 화면이 나올텐데요 아무키나 눌러서 넘어가고 다음 화면에서도 마찬가지로 넘어가시면 됩니다. 윈도우 설정에 따..

변수는 숫자형, 문자형, 참거짓 으로 나눌 수 있고 숫자형은 정수, 소수로 나눌 수 있습니다. 또한 문자형은 문자열과 문자로 나눌 수 있습니다. 1. 정수형 정수형은 Int 와 Uint 로 크게 나뉘고 여기서 표현할 수 있는 길이에 따라 또 달라집니다. 각각에 8, 16, 32, 64를 뒤에 붙여서 선언을 할 수 있는데, 굳이 사용하지 않아도 됩니다. 변수 특성상 값이 변하기 때문에 언제든 넘어갈 수 있어서 언어에서 알아서 처리를 하는 거 같네요. Int는 정수를 표현하고 UInt는 자연수를 표현합니다. 선언은 var a: Int = 10 var b: UInt = 100 요런 식으로 하면 됩니다. 여기서 var을 let로 바꾸면 상수로 선언을 하게 되는 것도 참고해 주세요. 2. 실수형 실수는 Float..

1. 변수란? 변수는 빈번하게 사용되는 것이기에 매우 중요한 항목입니다. 쉽게 이야기 하자면 변수란 어떠한 값을 저장하는 이름을 지니는 공간 이라고 생각하면 되는데요 박스에 이름을 적어 놓았다고 생각하면 조금 이해하기가 쉬울 걸로 생각됩니다. 근데 이 박스가 정사각형이 있고 직사각형이 있고... 또 박스마다 크기가 제각각이듯 변수 또한 담을 수 있는 값의 종류가 다르고 그 값의 제한이 각각 다르게 되어 있습니다. 2. 변수의 종류 변수는 크게 전연벽수와 지역변수로 나뉘게 되는데요. 전역변수는 프로그램 내에서 어디서든 사용이 가능한 형태이고 지역변수는 함수 등 일정 영역에서만 사용할 수 있는 형태입니다. (함수에 대한 건 나중에 자세히 다루도록 하겠습니다.) 3. 변수와 상수 변수는 값이 변하지 않아야 되..

스위프트는 C랑은 좀 달라서 어느정도는 공부를 해두는게 좋을 거 같아 정리를 하고자 합니다. 코틀린(Kotlin)이랑 비슷한 거 같은데 어느게 먼저 나온 건지는 잘 모르겠네요. 암튼. 가볍게 시작하는 느낌으로 간단하게 모든 언어의 시작인 Hello world 를 출력하는 걸 만들어 보겠습니다. GUI 는 아직 하긴 좀 그래서 간단하게 문자열 같은 변수 사용법이나 배열, 반복문, 조건문 등 기본적인 사항을 익힐 예정이니 참고 부탁합니다. 우선 Xcode 를 실행한 후 이 화면에서 Create a new Xcode project 를 선택한 후 상단 탭에서 macOS 를 선택하고 Command Line Tool 을 선택합니다. 그리고 Next 를 누르면 프로젝트 설정하는 화면이 나오고 적당히 이름을 입력해 준..

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..

0. 준비 jQuery 의 경우 페이지의 내에 선언을 해주는 부분이 필요합니다. 위 코드를 페이지 의 동적 선택박스 예제 그룹 그룹A 그룹B 그룹 사용자 테이블안의 선택박스에 ID를 지정해 줬고, group 이라는 id를 가진 선택박스의 선택항목이 변경되면 위 스크립트가 적용이 됩니다. json 방식을 통해 배열 데이터를 전달받을 예정이라 Jquery.parseJson() 함수가 사용된 것입니다. 이제 test.php의 내용입니다. 테이블(userlist)의 컬럼이 그룹명(group_name)이 있고 사용자 이름(user_name)이 있을 때 그룹내의 사용자 를 찾아내서 배열에 저장한 후 json 방식으로 되돌려 주는 코드입니다. DB 접속하는 방법은 이전 포스트를 참고해 주세요 xrexter.tisto..