캐나다 개발자

https://joonokio.tistory.com/45 이진 검색(binary search) 전화번호부 책에서 이름을 찾는 방법 예시 1. 이름을 찾는 방법을 생각 해볼때 책의 중간쯤부터 보기 시작한다. 2. 만일 찾는 이름이 중간 페이지에 있는 이름보다 알파벳순으로(가나다 순)앞에 있으면 책의 뒤쪽 절반은 완전히 무시하고 앞쪽 절반의 중간 (책 전체의 1/4 지점)을 펼쳐 본다. 3. 그렇지 않으면 책의 앞 쪽 절반은 무시하고 뒤쪽 절반의 중간(책 전체의 3/4 지점)을 확인한다. 4. 이름이 알파벳 순(가나다 순)으로 나열되어 있으므로, 다음 단계에 어느 쪽 절반을 찾아야 할지 알 수 있다. 결국 그 이름이 있는 지점에 도달하거나 목록에 이름이 없음을 확실히 알게 된다. 위와 같은 방법처럼 각 확인..

yarn add bootstrap zxcvbn 더보기 PasswordStrengthMeter.jsx -> 이 컴포넌트 쓰려면 비밀번호를 props로 넘겨줘야함. import React from 'react' import zxcvbn from 'zxcvbn' export default function PasswordStrengthMeter({password}) { const testResult = zxcvbn(password); const score = testResult.score * 100/4; const funcProgressColor = () =>{ switch(testResult.score){ case 0: return '#828282' case 1: return '#EA1111' case 2: ..

항해 99의 기술매니저님이신 예매니저님은 정말 대단한거같다.. 실력도.. 끈기도.. import React, { useState } from "react"; import styled from "styled-components"; const App = () => { const [target, setTarget] = useState(0); // 마우스오버 된 대상 const [mouseIn, setMouseIn] = useState(false); // 모든 컴포넌트에서 마우스 오버 여부 확인 const onMouseOverHandler = (event, item) => { setTarget(item); // 마우스를 오버했을 때 해당 item의 값으로 target 변경 setMouseIn(Boolean(ev..

yarn add react-scroll-motion import { Animator, ScrollContainer, ScrollPage, batch, Fade, FadeIn, Move, MoveIn, MoveOut, Sticky, StickyIn, ZoomIn } from "react-scroll-motion"; const ZoomInScrollOut = batch(StickyIn(), FadeIn(), ZoomIn()); const FadeUp = batch(Fade(), Move(), Sticky()); {/* 기본 */} Let me show you scroll animation 😀 {/* 줌인->줌아웃 */} I'm FadeUpScrollOut ✨ {/* 페이드업 */} I'm FadeUp ⛅️ ..

시간 SKILLS 할일 12pm - HTML, CSS 애니메이션 공부 https://www.youtube.com/watch?v=wuUSVEcK-kM 6pm - 8pm React Redux Redux reducer페이지 따라 쳐보기 x 1 8pm - 9pm React Middleware TS 미들웨어 정리 for 팀발표 타입스크립트 문제 3 9pm - 11pm React React 기술매니저님 코드 흡수 React Password Strength https://www.youtube.com/watch?v=tIInwIlf13A 11pm CS CS 스터디, 발표내용 옮겨적기 11pm - 13pm React Redux Redux reducer페이지 따라 쳐보기 x 2 13pm - 18pm HTML, CSS Rea..

알고리즘과 프로그램 알고리즘(Algorithm) 알고리즘은 세심하고 정확하고 명료하게 작성된 레시피나 납세 신고서의 컴퓨터 과학 버전이라고 할 수 있는데, 결과를 정확하게 계산하도록 보장된 일련의 단계다. 각 단계는 기본 연산으로 표현되어 있으며, 연산의 의미는 완전히 명시된다. 예를 들면 '두 개의 정수를 더하세요. 처럼, 알고리즘을 이루고 있는 모든 구성 요소의 의미에 한치의 모호함도 있어선 안 된다. 입력 데이터가 어떤 유형이어야 하는지도 제공해야 한다. 알고리즘은 추상적이고 이상적인 절차를 기술한 것으로, 구현에 필요한 세부 사항과 현실적인 고려 사항을 무시한다. 의미가 완전히 알려져 있고, 구체적으로 명시된 기본 연산으로 표현된다. 그리고, 알고리즘은 결국 멈춰야 한다. 프로그램(Program)..

오늘의 목표 스파르타 과제 배포 스터디팀 공부 대감 - Redux-U, 리덕스 미들웨어 곤감 - S3 캐감 -Typescript Redux, Jest 팀작업 1. 해리포터 덕질 사이트 - 게시물 사진 추가 - 책 페이지 다듬기 - 상의 후 배포 2. 왁타버스 클론 사이트 - 메인페이지 - 고멤 선택페이지 - 아이돌 선택페이지 - 게시판 페이지 - 게시물 수정 및 생성 페이지 개인공부 - 노마드 타입스크립트 part.2 - 기술매니저님 코드 타입스크립트로 교체 연습 - 리덕스 기본심화 코드 읽고 정리 - 타입스크립트 문제풀기 전산학공부 6/3 발표 [소] 알고리즘은 이상, 프로그래밍은 현실 [소] 다른 프로그램을 처리하기 위한 프로그램 알고리즘, 자료구조공부 x 개인작업 x 오늘도 나는 나태하다. 남들이 ..

타입스크립트 적용된 프로젝트 설치 npx create-react-app ts-react-tutorial --template typescript 1. 컴포넌트에 type 적용해보기 App.tsx import './App.css'; import Greeting from './components/Greeting'; function App() { const name:string = "kim jun ho" // 이름 = string const height:number = 120; // 키 = number return ( // props로 받는쪽에서 string, number를 지켜줘야지 props가 무사히 넘어간다 ); } export default App; Greeting.tsx import React from..

평소에 객체 만들때처럼 만들면 Typescript가 type을 줄수 없다. const obj = { name: "aa", age: 0, } 그래서 Interface라는 친구를 사용해서 type을 준다. 타입스크립트 Interface 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 직접 인스턴스를 생성할 수 없고 모든 메서드가 추상 메서드이다. -> 이게 무슨말이냐면, interface를 내가 데이터처럼 누구 보여주려고 못쓴다. -> 이 인터페이스는 그냥 겉옷같은녀석이라, 다른 객체한테입혀서 보내줘야한다 추상 클래스의 추상 메서드와 달리 abstract 키워드는 사용할 수 없다. TS에서만 interface를 지원한다..

타입스크립트는 자바스크립트 문법을 그대로 이용할수 있지만, 타입 부분을 조금 업그레이드 해서 쓸수있는 JS의 업그레이드 버젼. JS문제점 5 - "3" 하면 "3"을 알아서 숫자로 바꿔서 계산해준다 - Dynamic Typing (편해보이지만, 프로젝트가 커지면 원하는 값이 없을때 에러찾기가 힘들다) TS 5 - "3" 에서 error를 띄워준다. 설치 npm install -g typescript 파일뒤에 js나 jsx 말고 ts를 붙히면 타입스크립트 파일이 된다. index.ts config 파일 생성 tsconfig.json 파일안에 넣을거 { "compilerOptions" :{ "target" : "es5", "module" : "commonjs", } } 브라우저는 ts파일을 못읽고 js파일을..