에이치아이~ 새로운 랩탑을 장만해서 기분이 좋습니다. 2013년형 에어를 썼던 지라, M1의 성능에 지금도 감탄중입니다. 그런데 이전 인텔 기반에서 M1으로 바뀌면서 개발환경 설정도 다르게 해야 했어요. 7월 끝자락 무더위와 함께한 삽질 과정까지 다 녹여내어 글을 써봅니다. 누군가에게, 또 훗날 나 개굴이에게도 도움이 되길 바라며. Homebrew homebrew는 mac에서 개발환경 세팅할 때 가장 먼저 설치해야 할 패키지 관리 프로그램입니다. 터미널을 킵니다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 위의 명령어를 복사하면 설치가 손쉽게 완료됩니다. (참고: https:/..
github 개인 계정 하나만 사용하다가, 사이드 프로젝트를 시작하며 프로젝트용 계정도 사용하게 되었는데. 새로운 계정으로 커밋하는 과정에서 에러 발생. 에러.에러.에러.무한에러의 늪에 빠졌습니다. 기존 계정 밀어버리고, 다시 재등록해도 에러!에러!에러! 현기증… 이걸로 시간을 얼마나 잡아 먹었는지 모릅니다. 서칭 끝에 은혜로운 글을 발견 하였습니다. (하단 링크 참고) SSH 설정으로 편하게 github 멀티계정을 사용하는 방법이 친절하게 설명된 글이었어요. 준비물 작업 환경 : Mac (window에서도 비슷한 과정으로 했는데 잘 됐어요😁) 터미널 등록 계정 예시 (이메일이거나 아닌 경우 각자 상황에 맞춰서!) 개인 계정 : gaegul 오피셜 계정 : gaegul@gaegulcompany.com s..
데이터를 배열 형태로 API에 보내줘야 하는 요구사항을 프론트엔드에서 처리하는 방법입니다. API URL, 매개변수, 변수 명은 모두 블로그 예시용으로 수정한 것입니다. 실무에서는 더 직관적이고 명확하게 작성하고 있습니다. 백단의 요구사항 API URL : api/event/something 뿌려줘야 할, 던져줘야 할 또는 파싱해야 할 등등의 정보를 백단에서 알려주겠죠. 지금의 경우는 아래와 같은 포맷으로 데이터를 던져줘야 합니다. 해당 형식으로 데이터를 던지고 리턴값이 true면 정상 작동, false면 장애 처리 [ { "id": 12, "createDate": 20210305 }, { "eventId": 23, "createDate": 20210404 }, { "eventId": 25, "creat..
야심차게 인프런 리액트 챗봇 강의를 보며 공부하는데, 에러가 발생했다. 에러무한지옥에 빠지면서, 노드부터 지우고 다시 설치하기로 결심했다. 그러니 웬걸 또 다시 에러무한지옥..ㅎㅎ 하지만 해결한다 열정 열정! 1) 노드 설치 에러 node install node-pre-gyp WARN Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.4/fse-v1.2.4-node-v83-darwin-x64.tar.gz node-pre-gyp WARN Pre-built binaries not found for fsevents@1.2.4 and node@14.16.0 (node-v83 ABI, unknown) (falling ..
시멘팁 웹 시맨틱 웹(Semantic Web)이란 시맨틱 태그를 이용하여 웹 페이지를 의미있는 데이터 조합으로 만들도록 하는 웹으로 검색엔진의 크롤링을 돕는다. 간략히 하면 논리적인 구조이고 구글링 잘되는 좋은 웹이란 뜻입니다😓 이 글에서 다룰 헤딩태그도 시맨틱 태그 중 하나입니다. HTML5와 SEO의 단짝친구입니다. 같은 헤딩태그입니다. 제목태그란? 제목태그(헤딩태그,heading tag)는 h1부터 h6까지 총 6개가 있습니다. h는 heading, 머릿말 또는 제목을 의미하며 뒤에 숫자는 제목의 계층구조를 의미합니다. 그렇다면 h1은 대제목이고 h6은 제일 하위 소제목이 됩니다. 태그 글씨 크기 = 구조 브라우저 별로 헤딩태그는 글씨 크기가 다릅니다. 크롬 브라우저는 태그의 글씨크기가 font-s..
👩🏻💻 블로그 마크다운으로 더 쉽게 쓰기 저번 글에서 마크다운 문법에 대해 알아 보았습니다. 마크다운 문법에 대한 내용은 아래 글을 참조해주세요. 그 내용을 바탕으로 2% 더 편하게 글쓰는 방법을 알아 보겠습니다. 마크다운으로 글을 쓰면 이게 어떻게 보일지 궁금하죠. 계속 미리보기를 하거나 모드를 바꿔야 되는 번거로움이 있습니다. 마크다운 에디터 마크다운 에디터를 활용하면 프리뷰 기능이 있어서 미리보며 글을 쓸 수 있습니다. 여러 종류의 에디터가 있는데, StackEdit이 구글 검색 최상위에 나옵니다. UI도 간편하고 사용하기 좋아요. StackEdit 사용법 1. stackedit 사이트로 이동 stackedit에 접속해서 최상단 StartWriting 클릭 2. Login 우측 사이드바 > Sig..
✍️ 마크다운으로 티스토리 글쓰기 보기 좋은 떡이 먹기도 좋다는 말이 있죠. 글의 퀄리티 만큼이나 중요한 것은 가독성입니다. 가독성이 저하되면 양질의 글도 보기 힘듭니다. 그래서 글을 쓰고, 중요한 부분은 볼드처리를 하고 글씨색을 변경하는 작업을 블로그 에디터로 할 수 있습니다. 하지만 글쓰기도 힘든데, 언제 또 글에 스타일까지 입히죠? 블로그 글 한 개에 시간이 너무 오래 걸려요😭 그래서? 짜잔✨ 마크다운 언어를 활용해서 글쓰는 것을 알아보겠습니다. 목적 블로그 작성 시간 단축 가독성 향상 배우는 즐거움 🤓 마크다운이 뭐죠? 마크다운(Markdown, lightweight markup language)은 개발자가 아닌 분들이라면 생소하실 수 있습니다. 사용자가 글을 보다 쉽고 읽고 쓸 수 있게 만들어진..
⚓ #, javascript:, void(0); 차이점 이 글은 anchor tag의 href 속성만 다룹니다. 링크로 이동시켜주는 앵커태그의 href 속성은 작성된 value값으로 이동시켜주는 HTML태그입니다. 간단하게 속성 살펴보기 URL 이동 특정 주소를 작성하면 해당 페이지로 이동해주는 역할을 합니다. 네이버 이동 이렇게 작성했을 경우, 화면에 렌더링 된 네이버 이동 텍스트를 클릭하면 네이버로 이동합니다. 스크롤 이동 다른 태그에 작성된 아이디 값을 추가하여 스크롤을 해당 위치로 이동시킬 수 있습니다. OBJ로 이동 이같은 경우는 다른 페이지로 이동하는 것이 아니라, 열려진 페이지에서 obj라는 id값을 가진 요소 위치로 스크롤을 이동시킵니다. href="#, #none, javascript:v..
Express란? 웹 환경이 아닌 곳에서 Javascript 언어를 사용할 수 있게 고안된 Node.js의 프레임워크 중 하나입니다. Node.js로 서버를 만드는 것보다 더 빠르게 만들 수 있도록 도와주는 친구죠 🤜🏽💥🤛🏽 JS의 프레임워크로 React, Angular, Vue등이 존재하듯이 여러개가 존재합니다. 다만 사용률을 보면 express가 압도적으로 높습니다. 이거나 저거나 차이점을 잘 모르는 초보 개발자인지라 늘 npm popular지수가 가장 높은 것을 사용하고 있습니다. (Express는 노마드코더 유튜브 클론코딩을 하며 알게 되었네요.) Node.js란? Javascript는 웹 브라우저에만 내장되어 있어, 브라우저 밖으로 가지고 나와 우리가 컴퓨터에서 사용할 수 있도록 해주는 소프트웨..
🍏 Mac OS에서 MongoDB 설치하기 Window는 공식 사이트에서 파일 내려받고 내컴퓨터 설정에서 환경변수만 설정하면 큰 에러없이 쉽게 설치가 가능한데 반해 Mac은 다소 복잡한 편입니다. Mac 환경에서 MongoDB를 설치하는 방법은 직접 파일을 내려받는 방법과 homebrew 패키지를 이용해 터미널에서 설치하는 방법이 있습니다. MongoDB 사이트에서 압축파일 내려받기 Homebrew로 설치하기 둘 다 해봤는데, mac은 homebrew로 설치하는게 간편한 것 같아요. 이 글에서는 2번 방법으로 안내하겠습니다. 🍺 Homebrew로 설치하기 brew update brew install mongodb-community@4.0 mkdir -p /data/db sudo chown -R ${who..
💻 서버 서버(Server)는 인터넷에 연결된 컴퓨터입니다. 그러면 제가 현재 이 글을 작성하고 있는 노트북도 서버가 될 수 있음을 의미합니다. 다만 제 노트북 *(맥북에어2012년형)*은 서버 용도로 사용하기 적절하지 않죠. 🗂 서버의 용도 서버가 왜 있어야 할까요? 내가 뭔가를 컴퓨터에 올리고, 이 내용을 친구도 언제든 보길 원합니다. 친구에게 내 컴퓨터 접속정보(이를 테면 IP, Port…)를 주면, 친구는 접속해서 내용을 확인 할 수 있습니다. 이렇게 된다면 저의 낡은 노트북도 서버의 역할을 하게 됩니다. 아, 물론 내 컴퓨터는 켜져 있어야 합니다. 이렇게 서버 역할의 컴퓨터는 항상 24/7 모드여야 하므로 성능이 좋아야 합니다. 그렇기에 제 노트북은 적절하지 않겠죠 👉 서버용 컴퓨터 영화에서도 ..
노마드코더 유투브 클론 코딩 을 공부한 기록입니다. 설치하기 🏠 Windows 윈도우 사용자는 node.js 홈페이지에 들어가서 다운받습니다. 오른쪽 현재 버전current은 최신 버전이지만 안정적이라는 보장은 없습니다. 가급적 프로젝트의 안정성을 위해 좌측 버전을 쓰는게 좋겠죠? 좌측의 LTS 버전으로 다운합니다. LTS는 Long Term Support의 줄임말로 장기간 지원이 가능하다는 의미입니다. 2년동안 취약점 및 개선사항에 대한 패치를 지원합니다. Current 버전은 개발이 진행중인 버전입니다. 추가 기능들이 들어 있습니다. 🍎 MacOS Mac 사용자도 위와 같은 방법으로 설치할 수 있지만 번거로운 path 설정을 해야하는 과정이 있기 때문에 🍺homebrew를 이용해 설치하겠습니다. ho..
