개발 기록

JSON이란? - 데이터를 저장하거나 전송할때 많이 사용되는 경량의 데이터 교환 방식을 말함 - JSON은 데이터 포맷일뿐이며, 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐 - Object와 유사하게 {key : value} 형태로 이루어진 파일 포맷 - 자바스크립트를 이용하여 JSON형식의 문서를 쉽게 자바스크립트 객체로 변환할 수 있음 - 프로그래밍 언어와 플랫폼에 상관없이 독립적으로 사용할 수 있음 1. JSON의 구조 JSON은 자바스크립트 객체 리터럴 문법을 따르는 문자열로, name-value 형태의 쌍으로 이루어짐 { "students" : [ { "name" : "Jack", "major" : "Math" }, { "name" : "Anna", "m..

요소가 클릭이 안되고, 아예 인식 조차 못하는 경우에는 zindex값이 낮아서 발생한 문제일 가능성 이런 경우 zindex값을 높여주자 요소가 클릭이 안되고, 아예 인식 조차 못하는 경우에는 zindex값이 낮아서 발생한 문제일 가능성 이런 경우 zindex값을 높여주자

안티패턴 (anti-pattern) 이란 실제 많이 사용되는 패턴이지만 비효율적이거나 비생산적인 패턴을 의미 1. Javascript 코드는 요소 맨 마지막에 사용한다!! 2. map 함수는 항상 key를 적어줘야함!! (map 함수에는 item과 key 요소가 있음) 다만!! 게시물이 특히 삭제될 가능성이 있거나 순서가 변경되거나 중간에 무언가 추가될 때 등의 가능성이 있는 경우에는 절대로 index를 key로 사용하면 안됨!! 이런 경우 따로 고유의 id를 만들것 데이터가 바뀌지 않을 경우에는 사용가능은 함 //주의해야할 코드!! {mainPosts.map((post,index)=>} //개선된 코드 {mainPosts.map((post) => ( ))}

PropTypes로 타입 확인하기 $ npm i prop-types 전달받은 데이터의 유효성을 검증 props에 유효하지 않은 값이 전달되었을 때, 콘솔에 경고문이 출력됨 서비스의 안정성이 높아지므로 귀찮더라도 한번씩 해주는 것을 추천 사용방법 import PropTypes from 'prop-types'; Food.propTypes={ name: PropTypes.string.isRequired, picture: PropTypes.string.isRequired, rating: PropTypes.number } //isRequired는 그 props가 반드시 있어야함을 의미 PropTypes.object일 경우 더 자세하게 적어줄 수 있음 PostCard.propTypes = { post: PropTy..

자바스크립트 single thread 언어, 즉 이벤트를 처리하는 콜 스택이 하나뿐임 그렇기 때문에 여러개의 이벤트를 처리할 때 동기적으로 처리하게 되면 모두 처리될 때까지 다른 업무를 수행하지 못하는 문제가 발생 예를 들어 화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대해 응답해줄지도 모르는데 마냥 다른 코드들을 실행안하고 기다릴 수 없음 따라서 즉시 처리하지 못하는 이벤트들은 web API로 보내서 콜스택이 비어있을 때에 먼저 처리된 이벤트들을 줄세워 다시 이벤트 큐에 줄 세워놓음 (들어온 순서는 중요하지 않고 어떤 이벤트가 먼저 처리되느냐가 중요) 정리하면, 자바스크립트는 동기적이지만 비동기식으로 동작하도록 조작할 수 있음 비동기적 방법에는 대표적으로 callback 함수 / pro..

sort() 함수 자바스크릡트 배열의 내장 함수에 배열 안의 원소를 정렬하는 sort() 함수가 존재 arr.sort([compareFunction]) 매개변수 : compareFunction compareFunction : 정렬 순서를 정의하는 함수 - 첫번째 인수가 두번째 인수보다 작을 경우 : 음수 (-) →첫번째 인수가 앞에 오도록 - 두 인수가 같을 경우 : 0 - 첫번째 인수가 두번째 인수보다 클 경우: 양수 (+) → 첫번째 인수가 뒤에 오도록 ※ compareFunction 파라미터가 생략될 경우, 유니코드 순서에 따라 오름차순으로 정렬 반환값 정렬된 배열 반환 (원본 배열이 정렬됨, 복사본 생성되는 것이 아님 주의!) 사용 예제 문자 정렬 var fruits=["banana", "appl..

JSON ( JavaScript Object Notation ) 데이터를 저장하거나 전송할때 많이 사용되는 경량의 data 교환 형식 JSON 은 데이터 포맷일 뿐이며, 어떠한 통신 방법도, 프로그래밍 문법도 아닌 ❗ 단순히 데이터를 표시하는 표현 방법일 뿐 Object 와 유사하게 {key : value}로 이루어진 간단한 파일 포맷 자바스크립트를 이용하여 JSON 형식의 문서를 쉽게 자바스크립트 객체로 변환할 수 있음 프로그래밍 언어와 플랫폼에 상관없이 독립적으로 사용가능 자바스크립트 문법과 굉장히 유사하지만 텍스트 형식일 뿐 JSON 문법 자바스크립트의 객체와 마찬가지로 key, value 존재할 수 있음 key 값이나 문자열은 항상 쌍따옴표 { "students" : [ { "name" : "Al..

0이상 1 미만에서 부동소숫점의 난수 반환하기 Math.random ( ) : 0이상 1미만의 구간에서 근사적으로 균일한 부동소숫점의 난수를 반환하며 이 값을 사용자가 원하는 범위로 변형할 수 있음 0이상 n 미만에서 부동소숫점의 난수 반환하기 Math.random ( ) * n 0이상 n미만의 정수 난수 반환 Math.floor(Math.random( )*n)) 특정한 두 값 사이의 정수 난수 생성하기 function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; //최댓값은 제외, 최솟값은 포함 }

우선 아이템의 클래스가 뭐있는지 콘솔창에 출력해보기 const links = document.querySelector(".links"); navToggle.addEventListener("click", () => { console.log(links.classList); }); 아이템이 특정 클래스를 가지고 있는지 불리언 값으로 확인해보기 console.log(links.classList.contains("links")); classList.toggle 특정 클래스가 없으면 add해주고, 있으면 remove를 해줌 toggle 사용 안할 시 navToggle.addEventListener("click", () => { if (links.classList.contains("show-links")) { lin..