개발쬬 개발쬬

[CSS] 페이드 효과 넣어주기 fade-up fade-down scss up, 이나 down 등 여러가지 애니메이션 효과를 지정해 줄 수 있다. 해당 class 명을 사용해 원하는 곳에 넣어주면 된다..fade { &-up { opacity: 0; animation: fadeUp 1s ease forwards; } &-down{ opacity: 0; animation: fadeDown 1s ease forwards; } }​ css forwards 설정을 넣어줌으로써 애니메이션 상태가 유지될 수 있도록 해준다..fade-up { opacity: 0; animation: fadeUp 1s ease forwards; }​ animation keyframes 를 지정한 후 0% - 100% 상태를 변경해준다..

[CSS] 글자 수 초과하면 말줄임표 제한하기 한줄 두 줄 등등 scss // 줄 한도 시 ... 제한 .limit-text { width: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; // 2줄 한도 시 ... 제한 &-line { width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } css // 줄 한도 시 ... 제한 .limit-text { width: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ..

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

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..