본문 바로가기
반응형

전체 글131

Gitlab Merge conflicts 해결방법 (+Merge locally만 보일 때 해결하는 방법) Gitlab을 사용하며 협업을 하게되면 꼼꼼하게 확인하고 merge 시키지만 어쩔 수 없이 충돌이 한번씩은 발생하게 된다ㅠ Gitlab내에서 아래처럼 Resolve conflicts라도 나오면 충돌난 부분을 바로 확인하고 수정할 수 있는데, 만약 Merge locally만 뜬다면 저기에서 주어지는 코드만으로 local에서 충돌을 해결하기에는 어려움이 있었다. 이를 해결하기 위해 많은 자료를 찾던 중 깃랩 공식문서에 있는 방식대로 해결을 해서 이를 정리해두려고 한다. 충돌 해결 방법 Gitlab은 사용자 인터페이스에서 해결할 수 있는 방법과, local에서 명령어를 이용하여 해결할 수 있는 방법이 있다. 1. Resolve conflicts - Interactive mode를 사용하여 해결하기 - Gitl.. 2022. 3. 18.
[Next.js] router, Link, a - page 이동 방법 tag 보다시피 브라우저가 다른 페이지로 보내기 위해 전체 페이지를 새로고침 하게된다. 이렇게 되면 페이지가 느려지고, SPA의 장점을 이용하지 못하게 된다. 그럼 해결방안은? Link Link태그를 사용해야한다. Link태그는 next.js에서 next/link 안에 들어있는 기능이다. 를 넣어주면 된다. 이처럼 새로고침이 안일어나고 페이지 이동이 되는것을 볼 수있다. useRouter hook 그럼 a태그는 어디에 사용하는 것일까? Link태그 말고도 next.js의 useRouter를 이용하여 페이지를 이동 시킬 수 있다. 하지만 아래에서는 next.js에서 a태그를 사용하는 것을 보여주겠다. a태그는 link를 연결하는 것이 아닌 Link 태그에서 적용 시킬 수 없는 style이나 classNam.. 2022. 3. 17.
[Next.js] Client-side Render 와 Static Pre Render (feat.Library 와 Framework ) React.js 는 Library React router DOM을 설치해야하고, router를 설정하고, 만들고, 설계하고 component를 import 해야한다. Next.js는 Framework 코드를 정해진 적절한 곳에 작성을 하면 코드를 불러와서 모든걸 동작하게 하는 것 특정한 규칙이 있어서 그것을 따라 코드를 작성해야 제대로 동작한다. React router DOM을 설치해야하고, router를 설정하고, 만들고, 설계하고 component를 import 할 필요가 없다. Next.js 란? - pages에서 name으로 router를 처리할 수 있다. - jsx를 사용하기위해 따로 React를 import 할 필요가 없다. useState나 useEffect를 사용하기 위해서는 필요하다. N.. 2022. 3. 17.
Styled-component typescript Props 받기 프로젝트를 진행하는데 JS로 개발을 할 때에는 styled-component에 props를 전달해주는데 에러가 없었는데 TypeScript로 개발을 함에 있어서 에러가 발생하였다. 에러는 Property 'height' does not exist on type 였다. 이는 props로 받는 값의 타입이 지정되어있지 않다는 뜻인걸 바로 알아차렸지만 어떻게 타입을 적용 시킬지에 대해 찾아보았다. 1) 단일 props 사용시 styled-components를 작성할 때 여러개 props를 사용하여 컴포넌트를 정의한다면 인터페이스를 사용하여 분리하여 사용할 수 있다. 컴포넌트에 타입지정할때는 styled.div 와 같이 사용한다. // styled-components에 1개 props 타입지정 // const .. 2022. 3. 16.
[Redux-middleware 리덕스 미들웨어 中] Redux-Saga란? Redux-middleware 1. 리액트 미들웨어란 무엇인가? - 기존의 리덕스는 액션이 발생하게 되면, 디스패치를 통해 스토어에게 상태 변화의 필요성을 알리게 된다. 우리가 알고있는 리덕스는 동기적인 흐름을 통해 아래와 같이 동작한다. 액션 객체 생성 -> 디스패치로 액션을 발생시킴 -> 리듀서는 정해진 로직에 의해 처리한 뒤 새로운 상태 값 반환 하지만, 동기적인 흐름만으로는 처리하기 힘든 작업들이 있다. 예를들어, 시간을 딜레이시켜 동작하게 한다던지, 외부 데이터를 요청하여 그에 따른 응답 화면을 보여주어야 한다면? 리덕스에서 이러한 비동기 작업을 처리하기 위해 사용하는 것이 리덕스 미들웨어 이다. 2. 리덕스 미들웨어의 종류 리덕스 미들웨어를 직접 만들어서 처리할 수도 있지만, 흔히 이미 만들어.. 2022. 3. 6.
React 공부한 내용 정리 [React란, 특징, 함수형컴포넌트, Hook] React란? facebook이 개발한 프론트엔드 라이브러리로, "컴포넌트" 라는 개념에 집중이 되어있다. SPA나 모바일 앱 개발 시 토대로 사용될 수 있음. 특징 Data Flow Component 기반 구조 Virtual Dom Props and State JSX 1. Data Flow React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다. Angular.js와 같은 양방향 데이터 바인딩은 규모가 커질수록 데이터의 흐름을 추적하기가 힘들지만, 단방향 흐름은 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 해준다. 2. Component 기반 구조 Component : 독립적인 단위의 소프트웨어 모듈 / 소프트웨어를 독립적인 하나의 부품으로 만드는 방법 React.. 2022. 3. 2.
[Hadoop] localhost:9000 failed on connection 에러 해결하기 문제1 우분투를 분명 잘 끄고 켰다 생각했는데 hadoop에서 mkdir 명령어를 실행하였을 때 localhost:9000 failed on connection에러가 발생하였다. 초반에는 이것때매 우분투를 삭제하고 다시 설치했었는데, 이번에는 해결했다. 해결 dfs daemon을 실행시키지 않아서 생긴 문제였다. $ start-dfs.sh 위의 코드를 통해 실행시켜주자. 문제2 근데 다시 mkdir 명령어를 실행해보니 Name node is in safemode. 라는 에러가 또 발생하였다... 후 이것도 초반에 해결 못한 문제였는데 이번에는 다시 해결을 했다. 해결 $ hadoop dfsadmin -safemode leave 위 명령어를 문제1의 해결 코드를 실행했던 위치에서 같이 실행시켜주자. 이 에.. 2022. 2. 24.
빅데이터 분산처리 시스템 하둡(hadoop)의 개념과 맵 리듀스(MapReduce)의 개념 하둡이란? - 하둡이란 간단한 프로그래밍 인터페이스를 통해 대용량 데이터에 대한 분산처리를 하는 소프트웨어 라이브러리 이다. 하둡의 시작은 '데이터를 읽고 처리하는 속도가 데이터의 양을 따라잡지 못한다.' 라는 문제에서 출발했다. 하둡의 두가지 키워드 1. scalable : 확장 가능함 - 자원을 추가하더라도 코드의 수정 등을 할 필요 없이 동일한 방법으로 프로세싱을 할 수 있다는 의미 2. distributed computing : 분산 컴퓨팅 - Job을 적절한 크기로 쪼갠 후, 분산된 자원원을 통해 계산하고 결과를 합치는 작업 맵 리듀스(Map-Reduce) 맵 리듀스란? - distributed computing 을 위한 프레임워크로, 하둡의 서브 프로젝트라고 볼 수 있다. - 맵리듀스는 Job.. 2022. 2. 21.
Redux (리덕스)의 개념 리덕스를 쓰면 좋은 이유 - 중앙 집중적인 데이터 스토어를 이용하여 관리한다. state는 읽기전용이다. - 리액트에서 state 를 업데이트 해야 할 때, setState 를 사용하고, 배열을 업데이트 해야 할 때는 배열 자체에 push 를 직접 하지 않고, concat 같은 함수를 사용하여 기존의 배열은 수정하지 않고 새로운 배열을 만들어서 교체하는 방식으로 업데이트를 한다. - 리덕스에서도 마찬가지로 기존의 상태는 건들이지 않고, 새로운 상태를 생성하여 업데이트 해주는 방식으로 해준다. 리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경 되는 것을 감지하기 위하여 shallow equality 검사를 하기 때문이다. 리듀서는 순수한 함수 순수한 함수, 라는 개념이 익숙하지 않으시죠. .. 2022. 1. 28.

티스토리툴바