본문 바로가기

전체 글44

큐 와 스택 스택은 FILO(First In Last Out)의 구조이다. 1, 2, 3, 4 라는 것을 순서대로 스택에 쌓이고 꺼낼 때는 4, 3, 2, 1의 순서로 꺼낼 수 있다. push 자료를 넣는다. pop 자료를 빼낸다. empty 스택이 비어있는지 확인한다. 이밖에도 몇가지 더 있지만 중요하다고 생각되는 부분이다. 큐는 FIFO (First In First Out)의 구조이다. 1, 2, 3, 4를 순서대로 스택에 집어넣고 꺼낼때도 1, 2, 3, 4순서대로 꺼내올 수 있다. push 자료를넣는다 pop 자료를 빼낸다. empty 큐가 비어있는지 확인한다. 큐를 자주 사용하는 알고리즘은 BFS 가 있다. 두개 모두 복잡도는 O(1) 이 된다. 2020. 2. 18.
BIG-O 표기 알고리즘에서 시간복잡도. 문제의 크기(N)에대해서 시간을 알아볼 수 있다. big O 표기법이 라고도하며 가장 안좋은 경우에 얼마나 걸리는지 예상할수 있다. O(N^N), O(N^2), 0(N) 등으로 표시할수있다. N은 무한대로 커지기 때문에 사소한 부분 예를들어 O(3N) 같이 상수항 같은 부분들은 무시할 수 있다 두가지 항이있을때는 변수가 큰것만 빼고 무시한다. O(N^2 + N) 이라면 O(N^2)만 남겨도 된다. 변수가 다르면 두변수를 사용한다. O(N+M) 1부터 N 까지의 합을 구하는 여러 종류의 코드. int sum = 0; for(int i = 0; i 오래걸림 으로 알수있다. 2020. 2. 14.
리덕스 에러상황 가끔 리덕스 사가를 이용하거나 리덕스를 이용할때 수정시 코드에 이상이 없는데 디스패치가 안되는 경우 해결방법: 코드를 지웠다가 다시 해보거나 위치를 옮겨보거나 해보자. 2020. 2. 11.
리액트 에러 상황 Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. 이란 애러가 발생했다면 해당 컴포넌트의 import를 다시 하거나 연결되어있는 컴포넌트들 중에 대소문자가 달라서 발생했을수도 있다. Cannot read property 'search' of undefined 이런 식으로 해당 프롭스의 locat.. 2020. 1. 28.
리덕스 미들웨어 알아보기 리덕스 미들웨어를 알아보려고 한다. 액션이 리듀서로 보내지기 전에 미들웨어의 작업 설정해서 보낼 수 있다. 그러면 이 작업 들을 실행하게 되는데 리덕스로 비동기 작업을 할 때 그 효과가 크다. 이제 기본적인 비동기 미들웨어 thunk를 알아보자. thunk를 설치한다. $ yarn add redux-thunk 전에 만들었던 MovieRankAPI 를 복사해서 MovieMiddleware로 만들어 본다. lib폴더를 만들고 api 파일을 만든다 (앞에서 영화 api를 가져오는 주소) import axios from "axios"; export const getBoxOffice = query => axios.get( `http://www.kobis.or.kr/kobisopenapi/webservice/res.. 2020. 1. 20.
REDUX 알아보기 Redux는 점점 더 프로젝트 규모가 커지면 상태 값이 업데이트될 때 혼란이 올 수 있는데 이러한 복잡함을 해소해주는 라이브러리라고 한다. 리덕스를 사용해보자 사용할 부분을 전에 만들었던 todo를 상태 관리해보려 한다. 리덕스 라이브러리 설치 yarn add redux react-redux 설치가 다 되었으면 Todo를 복사해서 reduxTodo라고 이름을 바꾼다. 또 리덕스 모듈 폴더와 컨테이너 폴더를 만들어서 사용할 것이다. todo.js에 액션 정의와 액션 생성 함수, 리듀서 함수를 만든다. modules/todo.js const INSERT = "todo/INSERT"; const CHECK = "todo/CHECK"; const REMOVE = "todo/REMOVE"; const initia.. 2020. 1. 16.
영화 API 사용해보기 기존에 있던 todo 와 라우터를 사용해봤으면 이제 api를 사용해볼 차례이다. api를 사용하려고 알아보던 와중에 영화진흥위원회 api를 사용해보기로 했다. https://www.kobis.or.kr/kobisopenapi/homepg/main/main.do 주소에서 api를 가져올 수 있다. 일단 src/components/MovieRankAPI 를 만들었다. 그리고 각각의 해당하는 아이템과 리스트를 만들었다. import React from "react"; import styled from "styled-components"; ... const MovieItem = ({ movie }) => { const { rank, rankOldAndNew, movieNm } = movie; // console.. 2020. 1. 15.
리액트 라우터 사용하기 저번에 만들었던 Todo에 이어서 라우터를 연습하자 import React, { useState, useCallback, useRef } from "react"; import "./TodoTemplate.css"; import TodoList from "./TodoList"; import TodoInsert from "./TodoInsert"; import styled from "styled-components"; const TodoTemplateBlock = styled.div` display:flex; width:768px; margin: 0 auto; margin-top: 100px; @media screen and (max-width:768px){ width:100%; } ` const TodoL.. 2020. 1. 15.
속성 간단정리 태그 속성 target 링크한 url을 표시할 위치 rel 하나의 스페이스로 구분하는 연결한 url과의 관계를 나타내는 링크유형 참고: target을 사용할 때, rel="noreferrer"를 추가해 window.opener의 악의적인 사용을 방지하는걸 고려하세요. 참고: target="_blank"를 사용해 다른 페이지를 열면, 기존 페이지와 새 페이지가 같은 프로세스에서 돌아갑니다. 따라서 새 페이지에서 비싼 JavaScript 연산을 하는 순간 기존 페이지 성능에 악영향을 줄 수 있습니다. 이 현상을 피하려면 rel="noreferrer noopener"를 추가하세요. input autocomplate 는 자동완성 기능. button 의 속성에서 disabled 속성 은 해당버튼을 비활성화 시킨다 2020. 1. 14.

티스토리툴바