전체 글

🐝 검색 엔진 최적화란SEO란 'Search Engine Optimization'의 약자로, 한국어로는 '검색 엔진 최적화'라고 합니다. 이는 웹 사이트가 구글이나 네이버 같은 검색 엔진의 결과 페이지에서 더 높은 순위를 갖도록 최적화하는 과정을 의미합니다.검색 엔진에서 노출되는 검색 결과는일반적인 자연 검색(organic search)광고로 노출되는 PPC(pay-per-click)두 가지가 존재합니다.따라서 검색 엔진 최적화는 광고가 아닌 자연 검색 결과에서 나의 웹 사이트가 상위에 노출되도록 하는 작업입니다. 검색 엔진 최적화가 중요한 이유는 웹 사이트의 트래픽이 증가할 때 얻게 되는 이점들 때문입니다.상단에 위치한 사이트일수록 사용자가 방문할 가능성이 높아지고, 다른 웹 사이트과의 경쟁에서 우위..

문제 해결글로 작성하기엔 너무 사소한..실수 목록글로 정리해두고 같은 실수를 반복하지 않기 위해나중에 보고 웃으려고(과연..?)24.05.25 부터 정리 커맨드 창에서 단축키 사용 시 현재 입력 소스가 영문 키보드인지 확인하자커맨드 창에서 단축키 연습 중이었는데 갑자기 단축키가 먹히지 않음명령어가 작성되지 않아 키보드가 한글로 바뀌었는지도 몰랐음영문 키보드여야 단축키가 동작함 display: inline, block, inline-block은 속성을 적용하고 싶은 주체 요소에 직접 쓰자css에서 display: flex, grid 쓰다가 오랜만에 block 쓰려니까 부모 요소 안에 써버림그러고는 왜 태그에 너비랑 높이값이 적용되지 않는지 30분 고민함  justify-content는 여백이 있어야 잘 ..

🔮 설치하기1) 테일윈드를 사용하고자 하는 디렉토리에서 터미널을 켭니다. 2) 터미널에서 아래의 명령어를 입력하여 tailwindcss, postcss, autoprefixer를 설치합니다.npm install -D tailwindcss postcss autoprefixer 3) 터미널에서 아래의 명령어를 입력하여 'tailwind.config.js'와 'postcss.config.js' 파일을 생성합니다.npx tailwindcss init -p 4) 'postcss.config.js' 파일을 열어 다음과 같은 내용으로 설정되어 있는지 확인합니다.module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, },} 5) 'tailwi..

🐝 SSR(server side rendering)서버 사이드 렌더링은 사용자가 요청을 보낼 때마다 서버가 직접 렌더링을 마친 html 파일을 보내주는 방식입니다. 동작 과정은 다음과 같습니다.사용자가 웹 페이지에 접속하면 브라우저는 해당 url을 서버에게 요청합니다.서버는 받은 url을 기준으로 어떤 페이지를 렌더링할 지 결정합니다.서버에서 웹 페이지를 완성하고, 그 결과를 브라우저에게 응답으로 전달합니다.이후에는 클라이언트 사이드 렌더링(CSR)과 마찬가지로 브라우저는 받은 html 파일을 해석하여 DOM을 생성하고 hydration을 수행합니다.여기에서 중간에 있는 hydration이란 무엇일까요? 🐝 Hydrationhydration(하이드레이션)의 사전적인 의미는 '수분 공급', '수화'입니..