profile
(~˘▾˘)~♫•*¨*•.¸¸♪ ❝ 쉽게만 살아가면 재미없어 빙고 .ᐟ ❞
post-thumbnail

TIL 55 | Ref 이용하여 핀터레스트 스타일 레이아웃 (masonry) 만들기

참고자료 : React에서 Ref 사용하기, Ref와 DOM(공식 문서)리액트는 컴포넌트 트리 선언과 props 사용을 통해서, DOM 노드에 레퍼런스를 걸지 않고도 UI 제어가 대부분 가능하다. props는 부모 컴포넌트가 자식과 상호작용할 수 있는 유일한 수단이다.

2020년 9월 17일
·
0개의 댓글
post-thumbnail

TIL 37 | 새로 생성된 엘리먼트에 함수 선언하기 (동적 이미지 생성)

인스타그램 클론 코딩 프로젝트의 추가 구현 사항중, 피드에 달린 댓글을 삭제하거나 좋아요를 누르는 기능을 추가하는 것을 진행하고 있다. (역시나..) 추가한 자바스크립트 코드에서 여러가지 이슈가 발생하였고 그 중에 꼭 기억해야 할 것들을 정리한다.

2020년 8월 26일
·
0개의 댓글
post-thumbnail

인스타그램 클론 코딩 리뷰 (2)

메인페이지에서는 댓글의 input 창에서 enter키를 치거나 "게시" 버튼을 누르면 댓글이 추가되도록 만드는 과제가 주어졌다. createElement로 요소를 생성하여 input에 입력한 값이 추가되는 함수를 구현하는 조건이다.

2020년 8월 24일
·
0개의 댓글
post-thumbnail

인스타그램 클론 코딩 리뷰 (1)

인스타그램의 HTML, CSS를 클론하고, 간단한 이벤트함수를 자바스크립트로 구현했다. 초반에는 Flexbox 개념이 생소하여 다소 어려움을 느꼈지만, 디자인 작업을 하듯 재미있게 한 코딩작업이었다.

2020년 8월 24일
·
0개의 댓글
post-thumbnail

TIL 34 | DOM - event

좋은 웹사이트는 오류가 없고, 모션이 자연스러우며, 빠르게 반응하여 사용자로 하여금 좋은 서비스 경험을 제공해야 한다. 요즘에는 화려하고 다양한 기능이 들어가는 웹사이트가 늘어나면서 프론트엔드 개발자가 처리해야 할 interaction이 더 많아졌다.

2020년 8월 22일
·
0개의 댓글
post-thumbnail

TIL 33 | DOM exercise

DOM(돔)이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델이다. JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다.

2020년 8월 21일
·
0개의 댓글
post-thumbnail

TIL 17 | JS 프로젝트 그룹 리뷰

WeCode 그룹 리뷰를 통해 새로 배운 것들을 정리한다.Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 \[key, value] 쌍의 배열을 반환한다. (for-in 루프가 다른점은 프로토 타입 체인의

2020년 7월 27일
·
0개의 댓글
post-thumbnail

TIL 16 | To-do List 만들기 리뷰

jQuery 로 만들어봤던 To-do List를 순수 Javascript로 다시 만들어본다.To-do List 페이지To-do List 깃허브자바스크립트에 비해 코드가 훨씬 간단해진다.

2020년 7월 25일
·
1개의 댓글
post-thumbnail

TIL 14 | DOM

Document Object Model의 약자로 Javascript와 HTML+CSS 사이의 인터페이스를 의미한다.tag.textcontent : 텍스트만을 가져옴tag.innerHTML : <></> 태그도 가져옴to read and write attrib

2020년 7월 24일
·
0개의 댓글