프로그래머스 최종 프로젝트 프로그래머스 최종 프로젝트는 벡엔드 수료생들과 협업으로 진행된다. 먼저 3.13(목) ~ 3.14(금) 이틀동안 프론트 팀 내부에서 3인으로 자유롭게 팀원을 구성 후에 원하는 벡엔드 팀에게 연락해 팀 매칭을 통해 진행되는 것이다. 프론트와 매칭이 안된 벡엔드 팀은 벡엔드로만 진행된다고 한다. 나는 팀을 찾지 못하고 있다가 3차 프로젝트 팀원 분의 도움으로 한 명을 기다리고 있는 분들과 함께 하게 되었다. 우리 팀은 비전공자로 이루어진 팀이었는데 비전공자란 틀에 갇혀있지 말고 한번 보여주자고 서로 전의를 다졌다 ㅋㅋㅋㅋㅋ 팀장은 내가 하겠다고 자원을 했다. 내가 갖고 있는 지식을 나누어 줄 수 있는 경험과 배운것을 얼마나 내 것으로 만들었는지 확인 할 수 있는 좋은 기회였고 자신 있었다. 벡엔드 매칭 주말 동안은 노션에 우리가 원하는 벡엔드 팀의 인재상(?)을 적어 모집 공고를 적었고. 3.10(월) ~ 3.11(화) 이틀 동안 벡엔드 매칭을 완료해야한다.…

프로그래머스 3차 프로젝트 프로그래머스 3차 팀프로젝트는 2차 프로젝트와 똑같이 공공API를 이용해 플랫폼을 만드는 것이다. 다만 이제 Vue.js 환경에서 진행을 해야한다. 사전 회의 📝 사전회의에서 브레인 스토밍을 했고 10가지의 주제가 나왔다. 그 중에서 팀원들의 투표를 통해 내가 냈던 유기동물 입얍이 선정됐다. 주제 선정 후에 강사님의 피드백을 받았는데 주제를 냈던 나한테 반려동물을 키우는지 물어보셨다. 한번도 키워보지 않았다는 나의 답변에 어떻게 이 주제가 나올 수 있었는지 의문이 드셨는지 당황의 웃음을 보여주셨다…ㅋㅋㅋㅋㅋ 추가로 유기동물 입양만으로는 컨텐츠가 적을 수 있어 반려동물 여행도 추가하면 좋겠다는 의견을 주셨다. 사전 작업 먼저 figma를 통해서 디자인을 하는데 늘 느끼는 거지만 미적 감각이 없는 나에겐 디자인은 어렵다… 감사하게도 나를 제외한 모든 팀원이 미적 감각이 뛰어나 좋은 결과물을 낼 수 있었던 것 같다. 저번 2차 프로젝트에서는 각자 한 페이지를 …

