본문 바로가기

분류 전체보기346

React(48) 타입스크립트 - 토글 메뉴에 animation 효과주기 타입스크립트와 리액트로 메뉴 접고 펼치기 기능을 구현 중이다.토글까지는 아주 쉽게 구현을 하였지만, 자연스럽게 펼쳐지는 애니메이션을 적용하려니 아~주 골치가 아팠다. ㅠㅠ  동적인 코드에 애니메이션 기능은 처음이라 한참 헤매였다. 하지만 언제나 그렇듯, 항상 어렵사리 해결을 하면 몇줄의 코드로 끝나게 된다. 조금 허무하기도 하지만 뿌듯하다.자 그럼 이제 만들어보자. 이슈- @key frame 을 적용한 animation 속성을 이용하려 하였으나 양방향 애니메이션이 적용이 되지 않았다.- 토글 기능을 적용한 메뉴는 동적으로 받아온 api 객체를 사용하여 보여준다. 즉 동적으로 height 속성을 적용하려니 동작이 되지않았다. ex) 이런식으로 height : calc(100% - 20px) React(48.. 2021. 9. 14.
CSS - 텍스트가 넘칠때 생략하기 (말줄임) Updated 08/01/22 css 를 사용하다 보면 은근히 텍스트를 생략해야 할 때가 많다. 지난번에도 UI 작업하다가 버튼 안의 텍스트가 너무 길어 버튼 영역이 망가져 버렸다. 이럴때 너무 텍스트가 길면 ... 으로 생략되도록 css 를 사용하여 만들어보자. CSS - 텍스트가 넘칠때 생략하기 text-overflow 라는 속성을 사용하면 된다. overflow 속성으로 영역 안에 내용이 많아서 넘칠 때, 종종 스크롤 바를 사용했다. 오버플로우는 흘러넘치는 영역을 제한하는 속성이다.text-overflow 속성도 비슷하다. 문장이 넘쳐흐를 때 생략할 수 있다.  text-overflow 의 조건 text-overflow 속성을 사용하려면 몇 가지 조건이 만족되어야 동작한다. 그렇지 않으면 생략 기호.. 2021. 9. 13.
React(47) div영역에 mouseover 시 버튼 보이기 Jira 에서는 메뉴가 열렸을 때, 마우스오버 시 메뉴를 접을 수 있는 화살표 버튼이 보인다. 이걸 모티브삼아 똑같은 기능을 리액트에서 개발해보려고 한다. React(47) div영역에 mouseover 시 버튼 보이기 결과화면 미리보기 지금보는 화면은 Jira 의 보드이다. 오른쪽에는 메뉴가 보인다. 이 메뉴에 마우스 오버해보자. 그럼 보시는 것처럼 빨간박스 안의 ' 2021. 9. 12.
React(46) 타입스크립트 - api 객체 받아오기 2 (상세페이지) 리액트와 타입스크립트를 이용하여 api 객체를 받아오는 방법에 대한 포스팅 순서이다. 1. React(45) 타입스크립트 - api 객체 받아오기 (상세페이지) 1 - api 로 서버에서 채팅방과 유저들의 정보를 받아와 회원 등급에 따른 채팅 리스트를 구현한다. 2. React(46) 타입스크립트 - api 객체 받아오기 (상세페이지) 2 - 구현한 채팅 리스트를 바탕으로 채팅 정보가 들어있는 상세 페이지를 구현해보았다. React(46) 타입스크립트 - api 객체 받아오기 2 (상세페이지) 결과 화면 1. 통신메소드를 통해 컴포넌트 내에서 채팅방 리스트를 받아온다. [ 더보기 ] 버튼을 누르자. 2. [ 더보기 ] 를 누르면 customer 인 유저 정보와 그에 따른 1:1 채팅방 리스트로 연결된다... 2021. 9. 11.
React(45) 타입스크립트 - api 객체 받아오기 1 (상세페이지) 리액트와 타입스크립트를 이용하여 api 객체를 받아오는 방법에 대한 포스팅 순서이다. 1. React(45) 타입스크립트 - api 객체 받아오기 (상세페이지) 1 - api 로 서버에서 채팅방과 유저들의 정보를 받아와 회원 등급에 따른 채팅 리스트를 구현한다. 2. React(46) 타입스크립트 - api 객체 받아오기 (상세페이지) 2 - 구현한 채팅 리스트를 바탕으로 채팅 정보가 들어있는 상세 페이지를 구현해보았다. React(45) 타입스크립트 - api 객체 받아오기 (상세페이지) - 1 모든 것이 처음이었다. 타입스크립트도 낯설기만 하였다. 컴포넌트가 여러개 연결되다 보니 그냥 코딩만 할 수는 없었다. 처음으로 며칠동안 구조에 대해 고민하게 된 계기가 되기도 하였다. 왜 구조가 중요한지도 깨달.. 2021. 9. 10.
React(44) 리액트 훅 - useMemo 란? memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다. memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다. 작성된 컴포넌트 함수는 React 앱에서 랜더링(rendering)이 일어날 때마다 호출이 됩니다. 컴포넌트 함수가 호출이 되면 그 안에 자바스크립트 로직들이 수행되고, 이를 기반으로 JSX로 마크업된 UI가 리턴되는 기본 구조를 가지고 있죠. React에서 컴포넌트의 랜더링은 한 번 일어나고 끝이 아니라 수시로 계속 일어날 수 있습니다. 랜더링마다 호출되는 컴포넌트 함수 useMemo란 성능 최적화를 위하여 연산된 값을 재사용.. 2021. 9. 9.
Git(29) git stash 란 요즘 git 을 중점적으로 사용하다 보니 git 에 대한 포스팅이 많다. 그만큼 지식과 대처능력도 쌓여가리라 믿는다 :) 오늘은 git stash 에 대해 중점적으로 알아보자. Git(29) git stash 란 - git stash 사용하기 git stash 는 내가 작업하던 코드만 싹 긁어서 임시 공간에 저장해준다. (클립보드 같은 느낌이랄까) 내 브랜치는 { 마스터 + 그 뒤로 작업한 코드 } 상태이다. 작업한 코드만 싹 잘라내기(git stash)하고, 임시공간에 따로 저장해놓는다. 내 브랜치는 { 마스터 } 만 남는다. 어딘가에 { 그 뒤로 작업한 코드 } 가 따로 임시 저장된다. 커밋 이 후에 작업을 했다. const ItemDetail = (): ReactElement => { return .. 2021. 9. 8.
React(43) 리액트 훅 - useCallback 이란 내가 사용하면서 느낀 useCallback 은 리액트 전용 콜백함수라는 느낌이 강했다. 보통 자바스크립트만 사용하다가 callback 지옥을 경험해봤다는 목격담을 많이 전해들었다. (후덜덜) 다행히도 리액트에서는 콜백함수가 쓰이지 않는다. 그렇지만 가끔씩 비슷하게 써야할 때가 있다. 자 그럼 useCallback() 이 무엇인지 알아보자. React(43) 리액트 훅 - useCallback 이란 - 내가 이해해본 useCallback() useEffect 는 (() => { 두번째 배열 [test] 라는 변수에 변화가 있을 때만 렌더링을 새로 하는 것 처럼 }, [ test ]) useCallback 도 (function() { 두번째 배열 [test] 라는 변수에 특정 변화가 있을 때만 함수를 새로 .. 2021. 9. 7.
React - 타입스크립트 실행오류 Type 'undefined' is not assignable to type 리액트에서 타입스크립트를 사용하다가 에러가 났다. 강의만 들어봤고, 처음 사용해보았던 터라 당황했지만 차근차근 해결해 나갔다. 처음에는 타입스크립트만 쓰지 않았더라면 이런 고생을 하지 않고 진작에 개발이 끝났을 텐데 하는 불평도 많이 들었다. 그렇지만 쓰다 보니 변수 관리가 훨씬 잘된다는 사실을 깨달았다. 그리고 이 포스팅은 내가 겪은 이슈들의 기록이다. 언젠가는 쌓이겠지 휴 ... (Updated 02/21/22) 오랜만에 예전에 쓴 포스팅을 봤는데 추가할 부분이 있어 수정해보았다. 아직도 부족하다고 생각하지만 몇 개월전의 나를 보니 정말 쌓이긴 하는 것 같다. React - 타입스크립트 실행오류 Type 'undefined' is not assignable to type props 를 넘겨주다 발생한.. 2021. 9. 6.
반응형

티스토리툴바