Ratel의 개발일지 Ratel의 개발일지

웹 프로그래밍/FE(Front-End)

• DOM Node 조작해보기(DOM API)

  웹 프로그래밍/FE(Front-End) 2021. 6. 19. 23:40

  오늘은 DOM API를 이용하여 웹 페이지에서 보여지는 요소를 옮기거나 삭제하거나 복사하는 등 여러 조작을 해보았다. 이전에 배운 querySelector(), querySelectorAll()과 같은 document에서 요소의 이름이나 class, id를 매개변수로 넣어 원하는 요소를 얻는 메소드 이외에 다양한 DOM API를 접해보았다. https://www.w3schools.com/jsref/dom_obj_all.asp HTML DOM Element Objects The HTML DOM Element Object The Element Object In the HTML DOM, the Element object represents an HTML element, like P, DIV, A, TABLE,..

  Read More
• [JS] Spread Operator 알아보기

  웹 프로그래밍/FE(Front-End) 2021. 6. 16. 18:21

  오늘은 Front-End파트에서 Java Script의 배열을 배우면서 indexOf, join, concat와 같은 메소드를 배웠다. 그 중, 배열을 합치는 메서드인 concat를 배우면서 Spread OPerator라는 단어를 들었다. Spread Operator단어만 언급하고 넘어가서 무엇을 의미하는지 궁금해 찾아보게 되었고 오늘 정리할 주제로 선정하게 됐다. 우리는 배열을 합치고자 할 때 아래의 코드처럼 concat 메소드를 사용한다. var arr1 = [1,2,3] var arr2 = [] arr2 = arr1.concat(1,2); //결과: arr2 = [1,2,3,1,2] 하지만 Spread Operator를 쓰게 되면 아래의 코드로 구현할 수 있다. var arr1 = [1,2,3] v..

  Read More
• jQuery를 쓰지않고 DOM 노드 이동시키기

  웹 프로그래밍/FE(Front-End) 2021. 6. 15. 16:58

  오늘은 프로젝트를 진행하면서 사용했던 것중 정리해볼만한 내용이여서 글을 쓰려고 한다. 프로젝트의 기획서에서 요구사항은 )을 클릭하여 요청을 보낼때 Todo 의 Id와 상태값을 전달하여 다음 상태로 (현재 상태가 Todo라면 doing으로 doing 이라면 done) 상태를 나타내는 컬럼값을 변경하고 응답결과로 \"success\"를 보냅니다. \n "}" data-sheets-userformat="{"2":7081,"3":[null,0],"6":{"1":[{"1":2,"2":0,"5":[null,2,0]},{"1":0,"2":0,"3":3},{"1":1,"2":0,"4":1}]},"8":{"1":[{"1":2,"2":0,"5":[null,2,0]},{"1":0,"2":0,"3":3},{"1":1,"2":..

  Read More
• JS(JavaScript)와 Web UI 개발

  웹 프로그래밍/FE(Front-End) 2021. 6. 2. 16:21

  오늘은 웹 페이지를 구현하는 데 있어 복잡한 사용자의 요구사항을 충족시켜 줄 수 있는 javascript언어의 기초에 대해 배우고 Web UI 개발에 필요한 개념들에 배웠다. 오늘 배운 JS에 대한 것 중 정리하고 싶은 내용은 함수이다. 다른 언어도 함수를 선언하여 특정 기능을 구현하는 것이 존재한다. JS도 마찬가지로 함수를 선언하는 방법이 존재하는데 기본적인 함수선언문은 아래와 같다. function 함수이름(파라미터1, 파라미터2, ..) { 기능 코드 } JS에서 함수를 배울 때 처음으로 배운 개념은 호이스팅(hoisting)이다. 코드를 통해 설명해보면 function test(){ console.log(printName()); var printName = function() { return '..

  Read More
• HTML과 CSS

  웹 프로그래밍/FE(Front-End) 2021. 5. 27. 18:57

  먼저, 웹 페이지의 설계에 기본적으로 사요되는 HTML에 대해 배웠다. HTML은 HyperText Markup Language의 약어로 웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성된다. 각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용됩니다. HTML은 여러 태그들로 이루어져 있다. 태그들은 각각의 의미를 가지고 있어 semantic하다고 표현하기도 한다. 태그를 통해 하이퍼링크를 걸어주거나 제목을 쓰거나 혹은 보여주고 싶은 이미지나 글들을 보여줄 수 있다. (HTML 태그의 종류는 https://www.w3schools.com/TAGS/default.ASP 에서 확인할 수 있다.) HTML 태그를 직접 써보면서 어떻게 웹 페이지에 나타나는지 확인해보자. VSco..

  Read More