본문 바로가기
반응형

전체 글124

[Docker]도커란 무엇인가? 도커의 등장 - 다양한 이유로 계속 바뀌는 서버 환경과 개발 환경의 문제를 해결하기 위해 등장 * 기존 서버나 개발 환경이 변경되면 컴퓨터 셋팅(개발환경)등을 다시하거나 그 과정에서 발생하는 문제점들이 많았음. 그렇다면 도커란? - 개발한 소프트웨어 유닛, 코드가 포함된 패키지 및 코드를 실행하는 종속성 들을 담을 수 있음 - 도커가 실행되는 모든 곳에서 이를 가져올 수 있음 - 동일한 환경에서 정확히 동일한 애플리케이션을 실행할 수 있음 - 결국 각 개발자 마다 개발 환경을 맞추기 위해 저장을 하는 것. 도커 이전의 문제점 문제점 1. 개발자들이 규모가 큰 환경에서 함께 개발을 할 때 - Node.js 14ver를 사용하였는데, 한동안 개발이 이루어지지 않다가 다른 개발자가 Node.js 16ver로 .. 2022. 6. 6.
[Regex] 정규표현식 정규표현식이란? 정규표현식은, 문자열에서 특정 문자 조합을 찾기위한 패턴이다. 특정한 조건의 문자를 '검색'하거나 '치환'하는 과정을 매우 간편하게 처리할 수 있도록 하는 방법이다. Groups and ranges (그룹, 레인지) | 또는 () 그룹 [] 문자셋, 괄호안의 어떤 문자든 [^] 부정 문자셋, 괄호안의 어떤 문자도 아닐 때 (?:) 찾지만 기억하지는 않음 - 그룹 Quantifiers (수량) ? 없거나 있거나 (zero or one) * 없거나 있거나 많거나 (zero or more) + 하나 또는 많이 (one or more) {n} n번 반복 {min,max} 최소, 그리고 최대 Boundary-type (단어 경계) \b 단어 경계 \B 단어 경계가 아님 ^ 단어의 시작 $ 단어의 .. 2022. 3. 28.
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.

티스토리툴바