Event vue에서는 v-on 디렉티브(@ 기호)를 사용하여 DOM 이벤트를 감지하고 핸들러를 실행한다. 컴포지션 API에서는 setup() 함수 내부에서 이벤트 핸들러를 정의하고 바인딩 한다. 이벤트 처리 이벤트 처리 - 인라인 핸들러 방식 v-on을 활용하여 Vue와 바인딩된 객체 활용할 수 있는 script를 생성하여 처리 이벤트 처리 - 메서드 핸들러 를 통해 Vue 내부의 메서드 핸들러와 연결하는 방식이다. 긴 이벤트 처리에도 적합하고 Vue 코드에서 이벤트 처리 코드를 작성 가능하다. 가급적 해당 방법을 사용하는 것을 권장, 사유는 코드 관리가 편해진다. 이벤트 처리 - 핸들러 + input 이벤트 일반적인 이벤트 핸들러를 생성하면 (e)=>{} 타입으로 생성되어 e 객체 활용 가능 만일, 사용자가 정의한 인자와 event 객체를 활용하고 싶은 경우, $event로 인자 처리가 가능 이벤트 수식어 기본적인 수식어 .stop : 이벤트 전파 중지 (event.stop…

기본적인 class 기반 css 적용 방법 style scoped 해당 컴포넌트 내부에서만 스타일이 적용되도록 제한하는 기능이다. 내부적으로 고유한 데이터 속성을 추가하여 CSS 선택자를 스코프 내에서만 유효하도록 만든다. 단, 자식 컴포넌트에는 스타일이 상속되지 않는다. style을 활용하면 전역 CSS가 적용되지만 일반적으로 .css를 활용 추천 class 바인딩 (ref) class 바인딩 (reactive) class 바인딩 (이벤트 적용) class 기반 동적 바인딩 v-bind 기반 class 연동 문법(문자열로 관리) ‘:class’를 활용하여 미리 정의된 class를 지정할 수 있다. v-bind 기반 class를 여러 개로 적용하는 방법(배열 관리) 속성에 리스트를 통해 여러 속성을 한 번에 적용할 수 있다 삼항 연산자, 논리 연산자 삼항 연산자를 통해 레이아웃 속성을 여러 레이아웃으로 대체할 수 있다. 삼항 연산자 대신 논리 연산자 를 통해 단축해서도 표현할 …

컴포넌트 연동 Vue 컴포넌트 연동에 핵심이 되는 3가지 개념은 props, emit 그리고 v-model이 있다. props : 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 Read-Only 속성, defineProps() 사용 emit : 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 전달하는 방법, defineEmits(), $emit() 사용 v-model : 부모와 자식 간의 양방향 바인딩으로 props + emit을 합친 개념, defineModel() 사용 props Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법 defineProps를 통해 자식 컴포넌트에서 부모에서 받을 props를 정의 html 속성 처럼 camelCase가 아닌 kebab-case로 이름을 정의하는 것을 권장 (greeting-message=“안녕!“) 단방향 데이터 흐름을 유지해야 하며, props로 받은 값은 자식에서 직접 수정할 수 없다. (read only) 단방…

반응형 API (Reactivity API) 반응형 API (Reactivity API)는 데이터의 변경을 자동으로 감지하고, UI를 최신 상태로 유지하는 API이다. 기본적으로 Vue는 데이터가 변경되면 자동으로 DOM을 업데이트하는데, 이를 가능하게 하는 핵심 개념이 반응형 시스템(Reactivity System)이다. React의 Hooks와 유사한 개념으로 useState를 ref, reactive로 useEffect는 watch와 watchEffect가 대응 ref ref()는 기본 데이터 타입(Number, String, Boolean, Object, Array 등)을 반응형으로 만드는 API 이다. 기본형을 감싸서(Wrapping)하여 관리함에 따라 .value 속성을 통해 값을 읽고 수정이 가능하다. 객체를 ref로 감싸면 내부적으로 reactive()와 유사하게 동작하며, reactive 다르게 ref로는 null로 초기화 가능하고 객체로 할당하는 경우 reacti…

Vue Template Syntax - 보간법, 디렉티브 Vue는 렌더링된 DOM과 바인딩할 수 있는 HTML 친화적인 템플릿 구문을 사용 HTML 처럼 보이지만 내부적으로는 Javascript 파싱되어 순수 js 객체로 관리 된다. 작성된 템플릿 구문은 Vue app을 통해 이벤트 및 반응성 처리를 지원 또한 DOM의 변경을 최소한으로 수행하기 위해 Virtual DOM으로 구성됨 참고 : https://ko.vuejs.org/guide/essentials/template-syntax 보간법 (Text Interpolation) Text Interpolation(보간법) 콧수엽(Mustache)문법을 통해 반응형으로 vue에 선언된 data를 출력한다. 출력된 값은 escape 처리 되어 XSS에 안전하게 어플리케이션을 보호한다. JavaScript Expressions JS 문법을 표현식으로 처리할수 있다. document.write(‘this!’) this에 들어갈수 있는 문…

Vue란? Vue는 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크입니다. 이는 표준 HTML, CSS, 및 JavaScript 위에 구축되며, 선언적이고 컴포넌트 기반의 프로그래밍 모델을 제공하여 어떠한 복잡성의 사용자 인터페이스도 효율적으로 개발할 수 있게 도와줍니다. React와 함께 SPA 개발 도구로 활용 가능한 기술로, React와 유사하게 컴포넌트 기반 개발과 생명주기를 제공하며, React와는 또 다르게 HTML/CSS 친화적인 문법을 통해 상대적으로 간단한 문법을 제공하며, 또한 프레임워크 환경으로 Vue Ecosystem을 활용한 표준적인 아키텍처 스타일을 제공한다. Vue의 특징 접근성 (Accessibility) HTML,CSS, 자바스크립트 표준을 기반으로, 쓰기 편한 API와 최고 수준의 문서를 제공합니다. HTML 속성 재사용(@click, @submit …) 및 보간법 {{…}}을 통한 표현식을 제공하며, Javascript(JSX)가 …

프로그래머스 2차 프로젝트 프로그래머스 2차 팀프로젝트는 공공API를 이용해 플랫폼을 만드는 것이다. 이번 프로젝트 기간은 한달에 걸쳐 진행이 됐다. 사전 회의 📝 사전 회의는 수업이 끝난 후에 주제 선정에 대해 팀원들과 이야기를 나누었다. 영화 검색 및 예매 사이트, 쇼핑 트랜드 분석 사이트, 문화재 소개 사이트 3개의 아이디어가 나왔다. 강사님의 피드백 후에 문화재 소개 사이트를 만드는 것으로 결정이 됐다. 사전 작업 UI 작업을 하기 전 기능 리스트와 사이트 맵을 제작했고 UI 작업을 하기 위해 여러 문화재 페이지를 참고했다. 각자 맡은 페이지를 제작 후에 서로에게 피드백을 주는 방식으로 진행이 됐다. UI 작업을 마친 후에는 강사님께 피드백을 받는 시간이 왔다. 우리는 나름 잘 했다고 생각을 했지만 강사님께 다시 해보는게 좋을거 같다는 피드백과 다른팀이 한것을 본 후에 막막해졌다. 거의 클론을 하듯이 UI 작업을 진행했고 우리만의 특별한 기능을 내세워 차별성을 두는 방향으로…

Next.js란? Next.js는 React를 기반으로 한 오픈 소스 웹 개발 프레임워크로, 서버사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 클라이언트사이드 렌더링(CSR)을 지원하여 빠르고 효율적인 웹 애플리케이션 개발을 가능하게 한다. Node.js 위에서 빌드 된 이 프레임워크는 SEO, 성능 최적화, 개발 생산성에서 강력한 기능을 제공하며, 리액트 개발 문서에서 권장하는 툴체인 중 하나로 언급된다. 특히, 서버 렌더링 되는 웹사이트를 빌드하는 데 유용하다. 특징 Built-in Optimizations : 이미지, 폰트, 스크립트 최적화로 성능과 UX 향상시킨다. Dynamic HTML Streaming : 서버에서 UI를 스트리밍 방식으로 점진적 렌더링한다. React Server Components : 클라이언트 JavaScript를 줄여 성능을 최적화한다. Data Fetching : 서버와 클라이언트에서 데이터를 유연하게 가져오는 기능 제공힌다. CS…

Styled-Components Styled-Components는 CSS-in-JS 라이브러리 중 하나로, React 컴포넌트 내부에서 CSS를 작성할 수 있다. 스타일과 컴포넌트를 함께 정의하여 컴포넌트 단위로 관리할 수 있고, CSS 클래스 충돌을 방지하며 동적 스타일링이 가능하다. 기본 문법 동적 스타일링 컴포넌트 상속 중첩 스타일링 Tailwind CSS Tailwind CSS는 오픈 소스 CSS 프레임워크로, 각 요소를 스타일링하기 위해 조합하여 사용할 수 있는 “유틸리티” CSS 클래스 목록을 제공한다. Tailwind CSS 특징 유틸리티 클래스 기반 스타일링 Tailwind는 bg-blue-500, text-lg, p-4 등과 같이 단일 CSS 속성을 나타내는 유틸리티 클래스를 제공한다. 이를 조합하여 원하는 디자인을 구현할 수 있으며, 별도의 CSS 파일을 작성하지 않고도 HTML 내에서 직접 스타일링이 가능하다. 반응형 디자인 지원 sm:, md:, lg:, xl…

useMemo useMemo에서 memo는 memoization을 뜻하는데 이는 그대로 해석하면 ‘메모리에 넣기’라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 즉, 동일한 값을 반환하는 함수를 반복적으로 호출해야한다면 처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때마다 다시 계산하지 않고 메모리에서 꺼내서 재사용하는 것이다. 리액트에서 함수형 컴포넌트는 렌더링 => 컴포넌트 함수 호출 => 모든 내부 변수 초기화의 순서를 거친다. 메모이제이션: 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법입니다. 만약에 calculate라는 함수가 매우 복잡한 로직으로 이루어져 있다고 가정해보자. Component가 렌더링 될때마다 value는 calculate 함수를 실행시켜 값을 할당하게 되는…

useContext Context는 앱 안에서 전역적으로 사용되는 데이터를 여러 컴포넌트끼리 쉽게 공유할 수 있는 방법을 제공한다. Context를 사용하면 Props로 데이터를 일일이 전달해 주지 않아도 해당 데이터를 가지고 있는 상위 컴포넌트에 그 데이터가 필요한 하위 컴포넌트가 접근할 수 있다. 즉 사용자 정보, 테마, 언어 등 전역적인 데이터를 전달하기에 정말 편리하다. 상위 컴포넌트의 data가 필요한 하위 컴포넌트들은 useContext 훅을 사용해서 해당 데이터를 받아오기만 하면 된다. useContext는 Context로 분류한 데이터를 쉽게 받아올 수 있게 도와주는 역할을 한다. 🚨 주의 사항 context는 꼭 필요할 때만 사용한다. context를 사용하면 컴포넌트를 재사용하기 어려워질 수 있다. context의 주된 목적인 다양한 레벨이 있는 많은 컴포넌트들에게 전역적인 데이터를 전달하기 위함이다. 리액트 공식 문서에는 context를 사용하는 이유가 단지 p…

Form 폼(Form)은 사용자 입력을 처리하는 요소로 React에서는 Form의 특수한 엘리먼트로 구성되어 있다. Form은 내부적으로 props(formData)와 action 등의 state를 상태 관리하는 요소를 가지고 있고, 사용자는 이를 통해 편리하게 form 처리가 가능하다. action : URL 혹은 함수를 action을 통해 전달하면, 폼은 HTML 폼 컴포넌트처럼 동작한다. 함수를 action을 통해 전달하면, 해당 함수는 폼 제출을 처리 Form 기본 예제 - action 활용 formData.get() formData에서 name 키의 값을 가져온다. name은 초기 값이 “홍길동”으로 설정되어 있으므로 기본적으로 “홍길동”이 반환된다. age, email은 사용자가 직접 입력한 값을 전달한다. 다양한 input type props와 useState를 통한 form 활용 예제 useState 설계 방법 종류 useState의 정석적인 방법 = 하나씩 선언한…

유틸리티 타입 ( Utility Types ) TypeScript에서 제공하는 유틸리티 타입(Utility Types)은 기존 타입을 변형하거나 새로운 타입을 생성하기 위해 제공되는 내장 타입이다. 이를 사용하면 유틸리티 타입의 기능에 따라 타입 정의를 간결하고 유연하게 활용 할 수 있다. Partial 모든 속성 값이 선택적(optional)으로 변경됨 객체의 일부 속성만 필요 할 때 활용된다. Required 모든 속성 값이 필수(Required)로 변경됨 객체의 모든 속성이 필요 할 때 활용된다. Readonly 모든 속성 값을 읽기 전용(readonly)으로 변경함, 객체가 immutable 속성으로 변경된다. Pick 타입에서 특정 속성만 선택(Pick)하여 새로운 객체 타입을 생성한다. Omit 타입에서 특정 속성값을 제외(Omit)하여 새로운 객체 타입을 생성한다. Record 특정 키 집합(K)에 대해 값(T)의 모든 타입을 설정, 객…

타입 단언(Type Assertion) = as Type 단언은 Type 추론을 활용하지 않고 특정 값이 특정 타입임을 강제로 지정하는 방법이다. 컴파일러의 타입 추론 결과가 무시하고, 개발자가 원하는 타입을 지정 하는 방식이다. 단, 타입 단언은 컴파일 단계에서만 작동하고 런타임 환경에서는 영향을 미치지 않는다. 즉, 잘못된 Type 단언을 통해 런타임 에러가 발생할 수도 있으니 사용에 주의 필요하다! 기본 문법 빈 객체를 User Type으로 단언하는 문법 타입 가드(Type Guard) 런타임 시점에 특정 변수의 타입을 좁히거나 확정하기 위해 사용되는 기법이다. 주로 Type에 대한 안정성을 확보하기 위해 활용 된다. type은 기본형 외의 객체의 Type인 interface, alias, class를 포함한다. typeOf, instanceOf, in, is 등의 연산자를 통해 타입 가드를 활용 할 수 있다. Type에 대한 안정성을 확보하기 위한 문법으로 특정 변수의 Ty…

interface 함수 interface 정의 함수의 인자와 리턴 타입에 대한 인터페이스를 정의하여 함수의 형태를 지정할 수 있다. 함수 interface는 함수 구조의 상속이나 callback 구조의 제한으로도 활용 할 수 있다. 상속 상속은 객체 타입을 확장하여 다른 인터페이스의 속성을 포함하거나 덮어쓰는 데 사용된다. 인터페이스는 extends 키워드를 사용하여 상속이 가능하다. 속성 범위 축소 자식에서 부모의 type범위를 축소하는 것이 가능하다. ( 확장 불가 ❌) 다중 상속 인터페이스는 다중상속이 가능함으로 다중 확장을 지원 배열 인덱싱 타입 정의 인터페이스를 사용한 배열 인덱싱은 인덱스 시그니처를 통해 구현이 가능하다. 배열이 특정 요소 타입을 가지도록 인터페이스를 정의하거나, 배열을 객체로 간주하여 숫자 또는 문자열 기반 인덱스를 설정이 가능하다. 객체 인덱싱 타입 정의 배열 인덱싱을 기반으로 객체 인덱스도 정의 가능하다. 이때 내부 타입을 다양하게도 선언이 가능하다…

타입과 인터페이스의 차이점 타입스크립트에서 타입과 인터페이스는 모두 객체의 구조를 정의하는 데 사용되지만, 그 사용 목적과 기능에는 차이가 있다. 타입은 주로 변수, 함수 반환 값, 매개변수 등의 타입을 정의하는 데 사용된다. 인터페이스는 객체의 구조를 정의하고, 클래스가 특정 구조를 따르도록 강제하는 데 사용된다. 이 두 가지는 비슷해 보이지만, 실제로는 중요한 차이점이 있다. 왜냐하면 타입은 병합이 불가능하지만 인터페이스는 병합이 가능하기 때문이다. 이로 인해 인터페이스는 확장성과 재사용성이 높아진다. 타입스크립트 팀에서도 인터페이스 사용을 권장하고 있다. 타입과 인터페이스의 기본 선언 타입과 인터페이스 차이점 (선언적 확장) 병합 가능 여부 위의 예제에서 두 개의 인터페이스 선언이 병합되어 하나의 User 인터페이스가 생성된다.반면, 타입은 병합할 수 없다. 이로 인해 인터페이스는 확장성과 재사용성이 높아집 타입스크립트 팀에서도 인터페이스 사용을 권장하고 있다. 또한, 인터페…

this란 this는 JavaScript에서 객체의 문맥(context) 또는 호출 환경을 참조하는 키워드로, 특정 함수나 코드 블록이 실행되는 동안의 현재 객체를 나타낸다. 함수 호출 방식에 의해 결정되는 this javaScript에서는 호출 방식에 의해 this에 바인딩할 객체가 동적으로 결정된다. 바인딩: 변수, 함수, 또는 this와 같은 식별자가 특정 값이나 객체에 연결되는 과정을 의미한다. 함수 호출에서의 this 전역에서 함수 선언 전역에서의 모든 함수의 this는 window 객체를 바인딩한다. 내부함수 함수의 내부 함수에서 this 또한 window 객체를 바인딩한다. 객체의 메서드, 메서드의 내부함수, 콜백 함수 객체에서의 메서드일 경우에는 this에 해당 객체가 바인딩된다. 단, 메서드의 내부함수일 경우에는 window 객체를 바인딩한다. setTimeout 같은 콜백함수에서의 this도 window 객체를 바인딩한다. 생성자 함수애서의 this new 키워드…

TypeScript 타입스크립트는 자바스크립트에 타입을 추가한 언어다. 타입을 검사하는 정적 타입 검사기이면서, 타입스크립트의 컴파일의 결과가 자바스크립트로 컴파일되는 언어이기도 하다. 확장자로는 .ts를 사용한다. TypeScript의 기본 타입 상속 자바스크립트의 기본 자료형들을 상속을 받아 활용한다. 참조 TS 참조형은 객체, 배열, 함수형으로 JS에서 활용하던 Type을 상속하여 추가적인 문법을 제공한다. any은 어떤 type도 허용하는 타입으로 지정할수 있다. (사실상 javascript 변수) obj1은 각 프로퍼티에 값이 할당될때 할당된 값의 type으로 정해진다. arr1은 배열로 선언하고 인덱스의 값들은 string으로 받는다고 정의되어 있다. 제네릭으로 생성한다고 말한다. arr2은 배열로 정의하고 인덱스의 값들은 number로 받는다고 정의되어 있다. 튜플(tuple)은 배열의 일종으로 길이와 각 요소의 타입이 고정된 Type이다. any는 타입을 따지지 않는…

프로그래머스 1차 프로젝트 프로그래머스 첫 팀프로젝트는 바닐라js만을 이용해 노션 클론닝을 하는 것이다. 4일 동안 요구 사항을 구현하고 시간이 남으면 추가 기능을 구현하는 것이 프로젝트의 목표였다. 사전 회의 📝 프로젝트 시작이 월요일이라 우리는 금요일 WTL이 끝난 후에 미리 프로젝트 요구사항을 분석하고 UI와 기능을 어떻게 구현해 낼지 결정했다. 우리가 해야할 구현 사항은 사이드바, 에디터 페이지, 라우팅, 자동저장 기능 이렇게 4가지로 기본 기능을 구현하기로 했고 시간이 남는다면 브레드크럼, 사이드바 접고 펴기, 사이드바에 애니메이션 적용과 같은 것들을 하기로 했다. 나는 라우팅 작업을 맡게 되었다. 사전 작업 우리는 UI를 작업하기 위해 Figma를 사용했다. 우리가 직접 디자인을 해야하나 고민하다가 무표 템플릿이 있다는 것을 보고 우리 팀 작업 공간에 노션 무료 템플릿을 가져와 색상값 분석, 폰트 크기 및 스타일 분석, 레이아웃 분석, 컴포넌트 분석해 피그마에 코멘트를 …

CORS란? CORS(Cross-Origin Resource Sharing)는 웹 브라우저가 다른 출처(Origin) 의 리소스에 접근할 때 발생할 수 있는 보안 정책을 제어하기 위한 메커니즘입니다. 웹 브라우저는 기본적으로 보안상 같은 출처(Same-Origin)에서만 리소스를 요청하도록 설계되었습니다. 하지만 실제로 다양한 API 호출이나 외부 리소스 사용을 위해 다른 출처의 리소스를 요청해야 할 경우가 많습니다. 이때, CORS 정책을 통해 안전하게 리소스에 접근할 수 있도록 허용 여부를 설정할 수 있습니다. 출처(Origin)란? URL은 https://domain.com:3000/user?query=name&page=1 과 같이 하나의 문자열 같지만, 사실은 다음과 같이 여러개의 구성 요소로 이루어져 있습니다. Protocol(Scheme) : http, https Host : 사이트 도메인 Port : 포트 번호 Path : 사이트 내부 경로 Query string :…

fetch 함수 JavaScript의 fetch 함수는 브라우저 내장 함수로, 네트워크 요청을 보내고 응답을 처리하기 위해 사용됩니다. HTTP 요청(GET, POST, PUT, DELETE 등) 을 수행하며, Promise 기반으로 동작하여 비동기적으로 데이터를 처리할 수 있습니다. 기본 문법 url: 요청할 리소스의 URL. options: 요청 설정을 담은 객체. 생략하면 기본값으로 GET 요청이 전송됩니다. async / await와 함께 사용 GET 요청 fetch API를 사용하여 비동기 POST 요청을 보냅니다. URL은 http://localhost:3001/members/로, 로컬 서버를 대상으로 합니다. 응답 데이터(response.body)를 JSON으로 파싱하고 data 변수에 저장합니다. POST 요청 HTTP 요청 헤더에 Content-Type: application/json을 설정해 JSON 데이터로 요청을 보냅니다. 요청의 본문(body)에는 사용자가 …

이벤트루프 태스크가 오길 기다렸다가 태스크가 들어오면 이를 처리하고, 처리할 태스크가 없는 경우엔 잠드는, 끊임없이 돌아가는 자바스크립트 내 루프입니다. 자바스크립트는 싱글 스레드 기반의 언어(작업을 한개씩 처리)며, 자바스크립트 엔진은 하나의 콜 스택만 사용합니다. 이벤트 루프의 필요성 자바스크립트는 싱글 스레드 언어로 작업을 한개씩 처리한다고 합니다. 하지만 실제 개발에서는 동시에 작업이 이루지는 것을 볼 수 있습니다. 그 이유는 바로 이벤트 루프 라는 장치가 있기 때문입니다. 웹 사이트나 애플리케이션의 코드는 메인 스레드에서 실행되며, 같은 이벤트 루프를 공유합니다. 메인 스레드의 역할 : 1. 코드 실행, 2. 이벤트를 받고 실행, 3. 웹 컨텐츠 렌더링과 페인팅 브라우저 환경의 구조 Heap : 객체들은 힙 메모리에 할당됩니다. 콜스택 : 함수 호출시 실행컨텍스트가 생성되며, 실행컨텍스트들이 콜스택을 구성합니다 Web API or Browser API : 웹 브라우저에 …

Practice_03 문제 3 입력 받은 정수가 양수이면서 짝수일 때만 “짝수다”를 출력하고 짝수가 아니면 “홀수다“를 출력하세요. 양수가 아니면 “양수만 입력해주세요.”를 출력하세요. solution 문제 7 실습문제7 아이디, 비밀번호를 test/1212로 정하고 로그인 기능을 작성하세요. 로그인 성공 시 “로그인 성공”, 아이디가 틀렸을 시 “아이디가 틀렸습니다.“, 비밀번호가 틀렸을 시 “비밀번호가 틀렸습니다.”를 출력하세요. solution if문에서 return을 만나면 함수 실행을 종료한다는 점을 이용해 코드의 가독성을 높이는걸 볼 수 있었습니다. 문제 8 두 개의 정수와 연산 기호를 입력 받아 연산 기호에 맞춰 연산 결과를 출력하세요. 단, 두 개의 정수 모두 양수일 때만 작동하며 없는 연산 기호를 입력 했을 시 “잘못 입력하셨습니다. 프로그램을 종료합니다.” 출력 solution Practice_04 문제4 두 개의 값을 입력 받아 그 사이의 숫자를 모두 출력하세요…

Node.js route 외부 선언 router 적용 (app.js) app.use( ’/’, … )는 기본 경로( / )로 들어오는 모든 요청에 대해 미들웨어를 실행합니다. require( ‘./routes/getPage’ )는 애플리케이션이 사용할 라우트를 정의한 파일을 가져옵니다. router 모듈화 (getPage.js) 1. 사용된 모듈 express-async-handler: 비동기 함수에서 발생하는 예외를 자동으로 처리하여 next()로 전달합니다. 이를 통해 try-catch를 명시적으로 작성할 필요가 줄어듭니다. router: Express에서 제공하는 라우터 객체로, 경로별로 요청을 처리할 수 있습니다. bcrypt: 암호화를 위한 라이브러리로, 비밀번호를 해시(hash) 처리하거나 비교하는 데 사용됩니다. 2. GET 요청 처리 /getPage 경로로 들어오는 GET 요청을 처리합니다. res.status(200).render(‘getPage’) : 반드시 요청…

HTTP 브라우저와 웹 서버 간의 데이터 통신을 담당하는 프로토콜로 웹에서 데이터를 요청(Request)하고 응답(Response)받는 데 사용이 됩니다. HTTP는 클라이언트(예: 브라우저)와 서버 간의 요청-응답 모델을 기반으로 작동하며, 주로 HTML, CSS, JavaScript, 이미지, 동영상 등의 리소스를 주고받을 때 활용된다고 합니다. HTTP 특징 클라이언트-서버 구조 HTTP는 클라이언트(예: 웹 브라우저)와 서버 간의 요청(Request)과 응답(Response)으로 이루어진 통신 프로토콜 클라이언트가 요청을 보내면, 서버는 해당 요청에 대한 응답을 반환합니다. Stateless(상태 비저장성) HTTP는 각 요청 간의 상태를 저장하지 않습니다. 즉, 하나의 요청이 끝나면 이전 요청의 정보를 기억하지 않는 특징 이를 보완하기 위해 쿠키, 세션, 토큰(JWT) 같은 기술이 같이 활용됩니다. 텍스트 기반 프로토콜 HTTP 메시지는 사람이 읽을 수 있는 텍스트 형식으…

서버 프로그래밍 서버사이드 렌더링 (SSR) 서버사이드 렌더링은 이미 완성된 페이지를 브라우저에 제공하는 것이다. 동작 방식 브라우저가 서버에 원하는 페이지 요청을 보낸다 서버에서 HTML 페이지를 완전히 생성한 뒤 브라우저로 보낸다. 브라우저는 전달받은 HTML을 그대로 받아 렌더링한다. 장점 빠른 초기 로딩 시간: 완성된 HTML을 제공하기 때문에, 첫 화면을 로드하는 시간이 빠릅니다. 단순한 구조: 클라이언트 측에서 JavaScript 로직이 적어 유지보수가 쉽습니다. 단점 서버 부하 증가: 모든 요청에서 서버가 HTML을 생성해야 하므로, 트래픽이 많을 경우 서버에 부담이 큽니다. 인터랙션 지연: 초기 렌더링은 빠르지만, 페이지 전환 시마다 서버 요청이 필요해 속도가 느려질 수 있습니다. 기술적 제한: 실시간 업데이트나 복잡한 사용자 인터페이스를 구현하는 데 불리할 수 있습니다. 즉, 서버사이드 렌더링은 정적인 페이지인 뉴스 콘텐츠, 블로그와 같이 초기 콘텐츠를 빠르게 보여…

구조 분해 할당 객체 또는 배열의 값을 선언된 변수의 순서에 따라 값을 할당한다. 전개구문 (…) 전개구문 … 을 사용하게 되면 배열의 전체 또는 일부를 복사할 수 있다. (본래의 값은 변하지 않는다.) 전개 구문 활용 배열 내용 조합 배열의 전개 구문은 위와 같이 아무데서 사용이 가능하다고 한다 배열 복사하기 myArray2는 myArray1 을 전개구문을 통해 복사했지만 둘은 엄연히 독립적이기 때문에 다른 값이다 배열의 비구조화 할당 배열의 나머지 요소 할당 변수 first과 second의 각각의 인덱스 값에 맞는 값이 차례로 들어가고(1, 2), rest에는 할당 받지 못한 나머지 값들이 하나의 배열로 묶여 대입된다. 🚨주의점🚨 : 다음 선언문과 같이 나머지 전개구문이 마지막 요소에 선언하지 않으면 구조 파괴로 선언될 수 없다. 전개구문으로 파라미터를 받는 경우 => 리턴값 : 배열 전개연사자를 사용해 인수 리스트를 배열로 하나로 묶어서 받는다. 예를 들어 args = 1,…

Error Error 종류 SyntaxError 문법적으로 잘못된 코드를 실행하려고 할 때 발생 ReferenceError 존재하지 않는 변수나 함수에 접근하려고 할 때 발생 TypeError 변수나 값이 예상된 데이터 타입이 아닐 때 발생 try-catch 문 try: 에러 발생 가능한 코드를 작성 error: 에러 발생시 error문에 작성된 코드 실행 finally: 옵션 문장으로 에러 발생과 상관 없이 코드 실행 동작 원리 try 블록 실행 console.log(“정상 영역”);가 실행된다 let x = refValue;에서 refValue가 정의되지 않았으므로 ReferenceError 발생한다. catch 블록 실행: 발생한 ReferenceError가 catch (error)로 전달됩니다. 에러의 이름(name)과 메시지(message)가 출력됩니다. error: 에러의 이름, error.message: 에러에 대한 자세한 내용 finally 블록 실행: 에러 발생 여…

브라우저 이벤트 브라우저 이벤트란 브라우저 내에서 특정 액션을 말한다. 클릭, 스크롤, CSS 애니메이션이 종료되었을때와 같은 액션을 예로 들 수 있을 것이다. 이벤트 종류 마우스 이벤트 click : 마우스 왼쪽을 클릭했을때 contextmenu: 마우스 오른쪽을 클릭했을때 mouseover : 마우스 커서를 요소 위로 움직였을때 mouseup : 마우스 커서가 요소 밖으로 나갈때 (쉽게 hover를 생각하면 좋을듯 같다) mousedown : 마우스 왼쪽을 누르고 있을때 mousemove : 마우스 왼쪽이 뗄 때 (click = mousedown & mouseup) 폼 요소 이벤트 submit : 데이터가 전송됐을때 focus: input 요소가 활성화 됐을때 키보드 이벤트 keydown : 키보드를 눌렀을때 keyup : 키보드 키를 뗄 때 Dom 이벤트 DOMContentLoaded : 페이지 로드가 다 완료될때 CSS 이벤트 transitionend : CSS 애니메이션이…

Class Class 선언식 constructor는 생성된 인스턴스에 전달되는 인자 값이다. 클래스 내부에 정의된 메서드는 prototype에 추가되어 인스턴스간에 공용으로 사용가능하고 메모리를 효율적으로 사용할 수 있다. Class 표현식 getter & setter getter : 값을 가져오는 역할의 키워드로 메서드 이름 앞에 get을 붙인다. setter : 값을 할당하는 역할을 키워드로 메서드 이름 앞에 set을 붙인다. 단 setter에는 하나의 인자만 설정할 수 있다. static 키워드 static 키워드로 정의된 속성 또는 메서드가 있다면 외부에서 인스턴스의 생성없이 접근할 수 있다. Class의 호이스팅 Class는 호이스팅을 지원하지 않으며, Class가 선언 된 이후 라인에서 Class를 사용할 수 있다. public과 private Public: 클래스 외부에서 자유롭게 접근 가능 Private: 클래스 내부에서만 접근 가능 private를 사용하는 이유는 …

객체 생성 객체 리터럴 가장 기본적인 객체 생성법이다 생성자 함수 고전(ES5이전)부터 재사용이 필요한 객체를 설계하는 방법으로 함수의 첫 글자를 대문자로 선언하여 활용 ES6 이후에는 Class 문법이 생겼지만 여전히 객체 선언 시 표준적으로 활용 되는 문법 new : 생성자 함수를 생성하는 키워드로 새로운 Heap 메모리 공간에 this : 해당 블록에 해당되는 객체 자신(this)을 가르치는 키워드 인스턴스 생성자 함수를 통해 생성된 객체를 인스턴스(instance)라 한다. 위 코드에서 Person은 생성자 함수 쉽게 말해 프레임이고 아래 선언된 person 1부터 3은 전달된 인자가 객체 프로퍼티에 값을 지정한다 Object 생성자 Object Wrapper Object create( ) 프로토타입을 명시적으로 설정하면서 객체를 생성하는 방법 빈객체를 만들기보단 상속이나 복제 용도로 활용 복제되어 새로운 heap에 myObj2 만들어진다. myObj1도 heap에 존재하기…

함수 호이스팅 함수 호이스팅이라 호출되는 시점에 함수의 선언이 없더라도 실행되는 메커니즘이다. 호이스팅은 인터프리터에 의하여 호출 시점 보다 늦게 선언된 함수는 상위로 이동 시키는 구문으로 일반 함수는 적용되지만 익명 함수는 호이스팅이 불가하다. Call by value 기본 자료형(Primitive Type, 원시 값)을 함수에 전달할 때, 값을 복사하여 전달한다. 단 본래의 값에 영향을 주지는 않는다. Call by Sharing도 같은 매커니즘이다. global : num = 10; stack : x = 10; -> 20; 함수내에서 x = 20을 만나면 20으로 변경됨! Call by Reference (참조에 의한 호출) 참조 자료형(Reference Type)을 함수에 전달할 때, 참조값(메모리 주소)를 전달 객체 배열 객체 배열

개발자 도구 개발자 도구(Developer Tools)는 웹 브라우저에 내장된 도구 모음으로, 웹페이지의 디버깅, 수정, 프로파일링 등의 작업을 수행하는 데 사용되며, 웹 개발자들이 웹 애플리케이션을 개발하고 디버깅하는 데 도움을 주는 ‘강력한 도구’입니다. Elements 패널 출처: https://velog.io/@remon/%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%8F%84%EA%B5%AC%EC%9D%98-%EA%B8%B0%EB%8A%A5%EC%9D%84-%EB%9C%AF%EC%96%B4%EB%B3%B4%EC%9E%90 웹페이지의 구성과 CSS를 알 수 있다 HTML 코드 분석 및 실시간으로 레이아웃과 디자인을 변경할 수 있다 해당 속성 값을 직접 타이핑 해서 속성값을 변경할 수 있다 styles 순서의 의미 가장 상단부터 css파일의 우선수위에 따라 나옵니다. 제일 먼저 뜨는 스타일이 우선순위가 가장 높습니다. 취소선은 그어진 CSS는 우선순위에 밀려서 적용…

변수 쉐도잉 (variable shadowing) 스코프 안에서 이미 밖에 선언 되어있던 같은 이름의 변수를 사용하는 경우, 스코프 밖의 변수는 잠시 가려지게(shadowing) 됩니다.

동적 타이핑 개념 JavaScript의 변수 선언 시 type(자료형)을 선언하지 않아도 되며, 향후 값이 대입(assign) 되는 순간 type이 결정되는 동적 타이핑(Dynamic Typing) 메커니즘을 활용한다. 단, type이 없는 것이 아니라 나중에 결정되는 메커니즘으로 type이 존재한다! Type 종류 : 원시형(Number, String, Boolean … ), Object(객체, 배열, 함수 등) java에서는 한번 정해진 type은 변경이 불가하지만 js에서는 변수에 어떤 type의 값이 들어와도 변경이 가능하다! Symbol (심벌) ES6에서 새롭게 도입된 기본 자료형 중 하나로, 고유하고 변경 불가능한 값을 생성이 가능하다. 주로 객체의 속성키로 활용 가능하며 충돌 가능성 없는 고유 식별자를 만들기 위해도 활용 됨 Truthy & Falsy 값 Truthy 참 같은 값(Truthy)인 값이란 불리언을 기대하는 문맥에서 true로 평가되는 값이다. 따로 거짓…

자바스크립트 작성 유형 internal(내부) 방식 인라인 방식으로 HTML 속성 내부에 짧게 작성하는 방법 아주 짧게 쓰는 것을 권장하고 주로 함수 호출을 통해 문자를 늘려서 활용 External(외부)에서 호출하는 방법 단, js 코드 특성상 외부에서만 로드하는 것은 불가능해 internal 방식과 섞어서 사용한다 script 태그 안에 js 외부파일 경로를 src에 입력 해주면 된다 변수 정의 및 키워드 변수: JS에서 값을 저장하는 공간이다. 쉽게 말해 빈 박스 => 변수 , 박스 안에 들어있는 물건 => 값 이라고 생각해도 좋다 변수 선언 키워드 var : ES6 이전 문법에서 사용된 키워드지만 ES6 이후로는 잘 쓰지 않음, ex ) var value = 10; let(ES6) : 블록 스코프를 가지는 변수로 완벽한 지역변수, ex) let value = 10; const(ES6) : 상수로 선언시 활용, 값이 한번 정해지면 변경 불가!, ex ) const = 10; …

