코로 넘어져도 헤딩만 하면 그만

😢갑자기 화면 가득 떠오른 Replace ␍⏎ Replace ·fetchSearchData with ␍⏎··fetchSearchData 어제까지만 해도 멀쩡하던 프로젝트에......갑자기 열자마자 모든 파일에서 노란 줄이 뻑뻑 그이면서 위와 유사한 Replace 에러들을 가득 띄우기 시작했다.VScode 업데이트 하라고 해서 냉큼 했더니 그런가...? eslint 설정은 전혀 건드리지 않았는데... 어쨌든 기능을 수정하려면 당장 이 VScode의 에러를 해결해야 한다!!!     우선 Replace␍⏎ 라는 키워드로 유사한 문제를 겪은 글을 찾아보았다.  Prettier ask me to replace ⏎↹↹ with ·I have no clue what's going on, I cloned a git..

도커는 미리 설치해뒀다는 가정 하에 mySql 실습을 해보려고 합니다.윈도우 기준 wsl2가 아닌 powerShell 터미널에서 진행합니다. wsl에서는 오류가 나더라구요. 먼저 docker -v을 통해 깔아둔 도커의 버전 확인부터 해봅시다.Docker version 26.0.0, build 2ae903e제 경우 학습을 하며 깔아둔 도커 버전이 뜨는 걸 볼 수 있습니다.버전이 나오지 않는다면 도커가 설치되어 있지 않은 것이니 설치부터 시작해주시면 됩니다.   🚩MySql 이미지 pull 해오기docker pull mysql가장 먼저 docker pull 명령어를 사용하여 mysql 로 등록된 이미지를 가져오게 됩니다. 도커를 본격적으로 다루어보기 위해 실습 대상은 mysql로 정했습니다.아래와 같이 G..

