Hx2y's blog

프로젝트를 해보면서 처음 Docker을 써보니.. 도커에 대한 이해 필요성을 더 느끼게 되었다. (하다보니 서버 설정 문제가 조금씩 나온다..) 때문에 오늘은 이에 도커의 대한 이해를 위해 도커를 조금더.. 공부하기로 하였다. (진즉에 그냥 이거먼저할껄..) Docker 란?  2013년 Pycon US 2013, "리눅스 컨테이너의 미래" 라는 라이트닝 토크에서 솔로몬 하이크가 처음 소개하였다.  Go 언어로 개발되고 있으며, DockerCon 2014 에서 1.0 버전 발표 이후 , 지속적으로 업데이트가 되고 있다.  도커의 기능 리눅스 상에서 컨테이너 방식으로 프로세스를 격리해서 실행하고 관리할 수 있도록 도와준다.계층화된 파일 시스템에 기반해 효율적으로 [이미지(프로세스 실행 환경)]을 구축할 수..

어떻게 어떻게 서버 구성을 하고.. (클라우드 업로드는 일단 나중에.. ) 간단하게 개발을 들어갔다.  처음 해보는 리액트 + Spring 조합 개발이기에 간단한 게시판 만들기 부터 해보자는 생각이 들었다. 일단은 대강 대충 초반 화면 만들어두고 (쳇지피티 짱... ) "자유게시판" 항목을 만들고 해당 링크에서 게시판을 만들기로 하였다. 조회를 만들고 등록을 만들던 차에 ... 생소한 에러가 발생했다.   Cors 에러라고는 적혀있는데.. 본적이 없는 에러였다. 그래서 이게 뭔지 알아보기로 하였다. CORS(Cross-Origin Resource Sharing) 에러란? 웹 브라우저에서 보안상의 이유로 발생하는 정책 제한이다. 서버와 클라이언트 간 서로 다른 출처(origin) 에서 리소스를 요청할 때 ..

1. Shadcn/ui란?Shadcn/ui는 React 기반의 UI 컴포넌트 라이브러리로, Tailwind CSS를 활용하여 모던하고 재사용 가능한 컴포넌트를 제공한다. 이 라이브러리는 특히 사용자 경험(UX)과 디자인 일관성을 중시하는 개발자에게 적합하다. 주요 특징:모듈식 디자인: 필요한 컴포넌트만 선택적으로 가져와 사용할 수 있다.확장성: 기본 제공 스타일 외에 사용자 정의 Tailwind 클래스를 쉽게 추가 가능.접근성(A11Y): 웹 표준과 접근성을 고려한 컴포넌트 설계.2. Tailwind CSS란?Tailwind CSS는 유틸리티 클래스 기반의 CSS 프레임워크로, 빠르고 직관적인 스타일링을 지원한다. 주요 특징:유연성: 미리 정의된 유틸리티 클래스를 조합해 다양한 디자인 구현 가능.생산성 ..

일단 프론트까지 환경설정을 하고 수정을 해보려고 하니까 실시간 반영이 막혀있었다. 찾아보니 코드 수정시 컨테이너를 다시 빌드해야 코드 변경이 반영 된다고 한다. 이러기엔.. 매번 하기 귀찮으니 바인드 마운트라고 실시간으로 코드를 반영 가능하게 해보자.  1. 컨테이너 재실행  stop 버튼을 누른다. - doker desktop 에서는 gui 를 통해 편리하게 도커를 사용 가능하도록 지원해주니까 이용하도록 하자.2. 컨테이너 삭제정지된 컨테이너를 쓰레기통 아이콘을 선택하여 삭제하도록하자.  삭제하지 않고 지속적으로 사용한다면 기존에 빌드된 이미지를 사용한다.  3. 이미지 다시 빌드 다음의 명령어를 통해 다시 빌드 하도록 하자. docker build -t stock-frontend . 4. 바인드 마운..

저번시간 리액트 앱을 설치하고 여는데 까지는 성공하였다. 이번에는 GitHub 에 연결하여 지금까지 작업한 것을(별로 없지만) 올려보도록 하겠다.  자신의 프로젝트가 있는 폴더로 가서 다음 명령어들을 실행한다. # 기존 Git 초기화 (이미 초기화된 경우 생략 가능)git init# GitHub 레포지토리 연결git remote add origin https://github.com//.git 이후 .gitignore 파일을 작성 한다. 해당 파일은 git 업로드를 할때 해당 파일들을 무시하여 업로드한다. node_modules/build/.env.dockerignoreDockerfile 이제 git 에 파일 추가 및 커밋을 해보도록 하겠다. # 모든 파일 추가git add .# 커밋 생성git commi..

3. 리액트 설치 및 환경설정 프론트는 리액트로 구성 할 것이기 때문에 해당 도커환경에 리액트를 다운 받는다.  #yarn 다운npm install -g yarn#react 설치yarn create react-app frontend  다음과 같이 뜬다면 설치 완료 된 것이다. 그럼 다음 코드를 실행하여 개발 서버를 열어보도록 하자 yarn start 명령어 실행 후 브라우저가 자동으로 열리며, http://localhost:3000에 기본 React 페이지가 표시된다.  3-1. 리액트의 구조react 프로젝트의 주요 구조는 다음과 같다. frontend/├── public/ # 정적 파일 디렉토리 (HTML, 이미지 등)├── src/ # 주요 소스 코드 디렉토리│..

2. 컨테이너 생성 및 설정 프로젝트를 위한 컨테이너 하나를 설정해 두도록 하자.  기본적인 인터페이스 설명은 다음과 같다.  Containers:현재 실행 중인 컨테이너를 확인새로운 컨테이너를 실행하면 여기 목록에 확인가능.Images:로컬에 저장된 Docker 이미지를 관리.새로운 이미지를 다운로드하거나, 기존 이미지를 삭제.Volumes:컨테이너와 호스트 간의 데이터를 공유하기 위한 볼륨을 관리.Builds:Docker 빌드 관련 로그와 상태를 확인.Terminal:하단에 있는 Terminal을 클릭하면 Docker 명령어를 입력할 수 있는 CLI를 열 수 있음.  기본적인 명령어로는 다음과 같은 것들이 있다. 1.Docker 이미지 검색 및 다운로드 docker pull nginx - Nginx ..

1. 도커 설치 일단 필자의 환경은 윈도우 이다. 따라서 윈도우 기준으로 설명을 이어갈것이다.  먼저 Docker 사이트에가서 다운로드를 진행하도록 하자. 링크 : https://www.docker.com/ Docker: Accelerated Container Application DevelopmentDocker is a platform designed to help developers build, share, and run container applications. We handle the tedious setup, so you can focus on the code.www.docker.com   해당 사이트에 들어가면 [Download Docker Desktop] 버튼이 확인이 될 것이다.   해당 ..