Full_Stack developer

리액트 애플리케이션에 대해 Docker를 사용하여 CI/CD를 설정하려면, GitHub Actions와 Docker를 조합해 클라이언트 빌드 및 배포를 자동화할 수 있습니다. 아래는 리액트 애플리케이션만을 위한 단계별 설정입니다.1. React 프로젝트용 Dockerfile 작성React 프로젝트 루트 디렉토리에 Dockerfile을 생성합니다:# 1단계: Node.js 환경에서 React 빌드FROM node:16 AS buildWORKDIR /appCOPY package.json package-lock.json ./RUN npm installCOPY . .RUN npm run build# 2단계: Nginx로 빌드 결과 제공FROM nginx:alpineCOPY --from=build /app/bui..

이미 프로젝트가 있으면 비주얼 스튜디오로 해당 프로젝트를 열어주세요. http://localhost:3000 로 접속되면 성공!  docker run --name react-with-docker-pj2 -d -p 4000:3000 my-react-app docker run --name {컨테이너 이름} -d -p {호스트 포트}:{컨테이너 포트} {이미지 이름}  http://localhost:4000 로 접속되면 성공!

map() 함수 문법 callbackFunction • 새로운 배열의 요소를 생성하는 함수로, currentValue, index, array 3개의 인 수를 가질 수 있다. [this.Arg] 는 생략 가능한 것으로 callbackFunction 에서 사용할 this 객체 배열 데이터, map()과 함께 사용 배열 데이터를 좀 더 효율적으로 그리기 위해서 map 사용! key 기존 요소와 업데이트 요소를 비교하는데 사용되는 속성, 다른요소와 겹치지 않는 고유한 값이어야 합니다. key는 고유한 값을 가져야 하기 때문에 배열의 요소 중 고유한 값(id 등)이 존재하 지 않는다면 index로 사용해도 됩니다! (단, index 를 사용하는 것은 최후의 수단!) div 같은 태그가 아닌 만들어준 컴포넌트와 ..

Angular JS 구글에서 만든 JavaScript 기반의 오픈 소스 프레임워크 양방향 데이터 바인딩으로 양방향 웹 애플리케이션에 적합 2016년도 이후 점유율 하락 중 Ex) 유튜브, 페이팔, 구글, 텔레그램 등등 React JS 동적 사용자 인터페이스를 만들기 위해 2011년 페이스북에서 만든 오픈 소스 JavaScript 라이브러리 데이터 변경이 잦은 복잡하고, 규모가 큰 라이브러리에 적합 Angular 보다 배우기 쉽다고 이야기 됨. Ex) 페이스북, 인스타그램, 넷플릭스, 야후, 드롭박스 등등 Vue.js 2013년 출시된 JavaScript 프레임워크 Angular와 React의 장점을 수용한 프레임워크 중국어 기반으로 Reference가 적음. Ex) 샤오미, 알리바바, 깃랩, 어도비 등 ..