!!!사실과 다른 부분이 있다면 지적해주시면 감사하겠습니다..!!!도커로 ec2에서 배포하는 시나리오는 다음과 같다.작성한 코드를 이미지화. 이미지를 도커허브에 배포EC2 인스턴스 생성EC2 환경에서 도커 설치 및 도커 이미지 Pull도커 컨테이너 실행도커파일은 다음과

이번에는 아주 간단한 예제로 Docker 환경에서 서버를 실행시키는 것을 연습해보도록 하겠습니다.이미지를 생성하기 위해서는 Dockerfile이라는 것을 작성해야하고, 도커는 이 Dockerfile을 읽어서 이미지를 만든다.다음은 최상단에 작성한 Dockerfile이다

도커란 무엇일까? 도커는 가상컴퓨터 (VmWare나 VirtualPC)같이 가상의 환경을 제공해주고 프로그램을 돌릴 수 있게 도와준다. 가상컴퓨터와 다른점이 있다면,, 가상컴퓨터는 컴퓨터 안에 새로 운영체제를 깔고 그 위에서 돌아가도록 한다. 이 과정에서 쓸모 없는

기존에 프론트엔드에서는 회원가입, 로그인 값들을 저장해둔 다음 POST요청을 보내기만 하면됐다.. 로그인이라면 토큰을 받아서 로컬스토리지에 저장을 해주면 됐는데,, 개인프로젝트를 진행하면서 백쪽에서 회원가입, 로그인을 구현해보니 백쪽에서는 꽤 까다로운 절차가 있었

이전포스팅에서 Prisma를 활용하여 GraphQL과 MySQL을 연동시켜보았고 ,, 터미널에서 MySQL에 직접 DB를 추가하고 Apollo Studio에서 Query요청에 제대로 응답하는 것을 확인했다.. 이전포스팅 이번에는 간단한 API를 작성하고 Pris

사용 API : GraphQL사용 Database : MySQL사용 ORM : PrismaORM이 뭔지도 몰랐는데, 내가 사용하려는 GraphQL과 MySQL을 연결하려면 ORM이라는 것이 필요하다는 걸 알게되었다..무작정 시도한다고 되는게 아니었다..ORM이 그래서

graphQL은 API를 위한 쿼리언어이다.서버측 런타임으로 클라이언트에게 요청한 만큼의 데이터를 제공하는 데 우선 순위를 둔다.over-fetching의 문제를 해결함필요한 것만 요청하고 받으세요under-fetching의 문제를 해결함.내가 필요한 모든 정보를 한번

관계형 데이터베이스는 관심사에 따라 테이블을 분리하고 각각이 참조하는 key에 따라서 통합하여 데이터를 보여줄 수 있다.따라서 원하는 값만을 가져오기 위해서는 쿼리가 길어질 수도 있다.JOIN을 통해 두개의 테이블을 하나로 합칠 수 있다.posting 테이블user 테

서버접속 root 권한으로 접속 데이터베이스(스키마) 생성 및 삭제 CREATE, DROP!!원하는 데이터베이스에 접근 USE!!CREATE TABLE 테이블명 그리고 ()안에 들어갈 column들을 작성!column 데이터타입(노출시킬 데이터의 수) NULL허용여부(

state의 타입지정은 위와 같이 제네릭으로 지정한다.ShoesData는 미리 만들어 둔 interface다. shoesData에는 ShoesData형식의 객체로 채워진 배열이 들어온다FC는 react안에 저장되어있는 모듈로 FunctionComponent라는 뜻이다.

두 달전에 했던 위스타그램 클론코딩을 최근에 타입스크립트로 옮겨보았다..조금 뭔가 예전에 짰던 로직들은 난잡하게 느껴졌다. 조금 더 간결하게 수정할 수 있을 것 같아 한번 수정해보고 비교해보았다.우선 input에 아이디와 패스워드를 받아 특정 조건을 만족하면 메인페이지

tailwind css설치!

타입스크립트란 자바스크립트가 기존에 데이터타입 지정없이 유연하게 활용해 왔던 것을 엄격한 타입지정을 통해 오류를 방지하고, 의도치 않게 프로그래밍 되는 것을 막기 위해 생겨났다.예전에 자바스크립트 에서는 문자열과 숫자간의 연산도 가능했다.타입스크립트는 타입을 엄격하게

나는 누군가가 나를 이끌어 주고 믿고 맡겨줄 때 더 성장할 수 있는 것 같다. 솔직히 말하면 더욱 많이 성장하고 싶었기에 나를 이끌어줄 누군가와 팀을 함께 하고 싶었고, 그렇기에 2차 프로젝트를 시작하며 팀 발표가 제일 걱정되고 기대되었다.팀 발표가 되었을 때는

스와이퍼란 캐러셀을 더 쉽게 만들 수 있도록 도와주는 라이브러리이다.스와이퍼 설치 명령어스와이퍼를 쓰기를 위한 기본양식은 다음과 같다Swiper태그에 원하는 설정을 적어주고 원하는 컨텐츠의 양 만큼 SwiperSlide태그를 만들어준다.SwiperSlide안에 컨텐츠를

git stash : 현재 작업중인 작업물을 임시저장소에 저장한다. 작업 중이던 작업물을 commit 없이 checkout할 수 있게 하거나 현재 작업한 작업물을 다른 브랜치에 가져올 수 있도록 한다.git stash를 하기전에 add를 꼭 해줘야한다.git stash

useParams는 RestFul API의 경로상 달라지는 부분을 추적해온다.라우터를 다음과 같이 설정해준다.그러면 detail/1, detail/2, detail/3 등등 detail뒤에오는 모든 경로상에서 Itemdetail이라는 컴포넌트가 나타난다.꼭 숫자가 아니

useParams가 path Parameter를 활용해 React이 동적라우팅을 도와줬다면,useSearchParams는 Query Parameter를 활용한 React동적 라우팅을 도와주는 훅이다.우선 다음과 같이 사용한다.쿼리스트링을 이용한 api에는 ?로 Quer

특정 정보가 필요할 때 클라이언트는 서버에 http통신으로 요청을 보내고, 정보를 응답받을 수 있다. 이때 사용되는 메서드가 fetch인데, fetch메서드로 데이터를 요청해서 받거나 생성, 수정, 삭제할 수 있다.(CRUD)항상 클라이언트의 입장에서 서버에게 요청한다

https://youtu.be/wxar1wj1cNQ내가 웹개발을 시작하고 처음으로 진행했던 프로젝트였다. 프로젝트에 들어가기 전 주말부터 어떤 팀을 만날지에 대한 기대와 ‘내가 잘 할 수 있을까?’ 라는 걱정감이 컸다.프로젝트 팀이 발표되고 미팅을 진행하고 역