꿈많은 DEVELOPER

작업을 준비하다 보면 작업을 하다보면 Script위치를 어디에 놓는게 좋을까요? 제일 좋은 방법은 body 태그 최하단에 놓는것이 가장 좋습니다! 일단 브라우저의 동작 방식은 1. Html을 읽기 시작합니다 2. Html을 파싱합니다 3. DOM 트리를 생성합니다 4. DOM 트리 + CSS을 생성되고 로드가됩니다 여기서 우리가 스크립트를 중간이나 최상위에 놓는다면 Html 읽는 과정에서 중간에 스크립트를 만난다면 파싱을 하는데 지연이 될것이고 스크립트를 못읽는 현상이 발생할수도 있습니다 그래서 저희는 가장좋은 방법은 body 최하단에 script을 넣는것이 가장 좋습니다. 그럼 스크립트 로딩 순서를 제어해보죠 async 방식은 비동기 방식으로 html 중단되지 않고 진행이 됩니다 defer 문서가 다 ..

함수안에 this라는 것을 정의할수 있고 this를 활용해서 bind를 써보겠습니다 먼저 함수안에 this를 담을 객체가 필요해서 먼저 객체를 생성하고 객체 안에 name에 값을 넣습니다 그리고 showIntorduce 함수를 만들어서 파라미터값에 here , home , phone 넣고 console.log() 안에 값들을 넣어보겠습니다! 그리고 함수.bind(생성한 객체를 넣습니다); bind 함수를 변수 값에 넣고 boundsay라는 그리고 거기에 인자값을 넘겨 주면 됩니다! call , apply 방식은 조금 다릅니다! 결과값이 잘나오네요!

오랜만에 jquery 이용한 기능 구현을 해보네요!! 오늘은 일정 스크롤이 되면 gnb가 나타나는 코드를 짜보아요 여기서 써야되는 메소드는 offset 입니다 그리도 addClass and removeClass 기능 입니다! 그리고 scroll 이벤트 또한 ui구현할때 많이 쓰는 이벤트 입니다 click , mouseover , mouseout 등등처럼요 CodePen See the Pen gnbFloating by 유국현 (@yoogukhyeon) on CodePen. 한번씩 따라해주시면 더 도움이 되겠죠?ㅎㅎ 감사합니다!

오늘로서 Haker News Part API를 가져오고 UI를 구현하는 어플리케이션 마무리를 해봅니다 전체 코드는 저의 git에 있습니다! https://github.com/yoogukhyeon/FrontendProject1 GitHub - yoogukhyeon/FrontendProject1: FrontendProject1 개발의 기본 FrontendProject1 개발의 기본. Contribute to yoogukhyeon/FrontendProject1 development by creating an account on GitHub. github.com 저번에 말한 replace() 메소드를 활용해서 key value 값을 교체하는 javascript 메소드를 활용해봤습니다 댓글도 구현을했습니다! 이번..

part 4 6 7은 코드 양이 별로 없어서 같이 업로드 하겠습니다! 일단 Element 요소로 UI를 만드는 것은 비효율적이기 떄문에 문자열을 통해서 UI를 구현하고 라우터만들어 페이지 이동을하고 메인에 paging 을 구현했습니다! 제 git에서 코드를 보실수 있습니다!!! https://github.com/yoogukhyeon/FrontendProject1/tree/code6 NewsList 빈 배열을 만들어서 push로 문자열을 구현했습니다! 그리고 라우터 부분에 hash를 통해서 페이지 이동을 구현했습니다! paging을 구현해보겠습니다 가장먼저 store에 currentPage 저장소를 만들어 줍니다 그리고 페이지 이동을 UI를 만들고 속성에 저장된페이지 이동 값을 넣습니다 결과물이 잘나오네요..

이번 part3는 코드 리팩터리를 했습니다.. 개발자의 숙명이죠...중복코드를 줄이는것이요..... 저도 한번 리팩터리 작업을 했습니다ㅎㅎ 여기서 중요한것은 함수에 인자를넣고 인자값을 바뀌면 값을 주는 그런 형태입니다!! 자 그럼 시작해보죠ㅎㅎ 제 git의 part3 코드입니다! https://github.com/yoogukhyeon/FrontendProject1/tree/code3/part03_2%EA%B0%9C%ED%99%94%EB%A9%B4%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A6%AC ajax 중복 코드이기떄문에 함수로 묶어서 뿌려 주겠습니다! function getDate(인자){ ajax.open('get' , 인자값 , false) } 저자리는 url이 들어가는 자리입니다 ..

NODE 객체는 DOM(Document Object Model) 에서 가장 최상위에 있는 객체입니다. Node 객체는 모든 하위객체에 뿌리와 같은 존재입니다 Node객체에는 다양한 종류 들이 있는데 오늘은 Node를 추가 , 제거 , 변경하는 방법을 알아보겠습니다. 프론트 작업중 유용하게 활용할수 있는 기술 입니다 저또한 작업중 활용한 NODE API를 활용해서 작업을 했던 기억이 있습니다 먼저 Node 객체를 추가해보겠습니다. = createElement() 엘리먼트 노드를 추가하고 = createTextNode() 로 Text추가하고 appendChild & insertBefore 를 활용해서 생성하고 추가할수있습니다 = 추가를할때는 대표적으로 appendChild 활용해서 마지막자식으로 추가하는것이..