본문 바로가기

전체 글

(47)
React 란? 리액트는 2013년 Facebook 에서 오픈소스로 내놓은 자바스크립트의 라이브러리이다. 기존의 다른 프레임워크들과 다르게 뷰에만 집중한다. 다시 한 번 설명 하면 Angular나 Vue.js 같은 경우는 MVC, MVVM의 패턴을 사용 하지만 React 같은 경우는 다르다. 단순히 뷰만 조작한다. DOM 객체의 이벤트에 대한 반응, 업데이트에만 관심이 있다. React는 왜 라이브러리일까? React 특징 React의 특징을 알아보면 어떻게 해서 뷰에만 관심이 있다는 건지 DOM 객체 성능이 왜 좋다는 건지 알 수 있다. JSX Virtual DOM 단방향 데이터 흐름 JSX JSX 는 javascript 와 XML 이다. javascript 안에서 마크업 언어를 더 정확히 말하면 React Compo..
Firebase에 호스팅하기 오늘은 다 만든 react 프로젝트를 firebase를 통해 호스팅 해보도록 하자! 우선, Firebase는 구글 소유의 모바일 어플리케이션 개발 플랫폼이다. 쉽게 말해 앱 개발 플렛폼인데, PWA(Progressive web app)도 개발 가능하다. 이를 이용해 react로 만든 내 앱을 호스팅해 배포할 것이다. 준비물 : 작업이 끝난 react project. (빌드까지 마무리해 배포 버전으로 만들어 둔다.) 그럼 Firebase에 접속한다. 시작하기 또는 상단 탭에 콘솔로 이동을 클릭한다. 그러면 프로젝트 화면으로 이동되는데 새로운 프로젝트 만들기를 한다. 프로젝트명은 영문으로 정한다. 간단한 키워드만 쓰더라도 뒤에 랜덤코드를 붙여주기 때문에 사용 가능하다. 계속 누르면, 애널리틱스 사용 설정이 ..
Mac에 Node.js 설치하기 안녕하세요. 오늘은 node.js를 설치해 보겠습니다. node.js 홈페이지에 접속합니다. 그럼 기특하게도 알아서 OS를 감지해서 다운로드 페이지를 보여줍니다. 다른 OS 버전을 받고 싶다면 상단의 다운로드 탭에 들어가시면 됩니다. 그러면 여기서 설치하고 싶은 버전을 선택합니다. 차이는 크지 않습니다만 저는 최신형을 선호합니다. 이렇게 설치를 다했다면 잘 됐는지 확인해 봐야겠죠. 터미널을 열어 봅니다. 마지막 설치완료 화면에 써있던 node.js 설치 위치(/usr/local/bin/node)를 터미널에 입력하면 Node.js의 버전을 확인할 수 있다. 마찬가지로 npm 저장 위치(/usr/local/bin/npm)도 터미널에 써서 확인하면 npm 버전과 사용안내가 나온다. 성공!
onselect 이벤트 이전 글에서 css의 가상선택자 selection을 이용해 예제를 만들어 보았습니다. 하지만 css만으로는 다음 드레그 시에 다른 색깔로 변경되지는 않는군요. 그럼 이제 javascript를 이용해야 하는데, css 가상선택자는 js에서 선택자로 잡을 수 없지요...! 해서 js를 찾아봤더니 onselect라는 메소드를 발견했습니다. 그리고 selectStart와 selectEnd라는 기능도 있더군요! https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event Element: select event - Web APIs | MDN The select event fires when some text has been selected. devel..
드래그 색상 넣기 https://us.byhabit.com/ Health By Habit - Home With the power of habit us.byhabit.com https://www.codingfactory.net/10859 CSS / 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기 웹브라우저에서 텍스트를 마우스로 드래그하면 선택된 글자는 파란색 배경에 흰색을 바뀝니다. 이 색은 CSS로 바꿀 수 있습니다. 사용하는 선택자는 가상 요소 ::selection입니다. 다음은 텍스트를 www.codingfactory.net 다른 사이트를 둘러보다고 신기한 css 속성을 발견했다. 글자를 드래그시 지정된 색상으로 글자를 선택하고 마우스 클릭을 뗄 때, 한번 더 선택 색상이 변경되는 것이었다. 지정된 색상은 총 세..
Mac 맥에서 Xampp MySQL 설정하기 두번째 시련이 찾아왔다. MySQL 서버에 비밀번호를 걸고 싶은데... 아무리 구글링을 해도 터미널 제어만 나온다. 문제는 터미널에 아무리 mysql을 호출해도 그 녀석의 권한이 없다는 것. 대신 xampp내에서 설정하는 방법을 찾았다!!! 시작해보자. 우선 xampp를 실행한다. 서버도 실행한다. 그리고 브라우저에 localhost/phpmyadmin에 접속한다. 상단에 보면 사용자 계정이 있다. 들어간다. 이렇게 사용자 개요에 테이블이 나오는데 사용자명 root에 호스트명이 localhost에 권한 수정을 누른다. 나는 현재 비밀번호는 설정해둬서 암호란에 예가 나오지만 암호 설정을 안 했다면 아니오가 나올 것이다. 째든 권한 수정에 들어가서 상단에 있는 암호수정/Change password에 들어가 ..
Mac에 Xampp 설치하기 안녕하세요. 오늘은 php를 사용하기에 앞서 Xampp를 설치해 보겠습니다. 제 맥북은 intel이 장착된 구형 15인치 프로 모델입니다. 벌써 5년째 함께하고 있어요... 지겨워... OS 버전은 현 시각(2022.01.27) macOS Monterey 12.1이니 참고해주세요. 저도 처음엔 제대로 설치하지 못해서 많이 헤맸습니다만, 유튜브에 친절한 영상(링크)이 있어서 보고 참고했습니다! 링크 속 유튜버는 외국분이시고 영어로 설명하지만 얼마나 많이 봤는지 무려 한국어 자막이 있었습니다! 세계로 뻗어나가는 한국인...ㅎ 그럼 시작하겠습니다! 우선 Xampp홈페이지에 접속합니다.(링크) 상단에 보면 다운로드 탭이 있습니다. 클릭해 들어가시면 아래에 XAMPP for OS X라는 목록이 보입니다. 여기서 ..

728x90