전체 글

알고리즘 - 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..

Conditional-rendering

HOGGY'S APPLE PARADISE CIDER 지금보니 이름이 CIDER네 정확한 뜻이 궁금해서 찾아보니 CIDER는 사과주라는 뜻이다. 그리고 한국과 일본에서 알콜이 없는 탄산음료를 칭하는 말이라고 한다... 충격 강한 탄산과 낮은 도수의 사과음료같은 사과술이 일본에 전해지면서 의미가 변해 사이다가 탄산이 있는 과일맛 음료를 가리키게 된 것으로 추측되며, 이에 해당하는 재플리시サイダー가 한국에까지 그대로 전해지며 콩글리시에 편입된 것이다. 영어로 이러한 음료를 가리키는 표현은 'Lemon-lime soft drink'이고, 영어권에서 이를 지칭할 때는 스프라이트, 7up 같은 상표명으로 부르는 경우가 많다. 외국에서 탄산음료를 '사이다'라고 하지 않도록 주의할 것. 네..😮 조건부 렌더링 모냐 이..

🎃우왁 220521-22 두번째 주말...

노션 복붙 [x] Static, Dynamic Routing configuration technique - 라우팅 테이블 수동/동적 업데이트 link affect - 링크 실패시 다른 라우팅 경로에도 영향을 줌 / 영향을 주지 않음 라우팅? 어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정. 라우트는 그 경로를 뜻한다. 수동으로 목적지 주소를 지정하는 라우트 방식, 트래픽을 목적지로 보내기 위해 미리 구성된 경로를 사용한다. 문제 발생시 원인을 찾기 쉽고 부하가 적음 변경사항이 없거나 그것을 예상하지 않아도 될 때 사용 동적 라우팅은 알고리즘을 사용하여 최적의 경로를 설정한다. 주요 차이점 경로 선택 : 정적 라우팅은 미리 구성된 단일 경로를 사용, 동적 라우팅은 여러 개의 경로를..

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 같은 링크 상태 프로토콜 알고리즘을 사용하여 경로 설정 경로 업데이트 수동으로 경로 재구성해줘야 갱신됨 알고리즘을 사용, 자동으로 업데이트 라우팅 테이블 각 대상에 대해 하나의 항목만 포함하는 작은 라우팅 테이블 전체 라우팅 테이블을 전송해야 함 네트워크 부하 컴퓨팅 성능, 대..

알고리즘 - 보충할 것

K번째 수 - sort, 2차원 배열, 반복문 function solution(array, commands) { var answer = []; for(let i = 0; i b) return 1; if(a === b) return 0; if(a < b) return -1; }) console.log(arr) answer.push(arr[commands[i][2]-1]) } console.log(answer); return answe..

220519 프론트엔드 부트캠프 11일차 : DefaultValue, TypeScript

중간 제목 더보기 냉동실에서 카스테라 꺼내서 돌려먹은 게 문제였을까, 병원에서 먹으라고 했던 약 제때 안 먹다가 갑자기 오늘 먹고 싶었던 탓인걸까... 아침에 진짜 배가 너무 아팠고, 노로 바이러스 걸렸을 때와 흡사한 고통을 느꼈다. 위아래로 괴로운 느낌^^ 그래서 엎드려서 수업 들으려고 했는데(?) 잠 들었고... 결국 오늘 수업은 못 들었다. 진짜 잠깐 졸아도 따라가기 힘든데 수업을 통으로 날린 기분이란... 아픈 것도 서러운데 눈치봐야하면 진짜 슬플 것 같은데 멘토님들은 괜찮냐고 해주시고, 동기분들도 아팠냐 물어봐주셔서 따수웠다..흑흑 진짜 초등학생 때부터 위장병이 너무 괴롭힌다.. . 이번 삼개월 목표에 괜찮아져도 꼭 약! 다! 먹고!! 낫겠다는 목표를 추가했다... 대학생 초반에 항상 체해서 힘..

알고리즘 - 별 거 없음

x만큼 간격이 있는 n개의 숫자 function solution(x, n) { var answer = []; for( let i = 1; i (i + 1) * v) } ㄷㅏ른 사람 풀이...쏘씸플이네.. map은 정말 언능 공부해야겠다 자릿수 더하기 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다.  이건 못 풀고 알고리즘 시간이 왔다. //푼 시도... (틀린 코드) function solution(n) { var answer = 0; let arr = (String(n)).split(" ") console.log(arr) for(let i = 0; i < ar..

220518 프론트엔드 부트캠프 10일차 : 알고리즘 테스트, component 재사용

오늘은 수정🔮하기를 배웠다. 다음에 드디어 타입스크립트를 배운다고 한다,,, 두근두근 수정하기를 배운 것은 컴포넌트를 재사용해보기 위해서! 우선 new Date(), getFullYear(), getMonth(), getDate()를 배워서 createAt 다듬는 법을 배웠다. refetch import 아니라고 했었죠... 라고 필기한 부분이 있는데..! 진짜 잠깐 졸았다 진짜 잠깐... 그래서 뭔지 모르겠다. 이 부분만 수업을 다시 들어야할 것 같다ㅠ_ㅠ 등록 페이지 -> 상세페이지 -> 수정페이지 -> (다시) 상세페이지 그리고 수정페이지는 등록 페이지를 갖다쓸 것이다. 오! 페이지 containerf랑 presenter로 나눠놓은 거 편하단 걸 느꼈다. 수정, 상세페이지 index에서 isEdit..

알고리즘 - 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("김서방")..