분류 전체보기116 자바스크립트 File input 동적 추가, 삭제하기(이벤트 위임) 서론 💭 전에 진행했던 프로젝트에서 j쿼리를 이용해 작성한 코드를 자바스크립트로 바꾸는 과정을 진행하고 있는데 약간의 애를 먹었던 동적으로 input file 태그를 추가해주는 작업! 파일 추가 버튼을 누르면 input이 추가 되고 추가된 삭제 버튼을 누르면 해당 input이 삭제되는 기능이다. input 태그는 잘 늘어나는데 삭제가 뒤죽박죽으로 됨, 삭제는 되는데 파일 선택이 안 됨, 걍 삭제가 안 됨 등 다양했는데 어쨌는 해내었다 ㅎ JSP 일부 HTML 삽입 미리보기할 수 없는 소스 메인이미지는 이미지 한 장만 업로드 할 수 있도록 구현했기 때문에 상세이미지에만 기능을 적용했다. input 태그의 name 값으로 각각의 input을 구분하도록 했고 동적으로 input 태그가 추가될 곳은 div 태그.. 2023. 4. 29. 리액트 찍먹 3 - Component 컴포넌트 컴포넌트는 쉽게 말해 UI를 구성하는 UI 요소를 의미한다. 리액트 홈페이지의 공식 문서에 따르면 컴포넌트를 사용하면 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다고 설명한다. '재사용 가능'과 '개별적으로 살표 볼 수 있음'이 핵심이라고 볼 수 있을 것 같다. 컴포넌트는 간단히 이런식으로 사용할 수 있다. 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것이다. 함수 안에 UI를 제작하여 컴포넌트를 사용할 부분에 HTML 태그를 사용하는 것 처럼 을 써주면 되는 것! 이로써 HTML을 줄여 쓸 수 있는 것이다. 이렇게 함수로 작성한 컴포넌트를 함수 컴포넌트라고 호칭하고 ES6의 class를 사용하여 정의할 수도 있는데 클래스 컴포넌.. 2023. 4. 21. 리액트 찍먹 2 찍먹 과정인 만큼 리액트로 간단하게 블로그 UI를 구성 했다! 1. navbar 생성 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 차례대로 App.js와 App.css App.js의 필요없는 부분을 모두 삭제하고 네이게이션 bar만 간단히 생성했다. (정말 구색용 ㅎㅎ..) class 대신 className을 사용할 것! 자동완성 덕분에 헷갈릴 일은 없다. 반응형도 잘 적용 되었다! 2. 제목과 내용을 보여주는 List - state로 변수 만들기 HTML 삽입 미리보기할 수 없는 소스 state로 제목 데이터를 저장했다. App() 함수의 return 위에 작성해주면 된다. state를 사용하려면 js 파일 최상단에 꼭 import React, { useState } .. 2023. 4. 14. 리액트 찍먹 1 1. 리액트 설치 및 셋팅 node.js와 VS Code 다운로드가 필요하다. LTS 말고 현재 버전(비번역은 Current 어쩌고라 나왔을 것)을 설치 했다. (VS Code는 이미 사용 중이었어서 캡쳐 패스...) 다운로드가 완료 되었으면 Work Space를 생성해야 한다. 자신이 원하는 위치에 원하는 이름으로 원하는 폴더를 만들면 된다. 나는 C드라이브에 생성해주었다. 폴더 생성 후 상단 메뉴 중 File-Opend Folder로 방금 생성한 폴더를 불러오고 위와 같이 터미널에 npx create-react-app '프로젝트명' 을 입력해준다. 프로젝트를 생성하는 방법이다. 코드 입력 전 빨간 밑줄친 부분을 확인 해야하는데 빨간 밑줄이 본인이 생성한 폴더명으로 끝나야 폴더를 잘 불러온 것이다. 코.. 2023. 4. 13. jQuery를 자바스크립트로 바꾸기 프로젝트를 진행하면서 자바스크립트보단 j쿼리를 많이 썼었다. 이유는 단순히.... 코드의 생김새(?)가 자바스크립트보다 예뻐보였다. 더 간결해 보였고 있어 보였달까 ㅋㅋ 선생님도 j쿼리를 더 써보라고 하셨었다. 근데 알고보니 j쿼리는 너무나 무거운 라이브러리라 신문물을 받아들이지 않는 곳 제외하면 실무에서 거의 쓰지 않는다고!!!! 그리고 확실히 대세는 리액트나 뷰! 공부를 하면 할수록 성능 같은 것을 알아 가는 것도 큰 재미이다. 아무튼 그래서 신나게 j쿼리로 작성 했던 코드들을 자바스크립트로 바꿔보고 있다. 열심히 골머리 앓으면서 짠 코드가 있는데.. 그거도 j쿼리인데.. 눈물을 흘리며 진행중 ㅋㅋㅋ 이제 더 심화해서 타입스크립트로도 바꿔봐야지 이런 과정도 리팩토링이라고 할 수 있나 밑에는 몇 가지 .. 2023. 4. 11. 자바스크립트 프로토타입? 자바스크립트는 프로토타입 Prototype이라는 공간을 가지고 있다. 프로토타입은 생성자 함수를 사용해 생성된 객체가 공통으로 가지는 공간을 의미한다. //생성자 함수 만들기 function Student(name, korean, math, english) { this.이름 = name; this.국어 = korean; this.수학 = math; this.영어 = english; //메서드 this.getSum = function() { return this.국어 + this.수학 + this.영어; }; this.getAverage = function() { return this.getSum() / 3; }; this.toString = function() { return this.이름 + '\t' .. 2023. 4. 10. 이전 1 ··· 4 5 6 7 8 9 10 ··· 20 다음
