모아이

저번에 docker로 띄운 mysql을 next.js 프로젝트에 연결해서 테이블을 만드는 것까지 진행해 봤다.그렇다면 간단하게 next.js에서 입력폼을 만들어보자컴포넌트 폴더를 따로 만들어서 제작했다.컴포넌트 세팅먼저 app폴더 바로 아래 있는 page.tsx 파일에 기본적으로 되어 있는 세팅들을 삭제하고 시작하자.global.css에 있는 css 들도 다 삭제 했다. tailwind를 사용할 예정이라 @tailwind ~ 부분은 삭제하지 말자// app/page.tsxexport default function Home() { return ( );}다 삭제하고 입력 폼과 띄울 투두 리스트만 가운데로 오도록 세팅했다.그럼 투두를 만들 입력 폼과 데이터를 받을 TodoForm.tsx과 PostL..

이전 글에서 docker를 이용해 mysql을 띄웠고 이후 workbench를 이용해 데이터 베이스에 쉽게 접속할 수 있도록 만들었다.그럼 이제 이를 실제로 코드상에서 사용해보려 하는데 Next.js와 Prisma를 이용해서 만들어보려고 한다.이를 통해 prisma의 사용법을 간단하게 보고 특히 Next.js의 Server action을 잘 익혀볼 수 있을 것 같다.프로젝트 설정npx create-next-app@latest 를 통해 간단한 next-app을 만든다. 이름은 sql_test로 만들었다.성공적으로 sql_test가 설치 되었다면 추가적으로 prisma를 설치하자cd sql_testnpm i prisma --save-devnpx prisma init --datasource-provider m..

제목만 보면 뭔가 되게 많아 보이는데 실은 별거 없다.docker를 이용해서 가상 컨테이너로 mysql 서버를 만들고 Next.js와 prisma를 사용해서 쉽게 mysql에 내가 원하는 타입과 결과를 넣어보려고 하는거다.docker와 next.js의 server action, prisma를 연습하기 위해 한번 실행해 봤다.본 작성글은 window 환경에서 작업한 작성물입니다.docker로 mySQL 컨테이너 올리기먼저 docker가 있어야 하지 않을까? 해당 링크로 가서 docker를 먼저 설치하자https://www.docker.com/get-started/무사히 설치가 됐다면 cmd 창을 열자 git bash나 window powershell도 괜찮습니다.저는 window powershell에서 실..

Service엠버의 서비스는 애플리케이션이 동작하는 동안 유지되는 숫자 개체이며 애플리케이션의 다른부분에서 사용할 수 있다.번역 본이라 조금 이상한데 여러개의 컴포넌트에서 service1을 사용할 수 있다는 뜻.예시로 로그인이라는 서비스를 통해 로그인 페이지에서 로그인 서비스로 로그인을 보낸뒤 사용자 페이지에서 받을 수 있도록 할 수 있다.개념적으로만 보면 전역 상태가 생각되는데 한번 사용 예시를 봐봐야 겠다먼저 service를 만드려면 동일하게 emberCLI로 만드는데ember g service shopping-cart 이러면 app/services/shopping-cart.js 파일이 하나 만들어 진다// app/services/shopping-cart.jsimport Service from '@e..

