본문 바로가기
728x90
반응형

분류 전체보기166

[CSS] VSCODE emmet(에밋) 기능 더 빠르게 사용하기 요즘 컴퓨터 바꾼 후로 에밋 적용 속도가 좀 느려졌다고 느꼈다. 탭키나 엔터를 누르면 바로 챡 완성이 되어야하는데 살짝 기다렸다가 completions(완성 텍스트 박스?)가 뜬 후 눌러야 적용이 돼서 답답했다. 답답해! 0.1초도 기다리기싫어! 구글링ㄱㄱ https://stackoverflow.com/questions/66994447/vs-code-emmet-being-very-slow 아하 탭으로 트리거 체크? 1. VSCODE에서 command palette을 연다. (F1 또는 Command+Shift+P) 2. setting을 검색해 Open User Settings에 들어간다. 3. 세팅 검색창에 emmet을 검색한다. 검색결과에서 Emmet: Trigger Expansion On Tab 을 .. 2023. 11. 30.
SSH 키 하나에 여러 서버를 연결해도 괜찮을까? | 마스터 비밀번호로 여러 서버 접속하기 SSH 키 하나에 여러 서버를 연결해도 괜찮을까? 구글링을 해봅니다. Now let't consider security first. 다음 표는 보안에 대한 간단한 순위를 제공합니다. 숫자가 클수록 보안이 더 안전함을 의미합니다 : Security Ways to go 1 One SSH key-pair (NO passwd) 1 Multi SSH key-pairs (NO passwd) 2 One SSH key-pair (WITH passwd 2 Multi SSH key-pairs (WITH passwd) (SAME passwd) 3 Multi SSH key-pairs (WITH passwd) (DIFF passwds) passwd가 없으면 시스템이 누군가에 의해 침입당하면 차단기는 모든 개인 키와 구성을 얻을.. 2023. 11. 29.
[Mac] VSCODE Remote-SSH 비밀번호 없이 원격 접속하기 VSCODE에서 Remote-SSH를 통해 원격 서버에 접속할 때 매번 비밀번호 치기 귀찮잖아요 비밀번호 입력 생략하고 광명을 찾읍시다. 1. 터미널을 열고 ssh-keygen -t rsa 를 입력합니다.저장 장소와 비밀번호를 물으면 엔터를 재차 눌러 넘어가줍니다. 이렇게 아무것도 입력하지 않고 Enter 키를 누르면 기본 경로와 파일 이름(/Users/내 폴더/.ssh/id_rsa)으로 비밀번호 없이 설정이 됩니다. 그러면 화려한 랜덤아트 이미지를 보여주며 키가 생성됩니다 2. 원격서버에 키를 등록해 줍니다.터미널에 ssh-copy-id 아이디@원격서버주소를 입력합니다. 예시1) ssh-copy-id selkim@123.456.789.121 예시2) ssh-copy-id selkim@lorem.com .. 2023. 11. 29.
Hello, world는 왜 코딩에서 흔하게 쓰이는 문구가 된걸까? 코딩을 배우면 제일 먼저 접하는 문장이 아마 'Hello, World!'가 아닐까 싶습니다. 새로운 언어나 개발 환경을 테스트할 때 'Hello, World!'를 작성함으로써 프로그래머는 언어의 기본 문법 및 출력 메커니즘을 익히고, 개발 환경이 올바르게 설정되어 있는지 확인할 수 있습니다. 이로써 새로운 언어나 플랫폼을 접할 때 초보자가 쉽게 시작할 수 있는 기회를 제공합니다. 이 hello world가 왜 정석처럼 쓰이는 문구가 된 건지 알아봅시다. Hello world 유래 테스트 구문으로서의 사용은 널리 알려진 바와 같이 Brian Kernighan의 1972년 책인 'A Tutorial Introduction to the Language B'에서 시작되었을 것으로 여겨집니다. 이후, 이것은 19.. 2023. 11. 28.
[CSS] filter:drop-shadow()와 box-shadow의 차이점 둘 다 그림자 효과를 준다는 공통점이 있지만 요소에 적용되는 범위가 다르다. box-shadow: 요소의 상자에 그림자를 추가하여 뒷면에 그림자 효과를 생성합니다. filter: drop-shadow(): 요소 전체에 드롭 셰도우 효과를 적용하며, 이는 요소의 상자에만 국한되지 않고 내부의 투명하거나 반투명한 부분에까지 확장됩니다. div { display: flex; width: 50px; height: 50px; border: 1px solid gray; margin: 1rem; align-items: center; justify-content: center; } .drop {filter: drop-shadow(0 0 5px rgba(0,0,0,.5));} .box {box-shadow: 0 0 5p.. 2023. 11. 28.
맥 Safari 브라우저에서 F5로 새로고침하기, F12로 개발자도구 열기 command+R로 새로고침 하기 너무 귀찮잖아요 개발자도구도 빨리 열고싶잖아요 사파리를 윈도우 단축키로 이용해봅시다 시스템 환경설정 > 키보드 > 키보드 단축키 앱 단축키에서 응용프로그램 Safari 선택 여기서 메뉴 제목은 마음대로 입력하면 안됩니다 사파리 툴바에 있는 메뉴 이름대로 써야함 그 다음엔 키보드 단축키 인풋박스를 클릭하고 F5를 누르기같은 방식으로 개발자도구도 단축키 F12로 바꿔줍니다. 크롬의 개발자도구=사파리의 웹 인스펙터 '웹 인스펙터 보기' 또는 본인이 원하는 탭 메뉴명을 넣으면 됨 짠이렇게 바꿔두면 윈도우 운영체제처럼 F5, F12 단축키 사용 가능합니다 2023. 11. 28.
23년 10월의 주저리 (스킨 변경, 향후 계획) 블로그 스킨을 바꿨다. 티스토리 기본 스킨에서 살짝 수정을 했다. 높은 해상도에서도 컨텐츠가 크게 보이도록 반응형 작업도 곁들임 마음에 든다. '우당탕탕 웹퍼블리셔'라는 타이틀의 블로그이지만 바꿀 예정이다. 개발자로 전향하기로 마음 먹었다! 얼마전 출장 다녀오는 길에 자바 개발자님과 거의 직업박람회 느낌으로 진지한 대화를 나누었고, 개발자님 덕에 내 안의 물음표가 느낌표가 되었다. 코딩의 영역을 넓히고싶다! 개발자가 되고싶다! 막연히 생각만 해왔다. 나부터가 챗GPT에 상당히 도움을 받고있는 이 AI시대에 변화는 선택이 아니라 필수적이라는 결론을 내렸다. 다행히도 나는 코딩이 재밌고 계속 IT업계에 있고싶다. 개발자님은 개발자 전향을 적극 추천해주셨고 어떤 태도로 임해야하는지 상세히 알려주셨다. 11월부.. 2023. 10. 27.
[CSS] Hover 하면 현재 배경 색상에서 어두워지게/밝아지게 하는 CSS Trick 버튼에 각각 오버할 때 현재 색상에서 어두워지게 하고 싶은 경우, 아래 코드처럼 따로 색상 hover를 주고 계신가요? /* 예시 */ .btn--red {background-color: brown;} .btn--red:hover {background-color: #62191b;} .btn--green {background-color: green;} .btn--green:hover {background-color: #074d09;} background-image 속성을 이용하면 한번에 현재 색상에서 어두워지게 할 수 있습니다. background-image: rgba(0,0,0,.4); 검은 색상(0,0,0)에 40%의 투명도를 준 값이죠. hover에 위와 같이 값을 주면 각각 현재 색상에서 40%만큼.. 2023. 10. 25.
After Effects(애프터 이펙트)로 LottieFiles JSON 애니메이션 만들기 (feat. 앱 애니메이션, ai 파일) 준비물: Adobe After Effects 어도비 애프터 이펙트, Adobe Illustrator 어도비 일러스트레이터 준비물 용량이 강력하죠? 사실 애니메이션은 웹에서 CSS로 구현하거나 AnimatedSVG 등을 사용하는 게 훨씬 편리한데 앱에서는 JSON 애니메이션을 많이 쓰는 것 같아요. 이번 앱 프로젝트 중에 간단한 애니메이션을 로티 JSON 파일로 만들어달라는 개발자님 요청에 해당 작업을 진행했습니다. 'lottie-react-native' 라이브러리로 애니메이션을 쉽게 구현할 수 있어요 물론 JSON 파일 만드는 게 귀찮죠 우선 제가 하는 방식은 ai 확장자 파일이 필요합니다. 일러스트레이터를 통해 ai 파일을 생성해줍니다. (참고로 SVG 파일을 일러에서 열어서 AI 확장자로 저장하는 건.. 2023. 10. 19.
728x90
반응형

티스토리툴바