study

개인 깃허브에서 원래 쓰던 TIL 저장소를 내 노트북의 원격 저장소로 연결하고 새로 만든 폴더를 push했는데 이런 에러가 발생했다. 먼저 에러 로그를 읽고 검색해보니 remote repository와 local repository가 동기화 되어있지 않아서 발생하는 에러인것 같다. 기존 데이터가 손실되는 것을 막기 위해 push를 막은것이다. 이럴때에는 두가지 방법이 있다. 1️⃣ 강제로 푸시하기 $ git push origin +main // 또는 $ git fetch origin main main 부분에는 branch 이름을 넣어준다. 이때 조심해야 할것은 강제로 branch에 푸시하기 때문에 내가 변경한 내용만 반영되는 것이 아니라, 소스 전체에 push가 되어 버린다. 따라서 기존의 데이터가 손실..

1. 유효성 검사 1) 구현해야 하는 내용 이름이 빈 값인 경우 경고 메시지 출력. 채워졌을 경우 성공 표시 아이디가 5글자 미만인 경우 경고 메시지 출력. 조건이 일치할 경우 성공 표시 비밀번호가 빈 값인 경우 경고 메시지 출력. 채워졌을 경우 성공 표시 비밀번호 확인 입력시 비밀번호와 비밀번호 확인의 내용이 일치하지 않는 경우 경고 메시지 출력. 일치할 경우 성공 표시 모든 조건이 일치하는 경우에만 회원가입 버튼 활성화 회원가입 버튼 클릭시 가입 완료 메시지 띄우기 2) 구현한 코드 📚 HTML Sign Up 이름 이름은 비워둘 수 없습니다 아이디 아이디는 다섯 글자 이상이어야 합니다 비밀번호 비밀번호는 비워둘 수 없습니다 비밀번호 확인 비밀번호가 일치하지 않습니다 회원가입 이름님, 환영합니다! 회원..

1. DOM DOM : Document Object Model. HTML 요소를 JavaScript Object 처럼 조작할수있는 모델이다. DOM을 사용해 HTML로 구성된 웹페이지를 동적으로 움직이게 할 수있다. 1) HTML에 JavaScript 적용하기 태그를 사용한다. 태그는 등장과 함께 실행된다. 웹 브라우저는 작성된 코드를 해석하다 요소를 만나게 될때 HTML 해석을 멈추고 요소를 먼저 실행한다. (참고)12/21 TIL 기록 (1) 를 안쪽에 삽입하는 경우 브라우저가 코드를 순서대로 읽다가 html요소를 읽기 전에 script 요소를 읽고 html 해석을 잠시 멈추게 된다. script 요소에는 html 요소를 콘솔로 출력하는 코드가 있지만 현재 html은 아직 해석되지 않은 상태이다. 따..

🚂 JavaScript 복습하기 - 아직 잘 이해하지 못했거나, 잘 몰랐다가 새로 알게된 부분들을 정리했다. 💡 암묵적 타입 변환(implicit coercion) 개발자의 의도와 상관없이 표현식을 평가하는 도중, 코드의 문맥을 고려한 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것. 숫자 타입의 피연산자가 문자열 타입의 연산자와 + 연산자와 함께 실행될때 +는 문자열 연산자로 동작함. 숫자 타입의 피연산자는 문자열 타입으로 암묵적 변환됨. 숫자 타입의 피연산자가 문자열 타입의 연산자와 +를 제외한 산술연산자(-, *, /, %)와 함께 실행될때 산술연산자는 문자열 타입의 피연산자를 숫자 타입으로 암묵적 변환함. 📂 암묵적 타입 변환의 예시 1. 문자열 타입으로 암묵적 타입변환 2. 숫자 타..

1. 클로저 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. => 지금은 간단하게 외부 함수의 변수에 접근할 수 있는 내부 함수 정도로 생각할것 1) 클로저 함수의 특징 (1) 함수를 리턴하는 함수 2번의 경우, 1번과는 달리 함수의 호출이 두번 발생한다. => 즉, plus2의 리턴 값은 함수 형태이다. 클로저 함수는 함수를 리턴한다. 이것이 클로저의 형태를 만든다. (2) 외부함수의 변수에 접근이 가능한 내부 함수 클로저는 리턴하는 함수에 의해 스코프가 구분된다. 클로저의 핵심은 스코프를 이용해 변수의 접근 범위를 닫는 것이다. 위의 예시 코드에서 a는 외부 함수이고, b는 내부함수이며 각각의 스코프는 분리되어 있다. 이미지에서 볼수있듯이 외부 함수는 내부 함수의 변수(이미지에서는 b)에 접근..