Helperember에는 helpler라는 개념이 있는데 이는 이전 글에서 action을 사용할 때 이용했던 on,fn 등이 이런 helper에 해당된다그런데 한가지 다른게 보이는데 on을 사용할 때는{{}}안에서 사용했고 fn은 ()안에서 사용됐다이는 최상위 수준에서의 도우미가 {{}}로 시작하기 때문이다.{{helper1, (helper2 ... (helper3 ....))}} 가장 최상위는 {{}}로 시작하고 이후 중첩되는 도우미들은 ()로 둘러싼다.Built-in Helperember에 내장된 도우미들 몇개만 살펴보자면{{on{{concat :여러 문자열을연결하는데 도움이 된다. `class={{concat "active-" @color}}{{get : 가져오는 것으로 {{get this.prod..

제목에 적어놓은 Tracked, Getter, Actions는 컴포넌트에만 존재하는 것이 아니라 Controller에서 사용된다.뿐만아니라 관련해서는 현재 튜토리얼 페이지에서 따라해보면 Route에서도 사용되는 것 같다.Tracked properties & Getter먼저 컴포넌트의 구성부터 살펴보자면import Component from '@glimmer/component'import {tracked} from '@glimmer/trancking'export default class MyComponent extends Component { @tracked firstName = 'Shawn'; @tracked lastName = 'Chen' get fullName() { return this...

Component재사용 가능한 독립된 모듈로 주로 React를 한번쯤은 다뤄봤다면 아주 흔한 개념이다.이는 Ember에서도 동일하게 있는데 한번 알아보자라우터 내부나 다른 컴포넌트 또 그 컴포넌트 안에 컴포넌트 이렇게 React처럼 중첩이 가능하다.예시우리가 index route에 있다고 가정했을 때 제품목록 안에 2개의 제품이 있다그럼 각 제품 카드들의 프로덕트 모양은 동일할텐데 이미지 관련 로직이나 다른 구성들이 동일하게 동작한다면 이는 중복됨으로 하나의 컴포넌트로 처리하는 것이 맞다.직접적인 전체 코드를 가져오진 않고 component를 어떻게 만들고 어떻게 사용하는 지에대해서 간단하게 다루고 넘어가보자컴포넌트를 처음 만들때도 동일하게 emberCLI를 사용해 만들 예정이다ember g compon..

라우팅 시스템과 Router와 controller는 밀접한 연관이 있으니 바로 다뤄보는 게 좋을 것 같다.유튜브 ember tutorial에서 만드는 페이지로 연습을 같이 해보려고 하는데 일단 이전에 만든 필요없는 경로를 삭제해보자router 삭제당연하게도 이를 도와주는 emberCLI가 존재하는데ember destroy route clothes/index && ember destroy route clothes/t-shirt && ember destroy route clothesclothes경로에는 중첩된 부분이 많기 때문에 중첩된걸하나하나 지워가며 마지막에 가장 큰 경로를 삭제하는 게 좋다.바로 큰 경로를 삭제해봐야 폴더 내부는 안지워지고 `clothes.hbs`와 테스트 등 `clothes` 경로에 ..

업무 진행을 위해 Ember를 처음부터 배워보고 있는데 단순히 보고 Tutorial 을 따라한 것으로는 부족한 것 같아 정리 차 작성해보려 한다모든 내용은 Ember 공식문서의 Tutorial과 예전 버전이긴 하지만 2022 ember beginners라는 외국 유튜브를 보고 적절히 섞어 작성하였다.물론 Test에 관련된 부분은 적당히 제거했다먼저 tutorial에서 만들어지는 웹사이트는 공식문석에 실제로 netlify를 통해 배포되어 있으니 직접 확인해 봐도 된다Tutorial완성페이지 확인하기Ember CLI 설치먼저 Ember를 쉽게 사용하기 위한 CLI를 먼저 설치 했다npm install -g ember-cli설치가 잘 완료되었는지 확인해보자ember --version입력시 이런..

Toast 만들기 업무중 atomic component로 사용될 기본 컴포넌트 들을 만들다 Toast의 차례가 왔다 기본적으로 Toast는 이런식으로 어떠한 동작을 했거나 실패 등 여러 상황에서 alert창이 아닌 쉽게 말해 서비스 디자인 등과 맞춰 제작된 자체적인 알림창이라 봐도 무방하다. React에서 이를 제작할 경우 일단 모든 컴포넌트에서 이 Toast 알림창이 화면에 띄워질 수 있도록 해당 Toast 컴포넌트에 관여 할 수 있어야 한다. 게시판 글이나 뭐 회원가입 버튼이나 각종 여러 군데에서 이 Toast 알림을 띄울 수 있기 때문에 첫번째로 고안한 방법은 Context API와 같은 전역 상태를 활용해서 가장 최상위 루트에서 감싸주는 것이다. 그럴경우 최상위에서 감싸진 ToastContext에..