🚩문제: WSL에서 GUI가 필요해진 상황puppeteer을 쓰는 과정에서, GUI를 띄워 눈으로 직접 화면을 확인해 가면서 코드 작업을 해야 하는 상황이 생겼습니다. headless: false로 설정해주고 적용하면 GUI를 띄워볼 수 있습니다.작업을 마치면 headless:true로 다시 바꿔야겠죠.const launchOptions = { headless: false, //보이게 처리 args: ['--no-sandbox', '--disable-setuid-sandbox'] // 실행 옵션};export async function crawls() { try { const browser = await puppeteer.launch(launchOptions); 하지만 정작 false로 두고..

이번에는 백엔드에 영 초짜인 사람이 node express를 깔면서 에러들과 씨름한 기록을 정리해보려 합니다.핵심만 요약하자면 node와 express를 쓰는 중, 다음과 유사한 에러 문구들을 만난 분께 유용할 수 있습니다. ''함수명' is assigned a value but never used. eslint@typescript-eslint/no-unused-vars Cannot redeclare block-scoped variable '함수명'.ts(2451) crawler.tsx(3, 16): '함수명' was also declared here.' Error: Cannot find module '/home/user/twiroller/twiroller/backend/index.js'  Module ..

🚩로봇이 아니라면 확인을 눌러주세요!급하게 이것저것 서치를 하다보면, 아래와 같은 알림을 제공하는 사이트를 만날 수 있습니다.  "로봇이 아니라면 확인을 눌러주세요!"  무해해 보이는 로봇 이미지와 함께 수상한 문구가 등장합니다. 사실은 익숙한 문구입니다. 우리는 종종 로봇이 아님을 체크하고나서 필요한 사이트에 접근하거나, 자료를 다운받곤 하니까요. 그래서 더 눌러보고 싶은지도 모르겠습니다.평소라면 한번 더 의심해보고 나갔을 이 알림을..... 오늘은 클릭했습니다(그랬으니까 제가 이 포스팅을 쓰고 있겠죠). 미리보기로 주어진 사이트 정보가 영양가 있어 보였거든요. 제게는 꼭 필요한 정보였습니다. 그러나 확인한 뒤에도 제가 원하던 사이트는 나오지 않았고, 뒤늦게 브라우저 창을 끄며 문득 아찔한 생각이 듭..

next js를 새로 학습하면서 기존 노드의 버전이 호환되지 않아 상위버전으로 업데이트를 했는데, 그 과정에서 버전 오류가 발생한 모양이다. 갑작스럽게 npm이 먹히지 않고 해당 오류가 발생했다. npm을 사용하려 할 때마다 semver이라는 모듈을 찾을 수 없다고 뜬다. node:internal/modules/cjs/loader:1075 const err = new Error(message); ^ Error: Cannot find module 'semver' Require stack: - /usr/share/nodejs/npm/lib/utils/unsupported.js - /usr/share/nodejs/npm/lib/cli.js - /usr/share/nodejs/npm/bin/npm-cli.js ..

🚩emotion과 label 장보기 todolist를 만들고 따로 emotion을 학습하면서 눈에 들어왔던 기능이 있다. 바로 label을 붙일 수 있다는 점이다. styled-component나 emotion은 기존 css를 쓰던 방식과 달리 스타일을 적용하기 위해 각 태그에 'class'명을 지정할 필요가 없어졌다. 즉 해시값으로 무작위로 겹치지 않는 클래스명을 만들어주기 때문에, 개별 스타일을 갖되 일일이 className은 지정해주지 않아도 되는 편리함이 있었다. 하지만 이렇게 class-name을 지정하지 않자 문제점도 발생한다. 에러를 해결하기 위해 개발자도구를 열어 살펴본다고 가정해보자. 기존에는 와 같이 구역을 전부 이름으로 구분해줬기 때문에 개발자 도구에서도 코드와 일치하는 태그를 찾기가..

🚩Emotion 1) 조금 더 깔끔하게 쓰기 위하여(≠styled-component 방식) import React from "react"; import { listState } from "./atoms/listState"; import { useRecoilState } from "recoil"; import { MdDelete } from "react-icons/md"; import { FaPenToSquare } from "react-icons/fa6"; /** @jsxImportSource @emotion/react */ import { css } from "@emotion/react"; function TodoItem({item}) { const [todo, setTodo] = useRecoilSt..

🚩Recoil 1) 검색 기능 추가하기 (Recoil) 지난번에 스터디원 분께 말씀드린 대로 야심차게 검색 기능을 추가 하였다. 처음엔 그저 평범한 todo-list라는 명목으로 시작했으나 만들다보니 '장 보기 목록(어쨌든 장보기도 todo 아닌가?)'느낌으로 진행되었기 때문에… 만약 장 보기 목록이 아주 길어진다면 한눈에 이 아이템을 적었는지 알기 어려울 것이다. 이런 곤란한 경우를 대비하여 검색 기능을 활용해보기로 하였다. 우선, 완성된 레이아웃은 아래와 같다. function Header() { const [searchValue, setSearchValue] = useRecoilState(searchState); const setFilteredTodo = useSetRecoilState(filter..

보통 웹페이지에서 헤더header 부분과 맨 밑의 푸터footer은 여러 번 공통적으로 등장한다. 이처럼 반복되는 부분을 모든 서브페이지 html 마다 쑤셔넣는 것은 비효율적이기 그지없다! 따라서 공통되는 부분들은 다른 파일로 분리한 뒤 짧게 링크 한줄로 넣어주는 방식(가령, css파일이나 js파일을 연결하는 것처럼.)을 취하는 편이 현명할 것이다. 하지만 이 방법은 로컬에서는 쓸 수 없어서 서버의 힘을 빌려야만 한다. 여러 방식이 있겠지만 이번엔 오토셋을 써봤다. 오토셋 http://autoset.net/xe/ 은 apm setup(아파치 웹서버 / php / MySQL)을 전부 한번에 설치하도록 도와주는 프로그램이다. 이 셋은 상호 보완적으로 작동하며 서버를 쉽게 돌릴 수 있게 한다. 비록 지금은 업..

깃허브란? 소스를 효율적으로 분산 관리하는 시스템인 '깃Git'을 쓴 프로젝트를 지원하는 일종의 클라우드라고 할 수 있다. 클라우드에 코드를 올리고 내려받는 식으로 진행되며 쉽게 백업, 복원, 추적, 공유, 협업, 수정이 가능하다는 강점을 가진다. 협업이 필요한 개발 분야에서 꼭 언급되는 곳이라고. 깃으로 로컬 저장소에 먼저 저장을 한 뒤, 작업한 부분을 깃허브에 올리는 방식으로 이뤄진다. 그렇다면 깃허브에 새로운 코드 파일을 저장하는 방법을 아주 가볍게만 알아보자. 이를 위해서는 깃허브 https://github.com/ 에 가입이 되어 있어야 한다! 1. 작업하던 코드 에디터를 열고 거기서 터미널을 연다. 본인이 VS Code를 에디터로 쓰고 있기 때문에 이걸 기준으로 적겠다. 터미널(단축키 ctrl..

확장 프로그램 중에서도, js 쓸 때 console을 생성해주는 프로그램을 깔아봤다. 매번 consloe:log()를 써서 확인하기도 귀찮을 때가 있으니... 한번 깔아두면 두고두고 쓸 것 같다. 깔고 나서 따로 손볼 거는 딱히 없고 그냥 확장 프로그램에서 다운 받으면 끝이다. 이후 원하는 곳을 블럭으로 잡고 ctrl + alt + L 단축키를 누르면 바로 아래에 코드가 생성된다. 필요 없어져서 일괄 주석처리 할 때는 shift + alt + c 고, 삭제할 때는 shift + alt +d 쓰면 된다. 그럼 빠르고 쉬운 코딩 완성.

AOS 사이트 https://michalsnik.github.io/aos/ 에서 간단하고 자주 쓰이는 JS효과들을 쉽게 이용해보자. Fade, Flip, Zoom과 같이 가벼운 움직임을 통해 사이트에 생동감을 불어넣을 수 있다. 또한 duration을 통해 속도를 조절할 수도 있다. 사이트 내에 들어가면 어떻게 작동하는지 바로 샘플로 보여줘서 감을 잡기 쉽다. 맨 아래쪽에서 다운로드 클릭, 이후 받은 알집 파일 중에서도 dist 폴더 내에 있는 aos라는 이름을 가진 css파일과 js 파일을 각각 작업 중인 폴더에 넣어준다. 이후 이 둘을 모두 html에 link를 통해 연결해주고, html의 부분 맨 위쪽에 AOS.init();라고 한 줄 적어두면 세팅 완료. 이제 효과를 적용하고 싶은 부분에 샘플에 ..