뭐라도 기억하기 위한 블로그

🔎 오픈 그래프 태그란?페이스북이 만든 메타데이터 표준웹페이지가 **SNS(카카오톡, 페이스북, 트위터, 디스코드 등)**에 공유될 때, 썸네일 이미지 / 제목 / 설명을 보여주기 위해 사용 예를 들면 이런 이미지?썸네일 이미지, 제목 등이 잘 명시 되어있어서 카톡 메세지를 받는 사람들도 내가 유튜브의 무슨 영상의 링크를 공유했는지 알 수 바로 알수 있다.현재 내 개인 포트폴리오 url은 오픈 그래프 태그를 추가해놓지 않아서 카톡에 url을 공유하면 이렇게만 나온다.마치 누르면 큰일날 것 같은 url을 공유한것 같다...🔎 오픈그래프 태그 자세히 알아보기HTML의 gpt가 알려준 예시는 이렇다.💡 각각의 의미og:title → 공유될 때 보이는 제목og:description → 짧은 설명 문구og..

반응형 디자인, 접근성, 유지보수 때문에 px보다는 rem을 많이 쓰는 추세다.rem은 루트 폰트 크기를 기준으로 하기 때문에 수정이 필요할때는 일괄적으로 조절을 할 수 있다. css단위 px, em, rem이란?⬆️ ⬆️ ⬆️ 이건 예전에 내가 정리했던 css 관련 게시글. 작업을 할때는 보통 1rem = 16px로 작업을 한다. 그렇지만 작업자가 매번 rem을 계산하기에는 매우 귀찮기 때문에px ➡️ rem으로 변환해주는 mixin 함수를 미리 만들어놓으면 작업할 때 매우 편하다!! // 변환함수@function rem($px) { @return ($px / 16) * 1rem;} //사용 예시.text { font-size: rem(24); // 1.5rem 반환 margin-bott..

한달전에 리액트 포폴 만드는 과정을 이 티스토리에 기록해보자 하며 리액트 환경세팅 : 프로젝트 생성 후 뜨는 에러npx create-react-app test00 --template typescripttest00 이라는 프로젝트 폴더를 만든 명령어참고로 나는 자바스크립트가 아닌 타입스크립트로 프로젝트를 만들었다.만약 타입스크립트가 아니라 자바스크립s-notee.tistory.com 이런 포스팅을 작성했었는데...밥먹다 알게 된 사실...cra로 프로젝트를 생성할때, 에러가 많이 떴던 이유는 이제 리액트를 만든 페이스북에서 더이상 라이브러리 업데이트를 해주지 않는다고???22년부터 더이상 릴리즈가 되고 있지 않고...24년 말부터 cra로 리액트 프로젝트를 생성하면 무.조.건에러가 뜬다는 커뮤니티 게시글이..

💡 스니펫을 미리 설정해두면 빠르고 일관된 방식으로 코드를 작성할 수 있어 코드 작성 효율성을 증가시킬 수 있다. (나는 현재까지 실무에서 주석을 달때 사용해보았다. 협업에서는 코드의 통일성이 중요하니까...) 📌 스니펫 설정하는 방법ctrl(cmd) + shift + p 단축키를 사용하여 명령 팔레트를 연다.Configure User Snippets를 검색 후 클릭특정 언어에 대한 스니펫 파일 선택ex) html일 경우 html, css일 경우 css 선택  스니펫 만들기html을 선택하면 좌측에 html.json이란 json 파일이 생기는 것을 확인 할 수 있다.//html.json 주석 스니펫 만들기{  "comment": {    "prefix" : "comment",    "body": [ ..

정말이지 티스토리에 리액트 파일, 폴더 정리하는 것만 몇 번 썼을지 모르겠다.물론 지금 다 비공개 상태지만 ㅎㅎ이번 기회에 확실하게 공부하지 뭐,,,ㅎㅎ .├── README.md├── node_modules├── package-lock.json├── package.json├── public│   ├── index.html│   └── (기타 등등...)└── src    ├── App.tsx    ├── assets    ├── components    ├── index.tsx    ├── pages    └── styles리액트 프로젝트를 생성하면 자동으로 위와 같은 폴더 및 파일 구조가 생성된다.(임의로 생략한 파일 및 폴더도 있다.) 📍 폴더에 대한 간단 설명☑️ node_modules패키지 코..

npx create-react-app test00 --template typescripttest00 이라는 프로젝트 폴더를 만든 명령어참고로 나는 자바스크립트가 아닌 타입스크립트로 프로젝트를 만들었다.만약 타입스크립트가 아니라 자바스크립트 프로젝트를 만들거라면 뒤에 (--template typescript)는 생략하면 됨. 하지만 해당 명령어를 터미널에 실행하면, 위의 이미지와 같은 에러가 쭉 뜬다.해당 에러에 대해서 열심히 구글링해보니 12월에 리액트 19버전이 릴리즈 된 이후로 create-react-app이 제대로 실행되지 않는다는 글을 보았다. ➡️ 그래도 test00폴더로 진입(cd test00)해서 npm start를 하면 프로젝트가 실행이 되긴 한다. 😡하지만...이렇게 컴파..

보호되어 있는 글입니다.

📌 윈도우 호스트 파일 경로C:\Windows\System32\drivers\etc\hosts 📌 호스트 파일의 특징파일 확장자 없음.관리자 권한으로 실행.메모장과 같은 VSCode, 워드패드등 텍스트 편집기로 열기 가능 📌 호스트 파일 열기텍스트 편집기(메모장) 등 마우스 우클릭 ➡️ 관리자 권한으로 실행파일 > 열기 선택후 윈도우 호스트 파일 경로로 이동파일 형식을 ‘텍스트 문서(*.txt*)’에서 ‘모든 파일 (*.*)’로 수정수정 사항 수정수정 내역 저장 * 호스트 파일의 수정은 시스템 동작에 있어서 영향을 줄 수 있기 때문에 주의해서 수정 필요

명령어내용pwd현재 경로 확인ls현재 경로의 파일과 폴더 목록 확인ls -a. 이 붙은 파일 목록 확인cd 폴더명하위 해당 폴더로 이동cd ..상위 폴더로 이동 (이전 폴더로 돌아감)mkdir 폴더명폴더 생성touch 파일명.확장자파일 생성 (touch test.txt)rm 파일명.확장자파일 삭제cat 파일명.확장자파일 내용 확인rmdir 폴더명비어있는 폴더 삭제 (폴더가 비어있지 않으면 삭제가 안됨)rm -r 폴더명파일을 가지고 있는 폴더 삭제mv파일/폴더 이동, 이름 변경history사용한 명령어들 확인clear터미널 정리(삭제)man 명령어 이름명령어 매뉴얼 확인 ex. man clear (빠져나갈때는 q)

맥을 사니 윈도우와 OS가 너무 달라서 헷갈린다...  ✅ 맥에서 터미널 열기 1️⃣ 앱으로 열기맥 초기 모음에(?) 기타라는 앱 폴더를 열면  터미널앱이 있다.이게 윈도우에서는 cmd, 맥에서는 zsh(터미널)    2️⃣ 스포트라이트 검색으로 열기 CMD + 스페이스바 키를 누르면 spotlight 검색창이 뜬다.  검색 인풋에 terminal 또는 터미널 입력   이외의 여러가지 방법이 더 있지만,나는 이정도로만 사용할 것 같다.    ✅ 추가로 터미널 단축키  1️⃣ CMD + N터미널 새창이 열린다.  2️⃣ CMD + T터미널 새탭이 열린다