본문 바로가기

전체 글350

TypeScript(1) 타입스크립트 설치하기 예전에 리액트로 실습한 영단어 암기장 프로그램이 있다. 그걸 TypeScript로 포팅해보려고 한다. 자 이제 타입스크립트 환경을 세팅해.... 주기 전에 왜 써야하는지 좀 알고가자. Why TypeScript 내가 느낀 타입스크립트를 사용하는 이유는 간단하다. 버그예방 자바스크립트는 int 나 string 같은 타입이 없어 프로젝트가 커지면 햇갈리기 때문이다. 나 혼자만 코딩하는 거면 괜찮지만, 만약 나 다음사람 다다음 사람이 와서 덕지덕지 유지보수를 한다면? 마치 도배된 벽지들 위에 또 벽지 바르는 것처럼 너덜너덜해질 것이다. 타입스크립트는 정해준 타입이 아니면 에러를 발생시키기 때문에 통일성이 유지가 된다. 실제로 한 연구에 따르면 모든 자바스크립트 버그의 15%를 사전에 타입스크립트로 감지할 수 .. 2021. 9. 15.
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.
반응형

티스토리툴바