1. 원시 자료형 객체가 아니면서 메서드를 가지지 않는 데이터. 원시 자료형은 모두 데이터가 하나의 정보를 담고 있다. 데이터 보관함 한칸 안에 하나의 데이터를 넣을 수 있는 것이다. 1) 원시 자료형의 종류 String Number Bigint Boolean Undefined Symbol null 2) 원시 자료형의 특징 - 모든 원시 자료형은 하나의 데이터를 담고 있다. - 모든 원시 자료형의 값은 변경이 불가능하지만 변수에 다른 데이터를 할당할 수는 있다. - 원시 자료형의 값을 변수에 할당하면 변수에는 실제 값이 저장된다. - 원시 자료형이 할당될 때는 변수에 값(value) 자체가 담긴다. 📂 정리 let a = 10; let b = a; b = 100; // a의 값은? => 10 consol..

1. 객체 객체는 다양한 타입의 답을 하나의 단위로 구성한 복합적인 자료구조이다. 또한 객체는 변경 가능한 값이다. const object = { name: 'harry', age: 20 } - 0개 이상의 프로퍼티(속성)으로 구성 - 프로퍼티는 키(key)와 값(value)로 구성되어있으며 객체의 상태를 나타내는 값 - 메서드는 함수가 객체의 프로퍼티 값이 되는 경우. 프로퍼티를 참조하고 조작할 수 있는 동작을 말함 1) 객체의 값에 접근하기 (1) Dot notation 객체.속성 형태로 사용. 정해진 속성의 이름이 있을때만 사용할 수 있고, 속성이 동적으로 변할때는 사용할 수 없다. (2) Bracket notation 객체[속성] 형태로 사용. 속성의 값이 동적으로 변할때에도 사용할수 있다. 주의..

1. 배열 배열은 여러개의 값을 순차적으로 나열한 자료구조를 뜻한다. 1) 요소와 인덱스 const arr = ['year', 'month', 'day']; - 요소(element) : 배열의 값. 자바스크립트의 모든 값은 배열의 요소가 될 수 있다. - 인덱스(index) : 요소가 배열에서 자신의 위치를 나타내는 0 이상의 정수. 즉 배열의 순서. 💡 console.table() console.table() 사용시 배열 요소와 인덱스 값을 표 형태로 한눈에 볼 수 있다. 2) 배열 요소에 접근하기 arr[0]; // 'year' arr[1]; // 'month' arr[2]; // 'day' 배열 요소에 접근할때는 대괄호 표기법을 사용한다. 대괄호 내에는 접근하고 싶은 요소의 인덱스를 지정한다. 위 ..

하루 늦은 TIL 겸 일일 회고...! 전날 만들었던 계산기 목업에 자바스크립트를 추가해 실제 계산기처럼 동작하도록 만들었다. 앗 계산기 가능하니까 실제 계산기가 맞나 아무튼 이번에는 계산기를 구현한 코드 내용과 이해한 내용을 정리해보려고 한다. 📂 두가지 값만 가지고 연산하는 계산기 1. 첫번째 숫자 입력 if (action === "number") { firstOperend.textContent = buttonContent; } 클릭된 버튼이 숫자버튼이라면 첫번째 값에 입력한 버튼의 숫자값을 할당한다. 2. 두번째 숫자 입력 if (action === "number") { // 첫번째 숫자가 0이 아니라면(입력된 값이 있다면) 버튼을 클릭했을때 두번째 칸에 버튼에 적힌 숫자를 입력 if (firstO..

우선 오늘 만든 계산기 목업~!~!~! 왼쪽은 심플한 파스텔톤이고 오른쪽은 윈도우95 컨셉으로 css를 작성했다. 또 모든 레이아웃은 flex를 사용해서 구현했다! See the Pen calculator mockup by moondrop0816 (@moondrop0816) on CodePen. See the Pen Untitled by moondrop0816 (@moondrop0816) on CodePen. 모든 레이아웃을 flex로 구현하면서 어려웠던 점은 역시 크기를 맞추는 일었다. 맨 아래 0 버튼의 경우 기본 사이즈의 2배만큼의 크기를 차지해야하는데 flex-grow만 사용했을때는 뜻대로 되지 않았다. 그래서 큰 버튼의 경우 기본 사이즈를 위해 주었던 flex-basis를 auto로 변경하고 w..