lflov

`handleEdit` 라는 이름을 가진 함수를 구현해 봅시다. - 이 함수는 `nickname`, `interests` 라는 두 string을 인자로 받습니다. `nickname`은 유저의 닉네임을, `interests` 는 유저의 관심사를 의미합니다. - `interests` 에는 여러 관심사를 적을 수 있습니다. 그 때 그 관심사의 구분을 콤마(`,`)를 이용합니다. - `nickname` 과 `interests` 가 문제 없이 잘 들어왔다면 유저 정보를 효율적으로 관리하기 위해서 Object에 이 정보를 담아서 관리할 겁니다. - 예를 들어 입력 값이 `nickname = "뚜비"` , `interests = "방탈출,테니스,멍 때리기"` 라고 했을 때 - 아래와 같은 Object를 리턴하도록 구..

Arrow Function 뭔가 익숙하지 않다보니까 이해가 쉽지 않다. 아직까지도 하하하 한번 가보자 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions 화살표 함수 - JavaScript | MDN 화살표 함수 표현(arrow function expression)은 전통적인 함수표현(function)의 간편한 대안입니다. 하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다. developer.mozilla.org //ES5 function() {} //ES6 () => {} function getName() {} //ES6 const getName = () => {} ..

js의 특징 > js는 코드의 순서대로 동작한다! 데이터 타입 : js에서 이해할수 있는 데이터의 종류들 - string = "Text" - number = 4 - boolean : true / false - null : 비어있음을 의미 > 변수 안에 아무것도 없다는것이 아니라 비어있다는 것이 있는것이다. - undefinded : 변수의 값을 부여하지 않은 상태 > null과 undefined는 다른것이다  무엇인가를 선언하기 위해서는 아래의 것을 작성한뒤에 선언해야 한다. - const : 선언 뒤 값 변경(업데이트) 불가 - let : 값 변경(업데이트) 가능 > 주로 const사용 업데이트가 필요한경우 let사용 var은 절대 사용하지 마!! - 변수 : 데이터를 저장하는것 const a = 1..

참 한국나이의 순기능이 있다는거에 참으로 놀라운 순간이었다. 바로 이문제를 풀때 그런 생각이 들었따 문제 들어간다 Date 객체인 birthday를 매개변수로 받는 함수 getWesternAge를 완성해라 여기서 만나이와 한국나이의 차이점을 알아보자 한국나이 : 현재 해 - 태어난 해 (2022 - 1995 = 28짤) 만 나이 : 생일이 지나면 한살 먹는다 태어날땐 0살이다 이걸 한번더 머리에 각인시키고 어떻게 코딩했는지 알아보자 function getWesternAge(birthday) { //date 객체 선언 let wow = new Date(birthday); let now = new Date(); // 생일 년 월 일 let birthYear = wow.getFullYear(); let bir..

아하 30번도 풀어야 겠죠 풀어보기 전에 처음보는 개념들이라 한번 설명을 볼까 한다! 1. 객체의 키를 변수로 접근하기 기존의 객체를 만들때 어떻게 했는지 살펴볼까요? const information = { name: '김개발' } 위 객체가 있을때 information.age = 20; 위 코드를 작성하면 이렇게 되는거였죠? 우리는 이 부분을 변수로 접근하고자 합니다! const verb = 'developes' const project = 'facebook' 위 변수를 이용해서 객체에 넣어보아요~ 어떻게요? information[verb] = project // [A] information.developes = 'facebook' // [B] 요렇게~ booyah~ 위 2개의 방법의 차이점은 [A] ..

Relpit 29번 Map 과 arrow function 을 이용해서 1. 각 배열의 요소의 값이 100초과이면 true / 100이하면 false return 하는 moreThan100을 만들어라 따단! 여기서 map은 어캐쓰냐 Array.map(함수) > Array 배열에 요소 하나하나씩 함수를 실행한다는 느낌 일단 코드를 만들어 봤다 const moreThan100 = nums => { const arr = nums.map(function() { if (nums > 100) { return true; } else { return false; } }) return arr; } https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functio..

Postion 속성을 통해 문서 상에 요소를 배치하는 법을 지정한다! 1. 기준을 잡는다. (예- position: relative;) 2. 이동시킨다. (예- top: 50px;) relative(상대적인) 말 뜻 대로 자기자신을 기준으로 지정한다 absolute(순수한,절대의,전제의) 해당 단어의 뜻중 ‘전제의’ 의 느낌으로 부모요소를 전제로 위치를 지정한다. fixed(결정된,고정된) : 뷰포트를 기준으로 배치된다 ( 고정됨 느낌인데 진짜 고정된다) - viewport는 window상에 페이지를 렌더링 하는것으로 화면 display상의 표시 영역을 뜻합니다. Block 과 inline 기본값이 block인 element들은 단어 그대로 블록 형이다 새줄에서 시작해서 좌우로 최대한 늘어난다. > 다음..

display: flex > 세로 정렬이 되는 태그들 (ex : div)을 가로정렬 시키는 css이다(inline으로 바꾼다는 느낌) 좌측상단을 기준으로 정렬이 default Display: flex 한 태그의 자식들만 flex(가로정렬)이 된다 > 자식의 자식들은 적용되지 않는다 가로 정렬하는데 사용하면 좋고 Justify-content ( justify : 올다고 주장하다 content: 콘텐츠) : 어디로 시작할지 정해주는 css 인데 Justify-content: flex-start > 왼쪽 정렬 Justify-content: flex-end > 오른쪽 정렬 Justify-content: center > 중앙으로 정렬 > 자주 Justify-content: space-around : 일정한 mar..

html css에서 이미지를 넣는 방법은 두가지가 있다아 1. html에서 img태그 사용하는 방법 2. css에서 background-image 로 추가하는 방법 위 2가지 방법의 차이점은 무월 까요? 삐 삐 삐카츄유 여기서 우리가 알아야할 개념이 Semantic Web과 Semantic Tag라는 것이다 Semantic Web : 시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다. 대부분의 인터넷 사용자는 원하는 정보를 취득하기 위해 Google이나 Naver와 같은 검색사이트를 이용한다. “나는 검색된다. 고로 존재한다”는 말이 있을 정도로 ..

function createListenerSlide(carouselElem) 상남자특 : 바로 소개할 기능 코드부터 보여줌 window.addEventListener('load', function(){ var carousels = document.getElementsByClassName('carousel') //캐러셀 이벤트 등록 로직 for(var i=0; i 0){ currentIndex --; scrollDiv(carouselElem, currentIndex) } // 인디케이터 업데이트 updateIndicator(carouselElem, currentIndex); // 슬라이드 버튼 보여줌 여부 업데이트 updateSlideButtonVisalbe(carouselElem, currentIndex..