이경욱

prop.finishBtn(prop.id)} > {tagSwitch(prop.isDone)} className 안에서 중괄호{} 로 자바스크립트 문법을 사용 가능하게 한 뒤 `` 백틱을 활용해 문자열과 함수를 섞으면 원하는 조건문을 활용할 수 있다. 삼항연산자를 이용해 조건문을 사용할 수도 있지만, 그렇게 되면 문자열과 섞을 수 없고 조건문에 값만 입력할 수 있기 때문에 디폴트 클래스 값은 그대로 두고 ${} 을 이용해 중간에 조건문 함수를 삽입하면 클래스의 조건문과 디폴트 값을 동시에 사용할 수 있다.

문제 정수 n이 매개변수로 주어질 때, n 이하의 홀수가 오름차순으로 담긴 배열을 return 하도록 solution 함수를 완성해주세요. 해결 const n = 10; function solution (n) { const answer = []; for (let i=0; i i + 1) .filter(i => i % 2 !== 0) Array .from은 문자열 등 유사배열 객체나 이터러블 객체를 배열로 만들어주는 메서드이다. (ex. {0 : "apple", 1 : "banana"} => ["apple", "banana"]) 첫번째 인자로 {length: n} 을 넣어주는 건 배열로 만들 이터러블한 객체가 되는 것이다. 두 번째 인자로 value (undefined) 와 index 가 들어가서 inde..

문제 최빈값은 주어진 값 중에서 가장 자주 나오는 값을 의미합니다. 정부 배열 array가 매개변수로 주어질 때, 최빈값을 return하도록 solution 함수를 완성해보세요. 최빈값이 여러 개면 -1을 return 합니다. 풀이 const array = [1]; // 1. 위 배열에서 중복 값을 세어본다. // 2. 중복 값과 배열 안의 숫자를 한 객체로 묶는다. // 3. 객체들을 리스트로 변환한다. // 4. 리스트 중 카운트가 큰 순으로 나열한다. // 5. 인덱스 0, 1번의 카운트를 비교하여 // 같지 않으면 index 0 리턴, 같으면 -1을 리턴한다. function sol (array) { const data = []; // 중복값이 들어갈 빈 배열을 만들어주고, for (let i =..

목차 1. 리액트 컴포넌트 2. JSX 3. 리액트 단축키 4. Props 1. React Component란? 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. (= 독립적이다) 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. "props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. * 컴포넌트 이름은 무조건 대문자로 시작해야 한다. * 폴더는 소문자로 시작하는 카멜케이스로 작성. props = input React Element = output 함수형 컴포넌트 // props라는 입력을 받음 // 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(ret..

State State란? UI를 바꾸기 위해서 별도의 상태를 관리하는 것 useState('초기값') 함수임. 초기값을 넣으면 배열형태로 리턴함 초기값을 가지고 있는 변수를 생성. 인덱스 0 에 초기값, 인덱스 1 에 초기값을 변경할 수 있는 setState를 리턴 import React, { useState } from 'react'; function GrandFather() { const [name, setName] = useState("김할아"); // 이것이 state! return ; } 리액트 안에서 UI가 변경되는 값은 let, const가 아닌 useState를 사용한다. 이렇게 input 태그 안에서 들어오는 값을 바로 인식할 수 있게 만들기도 가능하다. import React, { us..

절대경로 지정하기 jsconfig.json 이라는 파일을 하나 만들어주고 아래 코드를 삽입하면 { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 어떤 파일에서든지 절대경로로 지정할 수 있다.

React란? SPA 기반 프론트엔드 프레임워크 중 하나이며, 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용합니다. 비슷한 프레임워크인 Angular JS, Vue JS 보다 월등히 인기가 많다! SPA란? Single Page Application, 한 개의 페이지로 이루어진 어플리케이션으로 MPA(Multi Page Application)과는 상반된 개념이다. MPA의 문제점 1. 좋아요 눌렀는데 웹사이트 다시 로딩 2. 요즘에는 페이지가 새로고침되는 상황이 너무 많기 떄문에 계속 깜빡거림. React의 특징과 장점 1. 한 개의 페이지로 구성된 웹 2. 서버에 1회 리소스를 요청 3. 그 이후 필요할 때 데이터만 받아와서 기존 페이지를 '수정' 하는 방식으로 요소를 변경 4. 사용자 입장..

0. 배경 햇수로 6년간 주식을 해오면서 반복적으로 하는 일이 있다. '당일 상한가 및 특징주 정리하기' 이 작업을 해오며 미래에 예측할 수 있는 눈을 기르고 '싶었다'.. 이번 내일배움캠프 프론트엔드 과정을 참가하며 자바스크립트와 HTML, CSS 등 웹페이지 제작에 필요한 요소들을 배우고 있다. 여기서 배운 것들을 내가 하는 루틴에 적용해서 반복되는 일을 자동으로 처리할 수는 없을까? 하는 호기심에 시작해보았다. 사실 귀찮았다. 하는 김에 다른 사람들에게도 도움이 될 수 있을 것 같아 서버도 만들고 트래픽도 체크해보는 걸 도전해볼 계획이다. 1. 기획 전체 가이드라인을 먼저 잡고 시작하려니 경험이 짧은터라 아이디어가 떠오르지 않아 시작 자체를 못하고 있었다. 그래서 우선 1페이지부터 기획을 해보았다...

요약 window 객체를 이용한 뒤로가기, 새로고침 확인 코드와 sessionStorage 를 통해 이전 데이터 유지 기능을 구현하였다. 문제 1. 뒤로가기 시 검색결과 데이터 날라감 검색을 하고 해당 페이지로 들어간 뒤 같은 검색결과의 다른 페이지를 보고싶은데 홈화면으로 돌아가는 문제가 있었다. 가설 1. 뒤로가기 시 검색결과 데이터 날라감 찾아보니 세션스토리지를 사용하면 된다고 해서 사용법을 정리해두려한다. 찾아보니 setItem으로 키밸류 데이터를 저장할 수 있다. input에 값이 들어오면 검색텍스트를 저장했다가 페이지 이동시 뒤로가기를 눌렀을 때 저장된 값을 input에 넣어 다시 검색되도록 코드를 짜봐야겠다. 해결 1. 뒤로가기 시 검색결과 데이터 날라감 function captureInput..

문제 1. 상단 네비바 컬러 변경 자바스크립트로 CSS color로 바꾸려고 했는데 전혀 안바뀌었다. 왜이러지!?!??!?!? a 태그 전체를 바꾸면 바뀌는데 직접 텍스트 클래스를 지정하고 바꿔주면 안먹는다.. 2. git hub Confilct 작업한 부분을 푸시하려고 했는데 오류가 나서 기존 데이터를 안받아와서 그런줄알았다. pull을 한 뒤 커밋했더니, merge되면서 이전 다른 팀원분이 작업해놓으신걸 다 날려먹었다.. 진짜 앞이 깜깜해지는게 이런 기분이구나 싶었다 가설 1. 상단 네비바 컬러 변경 a태그가 문제가 있는 것 같다. a태그를 빼고 CSS를 해주니 컬러가 변경되었다. HOME SEARCH MOVIE LIST href를 사용하기 위해 a 태그에 감싼 것으로 보이는데 이 href를 li태그..