천진난만 코딩 스토리

강의 내용에는 없던 삭제 기능을 구현해보기로 했다. CRUD 중에서 CR은 구현이 이미 되어있었지만 UD는 아직 되어있지 않았다. 다른 강의에서 보았던 새로운 id를 데이터베이스에 저장하고 그 id를 불러와서 변경시켜 삭제가 되도록 만들었다. 이 과정에서 delete_one을 알게 되었다. delete_one을 하면 간단히 삭제되는 것을 보고 신기했다. 이 delete_one를 적용하는 과정에서 id를 불러올때 수정 기능을 구현하기 위해서 db.book.delete_one({'$set': {'del': 1}}) 이라고 작성을 하였는데 이때 $은 del이라는 id를 변경시킬때 사용하는 것이므로 지금은 id를 불러와서 삭제시키는 것이기 때문에 $을 적용시키면 안된다는 것을 알게 되었다.

강의를 보다가 문득 이미 봤던 강의니까 강의 내용을 토대로 만든 코드를 보며 웹을 만들어보면 좋을 것 같다는 생각을 하여 오늘은 프론트쪽을 해보았다. 코드를 보며 기존에 그냥 넘어갔던 부분에 의문을 품고 조작해보며 새로 알게 된 속성을 공식문서에서 찾아보았다. background-size: cover; 이미지의 비율을 유지하면서 컨테이너를 채울 수 있는 가장 작은 크기 (즉, 이미지의 높이와 너비가 컨테이너를 완전히 덮음 )로 조정하여 빈 공간을 남기지 않는다. 배경의 비율이 요소와 다른 경우 이미지가 세로 또는 가로로 잘린다는 것도 알게 되었다. background-image: linear-gradient; linear-gradient(방향 또는 각도, 색상 그리고_정지점1, 색상_그리고_정지점2, ...

1 ) 배열의 비 구조화 할당 let arr = ["1", "2", "3"]; let one = arr[0]; let two = arr[1]; let three = arr[2]; console.log(one, two, three); //출력 1 2 3 반복되는 긴 코드를 짧게 줄여줄 수 있음. let arr = ["1", "2", "3"]; let [one, two, three] = arr; console.log(one, two, three); //출력 1 2 3 배열 안에 변수를 선언해 주고 그 변수에 arr의 배열을 할당해 주면 됨. let [one, two, three] = ["1", "2", "3"]; console.log(one, two, three); //출력 1 2 3 두 줄의 코드를 합쳐서..

1 ) 특정 값이 여러 값 중 하나인지 확인 function person(name) { return ( name === '오리' || name === '올라프' || name === '상어' || name === '공룡' ); } console.log(person('오리')); // true console.log(person('커피')); // false 특정 값이 여러 값 중 하나인지 확인을 해야 하는 상황일 때 비교해야 할 값이 많아질수록 코드는 길어짐. 이 코드를 짧게 하려면, 배열을 만들고 배열의 includes 함수를 사용하면 됨. const person = name => ['오리', '올라프', '상어', '공룡'].includes(name); console.log(person('상어')); ..

1 ) Truthy & Falsy let a = "string"; let b = Infinity; let c = "0"; let d = 13; let e = []; trueCheck(a); trueCheck(b); trueCheck(c); trueCheck(d); trueCheck(e); //결과 TRUE 비어있지 않은 값과 0을 제외한 숫자는 True. let a = undefined; let b = ""; let c = 0; let d = null; let e = NaN; trueCheck(a); trueCheck(b); trueCheck(c); trueCheck(d); trueCheck(e); //결과 FALSE 비어있는 값이거나 0인 값은 Flase. 2 ) Falsy 연산자 응용 const ge..

- 코드 - function solution(str) { let answer = 0; for (let x of str) { if (x === x.toUpperCase()) answer++; //다른 방법으로도 풀 수 있음 //let num = x.charCodeAt(); //if (num >= 65 && num = 65 && num

6 ) splice, slice splice: 배열에서 특정 항목을 제거할 때 사용. slice: 시작할 인덱스와 끝나는 인덱스를 입력하면 배열을 잘라줌. const arr6 = [1, 3, 5, 7, 9]; console.log(arr6.splice(3, 1)); console.log(arr6.slice(0, 2)); //출력 [1, 3, 5, 9] [1, 3] splice를 하여 arr6 배열에서 3번째 자리인 5가 삭제됨. 여기서 splice는 제거된 배열을 결괏값으로 가지게 됨. slice를 하여 0번째 자리부터 2-1자리인 1번째 자리까지 반환함. (2라서 2번째 자리가 아니라 -1을 해주어야 함) 7 ) shift, pop shift와 pop은 원소를 배열에서 추출해줌. 추출된 함수는 배열에서..

1 ) foreach 배열 안에 있는 원소들을 가지고 어떤 작업을 일괄적으로 하고 싶을 때, forEach문을 사용해 간결한 코드 작성 가능. const arr = [1, 2, 3, 4]; for (let i = 0; i < arr.length; i++) { console.log(arr[i] * 2); } // 출력 2 4 6 8 for문을 사용해서 1,2,3,4 의 배열에 곱하기 2를 하는 값을 로그로 찍고 싶다면 위의 코드처럼 작성할 수 있음. 하지만, foreach 문을 통해서 좀 더 간편하게 사용할 수 있음. const arr = [1, 2, 3, 4]; arr.forEach(function (elm) { console.log(elm * 2); }); // 출력 2 4 6 8 forEach 내장함..

강의를 보며 만든 작품에 css작업과 추가로 더 만들고 싶었던 기능도 구현함. 글자가 있는 부분에는 배경색을 넣었었다가 별론 것 같아서 글자에 그림자를 주는 방법을 택했더니 맘에 들게 나왔음! 체크박스를 구현하는 과정에서 체크가 되어있을 때 다시 누르면 체크가 사라지게 하도록 하고싶었지만, 쉽지않았고... 순수 js보다 React로 하는 것이 더 수월하다는 조언을 들어 다음에 하기로 결정! (쉬어가며 했더니 오래 걸렸다...) https://github.com/wisdom1104/js-for-beginners GitHub - wisdom1104/js-for-beginners Contribute to wisdom1104/js-for-beginners development by creating an acco..

- HTML - 날씨를 나타내 줄 공간을 추가함. - JS - const weather = document.querySelector("#weather span:first-child"); 를 하여 weather라는 변수에 html의 weather span:first-child를 찾아와 저장함. const city = document.querySelector("#weather span:last-child"); 를 하여 city라는 변수에 html의 weather span:last-child를 찾아와 저장함. const API_KEY = "9e3ffc367decd6a5b19153f46b4aa8c6"; 를 하여 https://openweathermap.org/ 이 사이트에 회원가입 후 메일인증하여 API를 받아..