👓 문제 나의 답안 function isValid(s) { const openBrackets = ['(', '[', '{']; const closeBrackets = [')', ']', '}']; for(let i=0; i
🍣 props - Component 속성을 설정할 때 사용하는 요소 - 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 사용가능 1️⃣ 컴포넌트를 사용할 때 pros 값 지정하기 부모 컴포넌트인 App 컴포넌트에서 MyComponent의 props 값을 지정, MyComponenet에서 props 사용 2️⃣ 비구조화 할당 문법을 통해 props 내부 값 추출하기 객체에서 값을 추출하는 문법 === 비구조화 할당(destructuring assignment) === 구조 분해 문법 함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 사용할 수 있다. # 객체에서 값을 추출하는 비구조화 할당 const MyComponent = (props) => { const { name, title } = props..
🏫 오늘의 미션 React의 state와 event 기능을 사용하여 전에 js로 구현했던 로그인 버튼 활성화 기능을 React로 변환해 보겠다. #Routes.js import LoginSejun from './pages/sejun/Login/Login'; class Routes extends React.Component { constructor(props) { super(props); this.state = { id: 0, pw: 0, }; } render() { return ( . . . #Login.js import React from 'react'; import { Link } from 'react-router-dom'; import './Login.scss'; class Login extends..
Create React App (CRA) 과 가장 인기있는 routing solution인 react-router 를 조합하여 routing 로직을 구현할 것 1. React 개발환경 세팅 1️⃣ npm 설치 2️⃣ CRA 설치 3️⃣ 프로젝트 내에서 CRA 실행 4️⃣ npm start 2. Routes Component & Scss 1️⃣ react-router 설치 2️⃣ Routes 컴포넌트 구현 ( / this.props.history.push()) 3️⃣ scss 설치 1. react-router 설치 npm install react-router-dom --save 2. Routes 컴포넌트 구현하기 import React from 'react'; import { BrowserRouter as..
SPA (Single Page Application) Westagram-fontend: longin.html, main.html 등 - 페이지 수 만큼 html 파일이 존재한다. 리액트 프로젝트에서 .html 파일의 개수는? 1개 ==> SPA 한 개의 웹페이지(html) 안에서 여러개의 페이지를 보여주는 방법? => Routing Routing 어떤 특정한 경로가 들어왔을 때 그 경로에 맞는 화면을 보여주는 것. 다시 말해 각각의 경로(url 주소)에 따라 다른 View(화면)을 보여주는 것이다. 리액트 자치에는 이러한 기능이 내장되어 있지 않다. ==> React Router : 리액트에서 라우팅 기능을 구현하기 위한 third-party 라이브러리 `npm install react-router-do..
문제 twoSum함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요. nums: 숫자 배열 target: 두 수를 더해서 나올 수 있는 합계 return: 두 수의 index를 가진 숫자 배열 예를 들어,nums은 [4, 9, 11, 14] target은 13 nums[0] + nums[1] = 4 + 9 = 13 이죠? 그러면 [0, 1]이 return 되어야 합니다. # 가정 target으로 보내는 합계의 조합은 배열 전체 중에 2개 밖에 없다고 가정하겠습니다.문제풀이 const nums = [4, 9, 11, 14]; const target = 14; const twoSum = (nums, targe..
댓글 좋아요/삭제 기능 구현 인스타 클론 코딩 중 각 게시글의 댓글에 좋아요 추가/삭제 기능을 구현하였다. 화면 구조는 아래와 같고 각 댓글의 DOM 구조는 아래 코드와 같다. john.johnson what the heck 채우기 색이 없는 하트와 채우기 색이 빨간색인 2가지 svg 파일이 각각의 .likeBtn에 들어있고, 각각 하얀 하트는 display="inline-block", 빨간 하트는 display="none" 값을 주어 하얀 하트만 버튼에서 나오게 되어있다. 첫번째 방법 const likeBtn = document.querySelector('button'); const svgs = likeBtn.getElementsByTagName('svg'); likeBtn.addEventListene..
Mission. id, password 가 입력되면 로그인 버튼 활성화 id, password 가 다시 지워지면 로그인 버튼 비활성화 DOM요소 const inputId = document.querySelector('.loginId'); const inputPw = document.querySelector('.loginPw'); const loginBtn = document.querySelector('.loginBtn');첫번째 방법 inputPw.addEventListener('keydown', () => { if(inputId.value && inputPw.value) { loginBtn.disabled = false; loginBtn.styl..
예약어와 약속어 예약어 keyword 예약어(keyword)는 프로그래밍 언어에서 문법의 일종으로 미리 지정된 단어들이다. const a = `hello`;여기서 const 는 a rk 상수(const)임을 나타내는 예약어이다. 예약어는 식별자(identifier)의 이름으로 쓰일 수 없다. * await * break * case * catch * const * continue * debugger * default * delete * do * else * enum * export * extends * false * finally * for * function * if * implements * in * instanceof * interface * let * new * null * package * pr..
Network Panel (네트워크 패널) Inspect Network Activity Demo Site 언제 네트워크 패널을 사용하는가? 보통 네트워크 패널은 resources 들이 기대한대로 download되고 upload 되는지 확인하고자 할 때 사용한다. resources 들이 제대로 upload되거나 download 되는지 확인하고자 할 때, 개별적인 resource의 속성들을 확인할 때 (HTTp headers, content, size 등) 만약 page load 속도를 향상시키고자 한다면 네트워크 패널보다는 Audits panel을 찾는 것이 좋다. 이것은 어떻게 하면 page 성능을 향상시킬지에 대한 방법들에 대해 제안해주기 때문이다. 최근에는 Audits panel 은 Lighthous..