코드잇스프린트15 [삐릭!] 검색 엔진 로봇과 친구하기 SEO는 또 뭐야🔖 SEO는 Search Engine Optimization의 약자로, 구글과 같은 검색 엔진에 친화적인 사이트를 구축하는 것을 의미광고X! 자연 검색 결과를 통한 트래픽의 양과 질 극대화관련 키워드로 검색과 페이지에 노출을 증가시켜 온라인 가시성을 개선하는 마케팅 작업SE 알고리즘🔖 크롤링 : 첫 번째 단계로 구글 봇이 웹 페이지 내의 콘텐츠를 복사하여 수집, 검색엔진으로 가져오는 단계🔖 인덱싱 : 두 번째 단계로 가져온 정보를 주제별로 인식하고 데이터로 보관🔖 랭킹 : 콘텐츠를 검색 의도에 맞춰 순위 부여, 사용자가 해당 키워드로 검색 시 순위대로 결과 제공✅ 이 3가지 단계를 통해 SERP(Search Engine Result Page) 완성!그럼 어떻게 SEO 개선을 유도해.. 2024. 6. 4. CORS 에러?? 그게 뭔데. CORS는 무엇일까?CROSS ORIGIN RESOURCE SHARING🔖 특정 도메인 및 Origin의 웹 페이지가 다른 도메인을 가진 리소스에 엑세스를 가능케 하는 보안 메커니즘서버나 클라이언트가 정해진 헤더를 통해 서로 요청 및 응답에 반응할지 결정하는 방식동일 출처 정책(same-origin policy) 때문에 등장동일 출처 정책은 뭐지?🔖 동일한 출처의 리소스에만 접근하도록 엑세스를 제한하는 것출처는 "프로토콜", "호스트", "포트" 등을 의미🔖 만약 출처가 다른데도 엑세스를 허용한다면?중요한 개인정보나 로그인 정보 등이 오고가는 사이트에서 토큰을 발급받고 다른 사이트에 접속하면 이러한 토큰이 다른 사이트에도 옮겨갈 위험성이 있다.이러한 위험을 방지하기 위해 같은 출처일 때만 접근 가능.. 2024. 6. 4. Next.js : 리액트 말고 나 써라. Next.js는 어떤놈이야?Next.js는 오픈 소스이며, 프레임워크로 리액트와 함께 빠르고 사용자 친화적인 웹 앱 및 정적 웹 사이트를 개발할 수 있다.뒤에 소개할 다양한 기능들을 이용해 리액트 애플리케이션을 효율적으로 구축 및 성능을 최적화 할 수 있다.리액트와 Next의 차이는?🔖 서버 사이드 렌더링(SSR)과 정적 생성(SSG) 지원초기 로딩 속도의 향상과 SEO 개선에 용이하다.리액트의 클라이언트 사이드 렌더링(CSR) 또한 사용 가능하다.CSR에 비해 페이지 요청 시마다 더 빠른 성능을 제공한다.또한 CSR도 사용 가능하다. (유도리 있는 친구)🔖 라우팅 및 코드 분할페이지 라우팅 및 앱 라우팅을 통해 동적으로 페이지를 생성하고 필요 시 코드를 자동 분할한다.번들 크기를 줄이고 앱 성능 최.. 2024. 5. 31. 타입스크립트.. 누구냐 너 타입스크립트는 뭐지?🏷️자바스크립트를 포함하는 상위 확장자(superset)이라고 할 수 있으며, 기존의 동적 타이핑 언어이던 자바스크립트에 타입을 부여하여 정적 타이핑 언어로 변환한 언어를 지칭🔖자바스크립트를 기반으로 동작하기 때문에, 사용되려면 자바스크립트로 변환되는 "컴파일" 과정을 거쳐야 한다.타입스크립트를 사용하는 이유는?🏷️타입을 정의하여 사전에 버그를 예방 가능하다.타입스크립트는 컴파일 과정에서 타입을 결정컴파일 과정에서 타입을 정의하기 때문에 컴파일 시 에러 예방🏷️높은 생산성을 제공한다.기존 자바스크립트와 다르게 변수의 이름 뿐 아니라 데이터의 자료형까지 전부 파악 가능🏷️강력한 호환성을 가진다.기존 자바스크립트의 상위 확장자이므로, 자바스크립트 코드를 가지고 확장하는 형식으로 .. 2024. 5. 24. CSS-IN-JS에 대하여 CSS in JS🔖CSS in JS는 CSS 스타일을 JS 코드 안에 포함하여 작성하는 패턴을 의미한다. 대표적인 라이브러리로 "Styled-components"가 있다.✅장점스타일을 JS 파일에 직접 작성함으로서 캡슐화에 유리하다. 이를 통해 스타일 간의 충돌을 완화하고 유지보수를 용이하게 만든다.JS코드와 비슷한 작성법을 이용하여 동적으로 스타일링하기에도 용이하다.CSS 로드 우선순위 이슈 또한 해결할 수 있다.🚫단점기존의 CSS 작성법과는 어느정도 차이가 있다보니 학습 곡선이 높다.(실제로 내가 그렇다.)JS를 통해 스타일이 동적으로 생성되어 성능 오버헤드가 발생할 수 있다.일부 브라우저에서 지원되지 않을 수 있다.➡️솔직히 아직까진 기존의 작성법이 편하기도 하고, 현재는 Tailwind 등 간.. 2024. 4. 25. CSR, SSR, SSG 렌더링 CSR🔖브라우저(클라이언트)에서 전적으로 웹 렌더링을 책임지는 보편화된 방식이며, 최초에 서버가 보내준 빈 HTML에 브라우저가 요소를 채워 렌더링한다.➡️서버로부터 HTML를 받는 것 이외에 별도의 통신을 할 필요가 없다.(SPA) 따라서 한번 렌더링 후 필요한 부분만 렌더링하여 효율적이다. ✅초기 로딩 후 빠른 렌더링을 통해 UX를 증대시키며, 서버의 부담이 덜하다. 또한 TTV와 TTI의 간극이 없다.🚫모든 파일이 처음에 전부 로드되어야 하므로 초기 로딩속도가 느리고, 검색엔진 최적화에 불리하다. 👍초기 로딩만 제외하면 빠른 속도와 필요한 데이터만 받아와 렌더링한다는 장점이 있어 사용자 간 상호작용이 많고 동적으로 데이터를 받아올 일이 많은 SNS피드, 채팅앱 등과 같은 페이지에서 사용하기 좋.. 2024. 4. 25. 이전 1 2 3 다음
