TIL2 📌 Q1. React에서 불필요한 렌더링이 발생하는 상황에는 어떤 게 있을까? 부모 컴포넌트가 리렌더링되면서 자식 컴포넌트도 전부 리렌더링 부모가 리렌더링되면, props가 변경되지 않아도 자식이 같이 리렌더링 되는 경우가 많다고 한다. props로 매번 새로운 참조값(객체, 배열, 힘수)을 전달할때 -> React.memo를 써도 의미가 없음 state를 불필요하게 크게 관리할 때 하난의 state 객체에 필드가 많아지면, 특정 필드만 변경이 되도 전체가 다시 리렌더링된다. context 과도 사용 Context Provider의 값이 조금만 바뀌어도 모든 Consumer 컴포넌트가 리렌더링된다. 불필요한 key 사용 오류 map을 돌릴 때 index를 key로 쓰면, 실제 값은 안 바뀌어도 key가 바뀌어서 전체가 리렌더링될 수 있다. 리액트에서 불필요한 리렌더링을 막기 위해서는 useMemo, React.memo, useCallback 같은 최적화 기법이나, stat…

TIL 1 📌 Q1. 왜 var 대신 let과 const를 권장할까? var는 함수 스코프를 가지기 때문에 블록 안에서 선언해도 전역/함수 밖에서도 전체에 영향을 줄 수 있다. 또한 var는 재선언이 가능하고 호이스팅시 초기에 undefined로 할당되어 예측하기 어려운 동작을 유발할 수 있다. let과 const는 블록스코프를 가지기 때문에 블록 안에서 재선언 할 수 없다. 호이스팅이 되더라도 Temporal Dead Zone (TDZ)때문에 블록 밖에서의 접근할 경우에는 에러가 발생한다. 변수가 호이스팅은 되었지만, 아직 초기화되기 전 상태에 있는 구간을 TDZ라고 합니다. 이 구간에서는 변수를 참조하려 하면 ReferenceError가 발생한다. 코드 예시 let과 const 중에서는 어떤 것을 기본으로 쓰는게 좋을까? const를 기본으로 사용하는 것이 좋다. let은 재할당이 필요한 경우에만 사용하면 되고 const를 기본적으로 사용하면 값이 변하지는 않는다는 것을 의도적…

리액트 네이티브 컴포넌트 리액트 네이티브에서 컴포넌트는 UI를 구성하는 기본 단위입니다. 웹의 React와 마찬가지로, 재사용 가능한 UI 조각을 만들 수 있습니다. 기본 제공 컴포넌트와 사용자 정의 컴포넌트로 나뉩니다. 주요 리액트 네이티브 컴포넌트: 역할과 주요 속성 1. View 역할: 레이아웃을 구성하는 가장 기본적인 컨테이너(웹의 div와 유사) 주요 속성 style: 스타일 지정 (배경색, 정렬 등) children: 내부에 다른 컴포넌트 포함 가능 2. Text 역할: 텍스트를 화면에 표시하는 컴포넌트 주요 속성 style: 텍스트 스타일 지정 (색상, 크기 등) numberOfLines: 표시할 최대 줄 수 ellipsizeMode: 텍스트가 넘칠 때 처리 방식 (‘head’, ‘middle’, ‘tail’, ‘clip’) 3. Image 역할: 이미지를 화면에 표시하는 컴포넌트 주요 속성 source: 이미지 경로(로컬 또는 uri) style: 이미지 크기, 모양…

Redux란? 리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 효율적을 관리가 가능하고 Props 없이 다른 컴포넌트에게도 상태를 전달할 수 있다. 하지만 단순히 전역 상태 관리만 하는 프로젝트라면 Context API로 충분하다고 한다. Redux 개념(1) - Action(액션) Redux에서 “액션(action)” 은 상태(state)를 어떻게 바꿔야 하는지를 설명하는 “객체” 다. 말 그대로, “이런 일이 일어났다”고 리덕스에 알리는 역할을 한다. 액션은 무조건 객체이며, 필수로 type 속성을 가져야 한다. Redux 개념(2) - Action Creator(액션 생성 함수) 액션 생성 함수(Action Creator) 는 액션 객체를 반환하는 함수입니다. 왜 액션 생성 함수를 쓸까? 코드 일관성 유지 - 액션 객체를 직접 만들지 않고, 공통된 방식으로 생성 가능 자동화/ 테스트 용…

프로그래머스 최종 프로젝트 프로그래머스 최종 프로젝트는 벡엔드 수료생들과 협업으로 진행된다. 먼저 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 작업을 진행했고 우리만의 특별한 기능을 내세워 차별성을 두는 방향으로…

