본문 바로가기

전체 글351

JavaScript 알고리즘(5) Same Frequency Counter Pattern 요즘에는 자바스크립트로 알고리즘 코드 패턴 공부 중이다. 여러 패턴들을 익히면서 재미를 찾아가는 중이다. 오늘 공부한 패턴은 Frequency Counter Pattern 이다. JavaScript 알고리즘(5) Same Frequency Counter Pattern 두개의 인자가 같은 숫자 혹은 글자 인지를 비교할 때, 하나의 객체에 요소 하나하나를 저장해 중복의 갯수를 표시하고, 나머지와 비교하며 같으면 제거해버린다. 만약에 같은 숫자라면 빈 객체로 돌아갈 것이고(true), 그게 아니라면 뭐라도 하나 남아있을 것이다.(false) function sameFrequency(firstNum, secondNum){ // 1. 숫자를 문자열로 만든다. (그래야 배열화할수있기 때문) const first =.. 2022. 3. 23.
React (65) 게시글 더보기 토글 버튼 만들기 게시글을 길게 작성한 경우 [더보기] 버튼을 누르면 나머지 글들이 보이는 기능을 만들어보자 결과화면 미리보기 아래 내용처럼 글을 일정 글자수 이상 길게 쓰게되면 [더보기] 버튼이 생기면서 게시글의 일부분만 보이게 된다. [더보기] 버튼을 누르면 전체 글이 보이고, [닫기] 버튼으로 다시 생략된 부분이 보여진다. React (65) 게시글 더보기 토글 버튼 만들기 토글기능은 useState를 통해 boolean 값으로 스위치처럼 사용할 것이고, 또한 글자수 제한 조건이 걸려있으므로 useRef 를 통해 글자수를 제한할 것이다. const [isShowMore, setIsShowMore] = useState(false); // 더보기 열고 닫는 스위치 const textLimit = useRef(170); .. 2022. 3. 21.
JavaScript - Webpack 이란 웹팩을 일하면서 정말 많이 들어보았다. 대충 개념만 알고 있는 거와 정리해보는 건 다르다. 도대체 웹팩의 정체는 뭘까? 블로그들을 참고하여 개념적인 부분만 먼저 정리해보았다. JavaScript - Webpack 이란 직관적으로 그림을 먼저 살펴보자. 많은 네모들이 보이다 → 네모의 수가 줄어들었다. 복잡한 것들 깔끔하게 정리가 된 느낌이다. 웹팩이 뭘까? 웹팩은 모듈 번들러 라이브러리이다. 그럼 모듈 번들러는 뭘까? 여러개의 나누어진 있는 파일들을 하나의 파일로 만들어주는 라이브러리이다. 왜 사용할까? 하나의 웹페이지가 로드될 때 여러개의 자바스크립트 파일들을 가져와 퍼즐조각처럼 맞추며 우리앞에 짜잔하고 나타난다.(렌더링) 그래서 전역적으로 한꺼번에 많은 파일을 불러오면 뻑(?)이 날 가능성이 농후하다.. 2022. 3. 16.
React(64) React-color 컬러피커 라이브러리 사용하기 원하는 색상을 고를 수 있는 컬러피커 라이브러리를 사용해보자 React-color 라는 라이브러리를 발견하였다. 커스텀이 가능하여 추후에도 사용성이 높을 것 같아서 선택을 하였다. 설치 및 셋업 방법은 아래의 공식문서를 참고해보자 React Color casesandberg.github.io 결과화면 미리보기 나의 경우 컬러 피커에서 컬러를 선택하면 input 창에서 선택한 Hex 값을 받아오는 기능을 구현하는 중이었다. 그 기능의 셋업을 위해 우선 컬러 파레트를 선택했을 때, 컬러피커 하단의 내장된 인풋으로 Hex 값이 텍스트로 들어오는 기초적인 셋업을 구현한 내용을 담고 있다. React(64) React-color 컬러피커 라이브러리 사용하기 구조는 간단하다. React-color 컬러피커는 여러 .. 2022. 3. 13.
React - Input 실행오류 A component is changing an uncontrolled input to be controlled. 수정 페이지 에서 input 창에 입력된 값을 동적으로 받아오다가 아래와 같은 워닝을 받게 되었다. 이 에러는 uncontrolled input 이었다가 → controlled input 으로 바뀌면서 생긴 에러이다. 한마디로 초기값이 undefined 이었다가 → 렌더링 후에 값이 들어와 바뀌었기 때문이다. 리액트 공식문서와 블로그를 참고하여 해결하여 보자 React는 두 가지 방식으로 form 입력을 처리합니다. React에 의해 입력값이 제어되는 엘리먼트를 제어 컴포넌트(controlled component) 라고 합니다. 사용자가 제어 컴포넌트에 데이터를 입력하면 변경 이벤트 핸들러가 호출되고 코드가 (업데이트된 값으로 다시 렌더링에 의해) 입력의 유효 여부를 결정합니다. 다시 렌더링하지 않으면 .. 2022. 3. 6.
React(63) TypeScript - Pick 으로 객체에서 특정타입만 골라 사용하기 지난 시간에는 Omit 으로 타입에서 사용하지 않는 프로퍼티들을 제외시키고 자유롭게 사용해보았다. 이번 시간에는 Pick 으로 타입에서 사용할 프로퍼티들만 골라서 자유롭게 사용해보자. Hoxy, 오밋(Omit) 이랑 비교해보고 싶으시다면 ... ? 지난 포스팅보기 ↓↓↓ React(62) Omit 으로 객체에서 특정 타입 빼고 사용하기 보통 타입스크립트에서 객체의 타입을 정의할 때, 있어도 되고 없어도 되는 타입(optional property) 옆에는 ? (물음표) 를 붙여서 정의하였다. 타입 스크립트는 꽤나 엄격한 언어라 값을 할당하지 않 devbirdfeet.tistory.com React(63) Pick 으로 객체에서 특정타입만 골라 사용하기 아래의 댓글 타입에서 나는 id , comment 만 .. 2022. 3. 1.
반응형

티스토리툴바