벨로퍼트 리액트 - 24. 클래스형 컴포넌트 클래스형 컴포넌트 : 지금은 잘 상용하지 않으나 유지보수와 지원이 되지 않는 경우를 대비해 알아둘 필요 있음 클래스형 컴포넌트 사용방법 import React, { Component } from 'react'; class Hello extends Component { render() { const { color, name, isSpecial } = this.props; return ( {isSpecial && *} 안녕하세요 { name } ); } } Hello.defaultProps = { name: '이름없음' } export default Hello; render() : 필수! 이 메서드에서 렌더링하고싶은 JSX를 반환하면 된다. this.props :..
study
문제 설명 정수 배열 numbers가 매개변수로 주어집니다. numbers의 각 원소에 두배한 원소를 가진 배열을 return하도록 solution 함수를 완성해주세요. 제한사항 -10,000 ≤ numbers의 원소 ≤ 10,000 1 ≤ numbers의 길이 ≤ 1,000 입출력 예 numbers result [1, 2, 3, 4, 5] [2, 4, 6, 8, 10] [1, 2, 100, -99, 1, 2, 3] [2, 4, 200, -198, 2, 4, 6] 입출력 예 설명 입출력 예 #1 [1, 2, 3, 4, 5]의 각 원소에 두배를 한 배열 [2, 4, 6, 8, 10]을 return합니다. 입출력 예 #2 [1, 2, 100, -99, 1, 2, 3]의 각 원소에 두배를 한 배열 [2, 4,..
문제 설명 문자열 my_string이 매개변수로 주어집니다. my_string을 거꾸로 뒤집은 문자열을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ my_string의 길이 ≤ 1,000 입출력 예 my_string return "jaron" "noraj" "bread" "daerb" 입출력 예 설명 입출력 예 #1 my_string이 "jaron"이므로 거꾸로 뒤집은 "noraj"를 return합니다. 입출력 예 #2 my_string이 "bread"이므로 거꾸로 뒤집은 "daerb"를 return합니다. function solution(my_string) { return my_string.split('').reverse().join(''); } // .split(separa..
벨로퍼트 리액트 - 23. Immer를 사용한 더 쉬운 불변성 관리 불변성 관리 리액트에서 배열, 객체를 업데이트 할때는 직접 수정하는것이 아니라 불변성을 지켜주면서 업데이트를 해야한다. push, splice등의 함수를 사용하거나 n번째 항목을 직접 수정하는 것이 아니라 concat, filter , map 등 동작 후 새로운 배열을 만들어주는 함수를 사용해야 한다. // 잘못된 예 const object = { a: 1, b: 2 }; object.b = 3; // 바른 예 const object = { a: 1, b: 2 }; const nextObject = { ...object, b: 3 }; 대부분의 경우 …(스프레드 연산자)또는 배열 내장함수를 사용하면 되지만 데이터의 구조가 복잡해질경우 불..
Vanilla JS로 댓글 기능이 있는 게시판 만들기_3일차 🧱 3일차 구현 내용 3일차에 목표로 했던 부분이다! 그리고 드디어 성공했다😎 list li에 클릭이벤트 걸기 1-1. li를 클릭시 댓글 영역이 slideDown 효과와 함께 나타나고 다시 클릭하면 slideUp 효과와 함께 사라진다. 삽질 n시간만에 드디어 해결! 그래서 오늘은 어떤 문제가 있어서 어떻게 해결했는지를 간략하게 써보려고 한다. 문제1 listLis.forEach(function(listLi){ listLi.addEventListener('click', function(event){ // .contains() : class의 유무를 확인 if (event.target.replyBox.classList.contains('show'..
Vanilla JS로 댓글 기능이 있는 게시판 만들기_2일차 🧱 2일차 구현 내용 2일차에 목표로 했던 부분은 아래와 같다. list li에 클릭이벤트 걸기 1-1. li를 클릭시 댓글 영역이 slideDown 효과와 함께 나타나고 다시 클릭하면 slideUp 효과와 함께 사라진다. 댓글작성버튼 클릭시 유효성 검사(댓글 작성자, 댓글 내용) 2-1. 댓글 작성자 또는 댓글 내용이 비어있다면 alert과 함께 해당 부분에 포커스 주기 목표를 세우긴 했는데 뭔가 좀 막혀서 엄청 삽질만 했다. 그래서 오늘은 구현 내용이라고 하긴 했지만 그냥 삽질 기록이다 🙄 list li 클릭이벤트 const btnAddReply = document.getElementsByName('btnAddReply'); const li..
Vanilla JS로 댓글 기능이 있는 게시판 만들기_1일차 📚 프로젝트 주제와 목표 Vanilla JS만 사용하여 댓글 기능이 있는 게시판을 만드는 과제를 하게 되었다. 솔직히 걱정은 좀 됐지만 안될때 조금씩 참고해보라고 원본 소스파일을 주시기도 했고 구글링도 있으니까 일단 해보기나 하자는 생각이다. 목표는 최대한 원본 소스를 참고하지 않고 기능을 똑같이 구현해보는 것이다. 💻 필요한 기능 이 프로젝트(라기엔 많이 사소하지만 어쨌든)에 필요한 기능은 아래와 같다. 순수 자바스크립트(Vanilla JS)로 작업할것 글쓰기 버튼을 누르면 상단의 글 목록에 작성한 게시글이 등록된다. 2-1. 작성자, 제목, 내용 중 하나라도 빈 값이 있다면 게시글을 등록하지 않고 오류 메시지를 띄운다.(유효성 체크) 2-2..
HTML의 구조 HTML 웹페이지는 HTML, CSS, Javascript 각각 세개의 서로 다른 언어가 합쳐져 있는 구조이다. 세개의 언어는 브라우저에 내부에 있는 서브 프로그램인 렌더링 엔진과 자바스크립트 엔진이라는 해석기에 의해서 글자를 해석하게 된다. 렌더링 엔진은 HTML과 CSS를, 자바스크립트 엔진은 Javascirpt를 해석한다. 따라서 자바스크립트 엔진이 해석할 수 있는 문법으로 js파일을 작성해야 한다. 변수 기본형 number var a = 10; number 타입. 숫자를 저장한다. string var b = "Javascript"; var c = "10"; string 타입. 문자열을 저장한다. 내용이 숫자인 경우에도 " "로 감싸져 있다면 문자로 취급한다. Boolean var ..
처음에 초급자 대상이 아닌 책으로 먼저 시작해서 그런지 강의 들으면서도 좀 걱정됐음 ㅜ 자바스크립트도 아직 잘 못하는데 이해가 잘 될까 엄청 걱정했었다 안그래도 사서 걱정하는 편이라ㅋㅋㅋㅋㅋ 그래도 강의 하나하나 보면서 코드 따라치고 하니까 꽤 이해하기 쉬웠음 강의가 파트별로 나뉘어져 있는것도 그렇고 강의 하나의 길이가 많이 길지 않아서 부담이 좀 적었음! 그래서 좋았던거같다 설명 듣고 코드 치고 한다고 눈이랑 손이 바쁘긴 했지만 설명은 진짜 잘되어있는거같다 이해가 진짜 잘됨. 강의 중간중간에 반복되는 부분이 나오면 간단하게 다시 짚어주기도 해서 좋았음 강의 다 듣는데 한 2주? 3주? 걸린거같은데 좀더 열심히 했으면 더 빨리 끝내지 않았을까 싶고ㅠ 그래도 우선은 혼자서 코드 연습해보면서 복습하고 잘 안..
1주차(22.04.13 - 22.04.20) 1장_Vue.js에 대한 소개 ~ 2장_Vue 환경 설치 Vue.js 웹 애플리케이션을 만들기 위한 라이브러리이자 프레임워크. MVVM(Model-View-ViewModel) 패턴을 표방하나 코어 라이브러리는 ViewModel에 집중되어 있고 별개로 부가적인 라이브러리들을 제공해 종합적인 프레임워크를 제공한다. Vue 환경 설치 Visual Studio Code 설치 후 확장프로그램 (vue vs code extension pack) 설치 node.js 설치 ❗ npm package manager가 포함되었는지 확인 설치 후 npm -version을 입력해 확인 Vue Devtools 설치(크롬) 크롬 웹스토어에서 Vue.js devtools 검색하여 추가
