티스토리

Dev-log

검색하기

블로그 홈

Dev-log

jooy34.tistory.com/m

__James__ 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

[Wsl] Ubuntu C드라이브에서 D드라이브로 옮기기 Wsl을 설치하면 기본적으로 C드라이브에 설치를 합니다. 그래서 wsl을 사용하면 할 수 록 C드라이브 용량이 계속 작아져 불안감을 느끼던 중 wsl 리눅스 설치 경로 변경이라는 글을 보게 되었습니다. 그래서 이때다 싶어 바로 적용해 보았습니다. 1. Ubuntu 이름 확인하기 wsl -l -v 이름이 Ubuntu2204인 것을 확인할 수 있습니다. 2. Ubuntu를 tar파일로 추출하기 wsl --export Ubuntu2204 D:\ubuntu-22-04.tar wsl --export 3. Ubuntu import 하기 wsl --import Ubuntu22 D:\ubuntu\ D:\ubuntu-22-04.tar wsl --import 설치할 경로(D:\ubuntu\)는 미리 만들어 줍니다. 4. .. 공감수 1 댓글수 5 2023. 2. 26.
[Ubuntu] PPA란? https://jooy34.tistory.com/27 [WSL] Ubuntu에서 git version 업데이트 하기 git에 보안 취약점이 발견되어 버전을 2.39.1로 올려야 한다는 글을 보았다. 그래서 git 버전을 확인해 보니 2.34.1이었다 그래서 git version 올리는 방법을 찾아보니 1.git-core ppa추가 sudo add-apt-repository p jooy34.tistory.com git 버전 업데이트에 관하여 글을 쓰다가 git-core를 ppa에 추가하라는 것이 있었다. 그런데 ppa가 어떤 것 인지 몰라 궁금해서 이 글을 쓰게 되었습니다. 찾아보니 Personal Package Archive의 줄임말이었습니다. 그래서 우분투의 공식 패키지 저장소(Launchpad)에 없.. 공감수 0 댓글수 1 2023. 2. 1.
[WSL] Ubuntu에서 git version 업데이트 하기 git에 보안 취약점이 발견되어 버전을 2.39.1로 올려야 한다는 글을 보았다. 그래서 git 버전을 확인해 보니 2.34.1이었다 그래서 git version 올리는 방법을 찾아보니 1.git-core ppa추가 sudo add-apt-repository ppa:git-core/ppa 2. 새로운 버전의 Git 설치 sudo apt update sudo apt install git 3.Git version 확인하기 git --verison git 버전이 올라간 것을 확인할 수 있다. 참고 https://www.bytesized.xyz/how-to-update-git-in-ubuntu-windows-subsystem-for-linux/ How to update Git in Ubuntu + Windows.. 공감수 0 댓글수 0 2023. 1. 29.
[WSL] WSL Ubuntu 에서 root계정으로 사용하기 1. root 사용자의 비밀번호 설정하기 WSL에서 root계정의 패스워드를 입력한다. sudo passwd root 2.WSL root로 자동 로그인 하기 윈도우 cmd창에서 ubuntu config --default-user root 입력 후 WSL을 실행 시키면 root계정으로 실행된 것을 확인 할 수 있다. 공감수 1 댓글수 0 2023. 1. 18.
[Angular] 디렉티브 1. 디렉티브란 Angular 애플리케이션 안에 있는 엘리먼트에 어떤 동작을추가하는 클래스를 의미 한다. 2. 디렉티브의 종류 컴포넌트 템플릿이 존재하는 디렉티브이고 가장 많이 사용한다. 어트리뷰트 디렉티브 HTMl 엘리먼트, 어트리뷰트, 프로퍼티, 컴포넌트의 동작을 변경합니다. RouterModule이나 RormsModule과 같이 어트리뷰트 디렉티브를 제공하는 NgModule이 많은데 그중에서 자주 사용하는 것은 3가지가 있습니다. NgClass CSS클래스 여러 개를 엘리먼트에 동시에 추가하거나 제거할 수 있습니다. (클래스를 하나만 추가하거나 제거한다면 NgClass 보다 클래스 바인딩을 사용하는것이 더 좋습니다.) NgClass에 메서드 사용하기 1.메서드를 컴포넌트 클래스에 정의하기 curre.. 공감수 0 댓글수 0 2023. 1. 18.
[Angular] Lifecycle(생명 주기) hooks 1. Lifecycle(생명주기) Angular가 구성 요소 클래스를 인스턴스화하고 하위 뷰와 함께 렌더링할 때 생명주기가 시작되며 Angular가 인스턴스를 삭제하고 렌더링된 템플릿을 Dom에서 제거 하면 그 주기 가 종료 됩니다. Lifecycle의 역할 생명주기가 계속 되는동안 Angular는 데이터 바인딩된 속성이 변경되는 시기를 확인하고 필요에 따라 뷰와 구성 요소를 업데이트 하는 역할을 합니다. 디렉티브도 Angular 실행 과정에서 인스턴스를 생성, 업데이트 및 파괴하므로 생명 주기가 비슷합니다. 다음 글을 디렉티브에 대한 내용을 쓰겠습니다. 2. Lifecycle 이벤트 시퀀스 애플리케이션이 생성자를 호출하여 구성 요소 또는 지시문을 인스턴스화한 후 Angular는 해당 인스턴스의 생명 주.. 공감수 0 댓글수 0 2023. 1. 17.
HTTP 상태코드 상태코트란 클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능 1xx (informational) - 요청 진행중 2xx(Successful) - 성공 200 OK- 요청 성공 201 Created- 요청이 성공해서 서버쪽에 새로운 리소스 생성 202 Accepted - 요청이 접수되었으나 처리가 완료되지 않음 204 No Content - 서버가 요청을 성공적으로 수행했지만, 응답 페이로드 본문에 보낼 데이터 없음 ex) 웹 문서 편집기에서 save 버튼 => save 버튼을 눌러도 같은 화면을 유지해야 한다. 3xx(Redirection)- 요청을 완료하려면 추가적인 행동이 필요한 상태코드 리다이렉션 자동 리다이렉트 흐름 ex) - 이벤트를 진행하는데 기존 이벤트 페이지를 /event를 안쓰.. 공감수 0 댓글수 0 2022. 8. 31.
innerHTML을 왜 지양해야 하는가? 1. xss공격에 취약함 1.1 xss란(Cross-Site Scripting) XSS는 Cross-Site Scripting의 약자로 웹 서비스에 Javascript 등 스크립트를 실행할 수 있는 코드를 삽입하여 다른 사용자 등에게 공격자가 의도한 스크립트를 실행하게 하는 공격 방법입니다. 1.2공격 종류 및 방법 1.2.1 Persistent(or Stored) XSS Persistent XSS는 지속적으로 피해를 입히는 XSS공격입니다. 주로 게시판같이 사용자가 입력한 값이 데이터베이스에 저장 되는 곳에 발생을 하며, 데이터베이스에 저장된 XSS 악성 스트립트는 사용자가 게시글을 읽으면 코드가 작동되어 쿠키를 탈취당하거나 다른 사이트로 리다이렉트 되는 공격을 받습니다. 1.2.2 Reflected .. 공감수 0 댓글수 0 2022. 8. 11.
메타 태그와 미디어 쿼리 1.meta태그 - viewport width는 뷰포트의 가로크기를 정한다. width=device-width->기기의 너비에 맞춰주세요 initial-scale->페이지 처음에 접속시 보여질 배율 initial-scale=1->css픽셀과 화면에 보여질 픽셀이 1:1을 이룬다. 결론->메타 태그로 뷰포트를 지정해 주면 모바일 친화적인 ui를 제공할 수 있다. 2.미디어 쿼리 미디어 쿼리는 반응형을 위한 기본이자 핵심이다 .title{ font-size: 40px; } @media (max-width: 600px) { .title { font-size: 20px; } } ->타이틀 의 텍스트 크기를 40px로 하되, 600px보다 작은 화면에서는 20px로 줄여주세요 .title { font-size: .. 공감수 0 댓글수 0 2022. 8. 10.
OCI와 CRI의 등장과 그 이후 1.OCI(Open Container Initiative)와 CRI(Container Runtime Interface)의 등장 초기 Docker Engin에는 API, 네트워크, 스토리지, CLI등 많은 기능이 하나의 패키지에 담겨있었습니다. 그래서 여러 불편함이 생겼습니다. Docker는 이것을 해결하기 위해 Monolithic한 구조를 나누는 작업을 시작했고 코어OS는 Docker와 다른 규격으로 표준화를 추진하려 했습니다. 이러한 문제를 해결하기 위해 2015년 5월 Docker, 코어OS, AWS, 구글, 마이크로소프트, IBM 등 주요 플랫폼 벤더들은 애플리케이션의 이식성 관점에서 컨테이너 포맷과 런타임에 대한 개방형 업계 표준을 만들기 위해 OCI(Open Container Initiative.. 공감수 0 댓글수 0 2022. 8. 9.
[Docker](2) 컨테이너 런타임 중 하나인 Docker 도커는 닷클라우드의 솔로몬 하이크가 파이콘 2013에서 처음 발표했습니다. 초기의 도커는 LXC(LINUX CONTAINER)를 기반으로 컨테이너를 생성하고 관리 했지만 현재는 containerd와 runc를 기반으로 동작합니다. 그리고 유니온 마운트기반으로 효율적으로 실행 환경을 이미지로 만들고 공유할 수 있는 장점이 있습니다. 도커는 기본적으로 서버, 클라이언트 아키텍처를 가지고 있으며 REST API로 조작할 수 있습니다. LXC(LINUX CONTAINER)란 OS수준의 가상화를 구현하는 도구입니다. 주로 시스템컨테이너를 관리하기 위해사용되지만 애플리케이션 컨테이너를 실행하거나 관리하는 것도 가능합니다. 도커가 처음 공개 됐을때 내부적으로 컨테이너를 실행하는데 사용되기도 했습니다. 유니온 마운트란.. 공감수 0 댓글수 0 2022. 8. 8.
[VScode]React 함수형 컴포넌트 생성을 도와주는 확장 프로그램(ES7) VScode에서 es7을 검색 해 줍니다 확장프로그램을 설치해 주고 그 다음 컴포넌트를 생성할 곳에 rfce 이것을 입력해주면 자동으로 생성해 줍니다. 더 많은 스니펫을 보려면 아래 깃허브 주소를 참고해 주세요 https://github.com/dsznajder/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md GitHub - dsznajder/vscode-react-javascript-snippets: Extension for React/Javascript snippets with search supporting ES7+ and bab Extension for React/Javascript snippets with search supporting.. 공감수 0 댓글수 0 2022. 8. 7.
[React] Virtual DOM(가상돔) 1.먼저 DOM(The Document Object Model)부터 알아보자 DOM이란 XML이나 HTML 문서에 접근하기 위한 인터페이스 이고 스트립트 언어가 각각의 요소에 접근하는 방법을 제공합니다. 그리고 이것은 W3C의 표준 객체 모델이며 트리구조를 가지고 있습니다. 결국 DOM은 HTML또는 XML을 스크립팅언어(자바스크립트)와 서로 이어주는 역할을 합니다. 2. 가상돔 등장 배경 먼저 브라우저 렌더링 과정을 알아 보겠습니다. 1)DOM tree 생성 -렌더 엔진이 HTML을 파싱하여 DOM 노드로 이루어진 트리생성 2)render tree 생성 - css파일과 inline 스타일을 파싱 DOM + CSSOM = 렌더 트리를 생성 3)layout - 각 노드들의 스크린에서의 좌표에 따라 위치결정.. 공감수 0 댓글수 0 2022. 8. 2.
dotenv dotenv는 중요정보를 .env파일로 관리할 수 있게 해주는 패키지입니다. 그리고 이것을 쓰면 github같은 오픈소스 사이트에 민감정보를 숨긴채 소스를 올릴 수 있습니다. dotenv 설치 npm install dotenv 2. env 파일 만들기(만들고 싶은 위치에 생성해 줍니다.) # .env uri = mongodb://localhost:27017 3.env에있는 민감정보 가져와서 mongodb연결해보기 //index.js require("dotenv").config({ path: "/data/node/NodeJS/.env"}); const uri = process.env.uri //mongodb연결 const mongoose = require('mongoose') mongoose.connect.. 공감수 0 댓글수 0 2022. 7. 28.
npm install할 때 --save옵션을 쓰는 이유는? 필요한 모듈을 찾아 볼때 가끔식 --save옵션이 붙은 명령어를 볼 수 있습니다. 그래서 언제 쓰이는지 궁금해서 찾아 보았습니다. npm install --save 찾아보니 --save 옵션은 package.json의 dependency에 모듈을 추가한다는 의미였습니다. 그리고 npm 5 버전이후에는 옵션을 쓰지 않아도 자동으로 추가 됩니다. 그리고 --save-dev옵션도 보게 되었습니다. 이 옵션은 devdependency 영역에 모듈을 추가한다는 옵션이였습니다. dependency랑 devdependency란? dependency -어플리케이션을 배포할 때, 사용할 라이브러리들이 담겨있는곳이다. devdependencies -어플리케이션을 개발할때 테스트용으로 상용할 수는 있지만 배포할때는 필요없는.. 공감수 3 댓글수 0 2022. 7. 18.
포스트맨(POSTMAN) 설치 및 다운로드하기 Postman은 개발한 API를 테스트하고, 테스트 결과를 공유하여 API 개발의 생산성을 높여주는 플랫폼입니다. https://www.postman.com/우선 포스트맨 사이트로 들어갑니다. 다운로드를 받습니다. 다음에 사용하는 방법을 정리하여 글을 쓰겠습니다. 공감수 0 댓글수 0 2022. 7. 17.
Docker를 통하여 Mongodb 구축하기 https://jooy34.tistory.com/9?category=940198 Mysql을 docker를 통해 구축하고 토이프로젝트에 적용해보기(1) docker hub에 들어가 mysql이미지를 확인한다. docker pull mysql명령어 뒤에 tag에 버전을 지정해주지않으면 최신버전의 이미지를 docker hub에서 받아옵니다. docker pull mysql 이미지를 받아온 것을 docker.. jooy34.tistory.com 저번에 docker를 통하여 mysql을 구축한 경험으로 인하여 좀더 수월하게 구축을 할 수 있었습니다. https://hub.docker.com/_/mongo Mongo - Official Image | Docker Hub We and third parties use.. 공감수 0 댓글수 0 2022. 7. 16.
Mysql을 docker를 통해 구축하고 토이프로젝트에 적용해보기-오류 해결(2) https://jooy34.tistory.com/9 Mysql을 docker를 통해 구축하고 토이프로젝트에 적용해보기(1) docker hub에 들어가 mysql이미지를 확인한다. docker pull mysql명령어 뒤에 tag에 버전을 지정해주지않으면 최신버전의 이미지를 docker hub에서 받아옵니다. docker pull mysql 이미지를 받아온 것을 docker.. jooy34.tistory.com 지난번에 연동을 실패해서 해결하는 과정을 남기려 합니다. Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL clien.. 공감수 0 댓글수 2 2022. 7. 4.
HTTP기본(1) HTTP 메시지에 모든것을 전송할 수 있다. -html, text -image, 음성, 영상, 파일 -json, xml(API) -거의 모든 형태의 데이터 전송 가능 -서버간에 데이터를 주고 받을 때도 대부분 HTTP 사용 HTTP의 역사 -HTTP/0.9 1991년: GET 메서드만 지원, HTTP 헤더X -HTTP/1.0 1996년: 메서드, 해더 추가 -HTTP/1.1 1997년: 가장 많이 사용, 우리에게 가장 중요한 버전 -HTTP/2 2015년: 성능개선 -HTTP/3 진행중: TCP 대신에 UDP 사용, 성능개선 기반 프로토콜 TCP 기반 프로토콜: HTTP/1.1, HTTP/2 UDP 기반 프로토콜: HTTP/3 TCP는 데이터도 너무 맣고 매커니즘 자체가 속도가 빠른게 아니여서 UDP프로.. 공감수 0 댓글수 2 2022. 7. 4.
인터넷 네트워크(2) - TCP, UDP TCP 1. TCP/IP 패킷정보 2. TCP 특징(전송 제어 프로토콜(Transmission Control Protocol) 연결지향 TCP 3 way handshake(가상 연결) 클라이언트가 syn을 보내면 서버에서는 syn+ack를 보내고 클라이언트가 다시 서버에 ack을 보낸다음 메시지를 보내게 된다. 하지만 요즘에는 최적화가 잘되어있어 마지막 ack을 보낼때 메시지도 같이 보내기도 한다 그리고 물리적인 연결이 아니라 개념적 연결이다. 데이터 전달 보증 클라이언트가 서버에 syn을 보냈을때 응답이 오지 않으면 메시지를 보내지 않는다. 클라이언트가 서버에게 메시지가 잘 전달됐으면 서버에서 클라이언트에게 잘 받았다고 응답한다. 순서보장 만약 메시지가 너무 길어서 1,2,3으로 끊어서 보냈을때 1,3.. 공감수 0 댓글수 0 2022. 6. 9.
Mysql을 docker를 통해 구축하고 토이프로젝트에 적용해보기(1) docker hub에 들어가 mysql이미지를 확인한다. docker pull mysql명령어 뒤에 tag에 버전을 지정해주지않으면 최신버전의 이미지를 docker hub에서 받아옵니다. docker pull mysql 이미지를 받아온 것을 docker images명령어로 볼 수 있습니다. docker images 받아온 이미지를 가지고 컨테이너를 생성하고 실행해보자 docker run -d -p 3306:3306 -e MYSQL_ROOT_PASSWORD= --name --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci 위의 명령어는 -d옵션을 통하여 백그라운드에서 실행시키고 -p 옵션을 통하여 포트포워딩을하고 -e 옵션을 통해 환경.. 공감수 0 댓글수 2 2022. 6. 3.
Docker(1)-컨테이너에 대하여 먼저 알아보자 컨테이너 기술중하나인 도커에 대해서 알아보기 이전에 컨테이너기술이 어떤 것인지 부터 알아야 한다. 1.컨테이너란 리눅스 컨테이너는 운영체제 수준의 가상화 기술로 리눅스 커널을 공유하면서 프로세스를 격리된 환경에서 실행하는 기술입니다. 2.가상 머신과 컨테이너의 차이 하드웨어를 가상화 하는 가상머신과 달리 커널을 공유하는 방식이기 때문에 실행속도가 빠르고, 성능 상의 손실이 거의 없습니다. 3.컨테이너의 주요한 특징 운영체제 수준의 가상화 별도의 하드웨어 에뮬레이션 없이 리눅스 커널을 공유해 컨테이너를 실행하며, 게스트 OS 관리가 필요하지 않습니다 빠른 속도와 효율성 하드웨어 에뮬레이션이 없기 때문에 컨테이너는 아주 빠르게 실행됩니다. 높은 이식성 모든 컨테이너는 호스트의 환경이 아닌 독자적인 실행 환경.. 공감수 0 댓글수 2 2022. 5. 31.
WSL에 docker 설치하기 Docker를 설치하려면( WSL2를 이미 설치한 후) https://docs.docker.com/desktop/windows/install/ 여기에 들어가 설치를 해줍니다. Docker가 설치되었는지 확인하려면 WSL 배포판(예: Ubuntu)을 열고 docker --version 를 입력해 줍니다. docker run hello-world 위의 명령어를 사용하여 간단한 기본 제공 Docker 이미지를 실행하여 설치가 올바르게 작동하는지 테스트합니다. 참고 -https://docs.microsoft.com/ko-kr/windows/wsl/tutorials/wsl-containers WSL에서 Docker 컨테이너를 사용하여 시작 Linux용 Windows 하위 시스템 Docker 컨테이너를 설정하는 방.. 공감수 0 댓글수 0 2022. 5. 22.
WSL(ubuntu20.04)에 Node.js 환경 구축하기 ubuntu의 최신 버전을 유지하기위해 업데이트를 진행해 줍니다. sudo apt update && sudo apt upgrade cURL(명령줄을 사용하여 인터넷에서 콘텐츠를 다운로드하는 데 사용되는 도구)을 설치합니다. sudo apt-get install curl nvm을 설치합니다. curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash nvm을 활성화 시켜줍니다. source ~/.bashrc 그런다음 nvm 설치가 완료됐는지 확인합니다. Node.js의 현재 안정적인 LTS 릴리스를 설치합니다(프로덕션 애플리케이션에 권장). nvm install --lts Node.js의 버전을 확인합니다. 참고 -http.. 공감수 0 댓글수 0 2022. 5. 22.
VScode 이용하여 WSL 연동 후 파이썬 개발 환경 만들기 1.VScode 이용하여 WSL 연동하기 vscode를 다운로드후 확장프로그램에서 Remote - WSL을 설치해줍니다. 그러면 왼쪽아래에 초록색 모양이 생깁니다. 초록색 버튼을 클릭한후 New WSL Window를 클릭하면 VScode를 활용하여 wsl을 연동이 완료됩니다. 2.파이썬 개발환경 구축하기 VScode에서 터미널을 열어줍니다. sudo apt update sudo apt install python3 python3-pip 파이썬과 pip를 설치해줍니다. 설치완료 확인을 하고 VScode확장프로그램에서 Python을 설치해줍니다. 그리고 파일 생성 권한이 없어서 sudo chown -R (유저명) (디렉토리) 를 통하여 소유권을 변경한 다음 hello.py 파일을 생성한 후 실행시키면 잘 되는.. 공감수 0 댓글수 0 2022. 5. 21.
Windows WSL2 설치 wsl 설치 와 wsl 2란?을 참고하여 설치하고 정리 했습니다. WSL(Windows Subsystem for Linux)는 Linux용 Windows하위 시스템으로 개발자가 사용하면 사용자가 기존 가상 머신의 오버헤드 또는 듀얼 부팅 설정 없이 대부분의 명령줄 도구, 유틸리티 및 등등 Windows에서 직접 실행할 수 있습니다. 1. 설치 방법 PowerShell또는 명령프롬프트를 실행합니다. wsl --install 명령어를 입력해줍니다. 자동으로 필요한 선택적 구성 요소를 사용하도록 설정하고, 최신 Linux 커널을 다운로드하고, WSL 2를 기본값으로 설정하고, 리눅스 배포판을 설치하는데 기본적으로 Ubuntu를 설치합니다. 그리고 재부팅하면 위의 사진과 같이 username과 password를.. 공감수 0 댓글수 2 2022. 5. 21.
인터넷 네트워크(1) 김영한님의 "모든 개발자를 위한 HTTP 웹 기본 지식" 인프런 강의를 보고 공부한 것을 기록하는 곳 입니다. https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC http 학습을 위해 사전 네트워크에 대한 기본 학습이 필요하다. 1. 인터넷 통신 내가 멀리 떨어진 다른 컴퓨터로 메시지를 보낼때 수 많은 노드(서버)를 거쳐서 보내게 되는데 어떤 규칙을 가지고 안전하게 메시지를 잘 전달할까? 그것을 이해 하려면 먼저 IP(인터넷 프로토콜)에 대해서 알아야 한다. 2. IP 지정한 IP 주소(IP Address)에 데이터 전달 패킷(Packet)이라는 통신 단위(ip패킷이라는 규칙)로 데이터 전달 IP 패킷에는 .. 공감수 0 댓글수 2 2022. 5. 20.
시작하며 팀프로젝트를 진행하거나 개인프로젝트를 진행할때 문제해결을 어떻게 해결했는지 정리하는것을 노션에 블로그링크를 여러개 단다거나, 크롬에 무수히 많은 북마크 추가를 했습니다. 그래서 추후 다시 봐야 될 상황이 오면 찾지 못하거나 다시 새롭게 찾아 봐야하는 경우가 많이 생겼습니다. 그래서 이제 이 공간에서만 기록을 남기고 어떻게 해결했는지 좀 더 상세하게 남기도록 하겠습니다. 공감수 0 댓글수 0 2022. 5. 19.

반응형

문의안내

티스토리
로그인
고객센터

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