var num = 5 /2;\nconsole.log(num); // (출력값) 2.5\nconsole.log(Math.floor(num)); // (출력값) 2// str 문자열 생성\nvar str = 'test';\nconsole.log(str[0], str[1], str[2], str[3]); // (출력값) test\nstr[0] = 'T'; // 문자열의 첫 글자를 대문자로 변경?\nconsole.log(str); // (출력값) test// null 타입 변수 생성\nvar nullVar = null;\nconsole.log(typeof nullVar === null); // (출력값) false\nconsole.log(nullVar === null); // (출력값) trueteam長: 같은 일에 종사하는 한 팀의 책임자.\nTeam Leader
\n\n\n팀장으로 태어나는 사람은 없다.
\n
어떻게 하면 우리 팀원들과 프로젝트를 잘 이끌 수 있을까 고민하며 매일 일을 한다.
\n\n\n회사 미팅 후 대표와의 대화. 팀장인 나의 고민을 털어 놓다.
\n
회사 대표님이 'The Art of Project Management : 마음을 움직이는 프로젝트 관리' 라는 책을 추천해주시면서, 좋은 팀을 만들기 위해 가장 필요한 것은 마음이라고 말해주셨다.
\n이 책을 읽어보지는 못했지만, 프로젝트에서 제일 중요한 건 사람이고 사람의 마음을 움직이는 것이 프로젝트와 팀 관리의 성공 요소이다. 나는 때론 사람을 제일 우선으로 생각하기보다 프로젝트의 결과만을 더 바라보고 있지 않았나 반성을 해본다. 팀원들이 어떠한 마음으로 프로젝트를 임하고 있는지 주의 깊게 관찰하고, 소통과 협력을 강화하는 것이 팀장의 역할이다.
\n\n\n성공하는 데 가장 중요한 것은 다른 사람들과 조화롭게 지내는 것이다. 성공과 협력은 하나로 연결되어 있다. \n윌리엄 페더
\n
나는 팀원들이 스스로 계획하고 수행할 수 있도록 팀원들에게 자율성과 책임을 줄 뿐 아니라, 사람과 사람으로 마음을 나누는 팀장이 되고 싶다. 함께 재미있고 더불어 성장하는 개발팀이 되도록 내가 더욱 마음을 열고 다가가야겠다.\n우리 회사에는 대학생 인턴이 있다. 그 인턴과 함께 매주 금요일마다 진행되고 있는 프로젝트에 대해 회고(Retrospective)를 진행하고 있다. 회고 시간에는 아래와 같은 주제로 대화를 나눈다.
\n회고를 통해 우리는 계속 이어나갈 것과 고쳐야 할 것들을 정하고, 해당 사항들을 다음 주에 바로 적용해보았다. 회고를 통해 우리는 프로젝트의 개발과 관리에 큰 개선이 있었고, 개개인의 만족도도 많이 올라갔다.
\n\n\n마음을 움직이는 프로젝트 관리.
\n
팀장은 팀의 성장과 소통을 위해 존재하고, 그것을 위해 제일 헌신해야 한다. 팀을 수평적으로 운영하고, 팀원들이 자신의 업무에 집중할 수 있도록 자율성과 개개인을 향한 믿음을 줘야 한다.
\n무슨 일이든 말은 쉽고 행동은 어려운 법이다.\n이제 더 나은 팀장이 되기 위해 노력하고, 그 과정을 글로 자주 남겨야겠다.
","excerpt":"팀장 team長: 같은 일에 종사하는 한 팀의 책임자.\nTeam Leader…"}}}},{"node":{"title":"TEST","id":"1c07dc48-4511-53aa-bc17-87c763771615","slug":"plenty-of-dogs","publishDate":"September 14, 2018","heroImage":{"title":"plenty-of-dogs","fluid":{"aspectRatio":1.6201620162016201,"src":"//images.ctfassets.net/e1rkozd9gki4/6IEbHAasCWKs8GMGuSQAcC/367e2a009d8d71b375cd6e9b05287aaf/plenty-of-dogs.jpg?w=1800&q=50","srcSet":"//images.ctfassets.net/e1rkozd9gki4/6IEbHAasCWKs8GMGuSQAcC/367e2a009d8d71b375cd6e9b05287aaf/plenty-of-dogs.jpg?w=450&h=278&q=50 450w,\n//images.ctfassets.net/e1rkozd9gki4/6IEbHAasCWKs8GMGuSQAcC/367e2a009d8d71b375cd6e9b05287aaf/plenty-of-dogs.jpg?w=900&h=556&q=50 900w,\n//images.ctfassets.net/e1rkozd9gki4/6IEbHAasCWKs8GMGuSQAcC/367e2a009d8d71b375cd6e9b05287aaf/plenty-of-dogs.jpg?w=1800&h=1111&q=50 1800w","srcWebp":"//images.ctfassets.net/e1rkozd9gki4/6IEbHAasCWKs8GMGuSQAcC/367e2a009d8d71b375cd6e9b05287aaf/plenty-of-dogs.jpg?w=1800&q=50&fm=webp","srcSetWebp":"//images.ctfassets.net/e1rkozd9gki4/6IEbHAasCWKs8GMGuSQAcC/367e2a009d8d71b375cd6e9b05287aaf/plenty-of-dogs.jpg?w=450&h=278&q=50&fm=webp 450w,\n//images.ctfassets.net/e1rkozd9gki4/6IEbHAasCWKs8GMGuSQAcC/367e2a009d8d71b375cd6e9b05287aaf/plenty-of-dogs.jpg?w=900&h=556&q=50&fm=webp 900w,\n//images.ctfassets.net/e1rkozd9gki4/6IEbHAasCWKs8GMGuSQAcC/367e2a009d8d71b375cd6e9b05287aaf/plenty-of-dogs.jpg?w=1800&h=1111&q=50&fm=webp 1800w","sizes":"(max-width: 1800px) 100vw, 1800px"}},"body":{"childMarkdownRemark":{"timeToRead":9,"html":"The Web Developer Bootcamp - Udemy
\nIntro to Functions by Colt Steele
\nFunctions let us wrap bits of code up into REUSABLE packages. They are one of the building blocks of JS.
\nfunction doSomething() {\n console.log(\"HELLO WORLD\");\n}• Declare a function first.\n• Then call it.
\nOften we want to write functions that take inputs.
\nfunction square(num) {\n console.log(num * num);\n}모든 함수는 반환을 한다.
\n//this function capitalizes the first char in a string:\n\nfunction capitalize(str) {\n return str.charAt(0).toUpperCase() + str.slice(1);\n}\n\nvar city = \"paris\"; //\"paris\"\nvar capital = capitalize(city); //\"Paris\"\n\n//we can capture the returned value in a variablefunction isEven(num){\n\treturn num % 2 === 0;\n}\n\nfunction factorial(num){\n //define a result variable\n var result = 1;\n //calculate factorial and store value in result\n for(var i = 2; i <= num; i++){\n \tresult *= i;\n }\n //return the result variable\n return result;\n}\n\nfunction kebabToSnake(str) {\n\t//replace all '-' with \"_\"'s\n\tvar newStr = str.replace(/-/g , \"_\");\n\t//return str\n\treturn newStr;\n}function sing() {\n\tconsole.log(\"twinkle twinkle...\");\n\tconsole.log(\"how i wonder...\");\n}\n\nsetInterval(sing, 1000);\n\nclearInterval(2);\n\nsetInterval(function() {\n\tconsole.log(\"I am an anonymous function!\");\n\tconsole.log(\"THIS IS AWESONE!\");\n}, 2000);Push\nUse push to add to the end of an array:
\nvar colors = [\"red\", \"orange\", \"yellow\"];\ncolors.push(\"green\");\n//[\"red\", \"orange\", \"yellow\", \"green\"]Pop\nUse pop to remove the last item in an array
\nvar colors = [\"red\", \"orange\", \"yellow\"];\ncolors.pop();\n//[\"red\", \"orange\"]\n\n//pop() returns the removed element\nvar col = colors.pop(); //orangeUnshift\nUse unshift to add to the front of an array
\nvar colors = [\"red\", \"orange\", \"yellow\"];\ncolors.unshift(\"infrared\")\n//[\"infrared\", \"red\", \"orange\", \"yellow\"]Shift\nUse shift to remove the first item in an array
\nvar colors = [\"red\", \"orange\", \"yellow\"];\ncolors.shift();\n//[\"orange\", \"yellow\"]\n\n//shift() also returns the removed element\nvar col = colors.shift(); //orangeIndexOf\nUse indexOf() to find the index of an item in an array
\nvar friends = [\"Charlie\", \"Liz\", \"David\", \"Mattias\", \"Liz\"];\n\n//returns the first index at which a given element can be found\nfriends.indexOf(\"David\"); //2\nfriends.indexOf(\"Liz\"); //1, not 4\n\n//returns -1 if the element is not present.\nfriends.indexOf(\"Hagrid\"); //-1Slice\nUse slice() to copy parts of an array
\nvar fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];\n//use slice to copy the 2nd and 3d fruits\n//specify index where the new array starts(1) and ends(3)\nvar citrus = fruits.slice(1, 3);\n\n//this does not alter the original fruits array\n//citrus contains ['Orange','Lemon']\n//fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];\n\n//you can also use slice() to copy an entire array\nvar nums = [1,2,3];\nvar otherNums = nums.slice();\n//both arrays are [1,2,3]2 Dimensional Array
\nvar friendGroups = [\n [\"Harry\", \"Ron\", \"Hermione\"],\n [\"Malfoy\", \"Crabbe\", \"Goyle\"],\n [\"Mooney\", \"Wormtail\", \"Prongs\"]\n];\n\n//What is the result of this line:\nconsole.log(friendGroups[2][0]); // Mooney\nconsole.log(friendGroups[2]); // [\"Mooney\", \"Wormtail\", \"Prongs\"]Simple todo list app\nlist.html
\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Title</title>\n <script type=\"text/javascript\" src=\"list.js\"></script>\n</head>\n<body>\n <h1>Todo List</h1>\n <ul>\n <li>\"new\" - Add A Todo</li>\n <li>\"list\" - List All todos</li>\n <li>\"quit\" - Quit App</li>\n </ul>\n\n</body>\n</html>list.js
\nvar todos = [\"Buy new turtle\"];\n\nvar input = prompt(\"What would you like to do?\");\n\nwhile(input !== \"quit\"){\n // handle input\n if(input === \"list\") {\n todos.forEach(function(todo){\n console.log(todos);\n });\n } else if(input === \"new\") {\n // ask for new todo\n var newTodo = prompt(\"Enter new todo\");\n // add to todos array\n todos.push(newTodo);\n }\n // ask again for new input\n input = prompt(\"What would you like to do?\")\n}\nconsole.log(\"ok you quit the app\")For Loop\nTo loop over an array using a for loop, we need to make use of the array's length property
\nvar colors = [\"red\", \"orange\", \"yellow\", \"green\"];\nfor(var i = 0; i < colors.length; i++) {\n console.log(colors[i]);\n}\n//red\n//orange\n//yellow\n//greenForEach\nJavaScript provides an easy built-in way of iterating over an array: ForEach\narr.forEach(someFunction)
var colors = [\"red\", \"orange\",\"yellow\", \"green\"];\ncolors.forEach(function(color){\n//color is a placeholder, call it whatever you want\n console.log(color);\n});\n//red\n//orange\n//yellow\n//green\n\ncolors.forEach(function(iLoveDogs) {\n\tconsole.log(\"INSIDE THE FOREACH \" + iLoveDogs);\n});\n//INSIDE THE FOREACH red\n//INSIDE THE FOREACH orange\n//INSIDE THE FOREACH yellow\n//INSIDE THE FOREACH greenExercise
\nvar numbers = [1,2,3,4,5,6,7,8,9,10];\nnumbers.forEach(function(color){\n\tif(color % 3 === 0) {\n\tconsole.log(color);\n }\n});\n//3\n//6\n//9Exercise2
\n[1,2,3].forEach(function(el, i, arr) {\n console.log(el, i, arr);\n});\n// 1 0 [1, 2, 3]\n// 2 1 [1, 2, 3]\n// 3 2 [1, 2, 3]Q. I am wondering exactly how that function works..
\nlist.html
\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Title</title>\n <script type=\"text/javascript\" src=\"list.js\"></script>\n</head>\n<body>\n <h1>Todo List</h1>\n <ul>\n <li>\"new\" - Add A Todo</li>\n <li>\"list\" - List All todos</li>\n <li>\"delete\" - Remove a Specific Todo</li>\n <li>\"quit\" - Quit App</li>\n </ul>\n\n</body>\n</html>list.js
\nvar todos = [\"Buy New Turtle\"];\n\nvar input = prompt(\"What would you like to do?\");\n\nwhile(input !== \"quit\"){\n //handle input\n if(input === \"list\") {\n printList();\n } else if(input === \"new\") {\n addTodo();\n } else if(input === \"delete\") {\n deleteTodo();\n }\n //ask again for new input\n input = prompt(\"What would you like to do?\");\n}\nconsole.log(\"OK, YOU QUIT THE APP\");\n\nfunction printList() {\n console.log(\"**********\");\n todos.forEach(function(todo, index){\n console.log(index + \": \" + todo);\n });\n console.log(\"**********\");\n}\n\nfunction addTodo(){\n //ask for new todo\n var newTodo = prompt(\"Enter new todo\");\n //add to todos array\n todos.push(newTodo);\n console.log(newTodo + \" added to list\")\n}\n\nfunction deleteTodo(){\n var index = prompt(\"Enter index of todo to delete\");\n todos.splice(index, 1);\n console.log(\"Todo Removed\")\n}Write a function printReverse() that takes an array as an argument and prints out the elements in the array in reverse order (don't actually revese the array itself.
\nprintReverse - My solution
\nlet arr = [1, 2, 3, 4];\nlet arr2 = [\"a\", \"b\", \"c\"];\n\nfunction printReverse(array) {\n\tif (array === undefined || array.length === 0) {\n\t // array empty or does not exist\n \tconsole.log(\"This array is empty!\");\n \treturn;\n\t}\n for(var i = array.length; i >= 0 ; i--) {\n console.log(array[i]);\n }\n}\n\nprintReverse(arr);\n//4\n//3\n//2\n//1\nprintReverse(arr2);\n//c\n//b\n//aprintReverse - Colt Steele
\nfunction printReverse(arr){\n\tfor(var i = arr.length - 1; i >= 0; i--){\n\t\tconsole.log(arr[i]);\n\t}\n}\n\nprintReverse([3,6,2,5]);\n//5\n//2\n//6\n//3Write a function isUniform() which takes an array as an argument\nand return true if all elements in the array are identical.
\nisUniform - My solution
\nlet arr = [1, 1, 1, 1];\nlet arr2 = [2, 1, 1, 1];\nlet arr3 = [\"a\", \"b\", \"c\"];\nlet arr4 = [\"b\", \"b\", \"b\"];\n\nfunction isUniform(array) {\n if (array === undefined || array.length === 0) {\n // array empty or does not exist\n console.log(\"This array is empty!\");\n return;\n }\n let temp = array[0];\n for(let i = 1; i < array.length; i++) {\n if(temp !== array[i]){\n console.log(\"false\");\n return;\n }\n }\n\n console.log(\"true\");\n}\n\nisUniform(arr); //true\nisUniform(arr2); //false\nisUniform(arr3); //false\nisUniform(arr4); //trueisUniform - Colt Steele
\nfunction isUniform(arr){\n\tvar first = arr[0];\n\tfor(var i = 1; i < arr.length; i++){\n\t\tif(arr[i] !== first){\n\t\t\treturn false;\n\t\t}\n\t}\n\treturn true;\n}Write a function sumArray() that accept an array of numbers and return the sum of all numbers in the array.
\nsumArray - My solution
\nlet arr = [1, 2, 3];\nlet arr2 = [10, 3, 10, 4];\nlet arr3 = [-5, 100];\n\nfunction sumArray(array) {\n if (array === undefined || array.length === 0) {\n // array empty or does not exist\n console.log(\"This array is empty!\");\n return;\n }\n let result = 0;\n for(let i = 0; i < array.length; i++) {\n result += array[i];\n }\n console.log(result);\n}\n\nsumArray(arr); //6\nsumArray(arr2); //27\nsumArray(arr3); //95sumArray - Colt Steele
\nfunction sumArray(arr){\n\tvar total = 0;\n\tarr.forEach(function(element){\n\t\ttotal += element;\n\t});\n\treturn total;\n}Write a function max() that accepts an array of numbers and returns the maximum number in the array.
\nmax - My solution
\nlet arr = [1, 2, 3];\nlet arr2 = [10, 3, 10, 4];\nlet arr3 = [-5, 100];\n\nfunction max(array) {\n if (array === undefined || array.length === 0) {\n // array empty or does not exist\n console.log(\"This array is empty!\");\n return;\n }\n if(array.length === 1) {\n console.log(array[0]);\n } else {\n let result = array[0];\n for(let i = 1; i < array.length; i++) {\n if(array[i] > result) {\n result = array[i];\n }\n }\n console.log(result);\n }\n}\n\nmax(arr); //3\nmax(arr2); //10\nmax(arr3); //100max - Colt Steele
\nfunction max(arr){\n\tvar max = arr[0];\n\tfor(var i = 1; i < arr.length; i++){\n\t\tif(arr[i] > max){\n\t\t\tmax = arr[i];\n\t\t}\n\t}\n\treturn max;\n}let colors = [\"red\", \"orange\", \"yellow\"];\n\nfunction myForEach(arr, func) {\n // loop through array\n for(var i = 0; i < arr.length; i++) {\n // call func for each item in array\n func(arr[i]);\n }\n}\n\nmyForEach(colors, function() {alert(\"Hi\")});\nmyForEach(colors, function(color) {console.log(color)});\n//red\n//orange\n//yellowArray.prototype.myForEach = function (func) {\n for(let i = 0; i < this.length; i++) {\n func(this[i]);\n }\n};\n\n\nlet friends = [\"charlie\", \"dave\", \"maddy\", \"caitlin\"];\n\nfriends.myForEach(function (name) {\n console.log(\"I love \" + name);\n});\n//I love charlie\n//I love dave\n//I love maddy\n//I love caitlin선분 그리기 응용프로그램
\n파일에서 끝내기를 누르게 되면 현재 돌아가고 있는 프로그램이 종료가 되\n고 창이 꺼진다.\n
색상 메뉴를 클릭하게 되면 색을 골를 수 있는 버튼들이 있는 창이 따로 뜨게 된다. 원하는 색을 클릭하고 선택을 누르게 되면 선의 색이 변경이 가능하다. 취소를 누를 경우 색은 변경하지 않고 따로 뜬 색상 고르는 창이 꺼지게 된다.\n
메뉴의 마지막으로 도움말의 정보를 누르게 되면 프로그램에 관한 정보를 볼 수 있다.
\n오른쪽 마우스를 클릭할 경우, 현재 마우스 버튼의 좌표를 확인할 수 있다고 위에서 설명했다. 만일 선분이 있을 경우에는 선분들의 위치와 색상, 현재 위치와 선분들과의 거리를 모두 확인할 수 있다. 선분과의 거리는 ‘distance‘라는 함수를 통해 구현하였다.
\n오른쪽 마우스가 다운되었을 때 실행되는 소스이다. 오른쪽 마우스 클릭한 좌표와 선들과의 차이를 저장하는 배열 ‘distanceResult’, 현재 위치를 저장하는 지역 변수 ‘currentX’, ‘currentY’, 선분과의 거리와 우선순위를 통해 선을 선택하는 전역 변수 ‘lineSelect’, 현재 좌표와 선분들의 거리를 체크해주는 함수 ‘distance’ 호출 등이 주로 이용된다.
\n// 오른쪽 마우스가 다운되었을 때(DOWN)\ncase WM_RBUTTONDOWN:\n {\n float distanceResult[10] = {\n 0.0\n }; // 오른쪽 마우스 클릭한 좌표와 선들과의 거리차 저장하는 배열\n lineSelect = -1; // 선택한 라인 넘버 초기화\n double currentX = LOWORD(lParam); // 현재 마우스 클릭한위치의 X를 currentX 변수에 저장\n double currentY = HIWORD(lParam); // 현재 마우스 클릭한 위치의 Y를 currentY 변수에 저장\n // 오른쪽 마우스 클릭 좌표 표시\n TRACE(_T(\"\\n오른쪽 마우스 버튼 좌표 = (%d, %d)\\n\"),\n (int) currentX, (int) currentY);\n // 라인이 하나도 없을 경우 break문을 통해 탈출\n if ((int) lines.size() <= 0) {\n break;\n }\n // 라인이 하나라도 있을 경우 드래그가 가능하도록 아래 else로 들어감\n else {\n // 현재 Vector Lines에 있는 모든 p0, p1의 x, y 좌표 표시\n for (int i = 0; i < (int) lines.size(); i++) {\n TRACE(_T(\"[line %d] p0.x=%d, p0.y=%d , \"), i + 1,\n lines[i].p0.x, lines[i].p0.y);\n TRACE(_T(\"p1.x=%d, p1.y=%d, color=%d \\n\"),\n lines[i].p1.x, lines[i].p1.y, lines[i].color);\n }\n\n // 오른쪽 마우스 클릭 좌표와 라인과의 거리 차이를 distance 함수를 이용해 배열 distanceResult에 저장\n for (int j = 0; j < (int) lines.size(); j++) {\n distanceResult[j] = distance(lines[j], currentX,\n currentY);\n }\n // distanceResult 배열 값들의 출력을 통해 모든 선들의 최소 거리 체크\n for (int k = 0; k < (int) lines.size(); k++) {\n TRACE(_T(\"선 %d과의 거리 = %f \\n\"), k + 1,\n distanceResult[k]);\n }\n // distanceResult 배열 값들 중에 거리 차이가 1이하인 선들을 파악\n // 거리 차이가 1 이하인 선들 중에 가장 나중에 만들어진 선을 선택\n for (int l = 0; l < (int) lines.size(); l++) {\n if (distanceResult[l] >= -1 && distanceResult[l] <= 1) {\n lineSelect = l;\n }\n }\n // line이 하나라도 선택이 됬을 경우 bool형 lineMoving 변수를 true로 변경하여 드래그 가능하도록 변경\n // lineMoving 변수는 WM_MOUSEMOVE에서 사용\n // TRACE 함수를 통해 마우스 오른쪽 버튼으로 선택된 선의 번호를 알림\n if (lineSelect >= 0) {\n lineMoving = true;\n TRACE(_T(\"선택된 라인 넘버-> %d!\\n\"), lineSelect + 1);\n }\n break;\n }\n }‘distance’ 함수는 오른쪽 마우스 클릭하게 될 때, 선분이 존재해있으면 현재 좌표와 선분들과의 거리를 구해준다. return은 double 실수형으로 출력해주기 때문에 다양한 곳에서 받아서 사용할 수 있다. ‘distance’ 함수 이외에도\n두 구조체의 변수들(x, y)를 통해 거리 계산하는 함수 ‘GetDistance‘, 오른쪽 마우스 클릭했을 때 어디 위치를 기준으로 드래그할 것인지를 분별하는 ’GetDistance2‘, 두 실수형의 크기를 비교하여 작은 값을 출력하는 ’GetMin‘, 두 실수형의 크기를 비교하여 큰 값을 출력하는 ’GetMax‘ 함수 등 거리에 관련된 함수는 총 5개이다.
\n// 오른쪽 마우스 클릭과 이미 그려진 선들과의 거리를 구하는 함수\ndouble distance(Line lines, double currentX, double currentY) {\n POINT2 p; // 클릭한 오른쪽 마우스 좌표를 저장할 구조체 선언\n LINE2 l; // 이미 그려져 있는 라인(lines[.])을 잇는 선분\n POINT2 a; // p와 p1,p2를 지나는 직선과의 교점\n double m1; // 새롭게 생성될 l의 기울기\n double k1; // l의 방정식 y=mx+k1의 상수 k1\n double m2; // l과 수직인 직선의 기울기\n double k2; // l과 수직인 직선의 방정식 y=mx+k2의 상수 k2\n // 클릭한 오른쪽 마우스 좌표의 x,y를 구조체 p에 대입\n p.x = currentX;\n p.y = currentY;\n // line 구조체를 통해 p1, p2 구조체를 접근하여 기존에 존재한 라인들의 좌표를 대\n 입\n l.p1.x = lines.p0.x;\n l.p1.y = lines.p0.y;\n l.p2.x = lines.p1.x;\n l.p2.y = lines.p1.y;\n\n if (l.p1.x == l.p2.x) // 선분이 수직일 경우\n {\n a.x = l.p1.x;\n a.y = p.y;\n } else if (l.p1.y == l.p2.y) // 선분이 수평일 경우\n {\n a.x = p.x;\n a.y = l.p1.y;\n } else { // 그 외의 경우\n // 기울기 m1\n m1 = (l.p1.y - l.p2.y) / (l.p1.x - l.p2.x);\n // 상수 k1\n k1 = ((-1 * m1) * l.p1.x) + l.p1.y;\n // 이제 선분 l 을 포함하는 직선의 방정식은 y = m1x + k1를 구함\n // 두 직선은 직교하기 때문에 m1 * m2 = -1\n // 기울기 m2\n m2 = -1.0 / m1;\n // p 를 지나기 때문에 yp = m2 * xp + k2 => k2 = yp - m2 * xp\n k2 = p.y - m2 * p.x;\n // 두 직선 y = m1x + k1, y = m2x + k2 의 교점을 구함\n a.x = (k2 - k1) / (m1 - m2);\n a.y = m1 * a.x + k1;\n }\n // 구한 점이 선분 위에 있는 지 확인\n if (a.x >= GetMin(l.p1.x, l.p2.x) && a.x <= GetMax(l.p1.x, l.p2.x) &&\n a.y >= GetMin(l.p1.y, l.p2.y) && a.y <= GetMax(l.p1.y, l.p2.y)) {\n // 구한 교점이 선분위에 있으면 p 와 a 와의 거리가 최소 거리\n return GetDistance(p, a);\n } else {\n // 구한 교점이 선분 위에 없으면 p~p1 또는 p~p2 중 작은 값이 최소 거리\n return GetMin(GetDistance(p, l.p1), GetDistance(p, l.p2));\n }\n}\n\n// 두 구조체의 변수들(x,y)를 통해 거리 계산하는 함수\ndouble GetDistance(POINT2 a, POINT2 b) {\n return sqrt((b.x - a.x) * (b.x - a.x) + (b.y - a.y) * (b.y - a.y));\n}\n// 오른쪽 마우스 클릭했을 때 어디 위치를 기준으로 드래그 할것인지를 분별하는 함수\ndouble GetDistance2(POINT a, int bx, int by) {\n return sqrt((bx - a.x) * (bx - a.x) + (by - a.y) * (by - a.y));\n}\n// 두 실수형의 크기를 비교하여 작은 값을 출력\ndouble GetMin(double d1, double d2) {\n if (d1 < d2)\n return d1;\n return d2;\n}\n// 두 실수형의 크기를 비교하여 큰 값을 출력\ndouble GetMax(double d1, double d2) {\n if (d1 > d2)\n return d1;\n return d2;\n}오른쪽 마우스가 다운되었을 경우 모든 선분들의 거리를 체크한다. 그중에 선과의 거리가 픽셀 –1이상, +1이하이 되는 선분들의 우선순위(가장 최신에 생성된 선분)를 체크한 후에 최종적으로 하나의 선을 선택한다. 하나의 선의 번호가 결정이 되면 마우스 드래그가 가능하게 전역 변수 lineMoving가 true로 변경이 되고 드래그가 가능하다.
\n선분들의 거리를 비교하여 distanceResult[10]에 저장하고, 거리 차이가 1 이하인 선들 중에 가장 나중에 만들어진 선을 lineSelect 변수에 저장한다.
\nfor (int l = 0; l < (int) lines.size(); l++) {\n if (distanceResult[l] >= -1 && distanceResult[l] <= 1) {\n lineSelect = l;\n }\n}위 디버그 출력을 보게 되면, 현재 좌표와 line 1과 line 4의 거리가 픽셀 1 이하인 것을 확인할 수 있다. 그러나 line 4가 나중에 생성되었기 때문에 line 4번이 선택되었다. 결국 드래그를 시도할 경우 line4번만 움직이게 된다.
\n마우스가 움직일 때 작동되는 소스
\ncase WM_MOUSEMOVE:\n // 마우스가 왼쪽 클릭된 상태에서 움직일 경우(선 그리기)\n if (inputting) { ...\n } // 잠시 생략\n // 마우스가 왼쪽 클릭된 상태에서 움직일 경우(선 드래그)\n else if (lineMoving) {\n // 실수형 intervalX, intervalY를 통해 선택된 라인의 X와 Y의 변경을 통해 드래그 효과\n 를 만듬\n double intervalX = 0.0;\n double intervalY = 0.0;\n HDC hdc = ::GetDC(hWnd);::SetROP2(hdc, R2_NOTXORPEN);\n // 이전 라인을 지움\n drawLine(hdc, lines[lineSelect]);\n // 현재 클릭된 오른쪽 마우스와 line 구조체의 p0과 p1의 거리를 비교해 어디를 기준으로\n 드래그 할 것인지 분별\n if (GetDistance2(lines[lineSelect].p0, LOWORD(lParam), HIWORD(lParam)) >=\n GetDistance2(lines[lineSelect].p1, LOWORD(lParam), HIWORD(lParam))) {\n intervalX = LOWORD(lParam) - lines[lineSelect].p1.x;\n intervalY = HIWORD(lParam) - lines[lineSelect].p1.y;\n } else {\n intervalX = LOWORD(lParam) - lines[lineSelect].p0.x;\n intervalY = HIWORD(lParam) - lines[lineSelect].p0.y;\n }\n // intervalX를 통해 p0과 p1의 x값을 동일하게 증감\n // intervalY를 통해 p0과 p1의 y값을 동일하게 증감\n lines[lineSelect].p0.x += intervalX;\n lines[lineSelect].p0.y += intervalY;\n lines[lineSelect].p1.x += intervalX;\n lines[lineSelect].p1.y += intervalY;\n // 이후 라인을 그림\n drawLine(hdc, lines[lineSelect]);::ReleaseDC(hWnd, hdc);\n }\n break;위 소스를 보면 'GetDistance2' 함수를 이용해 현재 위치와 라인의 p0, p1의 거리를 비교하여서 어디를 눌러서 드래그할 것인지를 분별하여 드래그하게 된다. 만일 p0의 위치가 현재 오른쪽 마우스 다운한 위치와 더 가깝다면 p0의 위치를 선택하여 선의 드래그가 시작되고, 반대로 p1의 위치가 더 가깝다면 p1의 위치를 선택하여 선의 드래그가 시작되고 마우스를 움직이면 된다. 'GetDistance2' 함수를 이용하여 p0 또는 p1를 정하게 되면 그것을 기분으로 현재 움직이는 마우스의 좌표의 X, Y 차이를 통해 line의 모든 변수를 이동시킨다.
\n// 라인 구조체\ntypedef struct Line {\n POINT p0;\n POINT p1;\n COLORREF color; //0x00bbggrr\n} Line;\n\n// 입력된 모든 라인들을 가지는 벡터\nstd::vector < Line > lines;모든 선들은 전역으로 선언된 구조체 line, 벡터 lines를 사용하기 때문에 창의 변화가 있더라도 올바르게 잘 그려주고 드래그도 잘 된다.
\n