본문 바로가기

전체 글350

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.
Vue(14) router-link (라우터 링크) 밑줄 없애기 Vue.js 로 개발 중이다. 라우터의 태그를 사용하였더니 아래와 같이 밑줄이 생겼다. 이런 경우 어떻게 해야할까? 당황하지말고 새발자를 잘 따라와보자. Vue(13) router-link (라우터 링크) 밑줄 없애기 우리가 잊지 말아야 할 것이 있다. vue 는 프레임워크라는 것, 즉 vue 의 현란한 태그들을 사용하지만 정작 HTML 에서는 익숙한 태그들로 바뀐다. router-link 를 html 로 보면 태그로 사용된다. // vue.js HOME // 웹에서 볼 때 HOME 실제 HTML에서는 라는 태그를 태그로 인식하기 때문에 a 에 대한 css 를 지정해주면 해결! a { text-decoration: none; } 2021. 9. 24.
TypeScript(2) 타입스크립트로 포팅하기 (props, useState) 추석 연휴의 시작, 새발자는 놀고먹기 전 타입스크립트를 잘 설치했다. 추석 연휴의 마지막 날, 새발자는 불러버린 배와 함께 타입스크립트를 포팅해본다. TypeScript(2) 타입스크립트로 포팅하기 리액트로 영단어 암기장을 만들었고 타입스크립트로 포팅하는 중이다. Word 라는 컴포넌트 부터 포팅해보았다. 포팅 전 자바스크립트와 포팅 후 타입스크립트의 차이를 자세히 비교해보자. JavaScript vs TypeScript 자바스크립트로 짠 리액트 코드이다. props를 받아오고, useState로 상태변수를 선언해주었다. 타입스크립트로 짠 리액트 코드를 보자. 1. 일단 props 처리를 타입스크립트로 하였다. 2. useState 의 상태 변수의 타입을 지정해주어야 한다. 전체코드보기 - 타입스크립트 .. 2021. 9. 22.
Git(30) git cherry-pick 사용법 작업을 하다보면 다른 브랜치에서 커밋한 코드들을 현재 브랜치에 복사해서 얹어놔야 할 때가 있다. cherry-pick 은 현재 브랜치에 다른 브랜치의 커밋들을 골라서 복사해 얹어놓는 신개념 명령어다. git cherry-pick 바로 뒤에 커밋번호 를 쓰면 현재 브랜치에 해당 커밋 코드들이 떡하니 copy 되어 올라간다. $ git cherry-pick 커밋# Git(30) git cherry-pick 사용법 자, 그림을 통해 이해해 보자. 지금은 main 브랜치에서 작업 중이다. 근데 side 브랜치에서 작업한 커밋들(C4 랑 C2) 를 main 브랜치에 복사해서 가져다놓아야 한다. 이때 git cherry-pick 명령어와 필요한 커밋 순서대로 커밋#를 넣어주면 $ git cherry-pick C2 .. 2021. 9. 19.
AWS S3(Simple Storage Service)란 간단한 정적인 포트폴리오 웹사이트를 유지보수하는데, 살펴보니 모든 파일들이 s3 에 들어가 있었다. 수정 후 바뀐 파일로 s3 에 업로드를 하였더니 웹 상에서도 자동 배포가 되었다. 이로 인해 s3 가 무엇인지 더욱 궁금해졌다. 자, 이제 S3 가 무엇인지 알아보자. AWS S3(Simple Storage Service)란 HTTPS 형태의 API로 데이터를 저장하거나 추출하게 해주는 웹 서비스이다. 그 데이터들을 객체라고 표현하고, 그 객체들을 버킷이라는 영역안에 저장을 하여 그룹핑 할 수 있다. aws를 이용하면 많은 데이터를 처리해야 하는 일이 발생하고 그것을 저렴하고 효율적으로 관리할 수 있는것이 s3 이다. S3는 Simple Storage Service 로 파일 서버의 역할을 하는 웹 서비스이.. 2021. 9. 18.
MQ (Message Queue) 란 현재 제작하는 서비스는 기존 데이터베이스와 연동가능한 서비스이기 때문에 프로세스 자체가 복잡하고 시간이 걸린다. 그렇기 때문에 MQ를 도입하여 서비스에서 파생되는 부가 요청 등을 MQ에 보낸 후 응답시키는 프로세스로 넘어가도록 하고, 처리는 MQ에서 꺼내 별도로 진행하도록 하였다. 그 결과 서비스 시에 여러 프로세스로 넘어가는 시간이 획기적으로 단축된다. MQ 는 데일리미팅에서 백엔드 개발자분에게 많이 들었던 단어이다. MQ가 뭐지 받아적다 보니 막연한 개념만 알겠더라. 오늘도 새발자는 뚠뚠. 자, 공부해보자. MQ (Message Queue) 란 메시지 기반의 미들웨어이다. 메시지를 이용하여 중간에서 여러 어플리케이션, 시스템, 서비스들을 연결해주는 솔루션이다. 비동기 메시지를 사용하는 서비스들 사이에.. 2021. 9. 16.
반응형

티스토리툴바