문제 설명 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. 입출력 예 participant completion return [“leo”, “kiki”, “eden”] [“eden”, “kiki”] “leo” [“marina”, “josipa”, “nikola”, “vinko”, “filipa”] [“josipa”, “fili…

문제 설명 배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면, arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다. arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다. 배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요. 제한사항 배열 arr의 크기 : 1,000,000 이하의 자연수 배열 arr의 원소의 크기 : 0보다 크거나 같고 9보다 작거나 같은 정수 입출력 예 arr answer [1,1,3,3,0,1,1] [1,3,0,1] [4,4,4,3,3] [4,3] mySolution BestSolution…

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…

2024년 회고 기억보다는 기록으로 남기는 것이 더 의미가 있다고 생각이 들어 2024년부터는 회고를 작성하고자 한다. 첫 회고라 조금 어색할 수 있다는 점 참고 부탁드립니다…ㅋㅋㅋ 부산 여행 🏖️ 5월의 모든 교회 행사를 마치고 여름수련회 준비 전 재충전의 의미로 올 해 5월말에 지혜누나, 구연이형, 이슬이누나와 함께 부산여행을 다녀왔다. 처음에는 간단하게 1박2일 어디가지고 시작했던 것이 나의 부산 추천이 최종 낙찰 되어 2박 3일로 가게 되었다. 많은걸 하지는 못했지만 최소 1일 1해운대 진행하고, 저녁에는 맛있는 음식과 함께 재미있는 추억을 남길 수 있어 좋았다. 액티비티 중에서는 요트투어가 제일 좋았다! 👨🏻‍💻 첫 프로젝트 - MCY 출석부 2월에 대현이형과 함께 React를 가지고 청년부 출석부를 만드는 프로젝트를 시작했다. 프로젝트 사전회의 때 경상이형의 많은 도움으로 MUI, 파이어베이스, git & gitHub, 클린 코드 작성, PWA 적용과 같은 다양한 경험을 할 수…

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 메시지는 사람이 읽을 수 있는 텍스트 형식으…

프로토타입 객체 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있습니다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 합니다. 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 합니다. Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용한다. __proto__ vs prototype 프로퍼티 prototype 함수 객체만 가지고 있는 프로퍼티이다 생성된 객체가 부모를 가르킵니다. 즉, 생성자 함수(또는 클래스)가 제공하는 공통 정보를 담 제공하는 객체라고 생각하시면 됩니다. => foo라는 인스턴스는 부모인 Person 객체(정보를 제공하는 객체) 가르킵니다. __proto__ === [[Prototype]]입니다. 함수를 포함한 모든 객체가 가지고 있습니다. 자신의 부모 역할을 하는 프로토…

서버 프로그래밍 서버사이드 렌더링 (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)을 함수에 전달할 때, 참조값(메모리 주소)를 전달 객체 배열 객체 배열

실행컨텍스트 실행 가능한 자바스크립트 코드 블록이 실행되는 환경이다. 실행컨텍스트가 활성화되면 다음과 같은 동작을 수행한다. 활성 객체와 변수 객체 생성 활성 객체 : 각 컨텍스트 실행에 필용한 정보블 담은 객체를 말한다 변수 객체 : 실행 컨텍스트 내부에서 사용되는 지역 변수의 생성이 이루어진다 함수 실행을 보면 보통 함수의 매개변수가 함수 내부에 선언된 지역변수로 사용되기 때문에 실질적으로 활성객체는 변수 객체와 같다고 생각하면 된다. 스코프 정보 생성 this 값 설정 (this 바인딩) 동작 과정 자바스크립트 코드 실행 전역 컨텍스트를 콜 스택에 추가 전역 컨텍스트 내부에 있는 코드들을 순차로 진행 outer에 대한 환경 정보 수집 (함수 내부에서 사용할 변수, 스코프 체인, this참조 => 만약 참조할 객체가 없으면 전역 객체 window 참조) outer 실행 컨텍스트 생성 후 콜 스택에 추가 전역 컨텍스트와 관련된 코드의 실행 일시중단 (콜 스택 맨 위에 outer…

개발자 도구 개발자 도구(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…

문제 설명 정수 start_num와 end_num가 주어질 때, start_num부터 end_num까지의 숫자를 차례로 담은 리스트를 return하도록 solution 함수를 완성해주세요. 제한사항 0 ≤ start_num ≤ end_num ≤ 50 입출력 예 start_num end_num result 3 10 [3, 4, 5, 6, 7, 8, 9, 10] 입출력 예 설명 입출력 예 #1 3부터 10까지의 숫자들을 담은 리스트 [3, 4, 5, 6, 7, 8, 9, 10]를 return합니다. solution.js 분석 Array.from() 메서드를 사용하여 새로운 배열을 생성합니다. 이 배열은 start부터 end까지의 연속된 숫자를 포함한다. 을 전달하여 새 배열의 길이를 설정한다. 두번째 인수로는 매핑 함수를 받아서 배열의 각 요소를 부터 시작하여 1씩 증가하는 값으로 반환한다. 문제 설명 제한사항 입출력 예 입출력 예 설명 solution.js 분석

문제 설명 모든 자연수 x에 대해서 현재 값이 x이면 x가 짝수일 때는 2로 나누고, x가 홀수일 때는 3 * x + 1로 바꾸는 계산을 계속해서 반복하면 언젠가는 반드시 x가 1이 되는지 묻는 문제를 콜라츠 문제라고 부릅니다. 그리고 위 과정에서 거쳐간 모든 수를 기록한 수열을 콜라츠 수열이라고 부릅니다. 계산 결과 1,000 보다 작거나 같은 수에 대해서는 전부 언젠가 1에 도달한다는 것이 알려져 있습니다. 임의의 1,000 보다 작거나 같은 양의 정수 n이 주어질 때 초기값이 n인 콜라츠 수열을 return 하는 solution 함수를 완성해 주세요. 제한사항 1 ≤ n ≤ 1,000 입출력 예 n result 10 [10, 5, 16, 8, 4, 2, 1] 입출력 예 설명 입출력 예 #1 순서대로 연산한 결과를 표로 만들면 다음과 같습니다. 연산 횟수 x 홀짝 여부 0 10 짝수 1 5 홀수 2 16 짝수 3 8 짝수 4 4 짝수 5 2 짝수 6 1 홀수 My solutio…

문제 설명 정수 l과 r이 주어졌을 때, l 이상 r이하의 정수 중에서 숫자 “0”과 “5”로만 이루어진 모든 정수를 오름차순으로 저장한 배열을 return 하는 solution 함수를 완성해 주세요. 만약 그러한 정수가 없다면, -1이 담긴 배열을 return 합니다. 제한사항 1 ≤ l ≤ r ≤ 1,000,000 입출력 예 1 r result 5 555 [5, 50, 55, 500, 505, 550, 555] 10 20 [-1] 입출력 예 설명 입출력 예 #1 5 이상 555 이하의 0과 5로만 이루어진 정수는 작은 수부터 5, 50, 55, 500, 505, 550, 555가 있습니다. 따라서 [5, 50, 55, 500, 505, 550, 555]를 return 합니다. 입출력 예 #2 10 이상 20 이하이면서 0과 5로만 이루어진 정수는 없습니다. 따라서 [-1]을 return 합니다. solution.js every() 모든 원소가 조건에 맞는지 검사하는 메서드이다.…

문제 설명 정수 배열 arr와 2차원 정수 배열 queries이 주어집니다. queries의 원소는 각각 하나의 query를 나타내며, [s, e, k] 꼴입니다. 각 query마다 순서대로 s ≤ i ≤ e인 모든 i에 대해 i가 k의 배수이면 arr[i]에 1을 더합니다. 위 규칙에 따라 queries를 처리한 이후의 arr를 return 하는 solution 함수를 완성해 주세요. 제한사항 1 ≤ arr의 길이 ≤ 1,000 0 ≤ arr의 원소 ≤ 1,000,000 1 ≤ queries의 길이 ≤ 1,000 0 ≤ s ≤ e < arr의 길이 0 ≤ k ≤ 5 입출력 예 arr queries result [0, 1, 2, 4, 3] [[0, 4, 1],[0, 3, 2],[0, 3, 3]] [3, 2, 4, 6, 4] 입출력 예 설명 각 쿼리에 따라 arr가 다음과 같이 변합니다. arr [0, 1, 2, 4, 3] [1, 2, 3, 5, 4] [2, 2, 4, 5, 4] …

문제 설명 정수 배열 arr와 2차원 정수 배열 queries이 주어집니다. queries의 원소는 각각 하나의 query를 나타내며, [s, e, k] 꼴입니다. 각 query마다 순서대로 s ≤ i ≤ e인 모든 i에 대해 k보다 크면서 가장 작은 arr[i]를 찾습니다. 각 쿼리의 순서에 맞게 답을 저장한 배열을 반환하는 solution 함수를 완성해 주세요. 단, 특정 쿼리의 답이 존재하지 않으면 -1을 저장합니다. 제한사항 1 ≤ arr의 길이 ≤ 1,000 0 ≤ arr의 원소 ≤ 1,000,000 1 ≤ queries의 길이 ≤ 1,000 0 ≤ s ≤ e < arr의 길이 0 ≤ k ≤ 1,000,000 입출력 예 arr queries result [0, 1, 2, 3, 4] [[0, 4, 2],[0, 3, 2],[0, 2, 2]] [3, 4, -1] 입출력 예 설명 첫 번째 쿼리의 범위에는 0, 1, 2, 4, 3이 있으며 이 중 2보다 크면서 가장 작은 값은 3…

문제 설명 정수 배열 arr와 2차원 정수 배열 queries이 주어집니다. queries의 원소는 각각 하나의 query를 나타내며, [i, j] 꼴입니다. 각 query마다 순서대로 arr[i]의 값과 arr[j]의 값을 서로 바꿉니다. 위 규칙에 따라 queries를 처리한 이후의 arr를 return 하는 solution 함수를 완성해 주세요. 제한사항 1 ≤ arr의 길이 ≤ 1,000 0 ≤ arr의 원소 ≤ 1,000,000 1 ≤ queries의 길이 ≤ 1,000 0 ≤ i < j < arr의 길이 입출력 예 arr queries result [0, 1, 2, 3, 4] [ [0, 3],[1, 2],[1, 4] ] [3, 4, 1, 0, 2] 입출력 예 설명 각 쿼리에 따라 arr가 다음과 같이 변합니다. arr [0, 1, 2, 3, 4] [3, 1, 2, 0, 4] [3, 2, 1, 0, 4] [3, 4, 1, 0, 2] 따라서 [3, 4, 1, 0, 2]를 …

문제 설명 정수 배열 numLog가 주어집니다. 처음에 numLog[0]에서 부터 시작해 “w”, “a”, “s”, “d”로 이루어진 문자열을 입력으로 받아 순서대로 다음과 같은 조작을 했다고 합시다. “w” : 수에 1을 더한다. “s” : 수에 1을 뺀다. “d” : 수에 10을 더한다. “a” : 수에 10을 뺀다. 그리고 매번 조작을 할 때마다 결괏값을 기록한 정수 배열이 numLog입니다. 즉, numLog[i]는 numLog[0]로부터 총 i번의 조작을 가한 결과가 저장되어 있습니다. 주어진 정수 배열 numLog에 대해 조작을 위해 입력받은 문자열을 return 하는 solution 함수를 완성해 주세요. 제한사항 2 ≤ numLog의 길이 ≤ 100,000 -100,000 ≤ numLog[0] ≤ 100,000 1 ≤ i ≤ numLog의 길이인 모든 i에 대해 |numLog[i] - numLog[i - 1]|의 값은 1 또는 10입니다. 입출력 예 numLog re…

문제 설명 정수 리스트 num_list가 주어질 때, 마지막 원소가 그전 원소보다 크면 마지막 원소에서 그전 원소를 뺀 값을 마지막 원소가 그전 원소보다 크지 않다면 마지막 원소를 두 배한 값을 추가하여 return하도록 solution 함수를 완성해주세요. 제한 사항 2 ≤ num_list의 길이 ≤ 10 1 ≤ num_list의 원소 ≤ 9 입출력 예 num_list result [2, 1, 6] [2, 1, 6, 5] [5, 2, 1, 7, 5] [5, 2, 1, 7, 5, 10] 입출력 예 설명 마지막 원소인 6이 그전 원소인 1보다 크기 때문에 6 - 1인 5를 추가해 return합니다. 마지막 원소인 5가 그전 원소인 7보다 크지 않기 때문에 5의 두 배인 10을 추가해 return합니다. My solution.js Best solution.js 내 풀이보다 더 깔끔한 풀이가 있길래 가져와봤다! 입력 예제 1번을 통해 설명하면 […num_list]를 통해서 원본 배열…

문제 설명 1부터 6까지 숫자가 적힌 주사위가 세 개 있습니다. 세 주사위를 굴렸을 때 나온 숫자를 각각 a, b, c라고 했을 때 얻는 점수는 다음과 같습니다. 세 숫자가 모두 다르다면 a + b + c 점을 얻습니다. 세 숫자 중 어느 두 숫자는 같고 나머지 다른 숫자는 다르다면 (a + b + c) × (a2 + b2 + c2 )점을 얻습니다. 세 숫자가 모두 같다면 (a + b + c) × (a2 + b2 + c2 ) × (a3 + b3 + c3 )점을 얻습니다. 세 정수 a, b, c가 매개변수로 주어질 때, 얻는 점수를 return 하는 solution 함수를 작성해 주세요. 제한사항 a, b, c는 1이상 6이하의 정수입니다. 입출력 예 a b c result 2 6 1 9 5 3 3 473 4 4 4 110592 입출력 예 설명 예제 1번에서 세 주사위 숫자가 모두 다르므로 2 + 6 + 1 = 9점을 얻습니다. 따라서 9를 return 합니다. 예제 2번에서 두…

문제 설명 정수 n과 문자열 control이 주어집니다. control은 “w”, “a”, “s”, “d”의 4개의 문자로 이루어져 있으며, control의 앞에서부터 순서대로 문자에 따라 n의 값을 바꿉니다. “w” : n이 1 커집니다. “s” : n이 1 작아집니다. “d” : n이 10 커집니다. “a” : n이 10 작아집니다. 위 규칙에 따라 n을 바꿨을 때 가장 마지막에 나오는 n의 값을 return 하는 solution 함수를 완성해 주세요. 제한사항 -100,000 ≤ n ≤ 100,000 1 ≤ control의 길이 ≤ 100,000 control은 알파벳 소문자 “w”, “a”, “s”, “d”로 이루어진 문자열입니다. 입출력 예 n control result 0 “wsdawsdassw” -1 입출력 예 설명 수 n은 control에 따라 다음과 같은 순서로 변하게 됩니다. 0 → 1 → 0 → 10 → 0 → 1 → 0 → 10 → 0 → -1 → -2 → …

git checkout -t 에 대해서 아래와 같이 명령어를 진행하면 원격에 있는 브랜치를 로컬로 가져올 수 있다. (여기서 origin은 로컬내에 저장되어 있는 원격 저장소의 주소이다.) fatal: ‘origin/main’ is not a commit and a branch ‘main’ cannot be created from it 프로젝트를 진행하면서 github의 feature/MonthChip 브랜치에서 pull을 받아올려고 했는데 위와 같은 에러가 발생 했다. 해결 방법 구글링 결과 후 아래와 같이 실행해서 해결할 수 있었다! 참조 링크 https://shortcuts.tistory.com/27#google_vignette git checkout -t 에 대해서 fatal: ‘origin/main’ is not a commit and a branch ‘main’ cannot be created from it 해결 방법

MUI란? Material-UI (mui)는 웹 애플리케이션을 빌드하기 위한 리액트 기반의 UI 프레임워크이다. Google이 2014년 안드로이드 스마트폰에 적용하면서 알려졌으며, Material Design을 기반으로하였기에 시각적으로 훌륭하고 사용하기 쉽다. 때문에 개발자들도 스타일리쉬한 쉬운 사용자 인터페이스를 개발을 손쉽게 할 수 있다. 이러한 Material-UI는 컴포넌트 기반 아키텍처를 사용하여 재사용 가능하고 일관된 디자인 요소를 구축하도록 한다. 특징 1. CSS-in-JS 다른 UI 라이브러리들과 마찬가지로, js에서 css를 관리하는 방식으로 스타일링한다. 이는 컴포넌트별로 스타일을 정의하고 적용하는데 유용하다. 2. 컴포넌트 기반 mui는 다양한 UI 요소를 컴포넌트 형태로 제공하며, 이러한 컴포넌트를 조합하여 원하는 인터페이스를 구성할 수 있다. 3. 반응형 디자인 mui 컴포넌트는 다양한 화면 크기와 장치에 맞게 반응한다. 모바일 기기부터 데스크톱까지 일…

Axios란? Axios는 JavaScript에서 HTTP 요청을 쉽게 처리할 수 있도록 도와주는 라이브러리입니다. 주로 비동기 통신(AJAX 요청) 을 수행할 때 사용되며, 브라우저 및 Node.js 환경에서 모두 동작합니다. Axios의 특징 Promise 기반 : fetch API와 달리, 자동으로 응답을 Promise 객체로 반환하여 then/catch 또는 async/await 구문을 사용할 수 있습니다. 요청 및 응답 인터셉터 제공 : 요청을 보내기 전이나 응답을 받은 후 , 데이터를 가공할 수 있습니다. 자동 json 변환 : json 데이터를 자동으로 변환하여 편리한 데이터 처리를 지원합니다. 취소 기능 지원 : 요청을 취소할 수 있어 불필요한 API 호출을 막을 수 있습니다. 타임아웃 설정 가능 : 네트워크 지연이 발생할 경우 일정 시간 후 요청을 자동으로 종료할 수 있습니다 브라우저 및 Node.js 지원 : 클라이언트와 서버 환경 모두에서 사용할 수 있습니다. …

문제 설명 두 정수 a, d와 길이가 n인 boolean 배열 included가 주어집니다. 첫째항이 a, 공차가 d인 등차수열에서 included[i]가 i + 1항을 의미할 때, 이 등차수열의 1항부터 n항까지 included가 true인 항들만 더한 값을 return 하는 solution 함수를 작성해 주세요. 제한사항 1 ≤ a ≤ 100 1 ≤ d ≤ 100 1 ≤ included의 길이 ≤ 100 included에는 true가 적어도 하나 존재합니다. 입출력 예 a b included result 3 4 [true, false, false, true, true] 37 7 1 [false, false, false, true, false, false, false] 10 입출력 예 설명 예제 1번은 a와 d가 각각 3, 4이고 included의 길이가 5입니다. 이를 표로 나타내면 다음과 같습니다. 1항 2항 3항 4항 5항 등차수열 3 7 11 15 19 included…

문제 설명 두 정수 a, b와 boolean 변수 flag가 매개변수로 주어질 때, flag가 true면 a + b를 false면 a - b를 return 하는 solution 함수를 작성해 주세요. 제한사항 -1,000 ≤ a, b ≤ 1,000 입출력 예 a b flag result -4 7 true 3 -4 7 flase -11 입출력 예 예제 1번에서 flag가 true이므로 a + b = (-4) + 7 = 3을 return 합니다. 예제 2번에서 flag가 false이므로 a - b = (-4) - 7 = -11을 return 합니다. solution.js 문제 설명 제한사항 입출력 예 입출력 예 solution.js

문제 설명 문자열 code가 주어집니다. code를 앞에서부터 읽으면서 만약 문자가 “1”이면 mode를 바꿉니다. mode에 따라 code를 읽어가면서 문자열 ret을 만들어냅니다. mode는 0과 1이 있으며, idx를 0 부터 code의 길이 - 1 까지 1씩 키워나가면서 code[idx]의 값에 따라 다음과 같이 행동합니다. mode가 0일 때 code[idx]가 “1”이 아니면 idx가 짝수일 때만 ret의 맨 뒤에 code[idx]를 추가합니다. code[idx]가 “1”이면 mode를 0에서 1로 바꿉니다. mode가 1일 때 code[idx]가 “1”이 아니면 idx가 홀수일 때만 ret의 맨 뒤에 code[idx]를 추가합니다. code[idx]가 “1”이면 mode를 1에서 0으로 바꿉니다. 문자열 code를 통해 만들어진 문자열 ret를 return 하는 solution 함수를 완성해 주세요. 단, 시작할 때 mode는 0이며, return 하려는 ret가 만약…

문제 설명 양의 정수 n이 매개변수로 주어질 때, n이 홀수라면 n 이하의 홀수인 모든 양의 정수의 합을 return 하고 n이 짝수라면 n 이하의 짝수인 모든 양의 정수의 제곱의 합을 return 하는 solution 함수를 작성해 주세요. 제한사항 1 ≤ n ≤ 100 입출력 예 n result 7 16 10 220 입출력 예 설명 예제 1번의 n은 7로 홀수입니다. 7 이하의 모든 양의 홀수는 1, 3, 5, 7이고 이들의 합인 1 + 3 + 5 + 7 = 16을 return 합니다. 예제 2번의 n은 10으로 짝수입니다. 10 이하의 모든 양의 짝수는 2, 4, 6, 8, 10이고 이들의 제곱의 합인 22 + 42 + 62 + 82 + 102 = 4 + 16 + 36 + 64 + 100 = 220을 return 합니다. solution.js 문제 설명 제한사항 입출력 예 입출력 예 설명 solution.js

문제 설명 정수 number와 n, m이 주어집니다. number가 n의 배수이면서 m의 배수이면 1을 아니라면 0을 return하도록 solution 함수를 완성해주세요. 제한사항 10 ≤ number ≤ 100 2 ≤ n, m < 10 입출력 예 num n m result 98 2 1 1 34 3 0 0 입출력 예 설명 60은 2의 배수이면서 3의 배수이기 때문에 1을 return합니다. 55는 5의 배수이지만 10의 배수가 아니기 때문에 0을 return합니다. solution.js 분석 삼항 연산자를 이용해 numebr를 n과 m 으로 각각 나누었을때의 값이 0이면 조건문이 참이기 때문에 1을 return한다. 문제 설명 제한사항 입출력 예 입출력 예 설명 solution.js 분석

문제 설명 정수 num과 n이 매개 변수로 주어질 때, num이 n의 배수이면 1을 return n의 배수가 아니라면 0을 return하도록 solution 함수를 완성해주세요. 제한사항 2 ≤ num ≤ 100 2 ≤ n ≤ 9 입출력 예 num n result 98 2 1 34 3 0 입출력 예 설명 98은 2의 배수이므로 1을 return합니다. 32는 3의 배수가 아니므로 0을 return합니다. solution.js 문제 설명 제한사항 입출력 예 입출력 예 설명 solution.js

문제 설명 연산 ⊕는 두 정수에 대한 연산으로 두 정수를 붙여서 쓴 값을 반환합니다. 예를 들면 다음과 같습니다. 12 ⊕ 3 = 123 3 ⊕ 12 = 312 양의 정수 a와 b가 주어졌을 때, a ⊕ b와 2 * a * b 중 더 큰 값을 return하는 solution 함수를 완성해 주세요. 단, a ⊕ b와 2 * a * b가 같으면 a ⊕ b를 return 합니다. 제한사항 1 ≤ a, b < 10,000 입출력 예 a b result 2 91 364 91 2 912 입출력 예 설명 a ⊕ b = 291 이고, 2 * a * b = 364 입니다. 둘 중 더 큰 값은 364 이므로 364를 return 합니다. a ⊕ b = 912 이고, 2 * a * b = 364 입니다. 둘 중 더 큰 값은 912 이므로 912를 return 합니다. solution.js 분석 result1은 두 숫자를 “을 이용해 문자열로 붙여 type이 string이고 result2은 type…

문제 설명 연산 ⊕는 두 정수에 대한 연산으로 두 정수를 붙여서 쓴 값을 반환합니다. 예를 들면 다음과 같습니다. 12 ⊕ 3 = 123 3 ⊕ 12 = 312 양의 정수 a와 b가 주어졌을 때, a ⊕ b와 b ⊕ a 중 더 큰 값을 return 하는 solution 함수를 완성해 주세요. 단, a ⊕ b와 b ⊕ a가 같다면 a ⊕ b를 return 합니다. 제한사항 1 ≤ a, b < 10,000 입출력 예 a b result 9 91 991 89 8 898 입출력 예 설명 a ⊕ b = 991 이고, b ⊕ a = 919 입니다. 둘 중 더 큰 값은 991 이므로 991을 return 합니다. a ⊕ b = 898 이고, b ⊕ a = 889 입니다. 둘 중 더 큰 값은 898 이므로 898을 return 합니다. solution.js 분석 정수 a,b를 “(백틱)을 이용해 문자열로 합친 결과를 result1, result2 에 저장한다. result1이 result2 …

문제설명 문자열 str이 주어집니다. 문자열을 시계방향으로 90도 돌려서 아래 입출력 예와 같이 출력하는 코드를 작성해 보세요. 제한사항 1 ≤ str의 길이 ≤ 10 입출력 예 solution.js 분석 str을 전개구문을 이용해 [ ‘a’, ‘b’, ‘c’, ‘d’, ‘e’ ]의 배열을 만든다. forEach 구문을 통해 각 배열에 있는 값을 console.log( )를 통해 출력한다. 문제설명 제한사항 입출력 예 solution.js 분석

문제 설명 문자열 my_string과 정수 k가 주어질 때, my_string을 k번 반복한 문자열을 return 하는 solution 함수를 작성해 주세요. 제한사항 1 ≤ my_string의 길이 ≤ 100 my_string은 영소문자로만 이루어져 있습니다. 1 ≤ k ≤ 100 입출력 예 my_string k result “string” 3 “stringstringstring” “love” 10” “lovelovelovelovelovelovelovelovelovelove” 입출력 예 설명 예제 1번의 my_string은 “string”이고 이를 3번 반복한 문자열은 “stringstringstring”이므로 이를 return 합니다. 예제 2번의 my_string은 “love”이고 이를 10번 반복한 문자열은 “lovelovelovelovelovelovelovelovelovelove”이므로 이를 return 합니다. solution.js 분석 repeat을 이용해 m…

문제 설명 두 개의 문자열 str1, str2가 공백으로 구분되어 입력으로 주어집니다. 입출력 예와 같이 str1과 str2을 이어서 출력하는 코드를 작성해 보세요. 제한사항 1 ≤ str1, str2의 길이 ≤ 10 입출력 예 solution.js 분석 join(’ ‘)을 이용해 띄어진 두 문자열을 합쳐 출력한다. 문제 설명 제한사항 입출력 예 solution.js 분석

문제 설명 두 정수 a, b가 주어질 때 다음과 같은 형태의 계산식을 출력하는 코드를 작성해 보세요 제한사항 입출력 예 solution.js 분석 한줄로 입력 받은 값을 한글자씩 구분해 input 변수에 저장한다. 제한사항 입출력 예 solution.js 분석

문제 설명 다음과 같이 출력하도록 코드를 작성해 주세요. 출력 예시 solution.js 분석 자바스크립트 내에서는 특수문자를 처리하기 위해서는 백슬러시를 이용한 특수문자 표기 방법(=escape)이 있다. speacial_str에서는 문자열 표현을 위해 기존 따옴표에서 백틱(`)을 사용했다. \’ escape 문자로 인해 사라지게 될 백슬래시를 보충하기 위해 escape 문자 앞에 백슬래시(\)를 하나 더 추가하여 해결하였다. eascape 문자 특수문자 출력 형태 및 설명 영문표기 \’ ’ single quote \” ” double quote \\ \ backslash \n 커서를 다음 줄로 이동 new line \r 커서를 해당 줄 처음으로 이동 carriage return \t 커서를 탭 만큼 이동 tab \b 백스페이스(←)와 동일하게 작동 backspace \f 커서를 다음 페이지로 이동 (용지 넘김 문자) form feed 문제 설명 출력 예시 solution.js …

문제 설명 영어 알파벳으로 이루어진 문자열 str이 주어집니다. 각 알파벳을 대문자는 소문자로 소문자는 대문자로 변환해서 출력하는 코드를 작성해 보세요. 제한 사항 1 ≤ str의 길이 ≤ 20 str은 알파벳으로 이루어진 문자열입니다. 입출력 예 solution.js 분석 str의 첫번째 인덱스값을 한글자씩 분리해서 str = [a,B,c,D,e,F,g]로 만들었다 forEach 반복문을 사용해 각 인덱스의 값이 대문자인지 소문자인지 구분한다. toUpperCase()를 사용해 해당 값이 대문자이면 toLowerCase()를 사용해 소문자로 변환한다. toLowerCase()를 사용해 해당 값이 소문자이면 toUpperCase()를 사용해 대문자로 변환한다. 변환된 글자들은 str 배열에 저장되어 있고 str.join(”)을 이용해 각 인덱스에 저장된 글자를 한번에 합쳐서 출력한다. 문제 설명 제한 사항 입출력 예 solution.js 분석

문제설명 문자열 str과 정수 n이 주어집니다. str이 n번 반복된 문자열을 만들어 출력하는 코드를 작성해 보세요. 제한사항 1 ≤ str의 길이 ≤ 10 1 ≤ n ≤ 5 입출력 예 입력 #1 출력 #1 solution.js 한줄씩 입력받은 값을 공백을 기준으로 구분해서 input 배열에 선언한다. input의 인덱스 0에 있는 문자열은 str 변수에 선언하고 인덱스 1에 있는 문자열은 Number를 통해 숫자형으로 변환후 n 변수에 선언한다. 2) repeat() 메서드 사용 repeat() 메서드는 문자열을 주어진 횟수 만큼 반복해 붙이 문자열을 반환한다. str에 저장된 문자열을 repeat() 메서는들 사용해 n만큼 반복하면 된다. 문제설명 제한사항 입출력 예 solution.js

문제설명 정수 와 가 주어집니다. 각 수를 입력받아 입출력 예와 같은 형식으로 출력하는 코드를 작성해 보세요. 제한사항 -100,000 ≤ a, b ≤ 100,000 입출력 예 입력 # 1 출력 #1 solution.js 한줄씩 입력받은 값을 공백을 기준으로 구분해서 input 배열에 선언한다. 백틱을 사용해 문자열과 input 배열에 담겨있는 각 인덱스의 값을 한번에 출력한다 문제설명 제한사항 입출력 예 solution.js

문제설명 문자열 이 주어질 때, 을 출력하는 코드를 작성해 보세요. 제한사항 1 ≤ str의 길이 ≤ 1,000,000 str에는 공백이 없으며, 첫째 줄에 한 줄로만 주어집니다. 입출력 예 입력 #1 출력 #1 solution.js readline 모듈 readline 모듈은 JavaScript에 내장된 모듈 자바스크립트에서는 readline 모듈을 이용하면 콘솔을 통해 값을 입력받을 수 있다. readline모듈은 사용자의 입력을 console.log로 출력할 수 있도록 해주는 역할을 한다. 모듈 불러오기 readline 모듈을 이용해 입출력을 위한 인터페이스 객체 만들기 정의한 변수를 이용해 readline 인터페이스 객체를 하나 만들어줍니다. readline interface 객체를 이용해 콘솔에서 표준 입출력을 처리할 수 있습니다. creacteInterface()메서드를 이용해 객체를 만들고, rl 변수에 저장해줍니다. on 메소드 생성한 변수 rl 객체로 입출력과 관련…

Create React App Create React App은 단일 페이지의 React 앱을 만들 위한 방법입니다. 프로젝트 생성을 위한 조건 프로젝트를 생성하기 위해서는 Node.js가 설치되어 있어야 한다. 버전은 각 os에 맞는 recommand 버전을 다운 받으면 된다. 터미널을 열고 아래와 같이 명령어를 입력해 설치된 Node.js의 버전을 확인한다. 프로젝트 생성 과정 터미널을 열고 아래 명령어를 입력 하면 react-test라는 폴더가 생성된다. 아래 명령어를 입력해 vscode에서 폴더 열기 vscode에서 터미널을 열어 아래 명령어를 입력하면 localhost 3000; 이라는 내 컴퓨터의 포트 번호 3000번 서버에서 리액트 앱이 실행된다. 프로젝트 진행 프로젝트를 진행하기 전에 src폴더에는 App.js와 index.js를 제외한 나머지 파일들을 삭제하고 시작한다. App.js useEffect useEffect 함수는 리액트 컴포넌트 렌더링 될때마다 특정 작…

Props란? 부모 컴포넌트로부터 자식 컴포넌트에게 데이터를 보내주는 방법 객체이다. 어떤 prop들을 받는지 검사하게끔 도와주는 역할을 한다. Btn 컴포넌트 함수 props는 객체이기 때문에 { }열어 원하는 속성을 바로 받을 수 있음 { }를 사용하지 않게 되면 props.text, props.fontSize의 방식으로 값에 접근해야한다. text prop은 string 형태의 데이터, fontSize는 number 형태의 데이터가 아닐시 동작은 되지만 콘솔 창에 올바른 형태의 데이터가 아니라고 경고를 알려준다. App 컴포넌트 함수 어떠한 것들을 컴포넌트 안에 넣든간에 HTML안에 영향을 주지 않고 prop이 된다. 컴포넌트 함수에 해당 prop을 등록하고 작성해야만 한다. 전달된 prop들은 하나의 오브젝트로 받게된다. prop을 전달할때의 이름과 받아서 사용할때의 이름은 동일해야한다. props와 stata의 차이점 props: 함수의 매개변수처럼 컴포넌트에 전달된다. …

MinutesToHours 컴포넌트 함수 배열 비구조화 할당 amount는 React.useState(0)을 사용해 초기값을 0으로 설정, flipped는 React.useState(false) 초기값을 false로 설정 하게된다. setAmount, setFliped 함수는 amount와 flipped의 값을 업데이트 할때 사용된다. setFliped(counter + 1)로 로직을 만들 경우 counter는 state를 할당한 값만 참조한다. 즉, setFliped를 여러번 호출하게 되면 값이 항상 2가 된다. 하지만 setFliped((current) => !current)로 로직을 만들 경우 current에는 useStete의 state자체를 참조한다. 여러번 함수를 호출하게 되면 값을 업데이트해서 반영한다. React에서는 Jsx문법을 Javascript로 변환하기 때문에 따로 Javascript를 쓰기 위해서는 {}를 사용해 주어야 한다. App 컴포넌트 함수 Minut…

React Js란? React JS는 기본적으로 Facebook에서 구축하고 유지 관리하는 JavaScript 라이브러리입니다. 또한 웹 애플리케이션의 간단하고 빠르며 확장 가능한 프런트엔드를 구축하기 위한 효율적이고 선언적이며 유연한 오픈 소스 JavaScript 라이브러리입니다. Jxs란? JavaScript에 XML을 추가하여 확장한 문법이다. React Js 필요한 스크립트 태크 React Js를 설치하기 위한 JavaScript 코드 Jsx 문법을 브라우저가 이해할 수 있는 형태로 변환하기 위해 필요하다 컴포넌트 작성 함수형 컴포넌트 선언 렌더링 Container에 Title과 Button을 포함시키기 위해서는 function으로 만들어주어야 함 선언한 컴포넌트를 불러오기 위해서는 형태로 작성해주면 된다. 작성한 jsx를 화면에 렌더링하기 위한 함수 컴포넌트를 페이지에 렌더링하는 역할을 하며, react-dom 모듈을 불러와야 사용가능하다. 는 Jsx로 작성된 컴포넌트를…

Git 커밋 메시지는 왜 중요할까 잘 만든 커밋 메시지는 다른 개발자에게 변경 사항을 전달하는 가장 쉽고 간편한 방법이기 때문입니다. 그래서 기업의 대규모 프로젝트는 당연하고 협력의 비중이 낮은 소규모의 사이드 프로젝트에서도 커밋 컨벤션을 따로 만들어서 규칙을 지키기도 합니다. 커밋 컨벤션이란? git 커밋 메시지 컨벤션(Git Commit Message Convention)이란 프로젝트 참여자들이 일관된 형식의 커밋 메시지를 작성하기 위한 규칙을 말합니다. 현재 여러 개발자 사이에서 관습적으로 통용되는 가이드라인이 있지만, 각 프로젝트에 따라서 별도의 규칙을 만들어 적용하기도 한다고 합니다. 커밋 메시지를 왜 사용할까요? git에서 변경 사항을 저장하기 전에 수많은 변경 사항을 적용했을 수 있으므로 저장할 변경 사항을 git에 알려야 합니다. 가장 좋은 방법은 커밋 메시지를 추가하여 변경 사항을 식별하는 것이기 때문에 커밋 메시지를 사용합니다. 커밋 메시지를 잘 작성해야 하는 이…

Nullish란 nullish 병합 연산자 (??) 는 왼쪽 피연산자가 또는 일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다. a ?? b의 평가 결과는 다음과 같습니다. a가 null도 아니고 undefined도 아니면 a 그 외의 경우는 b nullish 병합 연산자 ??없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같습니다. 다른 예시를 보겠습니다!! 지금은 firstName, lastName 이 이기 때문에 nickName을 반환합니다. 하지만 nickName까지 null 또는 undefined면 “익명의 사용자”가 반환되겠죠? ”??“와 ”||“의 차이 height || 100 결과 height에 0을 할당했지만 0을 falsy 한 값으로 취급했기 때문에 null이나 undefined를 할당한 것과 동일하게 처리합니다. 따라서 height || 100의 평가 결과는 100입니다. height ?? 100…

number 자바스크립트는 라고 하는 하나의 숫자형을 가지고 있습니다. number는 인텔의 iAPX-432 프로세서를 위해 처음 개발된 IEEE 부동소수점 연산 표준 (IEEE 754)을 차용했습니다. 자바스크립트는 숫자형이 하나뿐 이라는 단점을 가지고 있다고 비판 받았지만 오히려 개발자의 생산성을 증가시키게 되었습니다. 왜냐하면 비슷한 여러가지 타입 중 잘못된 타입을 사용할까 봐 고민하며 시간을 낭비하지 않아도 되기 때문입니다. 숫자 0 자바스크립트에는 0으로 표시되지만 0이 아닌 값이 있습니다다. IEEE 754 표준에는 0과 -0 이라는 두 개의 0이 존재하고 다음 경우를 제외하고는 -0의 존재를 무시해도 됩니다. 숫자 리터럴 숫자 리터럴은 각 리터럴의 값과 가장 잘 맛는 숫자 객체에 대한 참조를 생성합니다 어떤경우네는 딱 맞는 값이고 어떤 경우에는 실제 값과 미세한 차이가 나기도 합니다. NaN 은 숫자가 아닌 숫자를 나타내는 값 입니다. 은 를 의미하고 typeof 연산…

큰 정수 자바스크립트의 큰 단점 중 하나는 64비트 정수가 없다는 것입니다. int64형은 최대 923372036854775807까지의 정수를 담을 수 있는데 이것은 자바스크립트의 Number.MAX SAFE INTEGER 범위인 90071992547409에 벗어납니다. 숫자형 추가의 문제점 그렇다면 다른 언어들이 여러개의 숫자형을 가지고 있는 것처럼 자바스크립트에도 추가하는 생각이 들 수 있겠지만 문제가 있습니다. 그 이유는 단순성을 잃게 되고, 잠재적을 다른 버그를 초래할 가능성이 커지게 되기 때문입니다. 모든 자료형 선언과 자료형 변환은 잠재적인 오류입니다. 이 책에서는 큰 정수를 언어에 내장하는것 대신에 라이브러리 형태로 제공했어야 한다고 말합니다. 언어를 사용하는 대부분의 사용자는 큰 정수를 사용하지 않고 큰 정수는 현재의 숫자형으로 풀 수 없는 가장 큰 문제를 해결해 주지도 못하기 때문입니다. 큰 부동소수점 부동소수점 시스템은 세 가지 숫자,즉 계수(coefHCient)…

필수 구현 사항 js TodoList 함수에 setState(nextData)라는 함수를 만듭니다 이 함수는 해당 컴포넌트 초기 생성 시 넘겼던 data 파라메터를 nextData로 대체하고 컴포넌트를 다시 렌더링합니다. 해당 함수를 추가한 뒤, new TodoList(…) 하는 코드 이후에 해당 컴포넌트의 인스턴스에 todoList.setState(새로운 배열) 형태로 데이터만 다시 넣었을 때 컴포넌트가 다시 렌더링 되도록 작성해주세요. setState 함수 호출 후 다시 todoList.render()를 호출하는 것이 아니라, setState 함수 내에서 화면을 다시 렌더링하는 것까지 처리해야 합니다. 소스코드 js render 함수 insertAdjacentHTML을 적용해 += 복합연산자를 사용하지 않는다. setState 함수 TodoList 함수는 data를 매개변수로 받고 있기 때문에 data = nextdata로 설정해 render 함수가 문제 없이 동작하게 한다 외…

Git Rebase란? Git Rebase 란 말 그대로 base를 재설정한다는 의미로, 하나의 브랜치가 다른 브랜치에서 파생되서 나온 경우, 다른 브랜치에서 진행된 커밋을 다시 가져와서 base를 재설정하는 것입니다. Rebase 진행 과정 위 예제는 아래와 같은 명령으로 Rebase 한다. experiment 브랜치로 이동해 master를 base삼아 Rebase 하겠다는 의미입니다. 그러면 내부에서는 master가 base가 되고, C3과 C4의 차이를 임시 저장하는 공간에 저장합니다. 이 임시저장 공간을 라고 합니다. 그리고 base가 되는 master에 Patch들이 적용됩니다 위 내용을 정리해보면 공통 커밋(C2)에서 시작해서 현재 체크아웃한 experiment 브랜치가 가리키는 커밋까지 diff를 차례대로 만들어 Patch에 저장 experiment브랜치가 master브랜치를 가리키게 함 C3에 Patch를 순서대로 적용 마지막으로 아래 명령어로 master 브랜치…

필수 구현 사항 js data의 각 object에 외에 라는 필드를 추가합니다. 해당 값은 true, 혹은 false 값을 지정해주세요. 컴포넌트 내에 text 렌더링 시, isCompleted 값이 true인 경우 태그를 이용해 삭선처리를 해주는 걸 추가합니다. 소스코드 js render 함수의 isCompleted 값에 따른 삭선 추가 item.isCompleted 를 통해 true or false 값에 접근한다. if 문을 사용해 isCompleted 값이 true면 태그가 추가된다. 반대로 isCompleted 값이 false면 태그 없이 생성된다. 결과 js 소스코드 js render 함수의 isCompleted 값에 따른 삭선 추가 결과

필수 구현 사항 html 외의 다른 div를 두 개 더 html 코드에 만듭니다. 의 는 적당한 이름으로 지어주세요. js 외에 todo를 담고 있는 array data를 두 개 더 만듭니다. todo의 내용은 본인의 현재 todo를 담아서 넣으면 더 좋겠죠? 컴포넌트를 총 세 개 만듭니다. 첫 번째 컴포넌트에는 제가 넣어둔 data와 #todo-list에 렌더링하고, 나머지 두 개는 여러분이 추가하신 div + data를 활용해서 만들어주세요. 소스코드 html js TodoList에 id 매개변수 추가 함수에 id 매개변수를 추가해서 document.querySelector를 통해 해당 id 값을 가진 div태그에 접근한다. 각 컴포넌트에 해당되는 data가 출력이 되는걸 볼 수 있다 결과 html js 소스코드 html js TodoList에 id 매개변수 추가 결과

필수 구현 사항 null 혹은 undefined의 데이터가 넘어올때의 데이터 체크 인스턴스 확인하기 배열 확인하기 소스코드 html js 인스턴스 확인 new.target은 new 연산자를 사용했는지 여부를 감지하는 것이다. new 연산자와 함께 생성자 함수로서 호출되면 함수 내부의 new.target은 함수 자신을 가리킨다. new 연산자 없이 일반 함수로서 호출된 함수 내부의 new.target은 undefined다. null or undefined 확인 data가 null or undefined가 넘어오게 되면 false로 취급하기 때문에 Not 연산자와 만나 true가 되어 if문을 실행한다. 배열 확인 파라미터로 입력받은 data가 배열인지의 여부를 boolean 값으로 리턴한다. typeof를 사용해 배열을 검사하면, typeof는 ‘object’를 리턴한다. 왜냐하면 배열은 object의 특수한 한 형태이기 때문이다. 배열이 아닐경우에 false를 리턴하고 Not 연산…

필수 구현 사항 function style의 문법을 사용해주세요. new 키워드를 통해 생성해서 사용됩니다. 파라메터로 아래와 같은 형태의 data를 넘겨받습니다. 와 같은 형태로 파라메터를 넘기고, 생성해서 사용합니다. 해당 컴포넌트에 render 함수를 작성합니다. 이 함수는 파라메터로 넘겨받은 data를 순회하며 각 배열첨자의 text를 html string으로 만든 뒤, todo-list라는 id를 가진 div에 innerHTML을 이용해 렌더링 되도록 합니다. 이 함수는 별도의 파라메터 없이 todoList.render() 형태로 실행되도록 만듭니다. 소스코드 html js render 함수 data 객체에서 값의 순회를 위해 forEach 문을 사용하였다. + data 객체 각각의 요소를 매개변수로 받아 진행한다. 위 코드에서는 2개의 변수를 받고 반복문을 2번 진행한다. item 변수는 객체 각각의 요소를 받기위한 변수로 원하는대로 지정해줘도 좋지만 일반적으로 item…

시작! 개발자는 변수의 이름을 보고 무엇을 하는 것인지 짐작할 수 있게 만들어야 한다. 왜냐하면 코드를 읽기만 해도 프로그램을 설명할 수 있어야 하기 때문이다. 이름 설정 주의점! 모든 변수의 이름은 문자로 시작해서 문자로 끝내야 한다. 이 책에서 자바스크립트는 해서는 안 될 여러 가지를 허용한다고 쓰여 있다. 첫째로 _(밑줄)이다. 로 시작하거나 끝나는 이름들은 일반적으로 public 속성이나 전역 변수를 의미한다. 결국 변수의 앞이나 뒤에 밑줄을 쓰는 것을 개발자의 무능함을 나타내는 지표기에 우리는 절대 앞이나 뒤에 밑줄을 쓰는 일이 없도록 해야한다!! 둘째로 $(달러)기호이다. 는 코드 생성기나 트랜스파일러, 그리고 매크로 처리기에서 사용할 목적으로 추가되었다. 그래서 우리는 코드 생성기 같은 프로그램이 아닌 이상 $(달러) 기호를 사용하지 않는 것이 좋다. 셋째로 숫자가 포함된 변수이다. 순서를 나타내는 서수형 변수는 같이 이름을 짓고 양을 나타내는 기수형 변수는 와 같이…

JS의 탄생 🍰 초창기 웹은 HTML,CSS만으로 이루어졌고 앵커태그를 이용해 문서 이동만 가능한 웹 문서였다. 웹과 이용자가 서로 상호작용하기 위해 HTML 요소를 조작할 수 있는 언어가 필요했다. 그래서 넷스케이프사에서 개발한 Netscape Navigator라는(LiveScript언어를 해석 할 수 있는 엔진을 탑재) 브라우저에서 동작할 수 있는 LiveScript언어를 개발했고 이후 당시에 유명한 자바 프로그래밍의 이름을 따서 JavaScript 라고 이름을 변경했다. 또 마이크로소프트에서는 J스크립트라는 언어와 우리가 잘 알고 있는 internet Explorer라는 브라우저를 출시했다. JavaScript와 J스크립트는 엄연히 다른 언어이기 때문에 개발자들은 각각의 브라우저에 맞게 개발을 진행해야하는 귀찮음을 마주했다. 그래서 넷스케이프사는 웹 페이지에서 동작하는 언어를 표준화하기 위해 자바스크립트 기술 규격을 Ecma 인터내셔널 이라는 단체에 제출했고 표준명세인 ECM…

Fill, Draw 모드 HTML - Fill, Draw 모드 app.js btnMode() 함수 먼저 Fill 모드와 Draw 모드를 한 버튼 안에서 실행하기 위해서 버튼의 텍스트를 바꾸는 작업을 해야한다. 변수를 선언하고 를 할당한다. 버튼을 클릭할때 Fill -> Draw로 바껴야 하기 때문에 함수의 부분에 을 할당하고 을 로 바꾸어 줘야 동적인 함수가 된다. 코드를 실행해보면 버튼을 클릭할때마다 글씨가 바뀌는걸 볼 수 있을 것이다. FrillDraw() 함수 일 때는 버튼의 글씨가 인 상태이다. 그래서 우리는 이 때 그림판을 클릭했을때 지정된 색으로 그림판을 채워주면 된다. if문을 사용해서 일때 ctx.fillRect(0, 0, 800, 800)를 사용해 그림판을 채운다 Erase, Reset 모드 HTML - Erase, Reset 모드 app.js Erase 모드는 그림판을 하얀색 선으로 Draw모드를 하는 것과 같다. ctx.strokeStyle = “w…

Canvas를 이용한 그림판 Html 구조 소스코드 style.css app.js (1) onMove() 함수 이 될때 를 통해 onMove함수의 참 부분이 실행된다. 함수의 event인자는 현재 click 되어지고있는 지점이다. click = mousedown 후에 mouseup이 되어야한다. mousedown = 마우스버튼 내리기 mouseup = 마우스버튼 올리기 를 통해 다음지점으로 선을 연결시킨다. 통해 연결한 선을 채운다. 이 진행될때 되서 if문의 거짓 부분을 실행해 마우스가 움직이는 위치를 시작점으로 바꾼다. 오류발생 그림을 그리는 중에 을 유지한채 그림판 밖을 나갔다 들어온후에 이 됐음에도 불구하고 마우스를 움직이는 것만으로도 그림을 그릴 수 있다. 오류 해결 오류를 해결하기위해 위의 코드를 추가해주자. 이제 마우스가 그림판 밖을 벗어날때도 함수가 실행돼 오류가 해결되는걸 확인할 수 있을 것이다. Html 구조 소스코드 onMove() 함수

색상과 선 굵기 바꾸기 Html style.css app.js colorOptions 를 배열로 바꾼것은 를 사용해 각각의 의 에 를 주기 위함이다. 를 사용하지 않게 되면 는 의 함수가 아니다 라는 로그를 볼 수 있을 것이다. 즉 를 사용하기위해 의 객체인 을 배열로 바꿔주어야 한다. onColorClick() 함수 통해 한 target의 색상을 로 지정 사용해 선의 색상을 지정해준다. 사용해 도형을 채우는 색상을 지정해준다. 사용해 현재 선택한 색상으로 바꿔준다. onColorOptionClick() 함수 우리가 html에서 에 를 설정한걸 기억할 것입니다. 를 통해서 우리가 click한 target의 data-color 값을 colorValue로 지정해 주었습니다. colorOptions onColorClick() 함수 onColorOptionClick() 함수

이미지 선택하기 Html 선택을 할때 비디오 영상인 아닌 image만 선택하기 위해서 를 사용했다. app.js onFileSelect() 함수 을 가리키는 을 으로 반환한다. image 객체를 생성해 속성들을 추가할 수 있다. 함수 내의 명령은 웹브라우저 내의 모든 요소가 준비된 후 실행이 되도록 힌다.. 라는 객체가 이미지를 불러온 후에 함수를 실행한다. Html

Branch merge 현재 작업하고 있는 branch 내용이 다른 branch에서도 필요할때 사용된다. : 병합하기 이전의 서로 다른 branch의 공통의 부모 : 서로 다른 branch를 병합한 새로운 버전 다른 파일을 병합하는 경우 같은 파일에서 다른 부분을 병합하는 경우 원하는 내용을 원하는 branch에 병합하기 위해서 아래와 같이 진행해야 한다. 을 사용해 HEAD를 원하는 branch로 이동시켜야한다. git merge (병합할 내용의 branch명) 같은 파일에서 같은 부분을 병합하는 경우-> 충돌 위와 같은 방법으로 merge를 시도하면 conflict(충돌)가 발생한다 그래서 우리는 충돌이 일어난 부분만 수동으로 수정해주면 가 되는 것는 것을 확인할 수 있다. 2way merge 서로 다른 2개의 branch를 병합할때 같은 부분의 내용이 서로 다르면 충돌이 일어나게 된다. here there 설명 a a 2개의 내용이 같이 a로 병합한다 b s 충돌이 일어…

버전관리 버전 생성 : 파일을 수정하는 곳 : 곧 커밋할 파일에 대한 정보를 저장하는 곳 : 만들어진 버전을 저장하는 곳이다. 즉, 우리가 저장소라가고 불리는 곳이다. : 한번도 버전 관리하지 않은 파일 : 버전을 만들기 위해 파일을 Staging Area 올린다. -m 은 메세지의 약자이고, 뒤에 ""안에 공유할 메시지 내용을 적어주시면 됩니다. 파일이 Repository로 가게 된다. 즉, 버전을 생성한다. add 되야하는 파일이 있거나 delete 된 파일이 있는 상태 일때, 알아서 add 가 진행된 후 commit 이 된다. 단 최초 한번의 add가 되어있어야 사용할 수 있다. 에서 적고자하는 메시지를 넣는걸 추가한 것이다. 와 똑같이 add가 진행된 후에 자동으로 commit이 된다. 과 git 의 차이점 은 지역저장소(local Repository)에 변경사항을 기록한다. 는 커밋된 변경사항을 원격저장소(remote Repository)에 업로드한다. 즉 은 지…

style 마무리 소스코드 login.css red, blue, green, opcity 순으로 값을 주어 배경 색 지정 배경색을 투명하게 지정 music.css volume.css 또는 속성을 통해 기본 CSS 스타일을 사용하지 않겠다고 선언해야만 위와 같은 CSS 스타일링을 반영할 수 있습니다. 그렇지 않으면 맨 기본적인 처럼 보이게 됩니다. clock.css todo.css backGround.css quote.css 소스코드 login.css music.css volume.css clock.css todo.css backGround.css quote.css

Quote 생성 소스코드 changeQuoute 함수 const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)] 0~1사이에 난수를 생성는 Math.random을 사용 발생한 난수를 quotes 배열의 길이 만큼 곱해 0 ~ quotes.length 사이에 난수를 생성 Math.floor를 사용해 소수점 뒷자리를 반올림해 정수를 생성 소스코드 changeQuoute 함수

position 속성 CSS에서 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정한다. 속성은 요소의 정확한 위치 지정을 위해서 , , , 속성과 함께 사용된다 position: static position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용된다 요소들이 HTML에 작성된 순서대로 브라우저 화면에 표시가 된다. 따라서 , , , 속성값은 속성이 ****일 때는 무시된다. 위 결과를 보면 작성된 순서대로 배치 되는걸 볼 수 있다. position: relative position 속성을 relative로 설정하게 되면, 요소를 원래 위치에서 벗어나게 배치할 수 있게 된다. 요소의 위치 지정은 , , , 속성을 이용해서 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있다. position: absolute 속성이 일 때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾는다. 부모 요소(가장 가까운…

List 작성하기 구현 소스코드 handleToDoSubmit(event) 함수 javascript가 발생한 event를 함수의 첫번째 인자로 주게된다. event의 기본 동작을 막는다 newToDo에 input의 값을 저장하고 엔터를 누를때 input을 비우기 위해 사용 newTodoObj 객체를 생성하고 text 에는 newToDo를 각 리스트의 분별력을 주기 위해서 id 값을 리스트가 작성된 시간으로 반영 할당된 객체는 toDos 배열에 채워넣는다 paintToDo()함수 li 태그 생성 생성된 li 태그의 id 값을 newTodoObj의 id로 할당 도 와 동일한 원리로 할당 휴지통 아이콘을 클릭할때 마다 해당 list를 제거하기 위해서 를 사용 를 head에 작성 -> span 태그를 생성 -> 생성된 span2의 class명을 할당 -> 생성된 span2의 Text 값을 할당 이 의 자식으로 들어가진다 이 먼저 선언되었으므로 li의 첫번째 후손으로…

Calendar 버튼 기능 구현 소스코드 preMonth() 함수 ’<’ 버튼을 누를때 이전달로 넘어가야 하기 때문에 를 이용해 현재 달에 -1 값으로 설정 재할당된 dt.setMonth를 가지고 renderCalendar() 호출 nextMonth() 함수 ’>‘버튼을 누를때 다음달로 넘어가야 하기 때문에 를 이용해 현재 달에 +1 값으로 설정 재할당된 를 가지고 호출 todaybtn() 함수 Today 버튼을 누를때 다시 현재 날짜로 돌아오기 위해 dt의 값을 로 할당해야기 때문에 초반에 dt 를 가 아닌 으로 설정한이유 소스코드 preMonth() 함수 nextMonth() 함수 todaybtn() 함수

를 선택해 전체적인 태그들의 **margin과 padding을 없애준다 달력을 가운데 정렬하기위해서 좌우 가운데 정령을 위해 위아래 가운데 정렬을 위해서 캘린더의 크기를 설정 해 줍니다 header안에 있는 날짜와 버튼을 좌우 양쪽 정렬과 상하 가운데 정렬을 해주기 위해서 와 를 사용 그리고 버튼을 한줄로 정렬하기 위해서 사용 사용해 버튼의 선을 제거 사용해 배경색을 지정하지 않음 days 클래스에 있는 요일들을 한줄로 정렬하기 위해 사용 margin : 위 좌우 아래; 속성을 이용해서 margin 값을 줌 요일은 7개이므로 각 요일의 너비를 같게 하기위해서 100%/7의 값을 너비값으로 줌 각 날짜들의 정렬을 위해서 를 사용 아이템들의 자연스러운 줄바꿈을 위해서 을 사용 height를 고정할시 아이템의 갯수에 상관없이 주어진 픽셀에 맞춰 자연스운 줄 바꿈을 할 수 있다. 날짜도 한줄에 7개가 있어야 하므로 100%/7의 값을 너비값으로 줌 토요일과 일요일 colo…

Calendar 기능 구현(1) 위 사진은 바로 우리가 만들 달력의 결과물입니다. 위와 같은 달력을 만들기 위해서 처음부터 천천히 진행해 봅시다!!! 소스 코드 renderCalendar 함수 날짜 구하기 연도를 가져오는 변수 설정 월을 가져오는 변수 설정 document.querySelector(“.year-month”).textContent = dt.getMonth는 반환 값이 현지 시간 기준 월을 나타내는 0 에서 11 사이의 정수를 반환한다 0은 1월, 1은 2월 2은 3월…을 나타내므로 해당 월 출력하기 위해서 +1을 해줘야한다 매달 마지막 요일 날짜 수가 다르기 때문에 해당되는 월의 마지막 날짜와 요일을 얻는 코드를 작성해야 합니다 다음달 마지막 날짜 이번달 마지막 날짜 지난달 날짜의 일부분과 이번달 날짜를 출력하기 위해 변수 설정 새로운 Date객체를 생성할 때, date 파라미터에 0을 전달하게 되면 지난달의 마지막 날의 Date 객체가 생성됩니다 같은 원…

API를 이용해 날씨 정보 가져오기 소스코드 장치의 현재 위치를 가져오게 됩니다 위치를 얻는데 성공하면 onGeok() 함수를 실행하고 실패시 onGeoError() 함수를 실행 API 이용 google에 openWeather -> API -> Current weather data에 접속 로그인 진행 후 영문이름을 클릭하게 되면 MY API KEYS를 통해서 Key값을 확인 onGeoOk 함수 onGeoOk() 함수의 인자는 GeolocationPosition 객체를 가져온다 GeolocationPosition 객체의 position.coords 부분을 보게 되면 위도와 경도를 확인할 수 있다 API 호출 예시를 보게 되면 https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY} 되어 있다 부분을 추가하게 되면 섭씨로된 온도를 확인할 수 있다 fetch(url) 을 통해 반환받은 …

css box-model (1) box-model 이란? 모든 HTML의 요소는 box 모양으로 구성되어 있습니다. 박스모델은 content, padding, border, margin으로 구성되어 있습니다. 구성요소 : 텍스트나 이미지를 포함하는 실질적인 내용을 포함하는 부분 : content(내용)과 border(테두리) 사이에 위치하는 내부 여백 부분 : padding(패딩)과 margin(마진) 사이에 위치하는 테두리 부분 : 가장 바깥쪽에 위치한 외부 여백 부분 width와 height 속성 css에서 width와 height 속성을 설정할때에 가르키는 부분은 content(내용) 부분만을 가르킨다. 다른 부분인 padding, border, margin은 포함되지 않는다. width 속성 위의 코드를 실행해 보면 div태그의 길이가 body 전체의 길이를 갖는걸 볼 수 있다. width에 50%의 값을 할당하게 되면 div 태그의 길이가 절반이 되는걸 볼 수 있다…

border 속성 css에서 border에 제공하는 속성은 다음과 같습니다 dotted: 테두리를 점선으로 설정합니다. dashed: 테두리를 약간 긴 점선으로 설정합니다. solid: 테두리를 실선으로 설정합니다. double: 테두리를 이중선으로 설정합니다. groove: 테두리를 3차원인 입체적인 선으로 border-color에 영향을 받습니다. ridge: 테두리를 3차원인 능선효과가 있는 선으로 설정하며 border-color에 영향을 받습니다. inset: 테두리를 3차원인 내지로 끼운 선으로 설정하며 border-color에 영향을 받습니다. outset: 테두리를 3차원인 외지로 끼운 선으로 설정하며 border-color에 영향을 받습니다. none: 테투리를 없앱니다. hidden: 테투리는 존재하지만 보이지 표현하지 않습니다. border-width 속성 테두리의 두께를 설정합니다 px, em, cm등과 같은 css 크기 단위를 이용해 두께를 직접 설정 할 수 …

margin 속성 에 대해서 은 (테두리)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 결정한다 은 과 달리 속성으로 설정하는 배경색의 영향을 받지 않는다 를 사용해 영역의 크기를 방향별로 지정할 수 있다. 에서 제공하는 속성은 다음과 같습니다. 의 값을 음수로 지정해 해당 요소를 다른 요소의 위에 겹치게 할 수 있습니다. 위에 코드를 실행하게 되면 에 을 할당해서 서로 겹치는걸 볼 수 있다 inherit 속성 에 속성을 적용해 부모인 의 margin-left 속성을 물려받는다. margin의 개별 설정 속성이 4개일때 위 코드의 적용순서와 의미는 다음과 같다 margin-top: 10px margin-right: 20px margin-bottom: 30px margint-left: 40px 속성이 3개일때 위 코드의 적용순서와 의미는 다음과 같다 margin-top: 10px margin-right: 20px margin-bottom: 30px margint-l…

아래에는 제가 보고 clone한 todolist 페이지 입니다!! 모멘떰 HTML구조 작성 소스코드 login login_form input의 유효성을 검사하기 위해서 form 태그를 사용 clock calendar dates js로 날짜를 대입하기 위해서 만들어 둠 style.css 기본구조 작성 box-sizing: border-box box-sizing 에 대한 설명 높이는 100vh를 너비는 100vw를 할당 -> 는 부모 태그와는 상관없이 보이는 Viewport Height의 100%를 다 쓰겠다는 의미입니다. -> 는 부모 태그와는 상관없이 보이는 Viewport width의 100%를 다 쓰겠다는 의미입니다. 테두리된 영역을 좌우, 상하 가운데 정렬하기 위해 를 적용하고 와 사용 main의 영역을 보면 와 두개의 역역을 나눠진다. 와 영역을 보면 의 축이 column로 되어있다. 를 적용하고 를 사용해 축을 으로 설정 body의 영역과 …

mp3 player 기능 소스코드 play 함수 mp3.loop = true : 오디오를 반복 재생함 mp3.volume = soundBtn.value 음량은 0.0 ~ 1.0 사이 값으로 지정할 수 있고, 1.0이 가장 큰 음량 자주 쓰이는 Audio 객체의 속성 audio가 load 될 때 자동재생됨 audio의 재생시점을 5초로 설정함 audio의 길이를 초(seconds) 단위로 반환 audio를 반복 재생함 audio의 경로를 지정함(URL) audio의 음량을 0.2로 지정함 음량은 0.0 ~ 1.0 사이 값으로 지정할 수 있고, 1.0이 가장 큰 음량 자주 쓰이는 Audio 객체의 메소드 오디오를 재생시킴 오디오를 일시정지함 audio를 다시 load함 주로 audio의 src나 설정이 바뀌었을 경우에 사용 소스코드 play 함수 자주 쓰이는 Audio 객체의 속성 자주 쓰이는 Audio 객체의 메소드

배경화면 바꾸기 기능 구현 소스코드 배경이미지 랜덤 생성 이미지 태그를 생성하기 위해 document.createElement(“img”) 를 사용함 createElement()에 생성하고자 하는 태그를 입력 const chosenImage = images[Math.floor(Math.random() * images.length)] 배경 선택을 랜덤으로 하기 위해서 0~1사이에 난수를 생성는 Math.random을 사용 발생한 난수를 images 배열의 길이 만큼 곱해 0 ~ images.length 사이에 난수를 생성 Math.floor를 사용해 소수점 뒷자리를 반올림해 정수를 생성 암호학적으로 안전한 난수를 발생시키지 않아 보안과 관련해서는 사용하지 말아야 한다 그 대신 Web Crypto API의 window.crypto.getRandomValues() 메소드를 이용하여야 한다. bgImage.src = img/${chosenImage} 생성된 img태그의 src를 지정 do…

login 기능 구현 소스코드 JavaScript style.css document는 js가 html에 접근하기 위해서 사용되어짐 HTML 요소의 선택은 다음과 같습니다 document.getElementsByTagName(태그이름): -> 해당 태그 이름의 요소를 모두 선택함. document.getElementById(아이디): -> 해당 아이디의 요소를 선택함. document.getElementsByClassName(클래스이름): -> 해당 클래스에 속한 요소를 모두 선택함. document.getElementsByName(name속성값): -> 해당 name 속성값을 가지는 요소를 모두 선택함.. document.querySelectorAll(선택자): -> 해당 선택자로 선택되는 요소를 모두 선택함. onLogin 함수 event.preventDefault() login_input.value의 값을 가져오기 위해서 form태그의 자동으로 submit되고 페이지…