Minwoo Dev.

화살표 함수(Arrow Function)화살표 함수는 변수에 함수를 저장하여 함수처럼 사용할 수 있는 방법이다.function sayHi(){ console.log("Hi");} 위와 같은 형태의 함수를 화살표 함수로 바꾸면,const sayHi = ()=>{ console.log("Hi");} 위처럼 변한다. 화살표 함수도 "함수" 라는 명칭을 가지고 있기 때문에 그냥 함수처럼 사용하면 된다고 생각하는 사람이 많을 거 같다.하지만 함수처럼 모든 곳에 사용할 수 있는 건 아니다. 그 이유는 화살표 함수(Arrow Function)의 this 바인딩과 관련있다. 일반적인 함수는 this를 기본적으로 가지고 있다.따라서 이 this를 함수에서 출력한다면 아래처럼 나타날 것이다.function a(..

디자인 패턴(Design Pattern)프로그램을 개발하다 보면 많은 문제점들이 발생한다. 이러한 반복적으로 발생되는 문제점을 해결하기 위해서는 많은 시간과 노력이 필요할 것이다.개발하면서 이러한 문제들을 최소화하고 수정하기 쉽도록 구조적으로 만든 패턴이 디자인 패턴이다. MVC도 여러 디자인 패턴의 종류 중 하나이다.  MVC란 ?MVC는 각각 Model, View, Controller를 의미한다.애플리케이션 개발 시 사용하며, 개발 영역을 Model, View, Controller의 세가지로 나눈다고 하여 MVC라고 불린다.UI 패턴과 비즈니스 로직 영역이 구분되어 서로 영향을 주지 않아 개발과 유지보수를 용이하게 만들었다. Model - 데이터와 비즈니스 로직을 관리앱이 포함해야할 데이터가 무엇인지..

동기 방식(Synchronous Processing Model)작업을 순차적으로 수행하는 방식여러개의 작업이 있는 경우에 한가지 작업을 수행 중이라면 뒤의 작업들은 대기하여야 한다.앞의 작업이 끝나지 않았다면 요청도 받지 않는다. 구글 플레이스토어와 애플 앱스토어를 모두 사용해본 사람은 알 것이다.구글 플레이스토어의 앱 업데이트는 하나의 앱이 업데이트 중이라면 나머지 앱들은 대기 중이라고 뜨며 업데이트가 진행되지 않는다.  비동기 방식(Asynchronous Processing Model)순서와 상관없이 작업을 수행하는 방식여러개의 작업이 있는 경우에 수행되고 있는 작업이 끝나지 않았더라도 요청을 받을 수 있다.모든 요청을 받아둔 다음 앞의 작업이 끝났다면 수행한다.  앱스토어는 업데이트를 요청하면 여러..

이 게시물은 Udemy 의 [The Web Developer 부트캠프 2024] 를 보고 개인적으로 정리한 게시글입니다. CSS에서 많이 사용하는 div를 정렬하기 위해서 사용하는 방법들 중 하나는 flexbox, display 속성의 flex를 사용하는 것이다. 이번에는 display:flex와 함께 사용되는 justify-content, align-items 에 대해서 알아보자. 우선, display의 flex를 사용한 상태에서 시작하겠다. index.html Let's Play With Flexbox CSS를 연결해두었다. 그리고 5개의 div를 만들어 색상을 다르게 지정하였다. app.css body { font-family: 'Open Sans', sans-serif; } h1 { text-al..

Udemy [The Web Developer 부트캠프 2024] 강의 중 섹션 5 : HTML: 폼과 테이블 _ 57. 마라톤 선수 등록 양식 만들기를 보고 만든 폼입니다. Race Registration! First Name: Last Name: Select a Race: Fun Run 5k Half Marathon Full Marathon Email: Password: Select Age Group 0-9 10-19 20-29 30-39 40-49 50-59 60-69 70-79 80-89 90-99 Submit 결과

Holy Grail Layout을 이번에는 flex가 아닌 float를 이용하여 구현해보았다. Header Web C/C++ Java python 애플은 이번 조치가 애플워치9과 애플워치 울트라2에만 적용된다고 설명했다. 혈중 산소 측정 기능이 없는 애플워치SE 모델은 계속 판매될 예정이다. 애플워치 주요 모델 판매 중단은 혈중 산소 측정 기술 특허를 둘러싼 의료기술회사 마시모(Masimo)와 특허 분쟁 때문이다. 지난 10월 말 미 국제통상위원회(ITC)는 애플이 의료기술업체 마시모의 특허를 침해했다고 최종 결정하고, 애플워치 일부 모델의 미국 내 잠정적 수입 금지 조치를 명령한 바 있다. 해당 조치는 조 바이든 미국 대통령이 12월 25일까지 ITC의 결정을 재검토하도록 지시할 수 있으나, 과거 대통..

Holy Grail Layout은 많은 웹 사이트에서 사용되고 있는 기본적인 구조입니다. 예전에는 CSS에 기능들이 많지 않아 Holy Grail Layout을 구현하는 것이 굉장히 어려운 것으로 여겨졌으나 현재는 많은 CSS 기능들이 나와 비교적 손쉽게 이 Holy Grail Layout을 구현할 수 있게 되었습니다. 이번 게시글에서는 Holy Grail Layout을 display : flex를 사용하여 구현하였습니다. HEADER Web C/C++ Java python 애플은 이번 조치가 애플워치9과 애플워치 울트라2에만 적용된다고 설명했다. 혈중 산소 측정 기능이 없는 애플워치SE 모델은 계속 판매될 예정이다. 애플워치 주요 모델 판매 중단은 혈중 산소 측정 기술 특허를 둘러싼 의료기술회사 마시모..

position : absolute absolute는 '절대적인' 이라는 뜻을 가지고 있다. absolute 속성값은 position : static이 아닌 조상을 찾아 그 조상을 기준으로 움직인다. 조상(부모들) 값들 중에 position 속성값이 기본이 아닌 조상이 없다면 제일 상위 태그인 를 기준으로 위치가 정해진다. 예시를 보자. box1 box2 mini box3 위 코드에서는 position 속성값을 변경한 부모가 없다. 따라서 mini는 가장 상위태그인 태그를 기준으로 정해진 위치만큼 이동할 것이다. 결과 position : absolute를 사용하면 부모자식관계에서 벗어난다. 따라서 적용된 요소는 독립적으로 바뀌게 된다. 결론적으로 부모 요소에서의 공간이 사라지고, 콘텐트의 크기에 맞는 만..

CSS에서 콘텐츠의 위치를 지정해주는 요소에는 position이 있다. 그 중에서 relative, static에 대하여 설명하겠다 position : static 따로 지정해주지 않은 콘텐츠라면 기본적으로 position : static으로 설정된다. 기본값으로 설정되어 있기 때문에 따로 적어주지 않아도 된다. static(정적)인 상태를 의미한다. position : relative 보통 콘텐츠의 위치를 이동시키기 위해 많이 사용한다. 원래 위치에 대해 상대적으로 움직한다는 뜻이다. box1 box2 mini box3 위 코드에서 mini 콘텐츠를 position:relative 를 사용하여 위치를 이동시켰다. left:100px의 의미는 포지셔닝을 relative로 바꾸었으니 왼쪽을 기준으로 100..

css에서 선택자를 사용하다 보면 두 개 이상의 요소를 선택자로 사용하는 것을 본 적이 있을 것이다. 그런 것들은 대개 결합자(Combinaters)로 사용된 것이다. CSS 결합자의 종류 자손 선택자(Descendant Selector) 자식 선택자(Child Selector) 인접 형제 선택자(Adjacent Sibling Selector) 일반 형제 선택자(General Sibling Selector) 하나하나 세부적으로 설명하겠다. 자손 선택자(Descendant Selector) 자손 선택자는 선택한 요소의 해당하는 하위 요소들에 모두 적용하는 선택자이다. 공백으로 나타낸다. 저녁메뉴 후보 짜장면 라면 김치볶음밥 규동 결론 면종류는 많이 먹었으니 김치볶음밥과 규동 중에서 오늘은 간장 베이스가 땡..