본문 바로가기
반응형

웹 개발 알아두기

 (33)
비주얼 스튜디오 리액트 익스텐션 비주얼 스튜디오에 설치 가능한 리액트 익스텐션을 살펴보겠습니다. ES7+ React/Redux/React-Native snippets 리액트 코드 스니핏 익스텐션으로 단축키를 사용하여 다양한 리액트 코드를 쉽게 구현하도록 해 줍니다 HTML 삽입 미리보기할 수 없는 소스
코드 클립보드에 복사하기 기술블로그인 만큼 코드가 많이 들어가는 데 일일이 복사하는 불편함을 덜고자 클립보드 복사기능을 추가하기로 하였습니다. 완성코드 구현하기 클립보드로 복사하는 기능은 추가설정이 필요 없고 구현이 가장 수월하다고 판단하여 자바스크립트에서 제공하는 내비게이터 객체를 사용하기로 하였습니다. 작동은 아래처럼 내비게이터 객체의 클립보드를 호출하고 원하는 텍스트를 저장하는 방법입니다. navigator.clipboard.writeText(copyText.value); 다음으로, 코드를 복사하기 위해 코드요소에 이벤트를 연결해야 하는데요. 코드요소와 코드 클래스를 통해 전체요소를 잡고 루프를 통해 구현하는 방식으로 결정하였습니다. 이벤트는 아이템을 개별복사하는 경우도 있으므로 클릭이 아닌 더블클릭 이벤트로 연결하고 co..
티스토리 자연스러운 페이지 로딩 페이지를 이동하면서 요소들이 화면에 표시될 때 요소나 파일이 로딩되는 속도 차이 등의 이유로 아래와 같이 부자연스럽게 표시됩니다. 간단한 작업을 통해 화면을 자연스럽게 로딩하는 효과를 구현해 보겠습니다. 해당 코드는 티스토리의 모든 스킨에 적용가능할 뿐 아니라 거의 모든 웹 사이트에 적용가능합니다. 완성코드 /* Type Selector Reset */ body { /* other styles */ animation: smoothRendering 1s ease forwards; } @keyframes smoothRendering { from {opacity: 0;} to {opacity: 1;} } 구현하기 공통 스타일 추가 관리자 페이지에 보면 좌측에 '스킨편집'이라는 기능이 있는데요. 해당 메뉴를 선..
티스토리 다국어 블로그만들기 (Poster 스킨) 완성된 코드 영문으로 변경하기 코드 ▶ 영문 포스트 공통 스타일 추가 ▶ 스킨 편집 (CSS) .category_list>li:nth-of-type(even) { display: none; } 언어변경하기 버튼 ▶ 국문 포스트 ▶ 영문 포스트 ※ 다국어 블로그 이동링크는 포스트마다 달라지기 때문에 아래처럼 포스트를 생성할 때마다 수동을 변경해 주어야 합니다. 배경 티스토리와 더불어 미디엄에서 같은 내용으로 영문 블로그를 같이 운영하던 중 점차 영문 쪽 블로그에 관리가 소홀해지는 것을 느꼈습니다. 이유는 플랫폼 기능차이에서 오는 형식의 차이로 한 플랫폼에서 작성한 블로그를 다른 플랫폼으로 옮길 때 형식의 수정이 필요하다는 점과 블로그의 수가 늘면서 어떤 포스트가 양쪽 모두에 업로드되었는지 추적이 힘들어졌기..
비주얼 스튜디오 코드 - [익스텐션] Sqlite 'SQLite'는 비주얼 스튜디오 코드 편집기에서 데이터베이스의 정보를 보거나 조작을 가능하게 해주는 익스텐션입니다. 설치하기 익스텐션 검색창에 'sqlite'를 검색하고 설치를 누릅니다. Sqlite 사용하기 1. Window 'ctrl' + 'shift' + 'p'를 눌러 전역 검색창을 열고 'SQLite: Open Database'을 선택 후 해당 데이터베이스를 선택하면 아래처럼 Sqlite 익스플로러가 열립니다. ▶ 데이터 보기 테이블 우측에 '재생' 버튼을 누릅니다. ▶ 데이터 추가하기 테이블 우클릭 후 'new query [insert]'를 선택 열린 파일에 아래와 같이 값을 추가합니다. VALUES (1, 'brush', 1), (2, 'soap', 1); 파일을 우클릭하여 'run quer..
비주얼 스튜디오 코드 [익스텐션] - 시퀄라이트 비주얼 스튜디오 코드는 비주얼 스튜디오처럼 자체적으로 데이터베이스의 데이터를 조작하는 기능은 없고 익스텐션으로 해당 기능을 추가가능합니다. 시퀄라이트 익스텐션을 통해 시퀄라이트 데이터베이스의 정보를 조작하는 방법을 보겠습니다. 인스텐션 설치하기 비주얼스튜디오 코드를 열고 익스텐션 메뉴에서 아래와 같이 검색 후 설치합니다. SQLite 설치가 완료되면 검색창에 아래처럼 데이터베이스를 여는 기능이 추가됩니다. 사용하기 익스플로러 열기 SQLite: Open Database 오픈 데이터베이스를 선택 후 열고 싶은 데이터베이스 파일을 선택합니다 (데이터베이스 생성하기). 그러면 좌측 메뉴에 아래처럼 익스플로러가 추가됩니다. 데이터 넣기 익스플로러를 열고 'New Query'를 선택하면 쿼리파일이 열립니다. 입력..
색 디자인에서 색은 너무 중요한 요소이죠. 색에 대한 기본이론과 활용가능한 툴들을 알아볼까요? 색의 이론 색의 이론이란 색과 색의 조합에 대해 사람이 느끼는 감정에 관한 이론으로 이를 설명하기 위해 원색인 빨강, 파랑, 노랑과 이의 조합으로 만들어진 주황, 보라, 초록을 담은 동그란 판을 활용합니다 (뉴턴이 개발했다고 하네요). 참고로, 원색은 다른 색의 조합으로 만들 수 없습니다. 용어들 먼저, 색의 이론과 관계된 용어들을 먼저 볼까요 ▶ 색조 (Hue) 기본이 되는 여섯 가지 색 빨강, 주황(오렌지), 노랑, 초록, 파랑, 보라의 고유한 색을 의미합니다. ▶ Tint 기본이 되는 여섯 가지 색 빨강, 파랑, 노랑, 주황, 보라, 초록에 흰색을 가미한 정도를 의미합니다. ▶ 음영 (Shade) 기본이 되는..
패키지 매니저 웹 애플리케이션을 개발할 때 일반적인 기능이라면 이미 구현된 기능을 가져와서(다운로드해서) 쓰는 것이 직접 개발하는 것보다 관리나 시간적 측면에서 효율적이겠죠? 이미 구현된 기능들을 라이브러리(또는 패키지)라고 하며 프로젝트에서 사용하기 위해 다운로드된 라이브러리의 목록들을 dependency라고 합니다. dependecy의 작동을 위해 dependency가 사용하는 다른 도구들이 있다면 해당 파일도 다운로드하여야 하므로 사용하는 기능들이 많아지면 파일들의 관리가 개발보다 더 힘들어지겠죠. 패키지 매니저는 소프트웨어 개발도구의 설치, 업그레이드 및 구성을 자동화하고 정형화된 방식으로 관리할 수 있게 해 줍니다. 또 다른 장점은 패키지 매니저는 각 dependency의 이름과 버전 정보를 담은 리스트 파일..
728x90

티스토리툴바