jineecode

react의 jsx에서는 if문처럼 for문 역시도 중괄호 안에 쓸 수 없다. react에서는 map()을 쓰면 된다. ES6 문법 중 map 메소드를 보자. let array = [2, 3, 4]; // array 내에 모든 데이터에 똑같은 작업을 시켜주고 싶을 때 .map()을 쓴다. let newArray = array.map(function (a) { return a * 2 }); // 또다른 array가 생성된다. [4, 6, 8] // a 라는 파라미터: array 안의 하나하나의 데이터, map~는 a에서 꺼내 하나하나 반복문이 돈다. 이를 이용하여 유사반복문을 만들어보자 let [title, changeTitle] = useState([ "오늘 한 일", "내일 할 일", "모레 할 일",..

React 내가 쓴 코드 //Modal 컴포넌트 만들기 function Modal() { return ( 제목 날짜 상세 내용 ); //setState 만들기 let [modal, modalChange] = useState(false); ... //모달 삼항조건문 {modal === true ? : null}; //모달 온오프 버튼 { modalChange(modal == true ? false : true); }} > 모달 온오프 버튼 정답: { modalChange(!modal) } }> 열고닫는버튼 ! 느낌표 기호는 true 왼쪽에 붙이면 false로 바꿔주고 false 왼쪽에 붙이면 true로 바꿔줍니다. 나는 아직도 멀었구나... 😥

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort Array.prototype.sort() - JavaScript | MDN Array.prototype.sort() sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅 developer.mozilla.org sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다. 정렬 속도와 복잡도는 각 구..

평소 HTML을 작성할 때 emmet을 애용하는지라, react에서 emmet이 되지 않는 것이 불편하여 방법을 찾아보았다. 1. 파일 > 기본 설정 > 설정 Window 이용자 : Ctrl + , Mac 이용자 : Command + , 2. Include Languages 검색 3. setting.json 편집 클릭 4. 아래 내용을 넣어준다. { "emmet.includeLanguages": { "javascript": "javascriptreact" } } 출처: medium.com/@eshwaren/enable-emmet-support-for-jsx-in-visual-studio-code-react-f1f5dfe8809c Enable Emmet support for JSX in Visual Stu..

ValidationSample.css .success { background-color: lightgreen; } .failure { background-color: lightcoral; } class가 success 면 lightgreen이, failure면 lightcoral이 되는 css를 먼저 코드한다. ValidationSample.js import React, { Component } from "react"; import "./ValidationSample.css"; class ValidationSample extends Component { state = { password: "", clicked: false, vaildated: false, }; handleChange = (e) => { ..

EventPractice.js import React, { Component } from "react"; class EventPractice extends Component { render() { return ( 이벤트 연습 { console.log(e); }} > ); } } export default EventPractice; console.log >> onChange event input에 입력 시, SyntheticBaseEvent 가 나타난다. import React, { Component } from "react"; class EventPractice extends Component { render() { return ( 이벤트 연습 { console.log(e.target); }} > ); ..

developer.mozilla.org/ko/docs/Web/HTML/Element/datalist - HTML: Hypertext Markup Language | MDN 아래 목록에서 브라우저를 선택하세요: BCD tables only load in the browserdatalist-polyfill을 추가해 구형 브라우저에서 지원을 추가하세요. developer.mozilla.org HTML 요소는 다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 요소 여럿을 담습니다 Plain HTML search 이 태그는 자동완성 입력을 가능하게 해준다. input 에 list 속성을 넣어주고, 그에 맞추어 datalist의 id에도 같은 값을 넣어주면 가능! See the Pen qBRw..

programmers.co.kr/learn/challenges 코딩테스트 연습 기초부터 차근차근, 직접 코드를 작성해 보세요. programmers.co.kr 문제 설명 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다. 제한사항 문자열 s의 길이 : 50 이하의 자연수 문자열 s는 알파벳으로만 이루어져 있습니다. 입출력 예 sanswer ..