CSS 미디어 쿼리 웹 페이지를 다양한 기기와 화면 크기에서 최적화하기 위해 CSS 스타일을 조건부로 적용하는 기능이다 반응형 웹 디자인(Responsive Web Design)의 핵심 도구로, 화면 크기, 해상도, 색상 모드 등 다양한 기기 특성에 따라 스타일을 변경할 수 있다 기본 문법 조건 부분이 만족될때 해당 스타일이 적용된다 예시 화면 너비가 768px 이하일 경우에 font-size 14px이 적용된다 미디어 쿼리 조건 max-width / min-width max-width: 화면 너비가 특정 값보다 작거나 같을 때 적용된다 min-width: 화면 너비가 특정 값보다 클 때 적용된다 max-height / min-height’ 화면 높이에 따라 스타일을 적용한다 복합조건 여러 조건을 논리 연산자(and, not, only)로 조합 가능하다 기본 문법 예시 미디어 쿼리 조건 max-width / min-width max-height / min-height’ 복합조건

브라우저의 동작 과정 HTML로부터 DOM 트리를, CSS로부터 CSSOM 트리를 생성한다 DOM 및 CSSOM을 결합하여 렌더 트리를 형성한다 렌더 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다 개별 노드를 화면에 페인트한다 파싱 먼저 DOM트리와 CSSOM 트리를 생성하는 과정을 알기전에 파싱이란 개념을 알고 가는 것이 좋을 듯 하다 파싱(Parsing): 토큰화된 코드를 구조화하는 과정을 말한다 파서(Parser): 파싱 과정을 전문적으로 해주는 부분 토큰화 : 의미가 있는 최소 단위로 코드를 쪼개는 것을 의미한다. HTML 파싱 출처: https://velog.io/@joyoung/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95 브라우저는 위에서 말한 토큰화 된 HTML 문자열들을 이용해 **파스 트리(Parse Tree)**를 생성한다 파…

