토피넛라떼조아

CSR 방식의 React, 한 장의 html 리액트는 CSR(client-side-rendering) 방식의 웹 렌더링이 이루어진다.SPA(single-page-application)는 UX에 도움이 되지만 SEO 관점에서는 단점 투성이다.말 그대로 단일 페이지이기 때문에 HTML 한 장만 존재하기 때문에 메인을 제외하고 갈아끼우는 페이지들은 검색 엔진에 적용시키기 어렵다. SPA === CSR 이라고는 할 수 없지만 결이 비슷하기 때문에 특수한 작업을 하지 않는다면 거의 맞는 말이 된다. react는 SPA이자 CSR이다.CSR이면 SEO 관리가 힘들다.  아무튼 cra로 생성한 react 프로젝트는 SPA + CSR이기 때문에 가장 상위의 index.html에서 head를 관리하게 된다.저번에 og를..

이번 프로젝트에서 이미지 파일을 업로드하여 그것과 비슷한 그림체의 웹툰을 추천해주는 부가기능이 있었습니다. 이 페이지의 기능 구현을 담당하여 필요한 기술들을 학습하면서 배운 내용을 기록해두려합니다. 다음과 같은 화면에서 그림을 업로드 할 수 있게 버튼을 만들어주었는데, 파일을 업로드하는 버튼이 너무 밋밋하여 이를 커스텀하고자 input과 버튼을 연결해서 css를 입혔습니다. // upload.jsx ... // 버튼의 for와 input의 id를 일치시켜 연결시켜준다. {fileImage ? "다시 업로드 하기" : "그림 업로드 하기"} ... const InputBtn = styled.label` box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.5); border: 0.3vw ..

Semantic Tag semantic tag는 html에서 사용하는 tag 중 의미가 있는 tag들을 의미합니다. 의미가 없는 요소(non-semantic) 이나 같은 태그들은 내용을 예측하기 힘듭니다. 그래서 semantic tag를 사용함으로써 여러 사람에게 그 의미를 전달할 수 있습니다. 의미가 명확해지는만큼 가독성이 높아지고 유지보수가 수월해집니다. 대표적인 시맨틱 태그 보편적으로 많이 사용하는 시맨틱 태그입니다. 배치는 취향에 맞게 자유롭게 할 수 있습니다. ⭕ 예시 header : 문서의 머리말 nav : 네비게이션, 링크의 집합 main : 문서의 본문, 내용들의 집합 section : 문서의 본문 내의 제목이 있는 관련 컨텐츠의 집합, article : 문서의 본문 중 독립적인 내용, s..

HTML html은 Hyper Text Markup Language의 줄임말입니다. 웹을 이루는 가장 기초적인 구성 요소입니다. 프로그래밍 언어가 아니며, 컨텐츠의 구조를 정의하는 마크업 언어입니다. Hyper Text 참조를 통해 사용자가 한 문서에서 다른 문서로 접근할 수 있는 텍스트입니다. Markup Language 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어입니다. 지난 번에 공부했던 Markdown도 이에 해당합니다. HTML 분석 요소 (Element) 각각의 요소들이 모여 html을 구성합니다. 요소는 중첩(nesting)될 수 있습니다. 요소는 속성(attribute)을 가질 수 있습니다. 여는 태그(opening tag) : 요소의 시작을 나타냅니다. 요소의 이름으로 구성되..