javascript

220524 프론트엔드 부트캠프 16일차 : husky, modal, prevState

freeboard 리뷰 📺 Youtube - 아직 안 함(5/24) youtube state를 만들어서 onchange, defaultvalue 추가한다. 그리고 패치보드에서 유튜브 url도 가져와야한다! width, height를 라이브러리에서 자체제공해서 emotion에선 수정 불가능하기 때문에 presenter에서 값을 수정해준다. 🔧 수정 아무 수정도 하지 않고 누르면 수정한 내용이 없습니다, alert early exit 패턴을 쓴다. 작성자 변경을 백엔드에서 막아놨음에도 불구하고 수정 페이지에선 수정이 가능, 못하게 하기 1. presenter의 input 태그에 readOnly(색깔 흰색, 클릭해서 바꾸는 것 불가능)를 props.isEdit에 따라 바뀌게 하기 2. 패치보드에서 받아온 작성..

*-커비 프로젝트-*

키보드 입력받기 키보드 이벤트는 키를 누르거나 뗄 때 발생한다. 이벤트 처리를 위한 콜백 함수를 설정하면 된다. 키보드 이밴트 객체에는 down / up 된 키에 대한 메타 정보들이 담겨있다. 일단 어떻게 해야할지 몰라서 onClick에 함수를 담고 그 안에 키 이벤트를 받는 함수를 넣어서 출력해봤다. 이걸로 오른쪽 방향키는 ArrowRight라는 것을 알아냈다,,,검색하면 나오겠지만. 그리고 함수에서 꺼내서 자바스크립트 영역에 이렇게만 써봤는데 이렇게 해도 키이벤트값을 받아온다. import * as S from "./BoardMain.styles"; export default function BoardMainUI() { window.onkeydown = (d) => console.log(d); ret..

알고리즘 - reverse, sort, 삼항연산자로 return

자연수 뒤집어 배열로 만들기 function solution(n) { let array = []; let answer = []; array = String(n).split(''); console.log(array) for (let i = 1; i parseInt(v)); // 숫자풀이 var arr = []; do { arr.push(n%10); n = Math.floor(n/10); } while (n>0); return arr; } 초면 : reverse(), paseInt() arr.push(n%10); ----*-*-*-*-*---- 나누어 떨어지는 숫자 배열 function solution(arr, divisor) { console.log(arr, divisor) var answer = []; ..

알고리즘 - forEach, map

문자열 내 p와 y의 개수 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다. function solution(s) { let answer = true; let p = 0; let y = 0; for(let i = 0; i < s.length; i++) { console.log(s[i]); // 문자열 하나씩 가져오기 확인 if(s[i]==..

antd 라이브러리, 리액트 플레이어 사용하기

사용하려는 폴더 터미널에 yarn add antd npm install --save @ant-design/icons __app.tsx 또는 쓰려는 페이지에서 import "antd/dist/antd.css"; 쓰려는 페이지에서 // import React from 'react'; // next.js를 쓰기 때문에 생략함 import { Rate } from 'antd'; import { HeartOutlined } from '@ant-design/icons'; HTML 쓰는 부분에 복사/붙여넣기 🤓 유튜브 영상 넣기 yarn add react-player import ReactPlayer from "react-player";

구조 분해 할당(Destructuring Assignment)

구조 분해 할당 배열의 값이나 객체의 속성을 별개의 변수로 풀 수 있게 해주는 자바스크립트 표현식 let a, b, rest; [a, b] = [10, 20]; console.log(a); // expected output: 10 console.log(b); // expected output: 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(rest); // expected output: Array [30,40,50] // 출처 : developer.mozilla.org - destructuring assignment 😶rest? rest 엘리먼트는 배열의 맨 뒤에 쓸 수 있는데, ...rest 라고 쓰면 그 나머지 값이 rest에 담기게 된다. cons..

React Component, State, Props

React - Component, Props, State 😎 Component 재사용성 클래스형 컴포넌트, 함수형 컴포넌트 element를 반환한다. 다른 컴포넌트에 있으면 변수 이름이 같아도 다른 변수 Props Properties를 줄인 말, 컴포넌트 속성을 설정할 때 사용하는 요소 Component에서 component로 전달하는 데이터 부모 컴포넌트에서 자식 컴포넌트로 전달된다. (부모 컴포넌트에서 설정) 리액트에선 단방향성(부모→자식) 실무에선 키값과 밸류를 같게 쓴다. ex. props = {handleChangeWriter: handleChangeWriter} defaultProps로 props값을 따로 지정하지 않았을 때의 기본값을 설정할 수 있다. State 컴포넌트 내부의 동적인 데이터..

Static Routing vs Dynamic Routing (정적 라우팅 vs 동적 라우팅)

Routing, route Routing - 어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정. Route - 라우트는 그 경로를 뜻한다. Static Routing vs Dynamic Routing Static Routing(정적 라우팅) Dynamic Routing(동적 라우팅) 경로 선택 미리 구성된 단일 경로 사용 여러 개의 경로 제공, RIP, IGRP 같은 벡터 프로토콜 or OSFP, IS-IS 같은 링크 상태 프로토콜 알고리즘을 사용하여 경로 설정 경로 업데이트 수동으로 경로 재구성해줘야 갱신됨 알고리즘을 사용, 자동으로 업데이트 라우팅 테이블 각 대상에 대해 하나의 항목만 포함하는 작은 라우팅 테이블 전체 라우팅 테이블을 전송해야 함 네트워크 부하 컴퓨팅 성능, 대..

알고리즘 - filter, indexOf, isNaN

filter filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. (MDN) f arr.filter(callback,(element[, index[, array]])[, thisArg]) //배열 시험할 함수, 현재 요소, 현재 요소 인덱스, 호출한 배열, callback실행시 this로 사용하는 값 thisArg가 이해가 안됨 만약 테스트를 통과한 요소가 없으면 빈 배열을 반환한다. 호출되는 배열을 변화시키지 않고, 테스트를 통과하는 요소만 모아 새로운 배열로 반환한다. //잘못된 코드 function solution(seoul) { var answer = ''; let kim = seoul.filter(word => word.includes("김서방")..

알고리즘 - reduce, 삼항연산자

짝수와 홀수 //내가 한 방법 if(num%2 === 0) return "Even"; else return "Odd"; //다른 방법 return num % 2 ? "Odd" : "Even"; reduce() reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. const array = [1, 2, 3, 4]; const init = 0; const sum = array.reduce(previous, current) => previous + current, init); console.log(sum);// 0 + 1 + 2 + 3 + 4 = 10​ MDN 예제코드 curr이 뭔가 했는데 currentValue였다. arr.reduce(..

ColorHighlight, emotion 폰트 추가

ColorHighlight, 색이 연할수록 구분하기도 어렵고 뽑기도 어려운데 없는 것보단 훨씬 편하다~!!! 그리고 텍스트 배경색으로 보여주는게 직관적이라 좋음 npm install --save @emotion/css styles.js 에 import하고, injectGlobal 안에 작성하니 폰트 적용됨!!!!!! 🍎 나중에 알려준다고 다른 거 먼저 하라고 하셨지만 폰트를 너무 적용시켜보고 싶었어욧,,, 🥳

220516 프론트엔드 부트캠프 8일차 : container, presenter

더보기 부트캠프로만 따지면 6일째~ 자리가 바꼈다! PF 중 왼쪽에 계시던 분은 가셨다... 🥲 오늘은 실무에서 파일을 어떻게 나누는지에 대해 배웠다. 보통 코드는 100줄 안 넘게 작성하고, 70줄 정도가 적당하다고 한다. 2주차 커리큘럼 1. 실무적인 폴더구조 -> container, presenter 2. 컴포넌트 분리 및 데이터 전달 -> props 3. 목록 형태의 데이터 -> Map, Filter 4. 안전한 코드 -> Typescript 5. 규칙을 정하고 협업하기 -> Eslint, Prettier, Husky Eslint가 맞는지 모르겠다...? 오타난 건지 원래 이름이 저건지?! 오타 아니군. 린트라고 부른답니다. 이름은 허스키가 마음에 든다 😙 freeboard 리뷰 - 동적 라우팅,..