리액트 팝업창/모달/다이얼로그 구현하기, 삭제버튼 구현, 구조분해할당 https://jaeseokim.dev/React/React-Portal_Render%EC%9D%98_%EC%B0%A8%EC%9D%B4%EC%A0%90_%ED%99%9C%EC%9A%A9%EB%B0%A9%EC%95%88_%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0/ [React] Portal, Render의 차이점, 활용방안 알아보기!최근 Kakao Map Api를 React Component 라이브러리로 개발을 진행하며 자주 사용하게 된 ReactDom의 Portal 기능에 대해서 공부를 하면서 Render와 어떠한 차이점이 있는지 그리고 활용방안에 대해서 정리 해jaeseokim.dev Portalcreate를 이용하여 구현 나는 navbar 안에 있는 login butt..
styled-component 로 코드 리팩토링하기 0. 왜 공부하나해커톤 웹사이트를 만들며 팀원의 코드 간에 css 간섭이 일어나 몇번의 수정을 거쳤다. 리액트에 css를 주는 방법이 다양하지만, styled-component는 알고만 있었지 사용해본 적은 한번밖에 없는 기술이다.시행착오의 해결책으로 styled-component로 방식을 바꾸기로 하였고, 생코 교수님 강의를 들어보려 한다. 강의 시간이 14분밖에 안되니까 정리겸 한시간안에 끝내는 걸 목표로 하며 블로그를 켰다. 1. 기존의 인라인 css 선언과 styled-component의 비교 - 왼쪽은 함수를 정의하고 리턴값으로 버튼태그를 두어 버튼 태그를 최상위 태그로 하는 컴포넌트를 생성한다. - 오른쪽에서 styled-component를 살펴보면, styled-components를 ..
Three.js 로 움직이는 지구본 만들기 https://velog.io/@whdnjsdyd111/Three.js-%EA%B8%B0%EB%B3%B8-%EA%B5%AC%EC%A1%B0 [Three.js] 기본 구조 원시 모델 Three.js 의 원시 모델이란, 런타임에 다양한 인자들로 정의한 3D 모양을 의미한다. 주로 공, 육면체 등으로 3D 그래프를 만드는데 사용한다. BoxGeomtry 육면체 CircleGeometry 원 ![](https://images.v velog.io 원에 이미지 씌우고 모션 주기 .. 재밌다 예전에 사둔 three.js 강의 천천히 들어봐야겠다 ㅎㅎ
[REACT] ReactJS로 영화 웹 서비스 만들기 당장 금요일부터 리액트를 써야한다. 진짜 .. 큰일났다. 이 글은 강의의 목차를 그대로 가져와서 그 순서대로 정리할 예정이다. 목차는 다음과 같다. 러닝커브가 높은 react이기 때문에 오히려 기초를 확실히 정리해두어야 할 것 같다. 그게 바로 오늘이 되길 바라면서 시작해본다. 더보기1 [2021 UPDATE] INTRODUCTION#1.1 ❤️ 무료 강의 ❤️#1.2 Why React#1.3 Requirements 2 [2021 UPDATE] THE BASICS OF REACT#2.0 Introduction#2.1 Before React#2.2 Our First React Element#2.3 Events in React#2.4 Recap#2.5 JSX#2.6 JSX part Two 3 [2021 U..
[js library] AOS 스크롤 애니메이션 구현하기 참고 [AOS] 📚 스크롤 애니메이션 사용법 - Animate On Scroll AOS.js (Animate On Scroll) 기본적으로 스크롤 움직임에 따라 개체에 움직임을 주는 애니메이션의 경우, AOS 라이브러리를 사용하면 쉽게 애니메이션을 줄 수 있다. AOS 라이브러리는 자바스크립트를 깊 inpa.tistory.com 이번에 만들고 있는 외주 사이트에서 많이 쓰이는 애니메이션 라이브러리이다. 이 효과 하나만으로도 웹이 한층 더 다이나믹해보여서 앞으로도 자주 쓸 것 같다. 사진이 가운데서부터 커지는 효과 아래에서 하나씩 올라오게
default.css 세팅하기 브라우저 마다 디폴트로 설정되어 있는 css 값들이 있다. margin, padding 같은 css 속성(property)의 값들이 0이 아니라 브라우저가 정한 임의의 값으로 설정되어 있다. 이런 값들을 초기화하고 작업을 해야 내가 의도한 값으로 화면에 출력될 수 있다!예를 들어, 웹브라우저 css 초기화 전에 header 클래스 div에 margin과 padding을 주지 않아도 positioning이 원하는 대로 되지 않는 것을 확인할 수 있다. 그 외에도 브라우저마다 다른 기본 설정값들을 초기화하기 위하여 default.css를 작성해야한다. 다음은 내가 사용하는 default.css 파일이다. 주의할 점은, 내가 만든 style.css 파일보다 앞에 선언해주어야 한다. 그래야 내가 선언한 스타일..
[Javascript plugin] Masonry Layout 적용하기 메이슨리 레이아웃 (Masonry Layout)을 이용하면 크기가 다른 컨텐츠를 효율적으로 배치할 수 있다.빈영역을 최소화할 수 있으며 지겨운 스타일로부터 벗어나 자유로운 느낌을 주기도 한다! 핀터레스트가 이러한 레이아웃을 사용하곤 한다. https://masonry.desandro.com/ MasonryInstall Download CDN Link directly to Masonry files on unpkg. Package managers Install with Bower: bower install masonry --save Install with npm: npm install masonry-layout Getting started HTML Include the Masonry .js fil..
JQuery 정복하기 4 (탐색, animation, ajax) 탐색체인 컨텍스트를 유지하면서 제어의 대상이 되는 엘리먼트를 변경하는 기법http://api.jquery.com/category/traversing/📍 예제 javascript을 입력 한 후에 엔터를 눌러주세요. .add(selector)엘리먼트를 추가한다 .andSelf()현재 엘리먼트 셋에 이전 엘리먼트 셋을 더 한다 .children([selector])자식 엘리먼트를 선택한다 .closest(selector)..
JQuery 정복하기 3 (event, element, form) 이벤트란?시스템에서 일어나는 사건을 의미javascript나 jQuery에게 이벤트란 브라우져에서 일어나는 사건을 의미한다. (클릭, 마우스 이동, 타이핑, 페이지 로딩등)이벤트가 발생했을 때 작동할 로직을 시스템에게 알려두면 이벤트가 발생했을 때 시스템이 그 로직을 호출한다.jQuery의 이벤트크로스브라우징의 문제를 해결해줌bind로 이벤트 핸들러를 설치하고, unbind로 제거 (예제1) (on,off로 업데이트 됨)trigger로 이벤트 핸들러를 강제로 실행 (예제2)click, ready와 같이 다양한 이벤트 헬퍼(helper)를 제공함live를 이용하면 현재 존재 하지 않는 엘리먼트에 이벤트 핸들러를 설치할 수 있음예제1. on, off, trigger를 이용한 이벤트의 설치, 제거, 호출 ..

티스토리툴바