prefer2 Log

프로젝트를 진행할 때 백엔드 팀원이 이런 질문을 했었다. "우리 프로젝트도 구글에 롤링페이퍼를 검색하면 나오게 못 만드나? 검색 되면 사용자가 더 많아질 것 같은데..." 이 질문에 SEO를 향상시키면 된다는 답변을 했지만 왜 그런지, 그리고 어떻게 하는지에 대해 제대로 설명하지 못했던 기억이 있다. SEO란 무엇인지 그리고 어떻게 이를 향상시킬 수 있을지 알아보자. (사실 우리 프로젝트의 경우에는 회원끼리의 메시지라 SEO를 향상시킬 필요가 없다. 메타테그만 추가해주면 충분하다) SEO란 SEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정이다. 검색 엔진 최적화를 진행하면 사이트의 사이트의 가시성이 향상되고, 더 많은 사용자가 사이트를 방문하도록 유도할 수 있다. 크롤링..

웹개발을 하다보면 한번쯤은 만나는 녀석 CORS에 대해 알아보자! 동일 출처 정책(Same-Origin Policy) 어떠한 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 정책. 두 URL의 프로토콜, 포트, 호스트가 모두 같아야 동일한 출처라고 말한다. 예를 들어 알아보자. http://example.com/a/a.html 과 동일한 출처인지를 비교하는 예시이다. 리소스 요청 허용 여부 이유 http://example.com/b/other.html ✅ 경로만 다름 http://example.com/a ✅ 경로만 다름 https://example.com/another.html ❌ 프로토콜이 다름 http://example.com:81/a/a.html ❌ 포트 다름(기본 포트 ..

MVC패턴은 모델, 뷰, 컨트롤러(Model, View, Controller)의 줄임말으로 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴이다. 💡 디자인 패턴이란? 건축으로치면 공법에 해당하는 것으로, 소프트웨어의 개발 방법을 공식화 한 것이다. 소수의 뛰어난 엔지니어가 해결한 문제를 다수의 엔지니어들이 처리 할 수 있도록 한 규칙이면서, 구현자들 간의 커뮤니케이션의 효율성을 높이는 기법이다. Model : 백그라운드에서 동작하는 로직을 처리한다. (데이터를 가진 객체, 파라미터로 주로 쓰인다. DB의 테이블과 대응하는 경우가 많다.) View : 사용자가 보게 될 결과 화면을 출력한다. Controller : 사용자의 입력처리와 흐름 제어를 담당한다. (사용..

DOM virtual DOM에 대해 알아보기 전에 DOM은 어떻게 작동하는지를 알아보자. DOM(Document Object Model)은 문서 객체 모델이라고 하는데 결국은 브라우저에서 다룰 HTML 문서를 파싱하여 "문서의 구성요소들을 객체로 구조화하여 나타낸 것"이다. DOM의 동작 과정 HTML을 파싱하여 DOM 객체를 생성하고, CSS를 파싱하여 스타일 규칙을 만든다. 이 두개를 합쳐서 실제로 웹 브라우저에 보여져야할 요소를 표현한 "렌더 트리"라는 것을 만든다. 이 렌더 트리를 기준으로 레이아웃을 배치하고 색을 칠하는 등의 작업을 한다. 요즘 흔히 접하는 큰 규모의 웹 애플리케이션, 예를 들어 트위터나 페이스북은 수많은 데이터가 로딩된다. 그리고 각 데이터를 표현하는 요소(element) 개수..

HTTP 요청과 응답 구조는 동일합니다. 요청과 응답은 시작줄(Start Line)과 헤더(Headers)와 바디(Body)로 구성되어 있습니다. 시작줄(Start Line) 모든 Http 메시지는 시작줄(Start Line)으로 시작합니다. 요청 시작줄은 서버가 특정 동작을 취하게끔 만들기 위해 클라이언트에서 전송하는 메시지입니다. 응답 시작줄은 요청에 대한 결과가 어땠는지 알려줍니다. 요청 GET / HTTP/1.1 메서드(Method) 요청의 제일 처음 나오는 부분으로 서버에 어떤 행동을 하라는 것을 요청 하는 것인지 명시하는 부분입니다. Restful API를 사용한다면 대부분 GET은 읽기, POST는 쓰기, PUT은 업데이트 그리고 DELETE는 삭제를 의미할 것입니다. 그렇지만 이는 서버와의..