전체 글(54)
-
[Part.3] SPA
1. SPA(Single Page Application)- 직역하면 하나의 페이지 서비스이지만 다수의 페이지를 표시하는 데 있어서 과거 전통적인 방식으로 페이지 전환을 수행하지 않고, 마치 하나의 페이지인 것처럼 처리하는 기술을 의미한다.- 웹페이지의 구조가 어떤 방식으로 작동하는지를 설명하는 용어이다.- 랜더링이 클라이언트 측에서 이루어지는 CSR- 이전에는 MPA(Multi Page Application)로 다중의 페이지로 서비스가 이루어졌었다.ⓘ NoteMPA(Multi Page Application)최초 요청 시 데이터를 전달받고 다음 화면 요청 시 또 다시 데이터를 전달 받는다.SPA(Single Page Application)최초 요청 시 데이터를 전달받고 다음 화면 요청 시 통신 후 필요한 ..
2024.08.29 -
[Part.3] CSR, SSR
1. CSR(Client Side Rendering)이란?- 직역하면 화면 쪽에서 랜더링- 클라이언트 쪽에서 랜더링 작업을 한다.- 웹서버는 브라우저로부터 요청을 받는다.- 응답값으로 html, css, js, 이미지 등의 데이터를 응답받는다.- 그 다음 화면에서 랜더링을 시작하는데, 랜더링을 시작하기 전까지 유저들은 아무것도 볼 수 없다.- 랜더링이 완료된 후 사용자들은 화면을 볼 수 있고 조작할 수 있다.ⓘ Note랜더링웹사이트가 그려지는 과정 2. SSR(Server Side Rendering)- 직역하면 서버 쪽에서 랜더링하는 것- 서버 쪽에서 랜더링 준비를 끝마친 상태로 브라우저에 전달하는 방식이다.- 웹 서버는 브라우저로부터 요청을 받는다.- 서버 쪽에서 랜더링을 진행한다.- 화면에서 랜더링..
2024.08.29 -
[Part.3] 반응형 웹, 모바일 웹
1. 반응형 웹- 크기에 따라 늘어나거나 줄어드는 웹사이트를 말한다.- 어떤 환경(모바일, 태블릿, 큰 모니터, 작은 모니터 등)에서도 사용자가 편하게 볼 수 있도록 한다. 2. 화면에 맞게 개발을 추가적으로 작업해야하는가?- 아니다. 개발은 한 번만 하지만 그대신 CSS 미디어 쿼리를 사용한다. - CSS에서 화면의 가로사이즈(width)를 구간으로 나눈다. - 예를 들어, 1200px 이하 사이즈에서는 가로로 보이게 한다던지 이런식이다.- 해당 작업을 통해 화면 사이즈에 맞게 레이아웃이 배치된다. 3. CSS로 일일히 구간을 나눠야 되는가?- 그렇다. PC, 태블릿, 모바일 width 사이즈에 맞게 다 작업해야한다. - 그래서 은근 공수가 많이 투입되는 작업이다. 혹은 bootstrap이란 라이브..
2024.08.29 -
[Part.3] 검색엔진 최적화
1. 검색엔진 최적화(SEO;Search Engine Optimization)- 검색 결과가 상위에 노출되는 것을 말한다.- 신규 고객 및 잠재고객의 통로가 된다. 2. 검색엔진 최적화의 원리- 검색엔진 로봇이 웹사이트 정보를 수집한다.- 검색엔진 로봇이 웹사이트를 크롤링한다.- 사용자가 많이 검색하는 키워드에 대응하는 키워드를 만들어둔다(=인덱싱).- 인덱싱된 키워드에 우선 순위를 매기고 높은 순서에 따라 결과로 보여준다. 3. 노출 상단으로 최대한 높이는 방법- html 시맨틱 태그 사용한다.- 방문자수가 많고 지속시간이 긴 콘텐츠를 만든다.- 사람들이 많이 검색하는 키워드가 포함된 콘텐츠를 만든다.- 네이버, 구글에 돈을 주고 광고한다.- 즉, 양질의 콘텐츠를 꾸준히 업로드한다.ⓘ Notehtm..
2024.08.29 -
[Part.3] 브라우저가 렌더링 되는 과정
1. 브라우저란?- 미디어(이미지, 동영상, 콘텐츠)를 시각적으로 표현하는 소프트웨어이다.- 예시로, 네이버는 브라우저가 아닌 웹사이트이다.- 종류 : 크롬, 사파리, edge 2. 브라우저에서 웹이 동작하는 원리(렌더링 과정)- 수강생이 브라우저에 URL을 입력한다.- 데이터를 웹 서버로부터 응답받는다.- 응답 받은 데이터(html, css, javascript, 이미지)를 브라우저가 표현한다.ⓘ Note렌더링서버로부터 html, CSS, Javascript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말한다. 3. 크로스 브라우징이란- 브라우저 어느 한쪽에만 웹페이지가 잘 표현되는 것이 아니라 모든 플랫폼(크롬, 사파리, edge, 모바일 등)에서 웹페이지가 잘 표현되도록 하는 것을 뜻..
2024.08.29 -
[Part.2] 도메인 & URL
1. 도메인이란?- 사람들이 원하는 웹사이트를 방문할 때 입력하는 주소이다. 2. DNS(Domain Name System)- 도메인 주소를 IP 주소로 변환해주는 시스템을 말한다. 3. URL 이란?- 도메인과 마찬가지로 사이트에 접속할 때 입력하는 주소이다.- URL은 서버의 주소 + 하위 디렉토리 + 프로토콜 모두를 합친 주소를 말한다.- 예시 : https://www.naver.com:80/blog/index.html· https : 프로토콜· www.naver.com : 도메인· 80 : 서버 연결 포트· blog : 디렉토리 주소· index.html : 웹페이지 파일 이름으로 이루어진 전체 주소를 URL이라고 한다. 4. IP 주소란?- 인터넷에 연결된 컴퓨터의 고유 식별자이다.- DN..
2024.08.28