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..

심화개념 2 . AJAX (Asynchronous Javascript And Xml) > js에 내장된 XMLHttpRequest 객체를 이용하여 페이지를 새로고침하지 않고도 필요한 데이터를 비동기적으로 불러오는 기법을 말한다! > 백엔드의 데이터를 프론트엔드로 불러오는 것 Xml : 데이터를 태그 방식으로 하는 방식 > xml 무겁다 - 데이터도 크고 시간도 오래 걸린다 > 그래서 현재는 json 형식을 사용합니다! 예시) 더보기 버튼을 클릭했을때 ajax가 없을경우엔 새로운 페이지를 나타냈어야 했는데 ajax 사용하면 더보기 버튼 클릭시에 데이터만 json으로 불러와서 DOM API를 이용하여 가능하다 Ajax 순서 1. 화면이 표시가 완료되고 2. 이벤트가 발생 3. 콜백되어 AJAX데이터 불러옴 ..

심화 개념 1. 클로저 > 내부함수가 실행시점을 포함해서 외부함수의 맥락에 접근할 수 있는것 > 어떤 함수를 정의할때 외부 스코프에 정의된 변수들까지 캡쳐해서 함수가 실행될 때 사용할 수 있도록 합니다. >> 정보 은닉과 캡슐화를 제공할수 있다! 어떤 함수를 만들면 해당 함수가 선언 했을때랑 실행했을때의 타이밍이 다르다 어떤 변수 b가 있는데 선언시에는 0이었는데, 실행될때 시점에는 b가 2가 된다 > 선언될때의 b의 값과 실행됬을때의 b의 값이 다르다 >> 실행될때의 변수 b의 값이 아닌 선언되는 시점의 변수 b를 사용하고 싶을때 사용한다 >>>어떤 함수를 정의할때 외부 에 선언된 변수 캡처하여 선언시점에 사용할수 있도록 한다! 예시 ) Function createTodayExchangeRate(won..

안녕하세요 오늘은 이벤트 처리하기 해볼거에요~ 여기서 이벤트란 : DOM기반의 요소들은 event를 감지해서 그 이벤트가 감지되었을 때 원하는 코드가 실행하도록 할수 있어요! 대표적인 이벤트의 종류로는 click : 해당 객체 클릭했을때 mousemove : 해당 객체 위에 마우스가 이동했을때 keypress : 해당 객체가 선택된 상태에서 키보드 입력이 발생했을때 submit : form의 전송 ( submit) 버튼이 눌렸을때 load : 해당 객체가 화면에로딩이 완료되어 화면에 표시될때 이때 이벤트가 실제로 발생할시 우리가 상황에서 어떤걸 할거야 미리 정해놓는게 이벤트 리스너이다! 이벤트 리스너의 생성방법은 element.addEventListener('이벤트명' , 함수명) ; 이벤트명의 이벤트가..

오늘은 DOM 에 대해서 알아볼까요우~ DOM(document object model) 이란? > 프로그래밍 언어에서 HTML문서의 정보들을 다룰 수 있게 해주는 프로그래밍 인터페이스다 > HTML과 javascript 사이에 중간 매개체 느낌이다! 우리가 작성한 코드. ------> html 마크업이 화면이그려질때 나오는 것들이 요소(element)를 연결해 준다 근데 이걸 웹 브라우저가 Document object로 변경하여서 나오는것이 DOM이다. 그리고 우리가 작성한 javascript 코드가 DOM객체를 조작하여 화면에 나타내게 해주는거다 위 내용을 이쁘게 말하면~? 두둥 탁! > html로 작성된 화면 요소들을 웹 브라우저가 해석하고 프로그래밍 가능한 인터페이스로 제공하는 객체 모델을 의미한다..