본문 바로가기
반응형

전체 글295

MongoDB docker 설치 테스트나 학습 용도로 로컬에 MongoDB를 설치해서 사용하는 경우가 종종있는데 로컬에 직접 인스톨하는 방법보다는 Docker를 활용하면 관리하기가 편리하고 간단하다. MongoDB Docker 실행 다른거 다 생략하고 아래와 같이 docker run 명령어만 실행하면 Docker로 mongodb가 실행이 된다. 로컬에 mongodb이미지가 없으면 이미지 pull 부터 실행된다. docker run -d --name mongodb \ -v ~/data:/data/db \ -p 27017:27017 \ mongo 각 옵션에 대한 설명은 아래와 같다. - -d: 백그라운드 실행 - -v: 볼륨 마운트, 로컬 파일 경로를 컨테이너 내부의 파일경로로 마운트, - -p: 로컬 포트 포워딩 - 도커 이미지: 위와 .. 2023. 9. 16.
VSCode 터미널 출력 버퍼 라인수 늘리기 VSCode 터미널의 기본 출력 버퍼가 작아서 전체 로그가 다 안보이는 경우가 있다. 설정을 통해서 VSCode 터미널의 출력 버퍼 사이즈를 늘려본다. 먼저 설정 화면을 실행시킨다. 설정 단축키 "CMD ,"(CMD와 콤마)를 눌러준다. 또는, VSCode의 좌측하단에 톱니바퀴 모양의 아이콘을 클릭한다. 또는 아래처럼 기본설정 > 설정을 클릭해도 된다. 설정 화면에서 "scrollback" 키워드로 검색한다. 그리고 기능 > 터미널에서 Terminal > Integrated: Scrollback 항목의 값을 원하는 값으면 입력한다. 기본값은 1000으로 되어 있을 것이다. 2023. 9. 14.
react 함수형 컴포넌트 생명주기(LifeCycle) 이해 react 함수형 컴포넌트는 이전에 포스팅 했던 클래스형 컴포넌트와 다른 생명주기(라이프사이클) 메소드를 사용한다. 클래스형 컴포넌트 생명주기 메소드에 대한 내용은 다음 링크를 참조하고, 이번에는 함수형 컴포넌트 생명주기에 대해 정리해 본다. https://happy-jjang-a.tistory.com/251 아래는 함수형 컴포넌트와 클래스 컴포넌트 생명주기 메소드를 비교한 내용이다. 함수형 컴포넌트에서는 메소드가 여러개로 분리되어 있지 않고 react Hook 메소드 중 하나인 useEffect가 주요 메소드라고 할 수 있다. 생명주기(라이프사이클) 클래스형 컴포넌트 함수형 컴포넌트 Mount/Update render() return() Mount componentDidMount() useEffect(.. 2023. 9. 10.
React Redux 크롬 개발자 도구(Redux DevTools) 설치 및 활용 Redux 크롬 개발자 도구를 설치하면 현재 Store의 상태를 개발자 도구에서 편리하게 조회 가능하고 액션 Dispatch, 액션에 따른 상태 변화 등도 쉽게 확인이 가능하다. 1. 크롬 확장 프로그램 설치 먼저 아래 링크로 접속하여 크롬 웹 스토어로 접속한다. https://chrome.google.com/webstore/category/extensions Chrome 웹 스토어 Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요. chrome.google.com 좌측의 검색창에 "redux devtools"를 입력하여 검색하면 오른쪽에 Redux DevTools 프로그램이 결과로 나오게 되는데 이를 클릭한다. 다음 화면에서 우측 상단의 "Chrome에 추가" 버튼을 클릭해서.. 2023. 9. 9.
다시, 나는 희망의 증거가 되고 싶다 - 서진규, 삶의 자세에 관한 책 세이노의 가르침이라는 책을 읽고 가장 먼저 읽어야 할 부류인 삶의 자세에 관한 책이라고 추천 도서 목록에 있어서 읽어봤다. 삶을 어떻게 바라보고 어떻게 행동 해야하는지 많이 느끼게 된다. - 그 순간 나는 분노를 선택했다. 포기하지 않았다. 내가 반드시 성공해서 이 가여운 아이를 이 상태로 살게 하지 않겠다고 결심했다. 나 스스로를 돕겠다고 결정했다. 그리고 마음가짐을 달리하고 행동으로 옮겼다. 그것은 내 인생 전체를 통틀어 가장 잘한 선택이다. 내가 나를 지킬 힘이 충분하지 않을 때는 분노를 원동력으로 삼으라는 것이다. 나를 지키기 위해서는 분노의 에너지를 원동력으로 삼아 인내하고 힘을 키워야 한다. 종전에는 나만 지키는 것이 아니라 내가 사랑하는 사람도 지킬 수 있다. 나를 일으켜 세우고 포기하지 않.. 2023. 9. 9.
react 클래스 컴포넌트 생명주기(LifeCycle) 메소드 이해 모든 react 컴포넌트는 페이지 렌더링 되기전 준비 과정부터 페이지에서 사라질 때까지 생명주기(라이프사이클)가 존재한다. 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리하거나 컴포넌트 업데이트 전후로 어떤 작업을 처리해야 할 때 등에 컴포넌트 생명주기 메소드를 사용할 수 있다. 참고로 본문의 생명주기 메소드는 클래스 컴포넌트에서만 사용 가능하고 함수형 컴포넌트에서는 사용할 수 없다. 함수형 컴포넌트에서는 Hooks기능을 사용하여 비슷한 작업을 처리 할 수 있는데 이는 별도로 알아볼 예정이다. react 라이프사이클은 마운트, 업데이트, 언마운트 이렇게 3가지로 나뉜다. 1. 마운트(생성) DOM이 생성되고 웹 브라우저에 나타나는 것을 마운트라고 한다. 이 때의 호출되는 메소드는 아래와 같다. cons.. 2023. 9. 5.
부자의 언어 - 존 소포릭, 부를 향한 인생 수업 부자의 언어라는 책을 읽었다. 흔히들 얘기하는 경제적 자유, 부를 쌓는 방법 등에 대한 내용이라 생각했는데 인생을 살아가는데 정말 마음에 새겨둘 좋은 내용이 너무 많은 책이다. 단순 부를 쌓기 위한 방법을 넘어서 성공적인 인생을 살아가기 위한 지침서라고 봐도 좋을 것 같다. 부자란 무엇인가? 단순히 ‘돈이 많은 사람’을 부자라고 생각하지 않는다. 부자는 ‘경제적 자유를 얻은 사람’이다. 돈의 노예가 되기보다는 돈을 다스리는 주인이 되고, 돈으로부터 인생을 속박당하지 않는 것, 이것이 부자가 되고 싶은 가장 정확하고도 유일한 이유리라. “돈 문제를 극복해야 다른 중요한 것들에 집중할 수 있어. 돈과 시간이 없으면 자기 인생을 뜻대로 살아갈 수 없게 돼. 돈으로 풀 수 있는 문제가 닥쳤을 때, 그걸 해결하려.. 2023. 9. 3.
VSCode Reactjs code snippets(코드 자동 생성) React 개발을 하다보면 컴포넌트 생성 시 마다 작성해줘야 하는 공통 부분들이 있는데 이러한 템플릿을 자동으로 생성할 수 있는 VSCode Extension이 Reactjs code snippets 이다. Reactjs code snippets 설치 VSCode 좌측의 Marketplace를 선택하고 "Reactjs code snippets"으로 검색을 한다. 그러면 검색 결과로 여러 개가 나오는데 제작자가 charalampos karypidis로 된것을 선택하고 설치를 한다. 필자는 이미 설치가 되어 있어서 설정 아이콘이 표시가 되는 것이다. Reactjs code snippets 사용법 설치를 하게되면 몇가지 단축키만으로 코드 템플릿을 생성할 수 있다. 예를 들어 작성할 .js 파일을 생성 후 "r.. 2023. 9. 2.
VSCode 개발환경 - html 태그 자동 닫기 및 이름 변경(Auto Close Tag, Auto Rename Tag) VSCode에서 html, JSX 등 태그 코드를 작성할 때 매번 Close 태그를 직접 작성해주거나, 매칭 되는 태그명을 변경할 때 Open,Close태그명을 각각 수정해주면 많이 번거롭다. VSCode Extension으로 Auto Close Tag, Auto Rename Tag를 설치해주면 프론트 개발하기가 훨씬 수월해진다. 2개 모두 VSCode Marketplace를 통해 쉽게 설치 가능하다. 1. Auto Close Tag 자동으로 Close 태그를 생성해준다. VSCode에서 좌측 메뉴의 Marketplace를 선택하고, "Auto Close Tag"로 검색하면 아래와 같이 검색 결과가 나오고 설치 버튼만 클릭하면 된다. 필자는 이미 설치가 되어 있어서 설치버튼 대신 설정이 보이는것 뿐이다... 2023. 9. 2.
아이폰 Apple 구독(자동결제) 취소 앱스토어에서 앱을 다운로드 받아 사용하는 경우 유로 앱인 경우 월단위 또는 년단위로 구독을 하는 경우가 있다. 구독을 하게 되면 자동결제로 진행하여 신경을 안쓰면 비용을 계속 내게되는 경우가 있는데 불필요한 구독을 취소하는 방법을 알아본다. 설정 앱을 이용하는 방법과 앱스토어 앱을 이용하는 방법이 있는데 2가지다 방법은 동일하다. 1. 설정 앱 이용 방법 먼저 설정 앱을 클릭하고 들어간다. 다음으로 제일 상단의 계정정보를 터치하고 이동한다. 다음화면에서 구독을 터치하고 이동한다. 다음화면에서 자신이 구독중이 모든 앱이 표시되고, 구독을 취소할 항목을 터치한다. 마지막으로 하단의 구독취소 버튼을 터치해서 구독을 취소한다. 2. 앱스토어 앱 이용 방법 앱스토어 앱을 실행한다. 앱스토어를 실행하고 우측 상단의.. 2023. 8. 28.
반응형

티스토리툴바