본문 바로가기

JavaScript

 (10)
TIL 12 인스타그램 로그인창 리팩토링 바로 이전 글에서 인스타그램 로그인창을 구현했던 작업을 올렸는데 그 당시 작성했던 코드를 보면 하나의 함수에 모든 과정을 우겨넣은(?) 코드라고 볼 수 있다. 이렇게 코드를 작성하게되면 지금이야 간단한 기능을 구현하니깐 별 상관없을지 몰라도 조금만 복잡해지면 어느부분이 어느 기능을 구현하는지도 알 수 없는 상황이되어 유지보수가 사실상 불가능해진다는것을 배웠다. 그래서 가독성이 좋고 유지보수가 수월한 코드를 작성하기 위해서는 각각의 기능별로 함수로 쪼개어서 로직을 짜줘야 한다는것을 배워 이번 리팩토링에 적용해보기로 했다. 일단은 어떻게 순차적으로 위에서 아래로 내려갈지 생각을 해봐야한다. 로그인창을 사용자가 이용할때 우선 아이디 혹은 비밀번호창에 입력값이 들어가게 되고 그 입력값을 받아서 로그인 조건에 맞..
TIL 11 인스타그램 로그인창 구현 위 사진이 직접 구현한 로그인창 모습이다. 아이디창과 비밀번호창에 둘 다 최소한 한글자 이상 입력이 되어야 로그인 버튼이 활성화 되는 로직을 구현해봤다. 위 gif를 보면 나오지만 둘 중 하나라도 입력값이 없으면 로그인 버튼이 비활성화 되는것을 볼 수 있다. 저걸 어떻게 구현했는지 밑에 코드로 설명해보겠다. inputId, inputPassword, button 변수에 각각 아이디 패스워드 input 태그와 버튼 태그를 querySelector로 담은 코드다. 그리고 밑에 inputs변수에 input태그들을 전부 다 지정하는 querySelectorAll로 지정했다. 01. querySelector vs querySelectorAll document.querySelector은 일치하는 선택자들 중 일치하..
TIL 09 문제 분할 정복 아래 설명을 읽고 getExamResult 함수를 구현하세요. 인자 scores 는 다음과 같은 객체입니다. 객체의 요소의 갯수 및 키의 이름들은 달라질 수 있습니다. 객체의 값은 다음 9가지 문자열 중에서 하나를 가지고 있습니다. 'A+', 'A', 'B+', 'B', 'C+', 'C', 'D+', 'D', 'F' { '생활속의회계': 'C', '논리적글쓰기': 'B', '독일문화의이해': 'B+', '기초수학': 'D+', '영어회화': 'C+', '인지발달심리학': 'A+', } 인자 requiredClasses 는 다음과 같이 문자열로 된 배열입니다. ['영어회화', '기초수학', '공학수학', '컴퓨터과학개론'] 다음 조건을 만족하는 객체를 리턴하도록 함수를 구현해주세요. scores 객체가 가..
TIL 08 배열 순회 01. for문 배열을 순회하는 가장 기본적인 방법은 for문을 이용하는거다. const arr = [1, 2, 3, 4, 5]; for(let i=0; i num*num); console.log(nums);// [1, 2, 3, 4, 5, 6] console.log(newArr);// [1, 4, 9, 16, 25, 36] 내부 콜백함수에서 인자를 하나만 받으면 배열내 값을 받는것이다. map() 메서드에 이용된 원본배열은 변하지 않는다. 03. Array.foreach() foreach() 메서드는 map메서드와 같이 배열 내의 모든 요소에 접근하지만 다른점은 따로 반환하는게 없다. for문 대신 사용하는 메서드라고 생각하면된다. let newArr = [];// 빈 배열 생성 let arr = [2..
TIL 05 JavaScript 객체 기본 1. 객체의 기본 객체는 데이터와 함수의 집합이다. 데이터의 집합이라는 표현에서 배열과 비슷한 타입이지만 명확한 차이점이 존재한다. 배열은 기본적으로 데이터들이 순서대로 나열되어있는 타입이다. 하지만 객체의 데이터들은 순서가 존재하지 않는다. 객체는 프로퍼티의 키와 값들로 이루어져 있다 let object = {}; // 빈 객체 let person = {name:'Jeon', age: 25}; 객체의 선언은 중괄호( { } )로 한다. 앞서말한 프로퍼티는 name: 'Jeon'으로 키와 값으로 쌍으로 이루어져있는 데이터이다. 객체는 고로 프로퍼티의 집합이다. 2. 객체의 프로퍼티 let person = {name: 'Kim', age: 20, area: 'Seoul', 'second-name': 'Yo..
TIL 04 JavaScript 배열 1. 배열 기본 배열은 자바스크립트에서 사용하는 자료구조 중 하나로 인덱스(자료의 순서를 지칭하는 번호)와 데이터들이 순서차적으로 구성돼있다. 인덱스는 0부터 시작한다. 인덱스를 통해서 배열의 데이터에 접근할 수 있다. 한 배열안에 여러 데이터 타입들이 들어갈 수 있다. let a = [] // 변수 a에 빈 배열을 할당 let name = ['준호', '창민', '길동'] // 기본적인 배열구성 console.log(name[0]) // '준호' 출력 배열을 선언하는방법은 대괄호([ ])를 통해서 한다. 배열의 데이터에 접근하려면 배열이 할당된 변수와 접근하고 싶은 데이터의 인덱스를 이용하면 가능하다. 변수명[인덱스]로 접근이 가능하다. 그리고 접근하는방법으로 다른데이터를 할당해주면 해당 인덱스의 데이..
TIL 03 JavaScript 조건문 논리연산자 1. 조건문 조건문은 조건식이 참 혹은 거짓에따라서 코드의 실행을 결정한다. 조건식이 참이면 해당 코드블록이 실행되고 거짓이면 다음 조건식으로 넘어간다. if(조건식) { // 조건식이 참이면 코드블록이 실행됨 } else { // 위 조건식이 거짓이면 위 코드블록을 스킵하고 // 현재 코드블록이 실행됨 } 위 코드가 기본적인 자바스크립트의 조건문이다. if문 else문 두개로 이루어진 조건문에서는 if문 조건식이 거짓이면 밑에 있는 else구문 코드블럭은 반드시 실행된다. let name = 'Code Jeon'; if(name === 'Code Jeon') { console.log('Hello!!')// 참이기때문에 Hello!! 출력 } else { console.log('Who are you?')..
TIL 02 JavaScript 함수기본 1. 함수 선언, 호출 입력(Input)을 받아서 특정한 기능을 수행하는 함수에 넣어 출력(Output)을 내보내는것이 함수의 기본원리다. function helloWorld(input) { console.log('hello world!') } // 함수 선언 helloWorld(); // 함수호출 자바스크립트에서는 함수는 function키워드로 선언을 한다. 위에 선언된 helloWorld는 선언된 함수명이고 옆에 소괄호에 들어가있는 값이 입력값(Input)이다. 중괄호에 내부에 있는 내용이 함수를 호출하게되면 실행된다. 실행하는방법은 함수명과 옆에 소괄호를 붙여준다. 2. 함수 매개변수(Input), 반환문(Output) function addNumber(num1, num2) { return num1..

티스토리툴바