본문 바로가기

전체 글

 (97)
부트스트랩 grid 이해 문제 화면에 따라서 (아이폰 태블릿 컴퓨터) 원하는 모양으로 보여주고싶다. 원리 0. html 의 div는 한 width를 차지하기 때문엘 div가 차지하면 자동으로 아래로 내려가게 되어있다. 그래서 가로배치를 하는 경우 여러가지 css 속성을 이용하여 해결해야한다. 그러나 이러한 가로배치가 중구난방으로 디자이너와 위치가 정확히 협의가 되지 않는다면 문제가 발생할 수 있다. 그래서 정확한 가로배치를 위해서 만들어진 것이 grid이다 데스크탑에서는 section별로 main, content , footer 4 가지 section 으로 나뉠 수 있고 이 안에서도 content 에 사진, 클릭, 내용을 grid에 따라 row별로 배치할 수 있다. 예를 들어 그리드 시스템은 사진은 6grid 버튼은 1grid로..
메모 #유효성검사 1. html 에 구현 1.1조건을 x : 사용할 수 없는 아이디입니다. 1.2 조건 0 : 사용할 수 있는 아이디입니다. 2. 돔을 이용해서 1.1을 가지고 오고 1.2를 css display"none"으로 사라지게 하는 상황을 만들면 된다. 쉬운 방법 ex)style.display ='none' 현업 방법 class='hide' 1.3 변수.classList.remove('hide) #변수 위치. value (입력 값) ===================== 수도 코드 1.입력창에 코드를 입력할 때 숫자가 4개 이상이면 함수를 구현한다. 변수.onkeyup = function (){ } 2. 함수는 값이 4개 이상일 때 true로 빼는 함수 .
메모 DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경 createElement - CREATE querySelector, querySelectorAll - READ textContent, id, classList, setAttribute - UPDATE remove, removeChild, innerHTML = "" , textContent = "" - DELETE appendChild - APPEND innerHTML과 textContent의 차이 DOM의 더 깊은 내용에 대해서 이해할 수 있다. createDocumentFragment를 활용하여, 더 효율적으로 DOM을 제어할 수 있다. HTML5 template tag 사용법을 이해할 수 있다. ele..
Clousures 0. 클로저란? :Closures A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time. 안에있는 변수가 함수 밖에 있는 변수에 접근이 가능한 것. 이는 안에 있는 함수를 호..
useState #2 숫자 데이터 count하기 const Counter =() =>{ const [value, setValue]=useState(0) const increaseValue=()=>setValue(value+1) const decreaseValue=()=>setValue(value-1) return( 현재 카운터의 값은 {value} 입니다. {value} {value} ) } export default Counter;
useState 사용하여 데이터 추가 및 삭제하기 useState 사용하여 데이터 추가 및 삭제하기 import React,{useState} from 'react' const I= () =>{ const [names, setNames]=useState([ {id: 1, text: "snowman"}, {id: 2, text: "ice"}, {id: 3, text: "snow"}, {id: 4, text: "windy"} ]) const [inputText,setInputText]=useState('') const [nextId,setNextId]=useState(5) {/*1.input에 데이터를 넣었을 때 text가 추가되어야 한다. */ } const onChange= (e)=>setInputText(e.target.value) {/*2.추가 버튼..
나를 성장시켜주는 알고리즘#5문자열 중 가장 긴 문자를 출력해라 문제 문자열을 입력받아 가장 많이 반복되는 문자(letter)를 리턴해야 합니다. 주의 사항 띄어쓰기는 제외합니다. 가장 많이 반복되는 문자가 다수일 경우, 가장 먼저 해당 횟수에 도달한 문자를 리턴해야 합니다. 빈 문자열을 입력받은 경우, 빈 문자열을 리턴해야 합니다. 문제 논리 순서 : 1.객체를 떠올리고 2. 가장 큰 수를 정의한 후 3 각 각 비교하면서 큰수의 속성 값을 바꿔준다. 가장 큰 수를 뽑는 문제에서는 가장 중요한 포인트가 가장 큰 수를 먼저 정의하는 것이다. 1. 그 객체의 속성과 속성 값을 하나 만들자. let object = { mostCount: 0, mostFrequent: '' }; 2. for문을 통해서 만약에 띄어쓰기가 있을 때 띄어쓰기도 카운트 하기 때문에 이를 예외 처리..
나를 성장시켜주는 알고리즘 #4 객체 객체의 활용 : property에 요소에 type이 숫자인 경우 제거해라 목적:제거하는 함수에 인자 값을 객체로 주었을 때 요소에 숫자가 들어가는 경우를 제외하고 출력하는 함수!! function removeNumberValues(obj) { for(let prop in obj) //반복 { if(typeof(obj[prop])=== "number"){ //type을 찾아라!! delete obj[prop] //제거해라 } } } #참고사항 for..in 문은 임의의 순서로 객체의 속성들에 대해 반복합니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in obj의 key 값들을 prop에 다 담아라 그러면..

티스토리툴바