javascript
[React] onClick props에 함수형 변수의 () 유무 차이
function ExpenseItem(props) { const clickHandler = () => { console.log('click!'); }; return ( Change Title ); } export default ExpenseItem; button의 onClick에 들어간 clickHandler에 괄호를 함께 입력하여 clickHandler()로 들어가면 JSX를 최초에 읽어올 때 실행하게 된다. 하지만 ()를 삽입하지 않고 const명만 clickHandler로 입력해두면 JSX를 읽어온 뒤 클릭하면 clickHandler 함수를 실행하게 된다.
[Vanilla Javascript Study] # 3. fetch API로 움짤 검색기 만들기
3주차에는 TodoList로 공부한 내용을 바탕으로, fetch API를 ajax 요청하여 움짤 검색기를 만들어보는 미션을 받았다. [필수 구현사항] SearchInput 컴포넌트: input의 내용이 변경되면 fetch API를 호출하여 데이터를 가져오는 컴포넌트 SearchResult 컴포넌트: 생성 시 파라메터로 data, target 두 개의 파라메터를 받습니다. data: 렌더링에 사용할 데이터 target : html string을 렌더링 할 element의 표현식 (ex: #search-result) function SearchResult (data, target) { .... } 이번에 진행했던 것처럼 해당 컴포넌트는 setState, render 함수를 갖고 있습니다. [추가 구현사항] ..
[Vanilla Javascript Study] # 2. TodoList 업그레이드
2주차에는 TodoList를 업그레이드하는 작업을 거쳤다. [필수 구현사항] 미션1 html에 있던 스크립트를 TodoList.js로 분리합니다 new TodoList()를 실행했던 구문은 index.js로 분리합니다 index.html에서 해당 스크립트를 로드합니다 [추가 구현사항] ✎ 데이터 모델, LocalStorage 활용 데이터 모델에 isCompleted 추가 [{ text: 'todo text', // 할 일 이름 isCompleted: false, // 완료 여부 }] todo data가 변경될 때 마다 localStorage에 저장 웹페이지에 처음 들어올 때 localStorage에 저장된 data가 있으면 불러오고, 없으면 빈 data로 시작 새로고침 시에도 작성해 둔 todo 유지 ✎..
[Vanilla Javascript Study] # 1. TodoList Component 작성
첫주차에는 간단하게 TodoList를 구현하는 미션이 주어졌다. [필수 구현사항] TodoList Component 작성 function, class 아무거나 사용해도 좋습니다. new 키워드를 통해 생성해서 사용합니다. 파라미터로 아래와 같은 형태의 data를 넘겨받습니다. const data = [{ text: 'JS 공부하기' }, { text: 'JS 복습하기' }] const todoList = new TodoList(data); 와 같은 형태로 파라미터를 넘기고, 생성해서 사용합니다. TodoList 컴포넌트에 render함수를 작성합니다. 이 함수는 파라미터로 넘겨받은 data를 순회하며 각 배열첨자의 text를 html string으로 만든 뒤, todo-list라는 id를 가진 div에 ..
[Vanilla Javascript Study] # 0. 프롤로그
[개요] 사내 프론트엔드 시니어 분(이하 데이빗, 사내 닉네임)이 바닐라 자바스크립트 스터디원을 모집하셔서 냉큼 신청했다. 자바스크립트를 다루고 싶었던 마음을 좀 해소하고자, 그리고 입사하고 나니까 생각보다 프론트를 다뤄야 할 일이 많아서 도움도 받고자. 데이빗이 유료 스터디를 참고하여 전체적인 틀을 짜셨다고 했고, 서치하다보니 해당 스터디를 발견했는데 유료 스터디보다 약간 간소화된 정도로 정리하신 것 같았다. 깃허브 레포지토리를 파서 소스코드를 공유했고 총 3차 미션으로 진행되었다. [주차별 미션] 기본적인 TodoList 작성 TodoList를 모듈시스템화 하기 Fetch API로 짤방 검색 모듈시스템 만들기 [진행방식] 필수 구현사항과 추가 구현사항을 읽고 참여인원들이 코딩한다. 각자 닉네임을 따서..
[Jquery] 동적 Div 생성 / 삭제 시 삭제가 이상하게 될 때
직군, 직무를 선택하면 하단에 태그처럼 표시가 되는 화면을 개발하고 싶다. 그런데 동적으로 생성한 div를 삭제하려고 하니까 삭제 시 카운트 처리가 이상하게 되는 것. 그리고 직무 select문 change메소드 안쪽에다가 삭제버튼 click 이벤트를 넣어야만 동작하고, 밖으로 빼니까 동작하지 않았다. 이유는 다음과 같다. select박스의 change가 일어나기 전까지 태그의 delete button은 없었던 것이기 때문에 select문 change메소드 밖에선 아예 버튼의 존재를 인지하지 못한다. 요로코롬 해주니깐 동작이 잘 됐다. ♥ //직무 드롭다운 변경 시 해당 내용을 배열에 추가하고 tag노출. 배열은 submit 할 때 db로 넘어감 var jikmus=[]; var jikmuCnt=0; v..