본문 바로가기

분류 전체보기361

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.
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.
반응형

티스토리툴바