본문 바로가기

React128

Styled-components(1) 스타일드 컴포넌트 설치하기 지난 시간까지 코딩앙마 님의 강의를 듣고 타입스크립트로 포팅을 해보며 감을 익혔다. 이번 시간부터는 udemy 에서 프로젝트 실습을 시작하였다. 평소부터 배우고 싶었던 styled-components 를 타입스크립트와 연동할 수 있도록 설치하는 과정을 기록해보았다. Styled-components(1) 설치하기 - Styled-components 설치하기 $ npm install styled-components - Typescript(타입스크립트)와 함께 사용하기 위한 라이브러리 설치하기 $ npm install --save-dev @types/styled-components src/styles/global.ts 설치가 다 되었으니 테스트 코드를 짜보자. 흥미로운 점은 css 가 트리 구조로 짜여있다. .. 2021. 10. 12.
React(50) history.push 로 url 만 변경되고 새로고침이 안되는 이슈 리액트를 사용하여 페이지 이동 함수를 만들고 있다. [ 결제하기 ] 버튼을 누르면 goPay() 함수가 실행되며 history.push() 를 통해 결제 페이지로 넘어가야 한다. 하지만 url만 변경되고 빈 화면이다. 또한 새로고침을 해야만 이동한 페이지가 보이는 이슈가 발견되었다. 일단 url은 잘보이는 걸 보니 history.push() 는 잘 먹혀들어간다. 그럼 문제는 새로고침이라는 결론에 도달했다. 자 그럼 해결해보자 ! React(50) history.push 로 url 만 변경되고 새로고침이 안되는 이슈 결제하기 버튼을 누르면 goPay 함수로 연결된다. goPay() 에서는 history.push로 ' /payment ' 페이지로 이동한다. 결제하기 function goPay() { hist.. 2021. 10. 10.
React(49) 타입스크립트 - CSS 속성을 동적으로 변경하기 토글 메뉴가 열렸을 때와 닫혔을 때, border-bottom 의 두께를 다르게 변경하고 싶다. 백문이 불여일견 ! 결과화면을 먼저 살펴보자. 결과화면 미리보기 - 토글 메뉴가 열렸을 때, 빨간박스 안의 border-bottom이 연하다. - 토글 메뉴가 닫혔을 때, 연했던 border-bottom 이 진해졌다. React(49) 타입스크립트 - CSS 속성을 동적으로 변경하기 List.tsx 리액트 컴포넌트 내에서 useState 로 선언한 closeList 라는 상태변수를 이용하면 변경 가능하다. 먼저 closeList 라는 변수를 useState 를 통해 선언해주자. const [closeList, setCloseList] = useState(false); 위에서 선언한 closeList가 로직에 .. 2021. 9. 25.
TypeScript(2) 타입스크립트로 포팅하기 (props, useState) 추석 연휴의 시작, 새발자는 놀고먹기 전 타입스크립트를 잘 설치했다. 추석 연휴의 마지막 날, 새발자는 불러버린 배와 함께 타입스크립트를 포팅해본다. TypeScript(2) 타입스크립트로 포팅하기 리액트로 영단어 암기장을 만들었고 타입스크립트로 포팅하는 중이다. Word 라는 컴포넌트 부터 포팅해보았다. 포팅 전 자바스크립트와 포팅 후 타입스크립트의 차이를 자세히 비교해보자. JavaScript vs TypeScript 자바스크립트로 짠 리액트 코드이다. props를 받아오고, useState로 상태변수를 선언해주었다. 타입스크립트로 짠 리액트 코드를 보자. 1. 일단 props 처리를 타입스크립트로 하였다. 2. useState 의 상태 변수의 타입을 지정해주어야 한다. 전체코드보기 - 타입스크립트 .. 2021. 9. 22.
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.
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.
반응형

티스토리툴바