본문 바로가기

전체 글

 (60)
[React] 왜 React를 사용하는가 React를 사용하는 이유 컴포넌트 기반 UI 라이브러리 웹 페이지를 만들다 보면 새로운 페이지를 렌더링하더라도 header, nav 등의 태그를 활용하여 중복된 내용을 보여주는 경우가 있다. 순수하게 HTML, CSS, Javascript만 활용하여 페이지를 제작한다면 주요 내용을 보여주기 위해 중복된 내용은 코드를 복사, 붙여넣기를 반복해야 할 것이다. 주요 내용이 많아진다면 HTML 파일이 무수히 많아질 것이다. 이러한 비생산적인 행위가 발생할 것을 방지하기 위해서 사용성이 높은 코드는 컴포넌트화하여 사용하는 것이 유익하다. 컴포넌트화하여 프론트엔드 프로그래밍을 도와주는 라이브러리가 React이다. 선언형 프로그래밍 React를 알기 전에 Vanilla JS로 웹 페이지에 기능을 부여할 때, 한 줄..
[React] prop-types 사용하기 앱의 규모가 커지면서 데이터의 수가 증가하고, 종류도 다양해진다. 점점 복잡해지는 상황에서 에러를 최소화하기 위해서 적절한 데이터를 사용할 필요가 있는데, prop-types 라이브러리에 내장된 기능을 활용하여 데이터 유효성을 검증하려고 한다. 설치 npm install prop-types 데이터 검증 유형 기본형식 import PropTypes from 'prop-types'; functino App({propString, propNumber, propArray, propObject, propFunc, propBool, propSymbol}) { return ( // ... ); } App.propTypes = { // 문자열 propString: PropTypes.string, // 숫자 propNu..
[JS] 웹 스토리지 - localStorage 다루기 Window.localStorage 브라우저 상에서 데이터를 보관할 수 있는 데이터 저장소 특징 (key - value) 형태로 저장된다. value로 저장된 값은 String 형태로만 저장된다. 페이지가 닫혀도 저장된 데이터는 영구적으로 보관된다. 사용하기 데이터 쓰기(Create) // 형태 localStorage.setItem(key, value); // 예제 localStorage.setItem('myPet', 'Tom'); setItem - key, value 쌍을 이루어 데이터를 저장하는 메서드 setItem 메서드 인수의 첫번째 위치에는 고유한 key 값을 두번째 위치에는 저장할 데이터를 작성한다. 해당 예제에서는 key는 myPet, value는 Tom이 쌍을 이루어 저장되어 있다. 데이터..
[프로그래머스] 신규 아이디 추천 with Javascript 신규 아이디 추천 2021 KAKAO BLIND RECRUITMENT 문제보기 제출답안 function solution(new_id) { const reg = /^[a-z0-9-_.]$/; const tmp = new_id.toLowerCase().split('').filter((v) => reg.test(v)); const answer = []; tmp.forEach((v) => { answer.push(v); if (v === '.' && answer[answer.length - 2] === v) answer.pop(); }); if (answer[0] === '.') answer.shift(); if (answer[answer.length - 1] === '.') answer.pop(); if (a..
[프로그래머스] 숫자 문자열과 영단어 with Javascript 숫자 문자열과 영단어 2021 카카오 채용연계형 인턴십 문제보기 제출 답안 function solution(s) { let answer = ''; const k = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine']; let tmp = ''; for (let i = 0; i < s.length; i++) { if (isNaN(s[i])) { tmp += s[i]; if (k.includes(tmp)) { answer += k.indexOf(tmp); tmp = ''; } } else { answer += s[i]; } } return answer * 1; } 풀이 매개변수 s를 전체 탐색하기 위해 s의 길이만큼 ..
[프로그래머스] 키패드 누르기 with Javascript 키패드 누르기 2020 카카오 인턴십 문제보기 제출답안 function solution(numbers, hand) { let answer = ''; let leftHand = '*'; let rightHand = '#'; const keypad = [[1, 2, 3], [4, 5, 6], [7, 8, 9], ['*', 0, '#']]; for (let i = 0; i < numbers.length; i++) { if ([2, 5, 8, 0].includes(numbers[i])) { // 가운데(2, 5, 8, 0) const tmp = [[], [], []]; // 좌표 [왼손, 가운데, 오른손] let left = 0; let right = 0; for (let j = 0; j < 4; j++) { ..
[프로그래머스] 크레인 인형뽑기 with Javascript 크레인 인형뽑기 2019 카카오 개발자 겨울 인턴십 문제보기 제출답안 function solution(board, moves) { let answer = 0; const tmp = []; moves.forEach((v) => { for (let i = 0; i 1) { if (tmp[tmp.length - 2] === tmp[tmp.length - 1]) { answer += 2; tmp.pop(); tmp.pop(); } } }); return answer; } 풀이 answer - 사라..
[오늘의 학습] 220105 SQL SELECT 명령어 데이터 조회하거나 산술식, 함수 등을 실행할 때 사용하는 명령어 SELECT * FROM Customers → Customers 테이블에서 모든 자료를 불러온다. INSERT 명령어 데이터를 입력하는 명령어 INSERT INTO Customers (CustomerName, City, Country) VALUES ('gildong', 'seoul', 'korea') → Customers 테이블의 CustomerName, City, Country 열에 각각 'gildong', 'seoul', 'korea' 값을 입력한다. 이외의 열에는 null 값이 들어간다. UPDATE 명령어 데이터를 수정하는 명령어 UPDATE Customers SET CustomerName='화성', Cit..

티스토리툴바