본문 바로가기

분류 전체보기

 (143)
[CSS] position: fixed일 때 상하스크롤이 안되는 문제 해결 const Supply = () => { return ( ... ); }; const Container = styled.div` position: fixed; top: 72%; left: 50%; transform: translate(-50%, -50%); height: 100%; `; port default Supply; Next.js로 만든 Supply 페이지 코드의 일부이다. 여기서 페이지가 상하스크롤이 안되는 문제가 있었다. 상하스크롤이 작동하지 않는 이유: Supply 컴포넌트의 Container가 position: fixed 로 설정되어 있기 때문. position: fixed는 화면에 고정된 위치에 요소를 배치하는 것을 의미함. 요소의 위치는 뷰 포트에 상대적임. 따라서 컨테이너의 높이가 1..
[Typescript] styled-component에 props 전달 과정에서 오류 해결 interface TooltipProps { message: React.JSX.Element; percentage: number; } function Tooltip({message, percentage}:TooltipProps){ return ( {message} ) } const Rectangle = styled.div` width: 150px; height: 48px; position: absolute; left: ${props => `calc(${props.percentage}% - 75px)`}; //여기서 설정 //width/2 bottom: 175%; background-color: white; color: black; font-weight: 600; text-align: center; pad..
[ENS] ENS 구매!! 블록체인에 뛰어든 김에 내 닉네임으로 된 ENS 하나쯤은 사수해야겠다 싶어 구매했다. 사실 이런 거 좀 좋아한다. 세상에 하나밖에 없는 나만의 무언가? 이래서 한정판이 되는 장사인 거다. 먼저 ENS에 대해 짧게 설명하자면 내 이더리움 지갑 주소에 이름을 붙여주는 서비스다. Ethereum Name Service(제곧내ㅇㅇ) 저 0x로 시작하는 지갑 주소에 이름을 예뿌게 붙여주는 역할!! 그러면서도 나만의 identity가 되는.. 인스타 아이디 같은 느낌이다. 그리고 이제는 누군가 나에게 코인이나 토큰을 보낼 때 복잡한 주소 필요 없이 내 ens로 보낼 수 있다. ENS를 사기 위해 업비트에서 리플을 사고 그걸 바이낸스로 옮겨서 이더로 바꾸고 메타마스크로 보냈다.(...좀 복잡하다.) ENS 심지어 싸..
[React] Describing the UI 한달 전에 작성했는데 안 올렸었다니..!! 공식문서를 보는 것으로 공부방향을 바꿨다. https://react.dev/learn Your First Component – React The library for web and native user interfaces react.dev Q. 프로그래밍에서 동사 nest의 의미? A. 프로그래밍에서 "nest"란, 하나의 코드 블록이 다른 코드 블록 안에 중첩되는 것을 의미합니다. 중첩된 블록은 다른 블록 내부에 들어가기 때문에 외부 블록의 범위를 포함하게 되며, 이러한 구조를 "nested" 구조 또는 "nesting"이라고 합니다. 대표적인 예시로는 if문이나 for문 같은 제어 구조가 있습니다. 이들 구조는 중첩될 수 있으며, 이를 통해 복잡한 조건과 반..
[React] 230501 학습일기 http://www.yes24.com/product/goods/97782392 초보자를 위한 리액트 200제 (React) - YES24 따라하면서 이해하는 React A to Z리액트를 시작하기 전에 개발 환경을 준비하는 과정부터 시작하여 예제 파일을 실행하는 방법을 안내한다. 입문부터 초급, 중급, 활용, 실무까지 5개의 파트로 나 www.yes24.com 길고도 긴 무기력 상태를 벗어나 이젠 좀 열심히 살아보려 한다. ㅋㅋ..ㅜㅜ ** 시작하기 전에 굉장한 것을 알아냈다. R008_LifecycleEx.js 파일이 아래와 같고 import React,{Component} from "react"; class R008_LifecycleEx extends Component { constructor(pro..
[React] 220423 학습일기 http://www.yes24.com/product/goods/97782392 초보자를 위한 리액트 200제 (React) - YES24 따라하면서 이해하는 React A to Z리액트를 시작하기 전에 개발 환경을 준비하는 과정부터 시작하여 예제 파일을 실행하는 방법을 안내한다. 입문부터 초급, 중급, 활용, 실무까지 5개의 파트로 나 www.yes24.com 1. 생명주기 함수 static getDerivedStateFormProps(props, state) 사용하기 App.js를 수정해보자. import React from 'react'; import './App.css'; import R006_LifecycleEx from './R006_LifecycleEx'; function App() { ret..
[React] 230417 학습일기 http://www.yes24.com/product/goods/97782392 초보자를 위한 리액트 200제 (React) - YES24 따라하면서 이해하는 React A to Z리액트를 시작하기 전에 개발 환경을 준비하는 과정부터 시작하여 예제 파일을 실행하는 방법을 안내한다. 입문부터 초급, 중급, 활용, 실무까지 5개의 파트로 나 www.yes24.com 1. src 폴더의 index.js에서 태그를 삭제했다. Strict모드: - 어플리케이션 내의 잠재적 문제를 알아내기 위한 도구. - 생명 주기 함수를 여러번 실행하는 원인 책에서는 import * as serviceworker from './serviceworker'; . . . serviceWorker.unregister(); 를 썼는데 내 ..
[React] 220416 학습일기 http://www.yes24.com/product/goods/97782392 초보자를 위한 리액트 200제 (React) - YES24 따라하면서 이해하는 React A to Z리액트를 시작하기 전에 개발 환경을 준비하는 과정부터 시작하여 예제 파일을 실행하는 방법을 안내한다. 입문부터 초급, 중급, 활용, 실무까지 5개의 파트로 나 www.yes24.com 그동안 너무 정신없이 리액트를 배우다보니 기초가 와르르.. 그래서 책을 샀다. 공부해보자. 1. npm : node package manager yarn: 페이스북에서 만든 패키지 관리 도구. npm에 비해 캐싱, 신뢰성 등이 개선됨. 2. npm install -g yarn 으로 yarn을 설치해주었다. 여기서 -g는 무엇이냐? Q. npm in..
[ReactJS] 코드 모음 https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co 노마드코더 강의를 듣고 작성하였다. 2.3 Events in React 이거는 JSX를 사용하지 않은 버전이다. 2.5 JSX Arrow function 여기서 직접 만든 컴포넌트들은 모두 함수 직접 만든 컴포넌트의 첫 글자는 반드시 대문자여야 함. 3.0 Understanding State UI를 계속해서 업데이트 시켜줘야 함. => reRender을 해줘야 함. 그렇기때문에 이 방법은 좋은 방법이 아님. 3.1 setState part 1 3.2 setState Part 2 setCou..
[JavaScript]Todo-List 만들기(2) 어느정도 왠만한 todo-list 같아졌다. 아래는 js 파일. index.js let todoList = []; let completedList = []; let num =1; //returnId는 string const todoListElement = document.querySelector(".todo-list"); const completedListElement = document.querySelector(".completed-list"); const initTodoDivElement = document.querySelector(".todo-initDiv"); const initTodoFormElement = document.querySelector(".todo-item"); const initT..

티스토리툴바