본문 바로가기

전체 글

 (348)
[React.js] React state static web page: read-only. ex) blogsdynamic web page: read-write, interactive. ex) bank website Event Listeners순수 JS에서는 addEventListener() 함수를 이용해서 다양한 상호작용(클릭, 마우스 오버 등)을 구현합니다. 리액트에서는 비슷하지만 조금 다른 문법을 사용합니다. JSX 내부에서 속성처럼 작성하는데 원하는 동작이 클릭인 경우를 예로 들어보겠습니다.export default function Test() { const handleClick = (event) => { // something } return ( click );} 이벤트를 발생시키는 함수를 전달하는..
[영어] home appliances 와 electronics 차이 오픽 질문에서 가전제품에 대한 질문이 있습니다. 이때 사용되는 영어 단어는 home appliances입니다. 가전제품이라는 단어를 들었을 때 생각나는 것들은 세탁기, 전자레인지, 청소기 등등이 있습니다. 이때 PC나 TV 같은 것도 가전에서 사용되는 제품인데 가전제품에 포함되는 것은 아닐까 하는 고민이 들었습니다. 결론적으로는 아닙니다. home appliances는 재미 요소가 들어가지 않은 그런 제품을 의미합니다. 설마 말도 안 되게 청소가 좋다고 청소기를 재미가 포함된 제품이라고 생각하면 안 됩니다... 그렇기 때문에 얘기한 PC, TV처럼 재미가 포함되어 있는 경우 가전제품보다 전자 기기로 분류됩니다. 이때 사용되는 단어가 electronics입니다. 영어 단어에는 이런 차이가 있으니 질문에 답..
[영어] 오픽 공부 GPT 활용하기 오픽 AI와 같이 준비해 보기지난 글에서 말했던 내용을 실제로 사용해 보려고 합니다. GPT에게 부탁했던 방법을 알려드리겠습니다.1. 오픽 질문을 보냅니다.저는 해커스에서 제공해 주는 질문 영상을 캡처해서 GPT에게 보냈습니다. 이미지를 보냈기 때문에 반드시 GPT가 질문을 잘못 이해한 부분이 없는지 확인할 필요가 있습니다.오픽 질문을 이미지로 보여줄거야.이미지에 있는 질문을 분석해서 이해한 내용은 간단하게 정리해줘.해당 오픽 질문에 대한 답변 예시는 필요 없어.위에 적혀있는 내용의 느낌대로 요청을 하면 됩니다. 2. 오픽 질문 답변을 보냅니다.스스로가 답한 내용을 노트에 적어두거나 바로 GPT 채팅에 적으면서 답하면 쉽게 질문 답변을 보낼 수 있습니다. 이제는 본인이 원하는 GPT의 답변 방식을 요청합..
[영어] 오픽 AI와 같이 준비해 보기 오픽 시험을 위한 준비를 해야 할 것 같아 공부를 어떻게 할 것인지 정리해 보는 시간을 가져보겠습니다. 1. 관련 영상📽️ 찾아보기유튜브에 오픽 공부만 찾아봐도 수많은 영상들이 존재합니다. 이들 중 본인의 스타일에 마음에 드는 영상을 찾아서 보면 될 것 같습니다. 저는 오픽노잼 유튜버의 영상을 봤습니다. 재생 목록만 살펴보더라도 왕초보부터 IM, IH, AL 각 단계별 영상이 모아져 있습니다. 오픽노잼 opicnojam파고다 인강 / 교재 / 수업 / 파일 / 점수 올리기: https://linktr.ee/opicnojamwww.youtube.com 2. AI 활용하기제가 공부를 하려는 환경은 집이 아닌 동네 카페였습니다. 말하기가 주요한 시험인걸 알지만 공용 공간에서 녹음을 하는 행동은... 민폐 이..
[Git] GitHub 웹 사이트에서 한 커밋 지우기 readme.md 같은 간단한 내용을 변경하는 경우 GitHub 페이지에서 직접 변경하는 작업을 합니다.(물론 개인 프로젝트입니다...) 그러다가 생각대로 되지 않아 커밋 내용을 변경하거나 삭제해야 될 일이 발생했습니다. 문제를 로컬에서 해결할 수 있는 방법을 알려드리겠습니다. 현재 상황은 GitHub 페이지에서 커밋이 된 상황입니다.1. git pull을 통해서 커밋을 로컬로 가져옵니다.2. git reset을 통해 지우고자 하는 커밋 이전 커밋으로 리셋합니다. 커밋 해쉬 값을 확인하는 방법 - git log --oneline 명령어를 사용해 확인할 수 있습니다. - Git History extension을 사용하면 우측 끝에서 확인할 수 있습니다. $ git reset --hard 위 명령..
[GitHub] readme.md 링크로 다른 창(탭)에서 열기 README.md 파일을 작성하면서 링크를 첨부했습니다. 제가 원하는 기능은 링크를 새로운 창(탭)에서 여는 것을 원했습니다. 결론부터 말씀드리자면 GitHub 사이트와 markdown 문법으로는 불가능합니다. 도전 방법은 HTML element의 target property를 사용하는 것이었습니다.블라블라link desc기존 HTML 파일에서는 위처럼 작성하면 target 속성의 _blank 값으로 인해 새로운 창(탭)으로 열리게 됩니다. 하지만 GitHub의 md 파일에서는 위와 같이 작성해도 실제 렌더링 되는 결과를 확인하면 아래와 같습니다.... link desc... 제가 작성했던 target 옵션이 사라져서 렌더링 된 것을 확인할 수 있습니다. 그렇습니다... 앞서 말씀드렸다시피 불가능합니..
[취업준비] URL(링크 주소) 단축하기 회사에 지원서를 제출하기 위해서 포트폴리오나 블로그의 경우 링크를 붙여 넣는 경우가 많습니다. 이때 가끔 URL 길이 제한이 걸리는 경우가 있습니다. 그럴 때 bitly를 이용하면 편하게 길이를 확 줄일 수 있습니다. https://bitly.com/ Bitly Connections Platform | Short URLs, QR Codes, and MoreBitly’s Connections Platform is more than a free URL shortener, with robust link management software, advanced QR Code features, and a landing page solution.bitly.com 갑자기 든 생각인데 GitHub의 github pages..
[Next.js] Handling GET, POST Request Handling GET Requests이번에는 새로운 Extension을 사용해 볼 예정입니다. Thunder Client라는 REST API를 요청해 볼 수 있는 확장팩입니다. 예상하기로는 POSTMAN과 비슷한 기능을 하지 않을까 싶습니다. 설치되면 보이는 아이콘을 누르고 New Request 버튼을 통해 새로운 API 요청을 만들면 됩니다.그렇지만! Cursor에서는 사용이 불가능합니다.ㅠㅠ 이럴 수가.. 좌절하지 않고 기존에 사용했던 POSTMAN을 사용해서 요청을 보내보겠습니다. 그전에 GET 요청은 지난 시간에 만들었으니 참고 부탁드리겠습니다. 귀찮으시면 POST 코드를 참고하셔도 됩니다.생각한 요청으로 보냈을 때 원하는 답변을 하는 것을 확인할 수 있습니다.Handling POST Reque..

티스토리툴바