[Rookies 개발 2기] 프론트엔드 구조
·
SK 루키즈/FE
1. 프론트엔드 기본 구성 요소프론트엔드는 주로 다음 세 가지로 구성된다.  1. HTML (HyperText Markup Language)구조와 콘텐츠를 담당하는 언어다.웹페이지의 뼈대 역할을 하며, 텍스트, 이미지, 멀티미디어와 같은 콘텐츠를 포함한다.주요 태그는 구조(div), 입력(input, select), 전송(form), 정보 표시(p, img), 이벤트(button), 외부 자원 참조(script) 등을 포함한다.HTML5는 웹의 표준으로 자리 잡으며, 반응형 웹, 멀티미디어, 2D/3D 렌더링(canvas) 등을 지원한다. 2. CSS (Cascading Style Sheets)디자인과 레이아웃을 정의하며, 반응형 웹 구현과 애니메이션을 포함한다.CSS는 HTML의 요소를 선택해 스타일을..
[Rookies 개발 2기] 웹서비스는 어떻게 움직일까?
·
SK 루키즈/FE
설명에 앞서먼저 설명에 앞서 이후 내용은 아래의 책과 Rookies 개발 2기 수업을 통해 진행하겠다. 웹서비스란?우리가 흔히 웹서비스라 함은 PC나 모바일 등을 통해 브라우저(크롬, 엣지, 사파리 등)로 원하는 서비스를 이용하는 것을 말한다.우리는 원하는 서비스를 이용하기 위해 주소창에 도메인을 입력한다. 예를 들어, `https://www.skshieldus.com/` 같은 URL을 입력하고 엔터를 누르면, 이 행위가 바로 `요청(Request)`이다. 또는 브라우저에서 검색 후 원하는 결과를 클릭해도 같은 방식으로 요청이 이루어진다. 웹서비스의 처리 과정웹서비스는 사용자가 요청을 보내고, 서버가 이를 처리한 뒤 응답을 보내주는 구조로 이루어진다. 이 과정을 단계별로 살펴보자. 1. 브라우저에서 요청..
[Rookies 개발 2기] 프론트엔드를 위한 세팅(Node.js 및 Vscode설치)
·
SK 루키즈/FE
1. NodeJSNodeJS란? Node.js는 서버 측 애플리케이션을 개발하기 위한 JavaScript 런타임 환경입니다.주로 비동기 I/O 기반의 네트워크 애플리케이션을 개발하는 데 사용됩니다.설치 방법https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org   1. Node.js 사이트에 접속합니다.   그다음 Download Node.js를 설치 후 실행합니다.설치에는 별다른 버튼을 누르지 않고 쭉 설치해 줍니다. 전부 설치 후에 윈도우+R을 입력하고 cmd를 실행시켜 줍니다. 저는 맥 환경이기 때문에 터미..