전체 글75 zendesk 스타일 api 문서 https://developer.zendesk.com/api-reference/help_center/help-center-api/sections/ Sections Developer documentation for products at Zendesk developer.zendesk.com 2023. 10. 10. <시멘틱 태그> 리스트 시멘틱 태그 정리 > 순서없는 목록 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam velit modi est amet voluptas dicta nostrum incidunt dolore atque, unde maiores facere consectetur provident et distinctio dolor eveniet tempora aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam velit modi est amet voluptas dicta nostrum incidunt dolore atque, unde maiores facere consectetur provident e.. 2023. 9. 16. <시멘틱 태그> 서식 시멘틱 태그 정리 > 문단 문단 문단 문단 문단 문단 띄어쓰기 문단 밑줄 pre : 정의된 형식 block 그룹 inline 그룹 strong 강조 em / 기울기 mark 형광 small 저작권 제거된 텍스트 밑줄 subscript 아래첨자 윗첨자 blockquote 인용구 / block 인용구 / inline 줄임말 2023. 9. 16. [React] 이미지 미리보기 form 만들기 페이지에서 이미지를 미리보기 하고 싶은 경우 사용할 수 있는 코드다 let reader = new FileReader(); if (form.values.imageUrl) { reader.readAsDataURL(form.values.imageUrl); reader.onloadend = () => { setImageSource(reader.result); }; } 비슷한 원리로 다른곳에도 적용이 가능하다 2023. 8. 31. [javascript] FormData 에서 form 쉽게 넣어주기 정석방법 비교 append , stringify ✔️ 정석 방법 let form = new FormData(); form.append("id","id"); form.append("password","password") ✔️ stringify 사용한 방법 data 구조 그대로 stringify 로 감싸주면 string 화 되면서 form 요소처럼 사용이 가능하다. stringify({id:id,password:password}) ✔️ axios 호출시 const { data } = await axios.post(`url`,stringify(params)); 2023. 8. 31. [CSS] type number 위아래 버튼 숨기기 input 에서 type을 number로 설정하면 위아래로 올리는 키가 나온다. 이걸 spin button 이라고 하는데, UI 적으로 예쁘지 않아 숨기는 경우가 많다. 공통 css 코드에 inner-spin-button 을 숨겨주면 예쁘게 사용할 수 있다. input::-webkit-inner-spin-button { appearance: none; -moz-appearance: none; -webkit-appearance: none; } 2023. 8. 29. [CSS] class로 페이드 효과 넣어주기 fade-up fade-down [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% 상태를 변경해준다.. 2023. 8. 8. [CSS] 글자 수 초과하면 말줄임표 제한하기 한줄 두 줄 등등 [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; .. 2023. 8. 8. React : 리액트 작동 원리 이해하기 useState, useMemo, useCallback, react DOM React : 리액트 작동 원리 이해하기 React 리액트는 자바스크립트 라이브러리입니다. 리액트의 핵심은 컴포넌트이며, 이런 컴포넌트화 기능을 활용해 화면을 효과적으로 구성하는 역할을 합니다. React DOM 리액트 DOM은 웹에 대한 인터페이스입니다. 리액트는 컴포넌트의 상태 관리 라이브러리라고 보아야 하며, 가상 DOM 은 컴포넌트 트리를 결정합니다. 리액트는 상태나 props, 컨텍스트, 컴포넌트에 변경이 발생하면 컴포넌트 함수가 재 실행되어 리액트가 이것들을 다시 평가하게 됩니다. 핵심 리액트 컴포넌트는 상태나 이 외의 것들에 대해 재평가 되고, DOM은 과거와 현재의 상태에서 변경되어야하는 부분만을 감지하여 효율적으로 변경해줍니다. 가상 DOM에선 이런 원리로 차이점만을 변경함으로써 바뀐 부.. 2023. 8. 6. React : 스타일 넣어주기 styled-components 사용법 , style 에 props 전달 , 전역 스타일 설정 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.. 2023. 8. 3. [Err] Error message "error:0308010C:digital envelope routines::unsupported" 해결하기 [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.. 2023. 8. 3. React : params 사용하기 URLSearchParams 사용법 +) npm i query-string 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를 사용해 검색된 항목을 담고.. 2023. 8. 3. 이전 1 2 3 4 ··· 7 다음 반응형
