개발쬬

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

한참 SEO 를 이것저것 찾아보던 중 발견한 궁금증이 생겼다.대체 이렇게 카테고리별로 깔끔하게 노출되는 웹사이트는 어떻게 만드는거지? 특히나 구글에서는 대형 사이트들은 이런 UI를 가지고 있는 경우가 100 이면 100이였다. 그래서 여기저기 찾아보다가 발견한 구글 검색 센터! 구글 검색 센터 최적화된 SEO 환경을 만들기 위해 참고하는 사이트 입니다. 구글 검색엔진 최적화 기초부터, 크롤링, 색인, 순위 등 다양한 정보를 참고할 수 있다고 한다~ 한마디로 검색엔진 최적화 + 눈에 띄는 UI를 제공해 사이트를 개선시킨다는것에 목적을 가지고 있다고 한다 검색엔진 최적화 개선 문서 | Google 검색 센터 | Documentation | Google for Developers검색엔진..

가장 많이 사용하는 아이콘 라이브러리 Heroicons프론트엔드 개발을 하면서 가장 많이 사용하는 라이브러리 중 하나이면서, 디자이너에게도 가장 많이 사랑받는 아이콘 시스템이 horoicons 이다. 간편하게 import 해서 사용하지만 이번에는유형별로 불러오는 법을 모르는 분들을 위해 간단하게 포스팅 해보려고 합니다. Heroicons 사이트 heroicons git GitHub - tailwindlabs/heroicons: A set of free MIT-licensed high-quality SVG icons for UI development.A set of free MIT-licensed high-quality SVG icons for UI development. - tailwindlabs/..

페이지에서 이미지를 미리보기 하고 싶은 경우 사용할 수 있는 코드다 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..

[Err] Error message "error:0308010C:digital envelope routines::unsupported" 해결하기 Error message "error:0308010C:digital envelope routines::unsupported" 라는 에러는 노드 모듈이 적합하지 않아서 (지원되지 않는 기능들이 존재하기 때문에) 뜨는 문제이기 때문에 노드 버전을 낮춰주면 간단하게 해결된다. node 18로 설치되어있는 버전은 16으로 다운그레이드 시켜주니 간단하게 해결되었다. Unix 계열 (Linux, masOS, Git bash) export NODE_OPTIONS=--openssl-legacy-provider Windows set NODE_OPTIONS=--openssl-le..

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를 사용해 검색된 항목을 담고..