본문 바로가기

전체 글348

MacOS > homebrew 이용해서 MySQL 설치하기 지난 포스팅에서는 MySQL 공식 사이트에 접속하여 MySQL과 Workbench 설치하는 방법을 알아보았다. 오늘은 MySQL을 설치하는 또 다른 방법, homebrew를 이용한 설치 방법을 알아보도록 하겠다. homebrew가 궁금한 사람들은 아래 링크를 클릭! 2022.08.14 - [혼자서도 잘 해요/macOS] - macOS 패키지 관리자 Homebrew 설치하기 macOS 패키지 관리자 Homebrew 설치하기 이번에 데이터 공부를 해보고 싶어서 MySQL을 설치하다가 Homebrew 라는 관리자 프로그램을 알게 되었다. 사실 homebrew는 몇 년 전에 Ruby 설치할 때 사용해 본 적이 있지만, 그 때는 맥북도 처음이었고 heinafantasy.com 이미 macOS에 homebrew가 .. 2023. 1. 13.
리액트 엘리먼트(Element) & 컴포넌트(Component) 리액트의 엘리먼트(Element)와 컴포넌트(Component)의 차이점이 무엇인지 알아보았다. 리액트 엘리먼트(React Element) 자바스크립트 객체 (JSX 문법으로 작성한 요소는 결과적으로 자바스크립트 객체가 됨) 리액트로 화면을 그려내는 데에 가장 기본적인 요소 우리가 실제로 보게되는 화면을 구성하고 있는 블럭 바로 사용되지는 않고 컴포넌트에서 리턴을 받아서 사용함 한 번 생성되면 다시는 변형되지 않음 import ReactDOM from 'react-dom'; const element = Hello, World!; console.log(element); ReactDOM.render(element, document.getElementById('root')); 리액트 컴포넌트(React Com.. 2023. 1. 13.
homebrew 설치 후 -bash: brew: command not found 오류 해결 homebrew를 설치하고 난 후에 MySQL을 설치하려고 brew install mysql 커맨드를 실행했다. 그런데 -bash: brew: command not found 라는 오류 메세지와 함께 실행이 되지 않았다. 당황해서 homebrew가 설치된 화면을 다시 보니까 ==> Next steps: 라고 쓰여있는 부분이 있었다. homebrew 설치 후 바로 사용할 수 있는 것이 아니라 다음 단계를 거쳐야 하는 것이었다. echo '# Set PATH, MANPATH, etc., for Homebrew.' >> /Users/zoe.lee/.profile echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/zoe.lee/.profile eval "$.. 2023. 1. 12.
맥북(macOS)에 MySQL Workbench 설치하기 MySQL Workbench는 Oracle이 공식적으로 제공하는 프로그램인데, MySQL 서버에 GUI 환경으로 접속하여 데이터베이스 관련 작업을 할 수 있다. 개발자가 아니면 CLI 환경이 익숙하지 않을테니 이 프로그램을 사용하면 좀 더 수월하게 공부할 수 있을 것이다. 오늘 포스팅에서는 MySQL Workbench 설치 방법에 대해서 설명하려고 한다. 먼저 프로그램을 다운로드 할 수 있는 공식 사이트로 이동한다. (아래 링크 클릭!) https://dev.mysql.com/downloads/workbench/ MySQL :: Download MySQL Workbench Select Operating System: Select Operating System… Microsoft Windows Ubuntu.. 2023. 1. 12.
여권 수령 소요시간, 구여권 신여권 디자인 비교 & 차이점 여권 기간이 얼마남지 않은 것 같아서, 지난번에 온라인으로 재발급 신청을 했다. 2023.01.06 - [생활정보] - 정부 24에서 여권 재발급하기, 온라인 여권발급, 여권 유효기간 만료, 여권 갱신 정부 24에서 여권 재발급하기, 온라인 여권발급, 여권 유효기간 만료, 여권 갱신 오랜만에 생각이 나서 여권을 들여다보았는데 만료일이 1년도 채 남지 않은 것을 확인했다. 대만, 중국, 싱가폴, 태국, 라오스, 말레이시아, 베트남, 호주, 스위스, 영국, 그리스, 노르웨이, 페루, heinafantasy.com 일주일 정도 지난 후 외교부 여권정보 알림톡에서 메세지가 왔다. 신청한 여권이 발급되었으니 성남시청으로 수령하러 오라는 내용이었다. 그래서 나는 신분증과 기존 여권(유효기간이 남아있는 경우 필수 지.. 2023. 1. 11.
JSX 문법 작성하는 방법 JSX는 자바스크립트로 html 문법을 사용할 수 있도록 만들어주는 문법이다. 그런데 이 문법을 사용하려면 지켜야 하는 규칙들이 몇가지 있다. 지난 포스팅에서도 이미 설명했지만 그래도 중요한 부분이니 다시 한 번 정리하고 넘어가려고 한다. 속성명은 무조건 카멜 케이스로 작성 여러 단어가 조합된 속성들을 사용할 때에는 반드시 카멜 케이스로 작성해 주어야 한다. ex) onClick, onBlur, onFocus, onMouseDown, onMouseOver, tabIndex 예외적으로 "data-" 속성만 카멜 케이스가 아닌 기존 문법 그대로 작성한다. ex) data-status 자바스크립트 예약어와 같은 속성명 사용불가 자바스크립트 예약어와 겹치는 html 속성명은 쓸 수 없다. 그래서 자바스크립트 반.. 2023. 1. 10.
<div> 대신에 <Fragment>, 프래그먼트 축약형 문법 쓰기 이번 포스팅에서는 리액트의 Fragment 기능에 대해서 설명하려고 한다. 하나로 감싸진 태그로 작성해야 하는 JSX 리액트에서 JSX 문법을 사용할 때에는 반드시 하나로 감싸진 태그로 작성해야 한다. 아래처럼 태그와 태그를 연달아서 사용하게 되면 오류 표시(빨간색 밑줄)가 나타난다. 이것을 브라우저에서 실행하면 역시 오류가 발생한다. 이 코드를 하나의 로 감싸주면 아래와 같이 오류가 발생하지 않는다. 프래그먼트(Fragment) 사용하기 리액트에서는 외에 라는 기능을 제공한다. 대신에 라는 코드를 자동완성 기능으로 입력한다. 그러면 상단에 프래그먼트가 import 되는 것을 확인할 수 있다. 코드 저장 후에 미리보기를 실행해 보면, 로 감싸지 않아도 화면이 제대로 출력되는 것을 확인할 수 있다. 이런식.. 2023. 1. 8.
리액트의 인덱스(index)파일과 JSX 문법 리액트의 인덱스(index) 파일과 JSX 문법에 대해서 알아보려고 한다. 강의로 들을 때는 어렵지 않은데 막상 블로그에 정리를 하려고 하니 어떤 순서로 써야할지 잘 모르겠다. 혼자 배우는 것과 다른 사람도 알아들을 수 있게 정리하는 것은 난이도가 다르다. 이래서 배움의 끝은 가르침이라고 하나 보다. index.html 파일과 index.js 파일 리액트 프로젝트를 생성하고 보면 public 폴더에는 index.html 이라는 파일이 들어있고, src 폴더에는 index.js 라는 파일이 들어있다. 둘다 index 라는 이름을 가지고 있는데 파일 확장자가 다르다. 이들은 어떤 관계를 가지고 있을까? 먼저 index.html 은 웹브라우저에서 가장 먼저 인식하고 실행되는 파일이다. 그리고 index.js는.. 2023. 1. 8.
정부 24에서 여권 재발급하기, 온라인 여권발급, 여권 유효기간 만료, 여권 갱신 오랜만에 생각이 나서 여권을 들여다보았는데 만료일이 1년도 채 남지 않은 것을 확인했다. 대만, 중국, 싱가폴, 태국, 라오스, 말레이시아, 베트남, 호주, 스위스, 영국, 그리스, 노르웨이, 페루, 볼리비아, 멕시코, 코스타리카 등 대부분의 국가는 입국 요건으로 여권 잔여유효기간을 6개월로 두고 있다. 지금 당장 해외여행 계획은 없지만 그래도 내년에 혹시나 갈 기회가 있을지도 모르니까... 미리 여권을 갱신해두려고 알아보았다. 요즘은 온라인 민원이 활성화되어 '정부24' 홈페이지에서 온라인으로 여권 재발급 신청이 가능하다고 한다. (여권을 받을 때는 직접 가야함) 정부 24에서 여권 재발급하는 방법 정부24 홈페이지에 방문해서 로그인을 한다. 공인인증서가 없어도 다양한 방법으로 로그인이 가능하다. 나는.. 2023. 1. 6.
VS Code 언어 변경하는 방법 VS code를 사용하고 있었는데 어느 날 자동으로 언어가 바뀌어 있었다. (why...?) 당황했지만 구글님의 도움으로 빠르게 복구했다. 이런 정보는 나눠야 제 맛이니까! VS Code 언어 변경하기 VS Code에서 커맨드 팔레트를 실행한다. 단축키는 MacOS의 경우 command + shift + P 이다. 그리고 language를 검색한다. Language를 포함하고 있는 여러 항목이 검색되는데 그 중에서도 Configure Display Language를 선택한다. 그 뒤 한국어(ko), English(en), 日本어語(ja) 등 원하는 언어를 선택해주면 된다. 언어를 선택하면 VS Code를 재시작해야 한다는 내용의 팝업창이 뜬다. 확인을 누르면 프로그램이 종료되었다가 시작되며 선택한 언어가.. 2023. 1. 3.