토람코

리액트로 개발한 웹 내에서 텍스트 클릭 시 클립보드에 복사되는 기능을 구현해보았다. 1. navigator.clipboard 사용 다음과 같이 navigator.clipboard 를 사용할 경우 웹에서 잘 작동한다. const handleCopyClipBoard = (text: string) => { try { navigator.clipboard.writeText(text); alert('클립보드에 복사되었습니다.'); } catch (error) { alert('클립보드 복사에 실패하였습니다.'); } }; return ( handleCopyClipBoard('토람은행 123-456-7890')}> 토람은행 123-456-7890 ); 위 내용을 실행시키면, button 태그에 의해 위와 같이 버튼이 ..

태그를 사용하여 특정 구역을 클릭했을 때 다른 페이지로 넘어가도록 onClick 이벤트를 구현했다. 웹에서는 아무 문제가 없어 보였는데 모바일에서 클릭(터치)하니 일시적으로 파란 하이라이트(그림자)가 생긴다. 위와 같이 원 모양을 클릭했을 때 파란 색으로 덮이는 현상. 이런 하이라이트 없이 클릭되도록 하기 위해서는 css에 다음 옵션을 추가해주면 된다. .Panel { -webkit-tap-highlight-color: transparent; } 참고로 hover 나 active 상태에 대한 css 가 적용된 경우 (.Panel:hover 또는 .Panel:active) hover/active 속성에 적용하는 것이 아닌, 해당되는 클래스 자체의 속성에 넣어주어야 함!

리액트 프로젝트 내부의 .js (javascript) 파일에 텍스트를 입력하면 기본적으로 (당연하게도) 좌측 정렬로 보여진다. 만약 정렬을 바꾸고 싶다면 .css 파일에서 해당 텍스트가 속한 클래스의 텍스트 속성을 설정해주어야 한다. TORAMKO 코딩하는 토람이 App.js 의 return 값에 위와 같이 'TextBox' 라는 클래스명으로 div 를 생성하여 그 안에 텍스트를 작성해두었다. .TextBox { text-align: center; font-size: 18px; line-height: 1.5; } 그리고 App.css 에서 위와 같이 TextBox 의 속성을 지정해주었다. text-align: center; 속성에 의해 텍스트가 가운데로 정렬된다. 텍스트 정렬은 요렇게 매우 간단하다. 그..

리액트 프로젝트를 새로 생성하여 웹사이트 개발을 시작하면 웹 화면 탭에 다음과 같이 나타난다. react 공식 아이콘과 'React App' 이라는 문구가 확인된다. 이 default 아이콘과 타이틀을 수정하고자 한다면 다음과 같이 진행하면 된다. 1. 아이콘 준비하기 1) 무료 아이콘 다운로드하기 https://icon-icons.com/ko/ 위 사이트에서 다양한 무료 아이콘을 다운받을 수 있다. 마음에 드는 아이콘을 찾고 다운로드를 받으면 되는데 이 때, 아래와 같이 'ICO' 를 선택하여 .ico 파일로 다운받는다. 2) 직접 아이콘 만들기 내가 가진 파일로(PNG, JPG, GIF) 아이콘을 생성할 수도 있다. https://www.favicon-generator.org/ 위 사이트에서 파일 선..

인텔리제이(IntelliJ) 2021.3.3 버전 기준입니다. 1. Node.js 설치 리액트 프로젝트 생성 전 Node.js 를 먼저 설치해야 한다. 다음 사이트에서 다운받아 설치한다. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 인텔리제이에서 프로젝트 생성 1) New Project > JavaScript > React 선택 2) 프로젝트 설정하기 Project name, Project location: 프로젝트명을 지정하고 저장위치를 확인해둔다. Node interpreter: 이미 다운받은 Node.js 가 인식되지 못하고 'Down..

인텔리제이(IntelliJ) 터미널에서 npm 명령어를 입력하자 다음과 같은 오류가 났다. npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + npm start + ~~~ + CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException 위 에러는 terminal 이 기본적으로 'powershell' 로 열리도록 연결되어있기 때문에 난다. cmd 로 터미널 열기..

Spring Boot 프로젝트 생성 후 프론트 개발을 위해 Vue.js 를 연동해보았다. 1. 터미널을 열고 vue-cli 설치 $ npm install -g @vue/cli 2. 프로젝트 경로에서 다음과 같이 입력 $ vue create frontend cli plugins 들이 설치되면서 frontend 폴더가 생성된다. (frontend 말고 다른 이름으로 해도 됨) * 설치 시 preset 은 default (babel, eslint) 를 선택한다. babel -eslint 는 문법이나 코드 통일성 등을 자동으로 체크해주는 formatter 개념. 3. frontend 폴더로 이동 $ cd frontend 4. 서버 구동 $ npm run serve ↑ 위 명령어를 실행하면, 요렇게 localho..