Flex align-self 아이템의 교차축의 여백을 어떻게 배치할지 지정 flex-start : 교차축의 시작점에 배치 flex-end : 교차축의 끝점에 배치 center : 교차축의 중앙점에 배치 stretch : 교차축에 가득 차게 늘림 align-self 결과 align-content item이 여러 줄이 되었을때 item들의 교차축 기준 정렬 방법을 지정 flex-start : 주축 시작점 기준으로 배치 flex-end : 주축 끝점 기준으로 배치 center : 주축 중앙 기준으로 배치 space-between : 시작점과 끝점 배치 후 중간 항목은 같은 간격으로 배치 space-around : 전체 항목을 같은 간격으로 배치 stretch : 항목을 늘려 교차축에 가득 차게 배치 align-content 결과 Grid Grid 기본 배치 grid-template-columns: 열의 갯수를 표현 grid-template-rows: 높이를 정하는 방법 Grid 기본…

display display 속성 : lnline / block / inline-block / flex / grid 값을 통해 레이아웃을 배치할때 활용되는 중요 속성 block : 블록처럼 위아래로 쌓이는 구조를 만들때 사용 inline : 블록처럼 위아래로 쌓이는 것이 아니라 오른쪽으로 나열할때 사용 inline-block : inline 요소를 옆으로 block 처럼 쌓아 가로 영역을 확보할 때 사용 block 결과 block 결과 block의 영역은 div 처럼 한 줄을 차지한다 즉, 한 요소마다 br(줄바꿈)이 적용된다 inline 결과 inline은 span 태그 처럼 텍스트 만큼의 영역을 차지한다고 생각하면 된다 br(줄바꿈)이 적용되지 않는다 inline 속성에선는 width, height, margin, padding 속성을 적용되지 않는다 inline-block 결과 inline-block은 width와 height, margin, padding 속성이 적용된다…

