본문 바로가기

전체 글

 (46)
SEO 최적화 하는 방법은?! 오늘 블로그에서 이야기를 해볼 내용은 SEO를 최적화시키는 방법에 대해서 알아보려고 합니다. 이 주제로 이야기를 하는 이유가 친구들끼리 면접 이야기를 주고 받으며 있다가 너 SEO 최적화시키는 방법을 혹시 아냐? 라고 물어봐서 "응?.. (SSR?..) 잘 모르겟.." 라고 생각이 들었다. 생각해 보니 NEXT를 사용하면서 SSR를 제외하고 SEO 최적화하는 방법에 대해서 잘 모르고 있었다 .. 그래서 이번 블로그에서 SEO의 개념을 간단하게 짚고 SEO를 최적화하는 방법에 대해서 이야기를 할 것이다. SEO란 무엇일까? Search Engine Optimization’의 약자로 Search Engine이다. 검색엔진에 친화적인 사이트를 구축하여 직접적인 광고가 아닌 자연 검색 결과를 통해서 트래픽의 양..
이벤트 "버블링" 🫧 and "캡처링" 📸 안녕하세요🔥 오늘의 블로그 주제는 바로 이벤트 버블링과 캡처링에 대해서 알아보려고 합니다. 저도 많은 블로그와 자료를 보면서 버블링에 대한 이해가 조금은 있었는데 캡처링에 대한 내용을 처음 알게 되었습니다. 약간 반대? 느낌의 버블링이라고 보시면 이해하기 쉬울 것 같은데요!! 그러면 바로 한번 버블링과 캡처링에 대해서 알아보도록 하겠습니다. 버블링이 뭘까? 🫧 버블링이란 어떠한 요소의 이벤트가 발생을 하게 되면 이 요소는 할당된 이벤트를 발생시킵니다. 그리고 부모 요소에도 이벤트를 발생시키게 되는데 가장 최상단위의 요소까지 과정을 계속 반복합니다. 예를 들어서 버블이 되는 예시 코드를 한번 만들어서 보겠습니다. FORM DIV span 위와 같이 span 태그를 클릭하면 그 위로 div를 실행시키고 fo..
Hi, I am DOM(Document Object Model) 🐟입니다. 오늘 블로그에서 다뤄볼 내용은 바로 문서 객체 모델의 개념인 DOM입니다. 제가 지금까지 여러 블로그를 작성을 하면서 리액트 라이프 사이클, 브라우저 렌더링 .. 등등 여러 블로그에서 DOM을 많이 언급을 했었는데 사실 이 DOM이라는 것이 무엇인지에 대해서 하나도 모르고 있어서 이번 블로그를 통해서 조금 알아보는 시간을 가져볼까 합니다. 지금까지 알고 있는 DOM이라고는 물고기 돔 .. DOM 그게 뭔데? DOM이란 그럼 무엇일까? 문서 객체 모델 HTML, XML과 같은 문서의 프로그래밍 interface라고 할 수 있다. 이게 무슨 말이냐? 문서 객체는 , 와 같은 html문서의 tag를 JavaScript가 사용할 수 있는 객체로 만드는 것이다. 그럼 모델(Model)은 뭘까? 위와 같은 문서 객..
[TypeScript] interface와 Type은 뭐가 다를까?? 타입스크립트를 쓰는 당신. interface와 type에 차이점에 대해서 알고 있습니까?!? 저는 프로젝트를 경험하면서 솔직하게 interface라는 개념만 주구장창 사용을 했습니다 .. 근데 다른 개발자님들이 프로젝트를 개발하시는 걸 보면 또 type을 사용하는 걸 보니까 저도 조금 뭐가 다른지 궁금해져서 이번 블로그에서는 interface와 type의 차이에 대해서 조사를 해보려고 합니다. 확장하는 법 먼저 다른 점은 서로 확장하는 방법이 다릅니다. interface일 경우에는 extends를 사용하며 type 같은 경우 & 연산자를 사용하여서 확장을 할 수 있습니다. interface Taerang { name: string; age: number; } interface Taerang extends..
저 React는 생명이 있어요 .. 🌱 <React Life Cycle> 혹시 React를 사용하시는 당신. React의 생명 주기가 존재한다는 것을 알고 계시나요?? 리액트는 컴포넌트 별로 개발을 하게 됩니다. 이때 각각의 컴포넌트들은 생명 주기 즉 라이프 사이클이라는 개념이 존재합니다. 여기서의 생명 주기는 생성으로 시작하여서 업데이트를 하고 마지막에는 소멸하는 과정을 거치게 된다. 클래스형 컴포넌트는 생명 주기 메서드를 통해서 라이프 사이클에 따라 컴포넌트를 사용하지만 함수형 컴포넌트에서는 생명 주기 메소드가 존재를 하지 않아 리액트 훅을 사용해 생명 주기 메서드와같은 역할을 하는 동작을 구현을 해줘야 합니다. 라이프 사이클의 3가지 단계 (생명 주기) 라이프 사이클은 3가지의 단계로 나뉘게 되는데 생성(mounting) - 업데이트(updating) - 제거(unmou..
삐빅 🤬 상태 코드 발생했습니다!! 확인해주세요. 안녕하세요!! 오늘도 즐거운 하루 보내고 계신가요?? 오늘 조사할 내용은 HTTP 상태 코드에 대해서 한번 알아볼까 합니다. 다들 개발자도구 들어가셔서 network 부분 보시면 상태 코드 볼 수 있는 거 아시죠? 상태 코드는 100번대부터 500번대까지 다양한 코드들이 존재하는데 이 중에서 주요 상태 코드를 이야기를 해보겠습니다!! 먼저 HTTP 상태 코드이니까 HTTP를 알아보는 것이 좋겠죠? HTTP란 무엇일까? HTTP는 HyperText Transfer Protocol로 불리며 쉽게 말하여 클라이언트와 서버 사이에 이루어지는 요청하고 응답하는 프로토콜입니다. 즉 클라이언트가 HTTP를 통해서 어떤 정보를 서버로 보내면 그걸 처리해 다시 클라 이언트에게 응답을 하여 우리가 실제로 보는 화면을 볼 ..
[JavaScript] 1타 강사가 알려주는 Closures!! 이젠 알자 자바스크립트를 사용하시는 개발자 여러분은 클로저(Closures)라는 개념을 알고 있으신가요?? 저는 스코프이라는 단어를 찾아서 둘러보다가 스코프라는 개념을 알게 되면서 클로저라는 개념도 같이 알고 있으면 좋겠다 .. 어디선가 들어본 적은 있지만 실제로 따로 찾아본 적은 없어서 이번 블로그를 통해서 클로저를 알아보려고 합니다!! 근데 또 클로저가 프론트엔드 면접 단골 문제라고 하기도 하네요 .. ( 더 열심히 조사를 해야겠군요 .. 🥹 ) 먼저 클로저라는 개념을 알기 전에 스코프에 대한 내용으로 시작을 하면 좋을 것 같습니다ㅏㅏ!! 스코프(Scope) 그게 뭔가 ..? 스코프 한 번씩은 들어보셨나요?? 네 ..? 게임에서 들어봤다구요?? ㅋㅋㅋㅋㅋㅋ 근데 뭔가 느낌은 비슷한 것 같네요 ㅜㅎ 스코프는요 식..
언제까지 React 쓸래?? 이제는 Next 사용해야지 혹시 웹 프론트엔드 분야를 하고 있는 개발자님들에게 궁금한 점이 있습니다. 혹시 프로젝트를 하실 때 리액트를 쓰시나요?? 아니면 Next를 사용하시나요?? 저는 Next가 아닌 React로만 프로젝트를 한번 해봤습니다. 그 이후 모든 프로젝트에서는 NextJs를 사용하면서 프로젝트 개발을 하고 있습니다. 근데 최근 들어서 제가 왜 React가 아닌 NextJs를 사용하는지에 대해서 잘 모르는 것 같아서 .. 이번 블로그를 통해서 요즘 트렌드가 React가 아닌 Next를 더 개발자들이 선호를 하는지 또 어떠한 장점이 있는지에 대해서 알아볼까 합니다. Next.js Next.js .. 한 번씩은 들어봤을 것 같은 개념이다. 맞다. NextJs는 React 라이브러리의 프레임워크이다. ➡️ 이건 또 뭔 소리..

티스토리툴바