분류 전체보기298 UML 개요, 요구사항 개념 ㅁ 웹상으로 바로 하려면 https://app.diagrams.net/ [01 UML 개요][02 StartUML5 설치][03 요구사항 개념] [01 UML 개요] ㅁ 유스케이스, 클래스, 시퀀스 다이어그램- 이 외에도 더 많은 다이어그램이 존재하지만, 실무에서는 이렇게 3가지 정도를 주로 사용한다.- 실무에서 어떤 프로젝트냐에 따라서 세 개 중에 두 개의 다이어그램을 사용하는 경우도 있고,PM(프로젝트 팀장)의 성향에 따라서 아예 생략하는 경우도 많다. ㅁ 학생들이 모델링 관련된 수업을 들으면서 항상 힘들어하거나 어려워하는 부분이 내가 만든 결과물이 정답인가? 틀렸나? 맞다 아니다를 생각하는 것이다.- 모델링이란 정답이 없다. 모델링은 각자 생각하는 바에 따라 다르게 표현된다. 다만 권.. 2024. 8. 25. [부트스트랩] ㅁ 빠르게 화면을 예쁘게 작업을 하고싶다면 무료 템플릿 사용.- 보통 이런 것들은 부트스트랩이라는 걸로 작업이 되어 있다. ㅁ 부투스트랩은 jQuery와는 상관없고 html, css와 관련 있다. ㅁ https://www.w3schools.com/ - 부트스트랩도 다양한 업체에서 제공하는데 조금씩 다르다.- w3schools가 깔끔하다.- 상단의 Bootstrap 메뉴 - B4 클릭- 최신버전이 무조건 좋은게 아니다. B5(Bootstrap 5) 버전은 아예 jQuery를 못 쓴다.- 버전에 대한 차이는 버전 아래에 쓰여 있다. B4는 IE 9 이하는 지원 안한다. - 특정 요소에 클래스만 넣으면 알아서 스타일이 반영된다. ㅁ 굳이 파일 다운받을 필요는 없고 cdn 방식으로 사용한다. - cs.. 2024. 8. 22. [jQuery] 06. effect ㅁ 특정 요소에 이펙트 효과를 주는 메소드- 물론 css로 해도 되지만 jQuery로도 간단하게 할 수 있다. ㅁ - 요소의 크기(width, height)가 조정되면서 보여지고 사라지는 효과의 메소드.크기가 점점 작아지면서 사라지고 점점 커지면서 보여지는 효과의 메소드들이다. - 사용법 요소.show | hide | toggle(['ms']); // 밀리세컨드 제시 가능 - show : 특정 요소의 가로 세로 크기가 점점 커지면서 display를 기존 상태로 처리- hide : 특정 요소의 가로 세로 크기가 점점 작아지면서 display를 최종 none 처리- toggle : show() hide() - block상태가 아닌 기존상태라고 한 이유는, div는 block이지만.. 2024. 8. 22. [jQuery] 05. each ㅁ each 메소드- 배열의 요소들 또는 객체의 속성들을 순회할때 사용할 수 있는 메소드- for in 문과 유사하게 수행됨. (반복문 느낌) - 사용법 (1) $.each( 배열 | 객체, function(매개변수1, 매개변수2) { 순회하면서 수행할 내용}) (2) $(배열).each(function(매개변수1, 매개변수2) { 순회하면서 수행할 내용}) - 배열이나 객체의 속성을 순회하면서 매번 function이 실행됨. (즉 콜백함수같은 거다) - 배열제시시 첫번째 인자값으로 인덱스 수, 두번째 인자값으로 (인덱스 자리에 있는) 요소가 전달됨.(dom 요소 아니고 배열에 있는 요소)- 객체제시시 첫번째 인자값으로 속성명, 두번째 인자값으로 속성값이 전달됨.(객체는 인덱스의 개념이 없.. 2024. 8. 22. [jQuery] 04. dom_dynamic ㅁ 동적으로 요소를 생성하거나 복제, 제거한다 ㅁ 동적으로 요소 생성 > (1) 문자열로 요소 만드는 방식- 변수 = '안녕하세요' // 이렇게 만들고 변수에 담을 수 있다는 뜻. (2) jQuery 객체로 요소 만드는 방식- 변수 = $('').text('안녕하세요'); - 변수 = $('안녕하세요'); // 더 간단한 방법 ( b태그 요소 객체가 만들어짐) - jQuery 객체로 요소를 만들면 jQuery 메소드를 사용할 수 있다.문자열을 달러 괄호로 감싸면 된다.- 이때까지 달러 괄호 안에 요소 선택을 위해 선택자를 써왔는데, 항상 선택자를 써야하는 것은 아니다.요소를 생성할 때는 문자열을 쓴다.- 어떤 태그의 요소를 만들고 싶.. 2024. 8. 21. [jQuery] 03. event ㅁ jQuery 방식으로도 특정 요소에 이벤트 핸들러를 연결할 수 있다.지금까진 인라인 이벤트 모델 방식으로 무언가를 클릭했을 때 선언적 함수가 호출되게만 했었다. ㅁ - jQuery용 객체에 이벤트 핸들러를 부여하는 메소드.- 주로 이벤트명이 곧 메소드명으로 되어있다. - 특정 이벤트 대상이 되는 요소에 특정 이벤트 발생시 실행될 function을 부여할 수 있다. ㅁ 이벤트 메소드 사용법 이벤트대상.이벤트메소드(이벤트핸들러); (1) 익명함수 이벤트대상.click( function([evt]) { 실행내용;} ) (2) 화살표 함수 // this 못 씀. 이벤트대상.click( (.. 2024. 8. 21. [자바스크립트] 14. Data 속성 (Data Attribute) ㅁ data 속성- HTML 구성 요소의 데이터를 저장하기 위한 속성으로 data-* 작성할 수 있다. (속성명은 마음대로 부여)- 모든 data-* 속성은 알게 모르게 DOM의 dataset이라는 속성(property)에 저장됨. HTML Attribute DOM Property 1) data-aaa="" dataset.aaa 2) data-aaa-bbb="" dataset.aaaBbb (dash 구분자는 자동으로 camel-cased 처리됨) 3) data-aaaBbb="" dataset.aaabbb (대문자는 소문자로 처리됨) - (요소에 작성할.. 2024. 8. 20. jQuery 실습문제, jQuery로 data 속성에 접근, 조작 ㅁ 뭐가 자바스크립트 방식이고 뭐가 jQuery 방식인지 구분할 수 있어야 한다.회사에서는 섞어서 쓴다. ㅁ 연습문제 (총 12문제) DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Documenttitle> --> script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">script>head>body> h2>연습h2> div id="practice"> h4>h4.. 2024. 8. 20. jQuery 02. dom_property (요소 선택해서 property 조작) ㅁ 요소 선택도 jQuery 방식으로, 메소스도 jQuery 측에서 제공하는 메소드들을 이용했다.이런 것들을 순수 자바스크립트 방식으로 하기에는 복잡하다.제공하지 않는 기능들도 많고. 그래서 jQuery를 사용한다. ㅁ 지금까지 요소 선택을 했다. 이제 요소의 속성값을 가져오거나 변경하는 것을 해본다.자바스크립트에서 DOM 객체 선택해서 property를 가져오거나 변경했었다. 그런걸 jQuery로 해본다. - 자주 사용했던 속성들과 관련된 메소드들이 jQuery 측에서 제공되고 있다.자바스크립트 방식과 비교해가면서 사용해본다. ㅁ innerText 및 innerHTML 속성 관련 메소드- 두 속성은 해당 요소의 컨텐츠 영역값을 가지고 있는데, 그때 그 컨텐츠 영역에 html 태그가 있다면 그 태그.. 2024. 8. 20. [jQuery] 01. jQuery ㅁ 지금까지 자바스크립트 방식으로 요소를 선택, 조작하고 속성도 제어했다.- 그런데 복잡한 구문들을 편리하게 쓰고한다면 제이쿼리라는 라이브러리를 사용할 수 있다.- 제이쿼리도 결국 자바스크립트 기반이기 때문에 소스코드를 작성한다.자바스크립트 소스코드랑 혼용해서 기술해도 된다. ㅁ jQuery- 자바스크립트만으로 코드를 짜게 되면 굉장히 구문이 복잡하다.다수의 요소에 동일한 이벤트를 부여할 때 매번 요소에 일일이 접근해야 해서 for문을 돌리는 등 번거롭다.- 자바스크립트의 복잡한 구문을 보다 간소화해서 사용할 수 있도록 만들어진 라이브러리 (.js)- 자바스크립트 코드가 내부적으로 다 작성되어 있다. 편하게 쓰도록 함수 등을 정의해 두었다. 자바스크립트 유용한 함수들이 만들어져 있는 모음집이다.우리는 .. 2024. 8. 20. 13. BOM [ 19일 월 12시 25분 ~ 12시 50분까지 그냥 다 ] ㅁ - 브라우저 객체 모델 Browser Object Model- 브라우저의 구성 요소와 관련된 객체 ㅁ BOM 종류 (1) window : 브라우저 화면 자체를 의미 (모든 Java (2) history : 방문했던 경로를 기억하고 있는 객체 // 뒤로가기, 앞으로가기를 가능하게 함(3) location : 경로(URL)를 관리하는 객체 // 주소창과 연관(4) screen : 브라우저 화면 정보를 관리하는 객체 ㅁ 브라우저에도 뒤로 가기, 앞으로 가기가 가능하지만, 우리가 버튼을 둬서 뒤로가기 앞으로 가기 할 수 있다. 12시 25분쯤 1분. ㅁ history 주요 메소.. 2024. 8. 19. 12. 정규 표현식 ㅁ - Regular Expression이어서 regExp로 줄여서 얘기하곤 한다.- 자바스크립트에서도 정규 표현식 객체를 제공한다.생성자 함수가 있어서 그 생성자를 이용해서 생성시킬 수도 있다. - 자바스크립트뿐 아니라 자바, 오라클 등에서도 쓰인다.- 줄여서 정규식이라고도 한다. 정규표현식 > 1. Regular Expression 2. 어떤 문자열이 특정 패턴을 가지고 있는지 확인하기 위한 표현식. 3. 정규표현식을 잘 쓰게 되면 복잡한 조건검사를 할 필요가 없다. (길이 체크, 문자 하나씩 체크) 4. JavaScript 정규식 작성 예시 - 리터럴 표기법 외에 자바스크립트에서 제공하는 객체를 이용해서 생성도 가능하다. .. 2024. 8. 19. [자바스크립트] 복습2 ㅁ (1) 나 DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Documenttitle>head> body> button id="btn1" onclick="season();">버튼1button> div id="result1">div> script> /* #btn1 클릭시 봄여름가을겨울 요소를 #result1에 넣으시오. */ function season() { const d1 = document.getElementById("result1");.. 2024. 8. 16. [자바스크립트] 실습문제4 - 함수, 객체 실습문제 ㅁ 실습문제10_함수실습문제 - 요소.style.display="none" --> 해당 블럭요소 안보이게끔- 요소.style.display="block" --> 해당 블럭요소 보이게끔 - form이 보였다가 안보였다. 체크박스로 ? 라디오로? 체크하면 동적으로 저 폼이 뜨게끔 하면 된다. 각각을 클릭했을 때 띄워줄 div 폼을 미리 만들어 둬라. 그리고 스타일로 display none ㅁ 실습문제11_객체실습문제 ㅁ실습문제12_객체실습문제 2024. 8. 14. [자바스크립트] 11. event + 정규표현식 맛보기 ㅁ - DOM 객체에서 발생되는 시그널- 시스템에서 일어나는 사건(Action) 또는 발생(Occurence)를 의미한다. - 주요 이벤트 발생 방식(1) 사용자의 액션에 의해서 생성 (클릭, 키보드 입력, 마우스 움직임 등)(2) API의 이벤트 생성 ㅁ - 이벤트 발생시 동작시킬 함수 - 이벤트 핸들러(함수) 동작시 이벤트 핸들러의 매개변수로 발생된 이벤트에 대한 각종 정보들이 담겨있는 Event 객체가 인자로 자동 전달된다.- 이벤트 핸들러(함수)를 작성할 때 매개변수를 두면 이벤트 객체가 전달된다.매개변수명은 관례상 "event" 또는 "evt"로 한다. ㅁ 이벤트 모델 Event Model- 이벤트가 발생했을 때 이벤트 핸들러를 할당하는 방법을 이벤트 모델이라고 한다. - 종류(1) .. 2024. 8. 14. [자바스크립트] 09. JSON, 10. Date ㅁ 지금까지 자바스크립트에서 객체를 직접 만드는 법을 배워보았다.- 이렇게 만든 객체를 서버로 전송하거나, 서버측에서 이러한 객체 형태를 응답받을 때가 있다.이때 자바스크립트 객체 형태를 굉장히 많이 주고 받는다.- 그런데 내가 객체를 만들었다고 해서 바로 전달할 수 없다.항상 웹 서버와의 통신시에는 문자열의 형태로 데이터를 주고받아야 한다. ㅁ JSON- 클라이언트, 서버간 데이터를 주고받을 때 포맷 값중의 하나다. ㅁ - Javascript Object Notation- Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷이다.- 웹 애플리케이션에서 데이터를 전송할 때 주로 사용한다. (자바스크립트 서버) - Javascript 객체와는 살짝 차이점이 .. 2024. 8. 14. [자바스크립트] 08.객체 - (2) ㅁ DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Documenttitle>head>body> h2>in과 with 키워드h2> 이름 : input type="text" id="name"> br> 국어 : input type="number" id="kor"> br> 수학 : input type="number" id="math"> br> 영어 : input type="number" id="eng"> br>br> button onclick="fnInWith();">실행확.. 2024. 8. 14. [자바스크립트] 08. 객체 ㅁ 객체- 자바스크립트의 데이터 유형 중 하나.- 중괄호{ }로 생성.- 각 데이터는 "속성(property): 값(value)"의 형태로 정의한다. (key-value 세트를 Entry라고 한다) - 후행 쉼표(trailing comma)를 사용할 수 있다. 변수 = { 속성 : 값, 속성 : 값, 속성 : 값,}; ㅁ 객체 내에 정의되어있는 속성에 접근하는 방법 (1) 점( . ) 표기법 객체.속성 (2) 대괄호( [ ] ) 표기법- 그냥 속성 쓰면 안 되고 문자열로 써야 한다. 객체['속성'] ㅁ DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" co.. 2024. 8. 13. [자바스크립트] 07. 함수 - (2) callback 함수 ㅁ 콜백함수- 인자로 다른 함수에 전달되어서 실행되는 함수 ㅁ 콜백함수 예시1- 로그인 기능 구현시마다 아이디/비번/이메일/토큰 중에 매번 두 개를 체크해야된다. DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Documenttitle>head>body> script> // 각 체크를 담당하는 함수들을 미리 정의 const fnIdCheck = () => { console.log("아이디체크"); } const fnPwdCheck = () => { con.. 2024. 8. 13. 자바 주석 ㅁ 자바 파란색 주석 - /** 혹은 메소드 내에 커서를 위치시켜두고 alt shift j - 일반적인 주석과는 다르다. 메소드에 대한 설명, 매개변수에 대한 설명, 리턴에 대한 설명, 메소드를 누가 개발했는지, 언제 개발했는지, 버전은 뭔지 등을 작성하는 주석 이런 주석을 달아놓는 습관을 들이는 것이 좋다. - 이렇게 주석을 달아놓으면 자동완성으로 호출 가능한 메소드가 뜰 때,오른쪽 메모에 메소드에 대한 주석이 설명으로 표시된다. /**전달받은 값으로 User 객체를 생성해서 반환해주는 메소드 @author 본인이름@param id 생성하고자 하는 User 객체의 아이디값@param pwd 생성하고자 하는 Use.. 2024. 8. 13. [자바스크립트] 07. 함수 ㅁ 함수 작성 방법 (1) 함수 선언식 function name() { } (2) 함수 표현식 const 변수 = function( 매개변수 ) { 실행내용 } (3) 화살표 함수- 함수 표현식의 간결한 대안.- 프론트엔드를 전문적으로 쓰지 않는 회사는 잘 쓰지 않지만, 프론트엔드를 전문적으로 쓰는 회사는 무조건 화살표 함수로 쓴다. const 변수 = ( 매개변수 ) = > { 실행내용 } ㅁ (1) 함수 선언식- 함수 이름을 결정해서 함수를 정의하는 방식. (기명함수)- 함수 선언은 호이스팅(hoisting)이 되므로(최상단으로 끌어올려지므로) 선언하는 코드 line에 상관없이 언제든 호출 가능하다. (호출) named();(정의) function named() { 실행내용 }(호.. 2024. 8. 13. [자바스크립트] 실습문제3 - 배열관련 문제 ㅁ 문제1 DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Documenttitle>head>body> button onclick="fnPractice1();">연습1button> button onclick="fnPractice2();">연습2button> div id="practiceResult">div> script> function fnPractice1() { // 하단의 이미지명들이 담겨있는 배열을 통해서 // 연습.. 2024. 8. 12. [자바스크립트] 06. 배열 (객체), 배열 관련 속성 및 메소드 ㅁ Array- 다수의 데이터들을 담을 수 있다. (자바의 ArrayList와 유사하다)- 크기에 제약이 없고, 타입에도 제약이 없다.- 타입은 object(객체)- 후행 쉼표(trailing comma)를 사용할 수 있다. - 형식 : [element, element, ...] // 배열 내에 담겨있는 값들을 요소라고 하는데, html에서의 요소와는 다르다.- 배열내의 요소에 접근은 배열[index]로 한다. ㅁ Array 선언방법 (1) 변수 = new Array([크기]); // 크기 지정 안 할 수도 있다. (2) 변수 = new Array(element, element, ...); (3) 변수 = [ ]; (4) 변수 = [element, elem.. 2024. 8. 12. [자바스크립트] 05. 문자열, 수학, 형변환 관련 메소드 ㅁ String 관련 메소드1- 문자열 데이터에 html 태그를 감싸서 반환 (1) 문자열.bold() : "문자열" 반환(2) 문자열.italics() : "문자열" 반환(3) 문자열.small() : "문자열" 반환(4) 문자열.sub() : "문자열" 반환(5) 문자열.link(href) : "문자열" 반환... DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="wi.. 2024. 8. 12. [자바스크립트] 04. DOM - (3) 복습 ㅁ 복습1 onclick="fnRemind1();">복습1 - var로 선언된 변수는 해당 영역 내에서 hoisting된다. 선언과 초기화가 같이 이루어지는 구문은 선언 부분만 호이스팅된다. - 만약 var name = "홍길동" 이 구문 자체가 없다면(name이라는 변수 자체가 선언되지 않으면), 콘솔창에 오류는 나지 않고 그냥 빈 문자열 출력된다.- 블럭 내에서 var로 선언된 변수만이 블럭 바깥쪽에서 쓸 수 있다.let, const로 선언된 변수는 그 블럭 내에서만 사용할 수 있다. 이게 scope의 차이다. ㅁ 복습2 onclick="fnRemind2();">복습2 id="result1"> ㅁ 복습 3 DOCTYPE html>html lang="en">head> .. 2024. 8. 12. [240809] 입사지원서 특강 ============================================================================================ ㅁ 1차 프로젝트도 초라하지만 넣는게 좋다. 세미 끝나고 포폴 작성해서 선생님한테 피드백 코드 받기.ㅁ 파이널 때는 멘토님에게 코드 포폴 피드백 받기.ㅁ 완벽하게 갖춰지고 하려하면 늦다ㅁ 모의면접 포폴 발표 다음날이라 참여율이 저조한데 참여해라. ㅁ 사람인 가입 ㅁ si, sm, 솔루션으로 많이 감. 그 중에서도 si에 많이 감. - si는 경력이 뻥튀기될 수밖에 없다. 그건 어쩔 수 없고 혼자 파견 가는데 말고 팀원끼리 사수있이 가는데로 가라.- 근무 환경이 계속 바뀐다. 6개월 단위로 여기저기 옮겨다닐 수 있다. - 모두가 솔루션을 .. 2024. 8. 9. [자바스크립트] 실습문제2 - DOM 관련문제 [실습문제02_DOM 조작] - 문제1, 2 다 네모 검은 박스는 div로. 100x100 픽셀임. - 색상 선택하는 input요소 ㅁ 문제 2-1 (1) 나 DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Documenttitle>head>body> div id="box1" style="width: 100px; height: 100px; background-color: black;">div> input type="color"> button onclick="fnChangeCo.. 2024. 8. 9. [자바스크립트] 04. DOM - (2) 동적인 효과 주기 ㅁ 함수로 동적인 효과 주기 body> div id="div1"> img src="../assets/assets/image/city1.jpg" width="100px" height="100px"> div> h2>특정요소의 컨텐츠 영역 조작하기h2> div id="div2">b>안녕하세요b>div> div id="div3">b>어서오세요b>div> button onclick="fnChangeContent();">컨텐츠영역조작button> script> // 함수로 동적인 효과주기 (화면 전체 수정 아니고 일부만 수정됨) function fnChangeContent() { const divEl2 = do.. 2024. 8. 9. [자바스크립트] 04. DOM ㅁ DOM- Document Object Model 문서 객체 모델- HTML, XML 문서의 프로그래밍 인터페이스.(자바스크립트만의 용어는 아니고, xml에서도 나온다)- 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하며 문서의 구조, 스타일, 내용 등을 변경할 수 있게 도와줌. - 자바스크립트에서는 html 요소들을 DOM 구조로 인식하고 있음따라서 자바스크립트에서는 요소 하나하나들을 DOM 객체라고 함. ■■■ HTML ■■■ ■■■ DOM tree ■■■ Document .. 2024. 8. 9. [자바스크립트] 실습문제 ㅁ 실습문제01_동적으로 테이블 생성 DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Documenttitle>head>body> table border="1"> tr> td width="40px" height="40px">1td> td width="40px" height="40px">2td> td width="40px" height="40px">3td> tr> tr> t.. 2024. 8. 8. 이전 1 ··· 4 5 6 7 8 9 10 다음