Form 이란 사용자의 입력값을 서버에 전달하기 위해 사용되는 input, button 태그의 필수 부모 태그 Javascript에서 사용자 입력 값을 활용 하거나 필터링하여 다시 서버로 전달하는 메커니즘 동작 과정 브라우저는 폼 태그에 입력된 데이터를 웹 서버로 보낸다 (GET 또는 POST 방식) 웹 서버는 받은 데이터를 처리하기 위해 벡엔드 웹 프로그램으로 전달한다 (백엔드 웹 프로그램: Django, Node.js, Spring) 웹 프로그램에서 처리된 데이터 결과에 따라 새로운 html 페이지를 웹 서버에 보낸다 웹 서버는 받은 html 페이지를 브라우저에 보낸다 브라우저는 받은 html 페이지를 렌더링하여 보여준다 (렌더링: HTML(구조) + CSS(디자인) + JavaScript(동작) 등 웹 리소스를 브라우저에 있는 렌더링 엔진이 해석하고 화면에 표시하는 과정) Form 태그 속성 action: 폼 데이터를 보낼 서버의 URL을 지정하는 속성 method: 데이터의…

반응 선택자 사용자의 움직임에 따라 발생하는 이벤트에 반응하는 선택자 active active : 사용자가 특정태그를 클릭할때 발생 active 비활성화 active 비활성화 active 활성화 active 활성화 hover hover : 사용자가 커서(마우스)를 특정 태그 위에 배치시켰을 때 active와 같은 결과가 나온다 상태 선택자 입력양식의 상태에 따라 변하는 선택자 checkbox일 때 결과 checkbox focus 활성화 체크박스를 클릭하면 해당 요소가 활성화 되어서 위 css 스타일을 적용한다 일반 구조 선택자 nth-child( ) 특정한 위치에 있는 태그 선택(위치로 구분) 결과 일반 구조 선택자 결과 CSS 주요 문법 - 함수 변수 선언은 —(원하는 변수명)-(속성) 으로 선언해주면 된다. 변수로 선언된 값은 색상, size, 키워드 등 다양한 스타일 값을 선언할 수 있음 :root 선택자에 변수를 선언후 값을 지정하고 다른 선택자 에서 속성값에 var(roo…

Form 사용자로부터 text 및 각종 입력을 전달받아 page가 지정한 서버로 전달(요청)하는 태그 주요한 form : text, pw, textarea, button, summit, radio, select 등 주요 Form 주요한 form: text, password, textarea, button, submit 등 action : 전달할 서버의 url, #은 본인의 페이지를 다시 요청하는 방법 method : 전달할 방식을 선택, get은 url을 통한 노출, post는 url과 별개로 데이터를 전달, 생략하게 되면 디폴트 값은 get이지만 명시적으로 표시하는것을 권장한다 input-id : html 레벨에서 고유의 id를 가지는 속성, 중복될수 없다! input-name : form에서 input 파라메터 전달시 사용될 파라메터의 이름,서버에서 활용 (서버에 id의 값이 아닌 name의 값이 전달된다) ※ id와 name은 일치하는게 보편적이지만, 다르게 해도 문제는 없다…

목록 관련 태그 ul (unordered list) ul 태그 : li를 감싸는 외부 태그를 순서가 필요 없을때 감쌈 li 태그 : 실제 컨텐츠를 담는 목록(list) 태그 현업에서는 실제 메뉴바(nav-bar)를 표현을 할 때 주로 ul-li로 표현한다. 결과 ol (ordered list) ol 태그 : li를 감싸는 외부 태그로 순서가 있을때 활용 li 태그 : 실제 컨텐츠를 담는 목록(list) 태그 type 속성: 순서형식을 정하는 것 (기본값: 숫자) a: 영어 소문자로 설정 i: 로마자 소문자로 설정 I: 로마자 대문자로 설정 결과 table 웹 문서에서 table 형태로 자료를 정리하기 위해 사용되는 태그 행과 열로 구성되어 있으며, 만나는 지점을 셀이라 한다. table 태그 : 테이블을 지칭하는 태그로 가장 밖에 선언된다. tr 태그 : 한개의 행(row)을 나타내는 태그 td 태그 : 한개의 열(column)을 나타내는 태그 colspan: 열을 병합합는 속…

에멧(emmet) 에멧(emmet) 정의 에멧은 HTML과 CSS를 빠르게 타이핑 할 수 있는 문법이며 태그 뿐만 아니라 id,class,속성 값에 규칙 적으로 자동 완성 할 수 있어 html을 편리하게 구성 할 수 있다. 에멧 문법 예시 Child(자식) : > 에멧 문법 결과 위와 같이 코드를 작성하게 되면 아래와 같이 div -> ul -> li 의 순서로 자식요소를 생성한다 Sibling(형제) : + 에멧 문법 결과 작성 순서대로 태그를 생성한다 자식 + 형제 응용 에멧 문법 결과 처음 div는 그냥 생성되고 두번째 div는 p -> span 의 순서로 자식 태그를 생성한다 Climb-up(올라가기) : ^ 에멧 문법 결과 blockquote 태그가 p의 자식 요소로 생성되지 않고 두번째 div의 자식요소로 생성된다 Multiplication(곱셈) : * 에멧 문법 결과 곱셉을 통해 li태그가 5개 생성된다 Grouping (그룹핑) : ( ) 에멧 문법 결과 heade…