전체 글 (18) 썸네일형 리스트형 [JavaScript] 이벤트 함수를 callback 함수로 호출 지난번 학교 수업에서 웹 서비스 개발 프로젝트를 진행했는데, 해당 프로젝트 과정에서 자바스크립트 파일 내에서 특정 엘리먼트에 이벤트 함수를 지정하는 코드를 작성했다. let new_input = document.createElement('input'); new_input.setAttribute("id", theater); new_input.setAttribute("type", 'radio'); new_input.setAttribute("value", theater); new_input.setAttribute("class", 'theater_city'); new_input.setAttribute("name", 'theater_city'); new_input.onclick = theaterCity_onCli.. [React] 여러 개의 input 태그 관리와 setState 벨로퍼트 리액트 튜토리얼 input 태그 부분(https://react.vlpt.us/basic/09-multiple-inputs.html)을 공부하는 중에 이해가 안 되는 부분이 있었다. 특히 const onChange = (e) => { const { value, name } = e.target; setInputs({ ...inputs, // 기존의 input 객체를 복사 [name]: value // name 키를 가진 값을 value로 설정 }); }; 이 부분을 이해하기가 어려웠다. ☝ 첫 번째로는 ...inputs ✌ 두 번째로는 [name]: value 부분이다. 강의 자료에 달린 사람들의 댓글과 구글링을 통해 내 나름대로 해당 내용들을 정리할 수 있었다. ☝ Spread(...) 연산자 우.. [CSS] display: table 속성, 그리고 margin collapsing 이번 학기에 새로 들어간 프로젝트에서 프론트엔드 개발을 리액트로 진행하기로 결정이 나서, 어제부터 허겁지겁 리액트 공부를 시작했다. 리액트 공식 문서로 틱택토 게임 튜토리얼부터 진행하면서 리액트를 손에 익히는 중이다. 개강하고나서 웹 개발 쉰지도 꽤 돼서 사실 html, css, js 부분들도 한번씩 복습하면서 진행하면 좋겠다 싶었다. 그래서 리액트 외에 다른 부분에서도 공부 중에 새로 알게된 내용들도 기록하고자 한다 ❗ 튜토리얼 진행 중에 display: table; 속성을 발견해서, 이와 관련해서 서칭을 좀 했다. 무엇보다 table 속성은 여태껏 거의 써본 기억이 없어서 나한테는 생소한 부분이였다. . . 이 table 속성은 어떨 때 어떻게 사용하는지, 그리고 이 속성에 대해 서칭하다가 새로 알게.. [JavaScript] 06 Array 이번 게시글에서는 배열(Array)을 다뤄 볼 것이다. 코드 상에서 데이터를 다룰 때, JS 뿐만 아니라 다른 언어들에서도 이 배열을 많이 사용하게 된다. 자바스크립트에서 배열 또한 하나의 객체로서, 이 Array 객체 내부에는 여러가지 필드변수와 메소드들이 정의되어 있다. 배열을 사용할 때는 Array 객체의 필드변수 및 메소드들이 정리된 API를 익히고, 각각을 잘 활용할 수 있어야 한다. 1. Declaration 배열을 선언하는 방법에는 크게 두 가지로 나눌 수 있다. const arr = new Array(); const arr = []; 2. Index Position 다른 프로그래밍 언어들과 마찬가지로, 인덱스(index)를 통해 배열 요소에 접근할 수 있다. const fruits = ['.. [JavaScript] 05 Objects 이번 게시글에서는 자바스크립트 테이터 타입중 하나인 오브젝트를 다뤄볼 것이다. 우선, 오브젝트는 서로 연관된 데이터나 기능을 모아두는 컬렉션이며, 자바스크립트의 거의 모든 객체들은 Object의 인스턴스이다. 이러한 오브젝트는 key - value 쌍의 집합체로 구성된다. ( ex. object = { key : value }; ) Objects One of the JavaScript's data types. A collection of related data and/or functionality. Nearly all objects in JS are instances of Objects. 1. 오브젝트 생성 이러한 객체를 생성하는데에는 크게 두 가지 문법이 존재한다. 첫 번째로는 object litera.. [JavaScript] 04 Class 이번 게시글에서는 클래스에 대해 다뤄볼 것이다. 이미 JAVA를 배우면서 어느정도 익혔기 때문에, 너무 세세하게 다루진 않겠다. Class - Template Object - instance of a class 1. Class Declarations class Person { // constructor constructor(name, age) { // fields this.name = name; this.age = age; } // methods speak() { console.log(`${this.name}: hello!`); } } const min = new Person('min', 22); console.log(min.name); // min console.log(min.age); // 22 mi.. [JavaScript] 03 Operators 이번 게시글에서는 자바스크립트 연산자와 if문, 반복문과 같은 제어문을 다룰 것이다. 1. Equality const stringFive = '5'; const numberFive = 5; == ( loose equality, with type conversion ) == 는 타입을 서로 같은 데이터 타입으로 변경한 후 비교연산을 진행한다. ( 타입 무시 ) console.log(stringFive == numberFive); // true console.log(stringFive != numberFive); // false === ( strict equality, no type conversion ) === 은 보통 개발에서 흔히 떠올리는 equal 연산으로, == 와 다르게 데이터 타입을 무시하지 않.. [JavaScript] 02 Function 이번 게시글에서는 함수에 대해 다뤄볼 것이다. 너무 기초적인 내용은 생략하고, 이번 함수 파트에서는 TS 내용도 아주아주 조금씩 언급하면서 글을 작성하고자 한다. 함수 작성 매뉴얼 ( One Function - Do One Thing , Naming ) 기본적으로 하나의 함수는 하나의 일만 수행하도록 작성하는 것이 가장 이상적이다. 그리고 함수의 이름을 정할 때는 그 함수가 어떤 일을 수행하는지 명시할 수 있는 동사를 포함하는 것이 좋다. (ex. create_user) 함수를 작성할 때는 다음과 같이 작성한다. function name(param1, param2) { // body ... return ; } 추가로, 다음과 같이 첫 번째 코드는 두 번째 코드로 변경하여 작성하는 것이 재사용성, 다양성 .. 이전 1 2 3 다음
