Amada Coding Club

보통 웹 주소에 대해 말할 때 URL이라는 말을 많이 사용한다. 그런데 이번에 Router에 대한 글을 쓰면서 URL이외에 URI라는 말을 많이 썼다. URI는 뭐고 URL은 뭔지 궁금해서 정리를 해보고자 한다. 먼저 요약하면 URI는 이름 URL는 위치를 나타낸다. 사람에 비유하면 URI는 각자의 이름, URL은 그 사람들이 사는 지역을 생각하면 편하다. 다시 말해 URL 이 성동구일때 URI는 성동구의 홍길동, 성동구의 임꺽정과 같은 유일한 존재이다. 이제 자세하게 살펴보자 URI와 URL의 관계 먼저 URI는 Uniform Resource Identifier URL은 Uniform Resource Locator의 약자로 이름 그래도 URI는 id를 URL은 위치를 나타낸다. 이 두 개의 관계는 위와..

어우 원래 이 내용을 쓰려고 했는데 어찌하다보니 SEO에 대한 이야기를 해버렸다 2023.01.12 - [Front-End/관련 지식들] - [Front-End] SEO의 개념과 중요성 우리가 무언가 개발을 할 때 라우팅을 많이 사용한다. React에서도 React-router-dom을 사용하고 다른 라이브러리나 프레임워크에서 라우팅을 지원한다. 이전에는 라우팅이라는 주제에 대해 모르는 상태에서 그냥 그렇구나하고 개발했었는데 이제는 라우팅에 대해 알고 있어야 할 것 같아서 라우팅에 대해 알아보고자 한다. Routing이란? Routing은 route(경로)에 ing가 붙여진 것으로 출발지(기존 주소)에서 목적지(가려고 하는 주소)까지의 경로를 설정하는 기능이다. 다시 말해 기존 화면에서 다른 화면으로 화..

[SPA SEO] SPA에서의 SEO 문제 지난 SEO에 대한 이야기를 이어서 2023.01.12 - [Front-End/관련 지식들] - [Front-End] SEO의 개념과 중요성 [Front-End] SEO의 개념과 중요성 원래는 웹 라우팅에 대한 글을 먼저 쓰려고 했다가 참조 블로그에서 amadaclub.tistory.com 이전 게시글에 이어서.. SPA에서 발생하는 SEO 적용 문제에 대해 SSR을 통해 문제를 해결할 수 있다고 했다. 일단 SSR은 뭘까? SSR(Server Side Rendering) 와 CSR(Client Side Rendering) SSR, 서버 사이드 렌더링은 서버에서 사용자에게 보여줄 페이지를 렌더링해서 클라이언트에 보내 페이지를 보이는 방식을 말한다. 반면에 CSR..

지난 SEO에 대한 이야기를 이어서 2023.01.12 - [Front-End/관련 지식들] - [Front-End] SEO의 개념과 중요성 [Front-End] SEO의 개념과 중요성 원래는 웹 라우팅에 대한 글을 먼저 쓰려고 했다가 참조 블로그에서 SEO와 SSR에 대한 내용을 다뤄 이 부분에 대해 먼저 이야기를 적어보고자 한다. 이 게시글은 SEO에 대한 내용이다. SEO란? SEO는 Se amadaclub.tistory.com SPA에서 SEO에 대한 문제에 대해 이야기해보자 먼저 SPA에 대해 알아보자 SPA란? SPA(Single Page Application)는 이름 그대로 최초로 가져온 하나의 페이지만을 사용하는 애플리케이션을 의미한다. 고전적으로 사용하던 MPA(Multi Page App..

원래는 웹 라우팅에 대한 글을 먼저 쓰려고 했다가 참조 블로그에서 SEO와 SSR에 대한 내용을 다뤄 이 부분에 대해 먼저 이야기를 적어보고자 한다. 이 게시글은 SEO에 대한 내용이다. SEO란? SEO는 Search Engine Optimization의 약자로 검색엔진최적화, 즉 구글, 네이버, 다음과 같은 검색엔진에서 사이트를 쉽게 찾도록 하는 프로세스, 작업, 절차를 말한다. 검색 엔진이 사이트를 쉽게 찾도록 하는 건 왜 중요할까? 우리가 검색어를 입력해 검색할 때 검색 엔진은 크롤링 후 자체적으로 정한 기준을 바탕으로 우선순위를 부여해 페이지 순서를 결정한다. 만약 제작한 사이트가 검색 엔진의 기준에 부합할수록 높은 우선 순위를 가질 수 있고 페이지의 상단에 위치 할 수 있다. 일반적으로 검색을..

지난 시간에는 그림판의 그리는 과정을 나타냈고 [VanillaJS] 1-Canvas를 이용해서 그림판 만들어보기-그리기 패스트캠퍼스 강의에서 그림판 만들기 실습을 했는데 너무 흥미로워서 글로 남긴다. 그림판을 제작할 때는 HTML의 캔버스 태그를 이용한다. 코드에선 클래스를 사용했기 때문에 this문을 사용함. amadaclub.tistory.com 오늘은 그림판의 지우기 기능을 넣어보고자 한다. 나는 뭐 지우는 과정에 무슨 이전 그리기 과정을 불러와서 그려진 부분을 인식하고 클릭한 영역 내에 있는 그림을 지우는 이런 복잡한 과정을 거치는 줄 알았다. 근데 그냥 캔버스의 배경색으로 덮는 거였다 ㅋㅋㅋㅋ this.context.strokeStyle = this.eraserColor; //배경색으로 덮어버림..