티스토리

터렛짓는다

검색하기

블로그 홈

터렛짓는다

turret1234.tistory.com/m

터렛짓는다 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[React] useReducer useReducer 이전에 상태관리는 useState를 이용해서 컴포넌트 내부에서 이루어졌습니다. 하지만 useReducer를 이용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리할 수 있습니다. 또한 여러개의 상태관리를 한번에 할 수 있습니다. 자세한 설명은 React 공식문서를 참고바랍니다. https://ko.reactjs.org/docs/hooks-reference.html#usereducer useReducer 사용해보기 Info.js Input.js Input.js에서 상태관리를 하고 Info.js로 전달해주는 소스코드를 볼 수 있습니다. 위에 설명한대로 컴포넌트에서 상태관리 로직을 분리시키고 따로 상태관리를 하였습니다. 이름, 나이, 색상 모두 Input.js에서 관리를하고 Info로 .. 공감수 0 댓글수 0 2021. 10. 18.
[React] useRef useRef useRef는 특정DOM을 선택해야하는 상황에서 사용을 합니다. 특정 엘리먼트의 크기를 가져온다거다나 스크롤바의 위치를 가져오거나 설정을 해야할때 useRef를 사용합니다. 자세한 설명은 React 공식 문서에서 확인 가능합니다. https://ko.reactjs.org/docs/hooks-reference.html#useref useRef 사용해보기 User.js App.js 초기화 버튼을 눌렀을때 이름 input에 포커스가 잡히도록 하는 예제입니다. 이번 예제는 velopert님의 예제를 참고했습니다. https://velopert.com/ VELOPERT.LOG react-redux v7.1 alpha 에 드디어 Hooks 기능이 지원되었습니다. 아직 alpha 이기에 프로덕션에서 사용.. 공감수 0 댓글수 0 2021. 10. 16.
[React] useEffect useEffect useEffect는 컴포넌트가 렌더링 이후에 특정 작업을 수행하도록 설정 할 수 있습니니다. 자세한 내용은 React 공식 문서에서 확인 가능합니다. https://ko.reactjs.org/docs/hooks-effect.html [Using the Effect Hook – React A JavaScript library for building user interfaces ko.reactjs.org](https://ko.reactjs.org/docs/hooks-effect.html) useEffect 사용해보기 Example.js App.js 실행화면 +1 버튼을 누르면 값이 변하고 리렌더링이 됩니다. useEffect가 리렌더링될 때 마다 실행되는것을 확인할 수 있습니다. 전체 소스.. 공감수 0 댓글수 0 2021. 10. 15.
[React] useMemo useMemo 성능을 최적화하기 위하여 연산된 값을 useMemo를 이용하여서 재사용하도록 하는 Hook입니다. React의 공식문서에는 다음과 같이 나옵니다. https://ko.reactjs.org/docs/hooks-reference.html#usememo [Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org](https://ko.reactjs.org/docs/hooks-reference.html#usememo) 즉 성능 최적화를 위해서 사용 할 수 있지만, 보장이 되어 있지는 않다는 것입니다. 평균 값을 계산하는 예제를 살펴보겠습니다. useMemo를 사용하지 않을 때 Avg.js a.. 공감수 0 댓글수 0 2021. 10. 14.
[React] useCallback useCallback react에서 컴포넌트가 리렌더링되면 함수들이 새로 다시 만들어집니다. 함수를 선언하고 하는 것은 리소스를 많이 차지하지는 않지만 최적화를 위해서는 props가 바뀌지 않을때 Virtual DOM 에 새로 렌더링을 하지 않고 컴포넌트의 결과물을 재사용하는 부분도 중요합니다. useCallback 사용법 Input 값 추적하기 Input.js Input으로 입력받은 값이 변할때마다 컴포넌트는 리렌더링되는데 이럴때마다 함수가 재 선언되면 리소스의 낭비가 생길겁니다. useCallback을 이용해서 함수를 재선언하지않고 재사용 하도록 하였습니다. App.js 실행화면 전체 소스코드는 Github에서 확인 가능합니다 https://github.com/hanhyung6376/learn-rea.. 공감수 0 댓글수 0 2021. 10. 13.
[React] useState useState 리액트에서 컴포넌트는 한 번 렌덩이되고 끝나지 않습니다. 리액트의 컴포넌트는 실시간으로 계속 렌더링되는데 일반 변수를 사용하면 성능의 저하를 불러올 수 있습니다. 리액트의 컴포넌트에서 상태를 관리하는 방법 중 하나로는 useState가 있습니다. useState는 유동적으로 변경될 값을 관리할 때 사용이 됩니다. useState 사용해보기 Counter 구현 Counter.js 초깃 값을 0으로 설정을하고, 버튼을 누르면 증감이 되도록 하였습니다. App.js 실행화면 Random 구현 Random.js Counter와 마찬가지로 초기 상태는 0으로 설정을 하고 버튼을 누르면 값이 랜덤으로 변하게 구현을 했습니다. App.js 실행화면 Github: https://github.com/ha.. 공감수 0 댓글수 0 2021. 10. 12.
[백준] 1922. 네트워크 연결 - 파이썬 풀이. 최소 신장 트리 알고리즘인 크루스칼 알고리즘을 이용해서 풀면된다. 최소 비용을 구해야하는 문제이니 cost를 기준으로 graph를 정렬 시킨 후 크루스칼 알고리즘을 이용하면 어렵지 않게 풀 수 있다. 최소 신장 트리 알고리즘이 가물가물해서 한번 풀어봤다. 소스코드. " target="_blank" rel="noopener">https://gist.github.com/hanhyung6376/f6622fd34ba8c968bc12afce179c4d80.js"> 공감수 0 댓글수 0 2021. 10. 11.
[React] 외부 라이브러리 없이 캘린더 구현 React만을 사용해서 캘린더를 구현하였습니다. 날짜 계산은 내장 모듈인 Date를 사용하여서 구현을 했습니다. 우선 프로젝트 구조는 다음과 같습니다. 구현한 기능 캘린더 화면 최상단에 연도 및 월, 이동 버튼 표시 7 x n(week) 형태의 격자로 표시 캘린더 상단에 요일을 일월화수목금토 순서로 표시 주말은 빨간색으로 표현 이전, 다음달의 날짜는 흐리게 표현 월, 년도 이동 기능 내장 함수 Date를 이용해서 버튼 클릭 시 증감 방식으로 구현 일정 입력 해당 날짜 클릭 시 모달 창에서 일정, 일정 색상을 입력을 받고 해당하는 날짜의 칸에 일정 추가 색상 선택 모달 창에서 원하는 일정의 백그라운드 색상 선택 가능 2일 이상의 일정 모달 창에서 종료일 설정 체크박스 클릭시 종료일을 입력받는 방식으로 구현.. 공감수 1 댓글수 0 2021. 10. 11.
[백준] 11724. 연결 요소의 개수 - 파이썬 풀이. 그래프의 연결 요소끼리 각 그래프의 위치에 추가하고 깊이 우선 탐색을 실시한다. visited배열을 이용하여서 현재 위치를 방문했는지 체크를 해주고 방문하지 않은 위치라면 dfs를 실시하고 +1을 한다. 소스코드. 공감수 0 댓글수 0 2021. 10. 9.
Webpack이란 무엇인가 Webpack 이란? 웹팩은 오픈 소스 JavaScript 모듈 번들러로 여러개로 나누어져 있는 파일들을 하나의 JavaScript 코드로 압축하고 최적화 하는 라이브러리이다. . Webpack의 사용 이유 컴파일 속도를 빠르게 해준다. 하나의 js 파일로 만들어서 웹페이즈 성능을 최적화 한다. 로더를 사용할 수 있다. 모듈 단위로 개발이 가능하며, 가독성과 유지보수가 쉬워진다. 최신 JavaScript 문법을 지원하지 않는 브라우저에서 사용할 수 있게 코드로 쉽게 변환 시켜준다. 공감수 0 댓글수 0 2021. 10. 8.
[JavaScript] 파도 효과 구현하기 파도 효과 구현하기 우선 visual studio를 사용한다면 live server 익스텐션을 추가해서 live server 환경에서 실행을 해야합니다. 프로젝트 구조 다음과 같이 구성되어 있습니다. HTML html 같은 경우에는 js, css 파일을 로드하고 다른 요소를 만들지는 않았습니다. CSS css 역시도 설명할게 없습니다. JS Point.js Point.js는 좌표들을 생성합니다. 좌표를 생성하는 이유는 Wave.js에서 Point에서 생성해낸 좌표를 기준으로 라인을 이어야하기 떄문에 좌표를 생성하고 각각의 좌표가 움직이는 speed등을 정합니다. Wave.js Wave.js에서는 Point에서 생성한 각각의 좌표들을 이어 라인을 이어지게하는 역할을 합니다. 반복문을 통해 이전 좌표 값과 .. 공감수 0 댓글수 0 2021. 10. 7.
[백준] 17435. 합성함수와 쿼리 풀이. sparse table이라는 자료구조를 이용해야한다. sparse table은 정적 구간 질의를 처리할 수 있는 자료구조인데 대부분의 구간 질의를 O(log n)시간에 처리하지만 특정한 연산에 대해서는 O(1)의 시간 복잡도를 가지는 특징을 가지고 있다. sparse table로 구간 질의를 처리하기 위해서는 배열이 정적이어야한다. 해당 문제를 살펴보면 f2(1) = f(f(1)), f4(1) = f2(f2(1))과 같은 구조로 되어있다. 즉 sparse table에는 2의 제곱으로 늘어나는 값들을 저장해서 풀면된다. 아직 확실히 이해가 되지 않아서 다시 풀어보아야 할 것 같다. 소스코드. 공감수 0 댓글수 0 2021. 10. 5.
[백준] 2170. 선 긋기 - 파이썬 풀이. 우선 좌표를 입력받아 배열에 저장을하고 정렬을 해준다 그리고 좌표의 최솟값이 -1000000000 이기때문에 now 값은 음수float('inf')값으로 설정을 하고 그래프를 반복문으로 돌면서 now 값이 start 값 보다 적다면 now 값을 start 값으로 설정하고 now 값이 end 값 보다 적다면 end - now 값을 결과 값에 저장한다 사실상 end - start의 길이를 구한다고 생각하면 되는데 여러번 선이 그인곳은 한번만 계산해야하기 때문에 now 값을 저장하는 것이다. 소스코드. 공감수 0 댓글수 0 2021. 9. 29.
[백준] 18352. 특정 거리의 도시 찾기 - 파이썬 풀이. bfs를 이용해서 풀었다. 양방향 그래프이지만 최단거리를 구하는 문제이기때문에 왕복을 한다면 최단거리가 아니다. 따라서 bfs를 이용하여서 해당 도시를 방문했는지 확인을 하고 거리를 구한다. 소스코드. 공감수 0 댓글수 0 2021. 9. 27.
[React] withRouter를 이용한 링크 이동시 메뉴변경 링크 이동으로 메뉴 변경 react를 이용하여 특정 링크로 이동하여 상단 메뉴 콘텐츠 내용을 변경하는 작업을 해보겠습니다. 우선 리액트 앱을 만들어줍니다. yarn create react-app withrouter-ex 그리고 scss와 react-router-dom을 사용할 예정이니 라이브러리들을 설치해줍니다. yarn add react-router dom node-sass@5.0.0 다 완료가 되었다면 src 폴더 안에 containers와 components폴더를 만들어줍니다. containers 폴더에는 Default.js, Home.js, Menu.js, Profile.js 를 생성해줍니다. Home.js Menu.js Profile.js Default.js는 나중에 작업을 하도록 하겠습니다. .. 공감수 0 댓글수 0 2021. 9. 27.
[JavaScript] 무한 스크롤 구현하기 오늘은 무한 스크롤 구현에 관하여 기록해보겠습니다. 스크롤이 제일 아래로 내려가면 js를 이용하여 새로운 콘텐츠를 생성 및 추가되는 방식으로 구현을 했습니다. HTML section 태그에 class="box"인 div가 있습니다. 현재는 4개의 div가 있지만 스크롤을 내리면 계속 추가되게 할 예정입니다. css css는 간단하게 h1 태그는 position: fixed를 사용하여 스크롤을 내려도 고정된 위치에서 보이게 하였고 html을 실행하게 되면 기본적으로 보이게되는 스타일은 다음과 같습니다, js 윈도우의 높이와 현재 스크롤 위치의 값을 더한 뒤 문서의 높이와 비교하여 같거나 크다면 콘텐츠를 추가하는 방식입니다. 위의 코드들을 실행하여 작성하고 실행해보면 정상적으로 무한스크롤 기능이 작동하는 것.. 공감수 0 댓글수 0 2021. 9. 26.
Rest API Rest API란? REST 아키텍처의 제약조건을 준수하는 애플리케이션 프로그래밍 인터페이스를 뜻한다. REST는 Resprsentational Transfer의 줄임말이다. 1. REST란? 웹에 존재하는 모든 자원에 고유한 URL을 부여하여 활용하는 것 2. API란? API는 Application Programming Interface의 줄임말로 애플리케이션 소프트웨어를 구축하고 통합하는 정의 및 프로토콜 세트이다 3. REST의 특징 REST의 특징은 다음과 같다. 1. Uniform (유니폼 인터페이스) > URI로 지정한 리로스에 대한 조작을 통일되고 한정적인 인터페이스로 수행하는 아키텍처 스타일 Stateless (무상태성) REST는 무상태성 성격을 갖는다. 작업을 위한 상태정보를 따로 저.. 공감수 0 댓글수 0 2021. 9. 26.
[백준] 16975. 수열과 쿼리 21 - 파이썬 풀이. 이진 트리를 이용해서 리프노드만을 이용해서 풀었다. 리프노드들을 제외한 노드들은 구간합을 구하는 문제가 아니라서 저장될 필요가 없다. 소스코드. 공감수 0 댓글수 0 2021. 9. 25.
[백준] 1238. 파티 - 파이썬 풀이. 다익스트라 알고리즘을 이용해서 출발점에서 도착점까지의 최단 경로 + 도착점에서 출발점까지의 최단 경로를 구해서 최댓값을 출력해주면 된다. 소스코드. 공감수 0 댓글수 0 2021. 9. 24.
[백준] 1517 버블 소트 - 파이썬 풀이. 세그먼트 트리로는 아직 풀지 못해서 병합정렬로 풀었다. 우선 문제의 버블 정렬은 두 요소 간 순서가 맞으면 가만히 놔두고 순서가 틀렸다면 숫자를 교환해야한다. 그리고 swqp의 횟수를 구해야한다. 병합 정렬을 이용하여 swap의 횟수를 구하였다. 소스코드. 공감수 0 댓글수 0 2021. 9. 23.
[프로그래머스] 숫자 문자열과 영단어 - 파이썬 숫자 문자열과 영단어 문제 설명 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다. 1478 → "one4seveneight" 234567 → "23four5six7" 10203 → "1zerotwozero3" 이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요. 참고로 각 숫자에 대응되는 영단어는 다음 표와 같습니다. 숫자영단어 0 zero 1 one 2 two 3 three 4 four 5 fi.. 공감수 0 댓글수 0 2021. 9. 22.
[프로그래머스] 오픈채팅방 - 파이썬 오픈채팅방 문제 설명 오픈채팅방 카카오톡 오픈채팅방에서는 친구가 아닌 사람들과 대화를 할 수 있는데, 본래 닉네임이 아닌 가상의 닉네임을 사용하여 채팅방에 들어갈 수 있다. 신입사원인 김크루는 카카오톡 오픈 채팅방을 개설한 사람을 위해, 다양한 사람들이 들어오고, 나가는 것을 지켜볼 수 있는 관리자창을 만들기로 했다. 채팅방에 누군가 들어오면 다음 메시지가 출력된다. "[닉네임]님이 들어왔습니다." 채팅방에서 누군가 나가면 다음 메시지가 출력된다. "[닉네임]님이 나갔습니다." 채팅방에서 닉네임을 변경하는 방법은 다음과 같이 두 가지이다. 채팅방을 나간 후, 새로운 닉네임으로 다시 들어간다. 채팅방에서 닉네임을 변경한다. 닉네임을 변경할 때는 기존에 채팅방에 출력되어 있던 메시지의 닉네임도 전부 변경된다.. 공감수 0 댓글수 0 2021. 9. 21.
[백준] 1766 문제집 - 파이썬 풀이. 진입 차수가 0인 정점을 힙에 삽입하고 힙에서 해당 원소를 꺼내고 해당 원소와 연결된 간선을 제거해준다 이후 진입 차수가 0이된 정점을 힙에 삽입을하고 힙이 모두 빌 때까지 반복을 한다. 소스코드. 공감수 0 댓글수 0 2021. 9. 20.
STRAPI 구현 STRAPI 란? STRAPI는 DB와 쉽게 연동해서 RESTful 또는 GraphQL 방식으로 데이터를 받고 내주는 백엔드 역활을 해주는 툴이라고 볼 수 있다. headless CMS CMS는 저작물 관리 시스템(Content Management System)의 약자로 글이나 사진등의 컨텐츠를 CRUD하면서 관리하는 시스템을 말한다. CMS는 DB, 백엔드, 프론트 엔드를 모두 갖추고 있는 하나의 완성된 시스템이라면, Headless CMS는 프론트엔드를 뺀 CMS라고 볼 수 있다. 즉 STRAPI가 Headless CMS구조의 백엔드를 책임진다. STRAPI 설치 방법 STRAPI의 구현 방법은 간단하다 YARN과 NPM, 몽고DB가 설치되어 있다면 쉽게 가능하다. yarn create strapi-.. 공감수 0 댓글수 0 2021. 9. 19.
[Git] Git 명령어 모음 - Git 초기 설정 git config --global user.name “username” git config --global user.email “email” -현재 디렉토리를 Git 저장소로 지정 git init -상태 보기 git status -인덱스에 파일 추가 -특정 파일 추가 git add 파일 -모든 파일 추가 git add . -Commit을 통해 저장소에 기록 git commit -m ‘comments’ -변경사항 확인 git log -원격 저장소와 연결 public repo git remote add origin http://github.com/username/레포지토.git private repo git remote add origin https://personal토큰@github.. 공감수 0 댓글수 0 2021. 9. 17.
[백준] 3665. 최종 순위 - 파이썬 풀이. 처음에 주어진 순위들의 간선을 모두 처리하고 바뀐 순위의 간선 정보들을 처리하여 풀면된다. 즉 그래프를 통해 사이클이 존재하는지 존재하지 않는지 확인을 하고, 최종 순위를 담는 배열의 길이가 n이 아니라면 불가능의 경우로 하였다. 소스코드. 공감수 0 댓글수 0 2021. 9. 15.
[백준] 2357 최솟값과 최댓값 - 파이썬 풀이. 기존에 봤던 구간 합, 구간 곱이 아닌 구간의 최솟값, 최댓값을 구해야하는 문제이다. 우선 세그먼트 트리에 대해 알고있다면 간단하게 풀 수 있는데 최솟값을 저장하는 트리와 최댓값을 저장하는 트리를 따로 만들어서 각각의 트리를 초기화 하고 쿼리를 실행하면 된다. 소스코드. 공감수 0 댓글수 0 2021. 9. 14.
[백준] 11505 구간 곱 구하기 - 파이썬 풀이. 세그먼트 트리에대한 설명은 https://turret1234.tistory.com/229 [백준] 파이썬 2042 - 구간 합 구하기 풀이 . 세그먼트 트리를 이용하여야 한다. 세그먼트 트리(Segment Tree)란? 세그먼트 트리는 다음 두 연산을 어떻게 더 효율적으로 할 수 있을까라는 고민에서 출발한다. 1. 구간 l, r(l 공감수 0 댓글수 0 2021. 9. 14.
[웹 프로그래밍] 스토리지와 쿠키 쿠키란? 쿠키란 클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 파일을 의미한다. 쿠키는 클라이언트의 브라우저 메모리 혹은 하드디스크에 저장이되고, 매번 서버에 전송되므로 크기가 크다면 서버에 부담이 갈 수 있다. 대략 4KB까지의 데이터를 저장할 수 있으며 유효기간이 존재하며 대부분의 브라우저가 지원을 한다. 웹 스토리지란? 웹 스토리지는 데이터를 저장할 수 있도록 HTML5 부터 지원하는 저장소이다 Key, Value 쌍 형태로 데이터를 저장하며 쿠키와 달리 서버에 전송되지 않으므로 서버에 부담이 가지 않는다. 또한 필요한 경우에만 꺼내 쓰는 것이므로, 자동 전송의 위험이 없고 5MB까지의 데이터를 저장할 수 있으며 유효 기간이 존재하지 않는다. 브라우저가 HTML5를 지원하지 않는다면 사.. 공감수 0 댓글수 0 2021. 9. 13.
[백준] 파이썬 2098 - 외판원 순회 풀이. 비트마스킹을 이용해서 풀어야한다. 비트마스킹의 장점은 다음과 같이 3가지가 있다. 1. 빠른 수행시간 - 2진수를 이용하기에 연산속도가 빠르다 2. 적은 메모리 - [1, 1, 0, 0, 1, 1, 1] 같은 방문을 체크하는 배열을 1100111과 같은 이진수로 표현이 가능하다 3. 짧고 깔끔한 코드 우선 문제에서 살펴봐야하는 것은 도시에서 도시끼리의 길에 가중치가 있고 경로가 없을 수 있다는 것 그리고 처음의 경로로 돌아와야한다는 것이다. 즉 출발 지점에서 출발지점으로 돌아와야하므로 순환을 이룬다는 것이다. 또한 경로가 같으면 어떤 도시에서 출발하더라고 순회 비용은 동일하므로 무조건 0에서 출발하여 가장 작은 순회 비용을 구하면 된다. 소스코드. 공감수 0 댓글수 0 2021. 9. 13.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.