PlaywithJavaScript 썸네일형 리스트형 안되는 코드 useState 버튼 온스크롤에 사라지게 하려고 했던 건데.. const [isScrolling, setIsScrolling] = useState(false); const onScroll = () => { const timeout = setTimeout(() => { setIsScrolling(current => !current); }, 200) setIsScrolling(true); clearTimeout(timeout); } useEffect(() => { window.addEventListener("scroll", onScroll); }) 더보기 [React] [ReactDOM] 그리고 [CSS]를 사용한 리액트앱 만들기 (Part2. styling) React, React-dom 그리고 css Day 1 ul margin에 문제가 있어보인다.. className을 따로 주어 분리시켜보면?? To do(from Day1): 1. nav바에 hide 기능 추가. 클릭 되면, 숨김이 되고, 다시 마우스 호버하면 내려오고 2. 그리고 세부 리스트는 드롭다운 방식 사용해보기 3. 전체 color-theme은 민트초코! ㅋㅋ or toffe-nut latte color Day 2 내비게이션 바 안의 못생긴 언더라인을 없애봤다. 그리고 호버 기능을 넣어 마우스가 가면 텍스트 사이즈, 컬러를 변경도 해봤다. Home About Chelsea Skills ReactDOM의 LINK 컴포넌트를 사용했기때문에, css에서 작업이 생각처럼 잘 되지 않았다. 사실, 이렇게.. 더보기 [React] [Express]를 사용한 리액트앱 만들기 (Part1. design) 1달 전에는 엄두도 내지 못했던 리액트 앱 만들기에 재도전해본다. 목표: 클라이언트 사이드와 서버 사이드가 있는 포트폴리오 만들기 **words in red need to be clarified 클라이언트 사이드 Bare minimum requirements: React를 사용한 Single Page App (SAP)을 만든다. create-react-app을 이용 React Router를 사용해 클라이언트 상에서 페이지 라우팅을 적용한다. react router를 yarn 또는 npm을 이용해 설치 라이브러리를 사용하지 않고 (사용할 수 있는 라이브러리는 누구?), stateful한 컴포넌트 두 개 이상 만들기 메뉴 선택 (selected/deselected) 컴포넌트 Toggle해서 내용이 가려지고 .. 더보기 [React]로 [youtube API]를 활용한 너튜브 만들기 리액트로 유튜브 API를 활용하여 너튜브 만들어보기 1. 기본 디자인이 있는 상태에서 시작한 경우다. 2. 정적 상태를 만들어보자. 먼저 VIDEOLIST와 VIDEOLISTENTRY 컴포넌트를 살펴보면, 더보기 [React]로 Portfolio 만들기 이전에는 html, css, javascript를 사용하여 포트폴리오 웹페이지를 만들어보았는데, 이제 react를 사용해 보다 더 "동적인" Single Page App을 만드는 것이 목표다. 먼저, 가장 기본적인 클라이언트 사이드를 셋업한 후, 서버 사이드 셋업을 할 것이다. 아래 가이드 라인을 따라 만들어보자. 클라이언트 사이드 셋업: create-react-app을 이용해 리액트 프로젝트를 만든다 npx create-react-app client (터미널 내용 위에서 말했듯 포트폴리오 폴더 안에 client와 server폴더가 존재해야하기 때문에 client로 폴더를 만들었다) react router를 설치한다 npm install --save react-router-dom (터미널에 이렇게 쓰면 .. 더보기 event.target을 사용한 onclick 이벤트 (비동기 호출 응용) 이름을 클릭했을 때, 클릭한 이름으로 필터링시키는 함수 구현하기 며칠 전에 본 코딩이고, 질문을 올렸는데, 올린 당일에도 이해가 안돼 미뤘던 질문을 며칠이 지난 오늘 다시 보니 더 이해가 안된다. 코딩은 꼭 악기같다. 어떤 스킬을 내가 연마하는데, 이게 완전이 "내 것"이 되지 않으면, 금방 원상태로 돌아가게돼서 또 다시 연마를 해야한다. 결국 "내 것"이 될 때까지 연습을 멈추지 않는게 가장 빨리 습득하는 법일 것 같다. 누구보다 게으른 내가 과연 코딩을 하는게 맞는지... 코딩이 피아노처럼 즐거워질 수 있길 바란다. 어느정도 실력을 갖춰야 비로소 즐길 수 있는건 분명하다. 그게 무엇이 되었든. 1. onclick 이벤트 2. event.target을 이용, 클릭한 대상의 element에 접근, 그 대.. 더보기 이전 1 다음
