개발쬬

이번에는 웹사이트를 만들면서 가장 자주 사용하는 아코디언 UI 를 만들어봤습니다.별로 어렵지 않고 대중적인 UI 설계 방식이지만 tailwind 로 쉽게 구현을 원하는 분들을 위해 공유드립니다. section > Conatiner (커스텀UI) > ul > li > div 로 설계- 펼쳐짐을 감지할 button | div 요소 (grid grid-row 를 사용해 0 과 1 사이로 내부 높이를 감지합니다)- 펼쳐질 아이템 (div 요소를 사용하지만 opacity 0 으로 초기화) 아코디언 펼치기 전 아코디언 펼치기 후하위 요소는 DOM으로 구성이 가능합니다. (tsx 파일) 애니메이션 효과는 duration 을 사용하여 임의로 조절이 가능하며 부드럽게 펼쳐지는 UI 구현이 가능합니다. 코드 공유코드 ..

페이지에서 이미지를 미리보기 하고 싶은 경우 사용할 수 있는 코드다 let reader = new FileReader(); if (form.values.imageUrl) { reader.readAsDataURL(form.values.imageUrl); reader.onloadend = () => { setImageSource(reader.result); }; } 비슷한 원리로 다른곳에도 적용이 가능하다

React : 리액트 작동 원리 이해하기 React 리액트는 자바스크립트 라이브러리입니다. 리액트의 핵심은 컴포넌트이며, 이런 컴포넌트화 기능을 활용해 화면을 효과적으로 구성하는 역할을 합니다. React DOM 리액트 DOM은 웹에 대한 인터페이스입니다. 리액트는 컴포넌트의 상태 관리 라이브러리라고 보아야 하며, 가상 DOM 은 컴포넌트 트리를 결정합니다. 리액트는 상태나 props, 컨텍스트, 컴포넌트에 변경이 발생하면 컴포넌트 함수가 재 실행되어 리액트가 이것들을 다시 평가하게 됩니다. 핵심 리액트 컴포넌트는 상태나 이 외의 것들에 대해 재평가 되고, DOM은 과거와 현재의 상태에서 변경되어야하는 부분만을 감지하여 효율적으로 변경해줍니다. 가상 DOM에선 이런 원리로 차이점만을 변경함으로써 바뀐 부..

React : 스타일 넣어주기 styled-components 사용법 , style 에 props 전달 , 전역 스타일 설정 1. styled-components 설치하기 npm i styled-components styled-components는 react를 사용하면서 css파일이 아닌 하나의 태그자체에 속성을 주고, 여러번 재사용할 수 있도록 해준다. styled-components를 사용하면 삼항식이나 여러가지 효과를 적용하고 속성을 줄 때 손쉽게 접근할 수 있다. 👇 styled-components 사이트 https://styled-components.com/ 2. styled 전용 jsx 파일 만들어 사용하기 1 . style을 저장할 jsx 파일을 하나 만들다 2. import styled f..

React : params 사용하기 URLSearchParams 사용법 +) npm i query-string 1. Params 란? 이런식으로 ? 뒤에 딸려들어가는 key 와 value 값을 params 라고 한다. url주소와 상관없이 params로 들어가면 동일한 url에서도 여러가지 필터들을 겹쳐 표현된다. 우리들이 필터를 사용해 검색할때 검색 정보를 들고가는 역할을 한다. 2. URLSearchParams https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams 구체적인 정보가 필요하신 분들은 링크를 이용해주세요 react에서 params를 사용하고 싶을때 사용할 수 있는 정의이다. 보통은 아래 코드처럼 props를 사용해 검색된 항목을 담고..

React Err : npm start 안되는 오류 해결 --openssl-legacy-provider 문제 유데미 강의를 듣던 중 npm start가 제대로 실행되지 않는 현상이 발생했다. thow err 라는 문구와 함께 밑에 경고메세지들이 출력되었음. 간단히 보니 node 버전 업데이트 사항과 직결된 문제였다. (이래서 안전한 버전을 사용하는 것이 좋다) Starting the development server... Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:133:10) at module.e..

React : ant Design {Row, Col} 활용하기 Row, Col 을 사용해 import { Row, Col } from 'antd'; Row 로 한 행을 만들고 Col , span을 사용해 한 줄을 균등배분하는것이 가능하다 일반 분배 Row항목 수를 임의대로 조절하고 싶을때 gutter 에서 span = {여기}는 24분할중에 얼마나 차지할 지에 대한 숫자를 적으면 된다 ! 여기서 gutter은 16+8n의 정수를 넣어주면된다 👉 기본적으로 24를 가지고 있는 Row 의 수를 바꿔줄 수 있고, 때문에 비례적으로 열을 나누기 위해 16 + 8n 형식으로 넣어주어야 올바른 열로 표현된다 일정부분만큼 건너띄고 싶을때 offset //2만큼 오른쪽으로 여백을 준다 Row에 flex 속성 쓰기 Ro..

리액트 네이티브 styled-components unable to resolve dependency tree 오류 해결! 이런 에러를 발견했다. 분명 종속성 문제인데 개발을 하다보면 작업하다 중간에 버전문제때문에 열받는 경우가 너무 많다... npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: firstcli@0.0.1 npm ERR! Found: react@17.0.2 npm ERR! node_modules/react npm ERR! react@"17.0.2" from the root project npm ERR! peer react@">= 16.8.0" fr..