본문 바로가기

분류 전체보기346

CSS - input 체크박스 테두리 스타일 변경하기 요즘 새발자는 UI 를 열심히 하고 있다. (쑥쑥 무럭무럭자라라) input 의 기본 체크박스 안의 테두리 스타일을 변경하는 미션을 맡아 그 기록을 남겨보았다. (미래의 나는 여전히 해멜 것을 알기에... ) 자 그럼 시작해보자 ! 결과화면 미리보기 일단 구현된 결과물이다. 기본 체크박스는 테두리가 회색으로 되어있다. 하지만 나는 테두리가 없는 깔끔한 디자인을 구현하였다. JavaScript - CSS input 체크박스 테두리 스타일 변경하기 현실은 css 에서 바로 변경이 안된다. 😭 after 속성을 사용하여 현실에서는 적용이 안되는 가상의 스타일을 지정해주자. HTML CSS ** 참고로 IE 는 appearance 속성이 안먹었던 기억이 가물가물하게 나니, 혹시 IE 구버전 대응을 해야한다면 참.. 2021. 9. 29.
JavaScript - split()으로 문자열 자르기 (파일명에서 확장자만 따로 분리하기) 파일 전송시, 썸네일(미리보기)와 파일명을 함께 보여주는 기능을 구현 중이다. 이미지 파일이 아닐 때, 썸네일에 파일확장자만 보여주려고 한다. 결과화면 미리보기 이렇게 파일확장자가 썸네일(미리보기)부분에 나온다. 그럼 시작해보자! JavaScript - split으로 문자열 자르기 (파일명에서 확장자만 따로 분리하기) 기본 아이디어는 이렇다 ! - split() 함수로 파일 이름을 ' . '(쩜) 을 기준으로 양옆으로 분리한다. ex) 새발.jpg 라고 하면 ' 새발 ' 과 ' jpg ' 로 분리된다. - ' . ' (쩜) 뒤의 확장자만 문자 배열로 따로 빼내버리는 것이다! ex) saebal[1] 을 호출하면 ' jpg ' 가 호출된다. split() 간단 원리 설명 아래 문자열을 잘라보자. 문자열에 .. 2021. 9. 28.
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.
TypeScript(1) 타입스크립트 설치하기 예전에 리액트로 실습한 영단어 암기장 프로그램이 있다. 그걸 TypeScript로 포팅해보려고 한다. 자 이제 타입스크립트 환경을 세팅해.... 주기 전에 왜 써야하는지 좀 알고가자. Why TypeScript 내가 느낀 타입스크립트를 사용하는 이유는 간단하다. 버그예방 자바스크립트는 int 나 string 같은 타입이 없어 프로젝트가 커지면 햇갈리기 때문이다. 나 혼자만 코딩하는 거면 괜찮지만, 만약 나 다음사람 다다음 사람이 와서 덕지덕지 유지보수를 한다면? 마치 도배된 벽지들 위에 또 벽지 바르는 것처럼 너덜너덜해질 것이다. 타입스크립트는 정해준 타입이 아니면 에러를 발생시키기 때문에 통일성이 유지가 된다. 실제로 한 연구에 따르면 모든 자바스크립트 버그의 15%를 사전에 타입스크립트로 감지할 수 .. 2021. 9. 15.
반응형

티스토리툴바