본문 바로가기

전체 글

 (118)
TIL) eventListener eventListener 클래스형 컴포넌트에서 eventListener 구독하기, mouseover 시에 색깔 바뀌게 하기 import logo from './logo.svg'; import './App.css'; import React from "react"; import Text from "./Text"; class App extends React.Component{ constructor(props){ super(props); this.state = {}; this.circle = React.createRef(null); } hoverEvent = (e) = > { console.log(e.target); // 이 이벤트가 발생한 요소가 뭔지 보여줌 console.log(this.circle.curr..
TIL) Ref Ref 은 이름표다! 클래스형 컴포넌트에서 만드는 방법 예) this.text = React.createRef(); (=텍스트에 Ref를 만들어 주자) 그러면 타겟인 "text" 가 있는 div옆에 (적용 끝) component DidMount() 로 ref 적용이 잘 되었는지 확인 해 줄 수 있다. ... this.state = { list: ["영화관 가기", "매일 책읽기", "수영 배우기"] }; this.text = React.createRef(); } componentDidMount() { console.log(this.text); } return ( ...중략... ); } } ... 콘솔을 보면 {current: input} 이라고 뜸. console.log(this.text.current..
TIL) React 키워드 정리 1. 자바스크립트에서 유사배열과 배열의 차이는? 유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까? 유사 배열은 배열처럼 보이지만 사실 key가 숫자이고 length값을 가지고 있는 객체이다. { 0: div.text, 1: div.text, 2: div.text, 3: div.text, length: 4, } 이런식으로 배열에 담기지만 객체의 성격을 갖는다. 배열의 forEach, map, filter, reduce같은 메서드를 사용할 수 없기 때문에 요소 수정방법이 다르다. Array.from() 메서드를 사용하여 변경 해야한다. Array.from()메서드는 유사 배열 객체나 반복가능한 객체를 얕은 복사를 통해 새로운 객체를 만든다. 2. 부모 컴포넌트 A와 자식 컴포넌트 B가 있다. 컴..
3주차: React로 My To Do List 만들기- onChange, onSubmit, props, state, methods 개념 정리 React 입문 주차 개인 과제 구현해야 할 기능 UI 구현 Todo 추가 Todo 삭제 Todo 완료 상태 변경하기 (완료 진행중) 과제 요구 사항 디자인은 취향대로, 화면 구성은 동일하게 1. 제목, 내용 입력후 [추가하기] 버튼 클릭시 working에 새로운 Todo가 추가되고 제목 input과 내용 input은 다시 빈 값으로 바뀌도록 2. Todo의 isDone 상태가 true이면 상태 버튼의 라벨을 취소, isDone이 false면 라벨을 완료로 조건부 렌더링. 3. Todo의 상태가 working이면 위쪽에 위치, done이면 아래쪽에 위치하게. 4. Layout의 최대 넓이는 1200px, 최소 넓이는 800px 으로 제한, 전체 화면의 가운데로 정렬. 5. 폴더 구조, 컴포넌트 구성도 나..
WIL : JavaScript의 ES란?, ES5/ES6 문법 차이 - 2022.08.15 자바스크립트의 ES란? ES는 ECMA Script의 약자이다. 자바스크립트는 1990년대 Netscape 회사의 Brendan Eich 라는 사람에 의해 최초 개발되었다. 자바스크립트가 잘 되자 MS에서 Jscript라는 언어를 개발해 IE에 탑재하였는데, 이 두 스크립트가 너무 제각각이라 표준이 필요했다. 표준을 위해 자바스크립트를 ECMA(European Computer Manufactures Association)라는 정보와 통신 시스템의 비영리 표준기구에 제출하였고 표준에 대한 작업을 ECMA-262란 이름으로 1996년 11월에 시작해 1997년 6월에 채택되었다. ES5는 ECMA Script5의 규격을 따른다고 생각하면 된다. 현재는 ES6 ECMA Script6의 규격을 따르고 있다. 즉..
TIL) yarn 과 npm 정의, 차이점 yarn, npm은 자바스크립트 런타임 환경인 노드(Node.js)의 패키지 관리자이다. 전 세계 개발자들이 자바스크립트로 만든 다양한 패키지를 npm온라인 데이터베이스에 올리면 npm, yarn과 같은 패키지 관리자를 통해 설치 및 삭제가 가능하다. 또한 패키지 버전관리, 의존성 관리도 편리하게 가능하다. npm 노드 패키지 매니저의 줄임말로 노드를 설치 할 때 자동으로 설치되는 기본 패키지 관리자이다. 역할은 1. 온라인 플랫폼. 사람들이 노드 패키지를 만들어 업로드, 공유하는 공간으로 누구나 게시된 패키지를 사용할 수 있다. 2. 명령 줄 인터페이스. 온라인 플랫폼과 상호 작용하기 위해 명령 줄 인터페이스 사용하며 패키지 설치, 제거가 가능하다. yarn yarn은 2016 페이스북에서 개발한 패키..
Error) React 초기설정, Mac yarn 설치 에러 npm WARN config global `--global`, `--local` are deprecated. React 입문 주 차에 앞서 초기 세팅을 하는 과정에서 터미널에 디렉션대로 npm install -g yarn 를 입력했는데 에러 메세지과 다음과 같이 뜬다. npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/yarn npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn' npm ERR! [Error: EAC..
TIL) 코딩테스트: 정수 내림 차 순으로 배열하기 정수 내림차순으로 배치하기 문제 설명 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다. 제한 조건 n은 1이상 8000000000 이하인 자연수입니다. n return 118372 873211 나의 이해 n을 문자로 바꾸고 스프릿해서 내림차순으로 바꾸어 주어야겠다고 생각했다. 1. 첫번째 시도 function solution(n) { var answer = 0; n = n.toString().split('').sort(function(a, b) { return b - a; }).join().replace(/,/g,""); console.log(n) //숫자를 문..
반응형

티스토리툴바