728x90 𝐀𝐥𝐥343 No Image 📷 [CSS] css 차이점들 2023. 7. 30. No Image 📷 [TailwindCSS] tailwindcss 초기설정 하는법 [yarn] 얀 기준으로 설명하겠다. 우선 기존에 설치되어있는지 확인해보자 CMD tailwindcss --version //설치된 tailwindcss 버전 확인 yarn add -D taildwindcss //yarn 라이브러리를 활용하여 개발자모드로 tailwindcss를 다운로드하자 npx tailwindcss init // tailwindcss 초기설정?을 해주자 이때 다운로드가 안되는 경우도 있다. 다운로드가 필요한 버전으로 다운받아주자 tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{js,jsx,ts,tsx}'], // 2023. 7. 30. No Image 📷 [React] JSX 사용전 유의사항 주의사항 1. 하나의 태그만 반환해야한다 App.js import './App.css'; function App() { return Hello!; } export default App; 예를 들어서 위와같이 하나의 태그로만 이루어진걸 반환하는건 문제가 없다. 다만 App.js import './App.css'; function App() { return Hello!; hello!; } export default App; 위와같이 두개 이상의 태그를 반환하는것은 불가능하다 이런 경우에는 App.js import logo from './logo.svg'; import './App.css'; function App() { return ( Hello! Hello! ); } export default App; i.. 2023. 7. 29. No Image 📷 [React] 초기세팅 CMD mkdir '프로젝트모음파일' //'프로젝트모음파일' 생성 혹은 이미 모음 파일이 있다면 cd '프로젝트모음파일' yarn create react-app '프로젝트 파일명' //yarn을 이용한 프로젝트 파일 기본 생성 yarn start //yarn을 이용해서 프로젝트 실행후 localhost 해줌 + 기본적으로 git init도 해줌. yarn add eslint eslint-config-react-app --dev //eslint 오류를 잡아줌. 2023. 7. 29. No Image 📷 [23.07.19] 수업내용 복기 display 종류 block 레벨 한줄을 통째로 차지하는 요소 기본적으로 부모와 같은넓이 가지게 됨 크기를 가질 수 있다 block 레벨간의 수평정렬 margin의 수평값에 auto값을 사용 (auto값은 block레벨에만 적용됨.) inline 레벨 줄내림이 되지 않는 요소 크기 속성을 가질 수 없음 a, small, em , i inline 레벨간의 줄 맞춤 text-align은 요소 안쪽 글자및 인라인 계열 요소를 정렬 line-height은 행간을 제어하는 속성이지만, 요소의 높이와 동일하게 설정할 경우 수직 중앙정렬 기능으로 사용됨. (단 한줄까지만 사용 가능!!!!!, 두줄 이상부터는 flex 같은걸 사용.) vertical-align속성은 글자 및 인라인 계열 요소의 수평줄맞춤 inline.. 2023. 7. 20. No Image 📷 [23.04.02][스파르타 코딩클럽]_ 14주차_ 11주차 2023. 4. 2. No Image 📷 [Google cloud storage] Nest.js와 연결하기 https://cloud.google.com/?hl=ko&authuser=0 클라우드 컴퓨팅 서비스 | Google Cloud 데이터 관리, 하이브리드 및 멀티 클라우드, AI와 머신러닝 등 Google의 클라우드 컴퓨팅 서비스로 비즈니스 당면 과제를 해결하세요. cloud.google.com 해당 사이트에 접속하면, 위와 같은 페이지가 나올것이다. 무료로 시작하기 버튼을 눌러주자. 빈칸을 적절히 잘 채워넣어주자. 결제 수단 정보를 입력해주자. 해당 선택지도 본인 상황에 맞게 끔 선택하여 완료버튼을 눌러주자 이 부분은 생략해주자. 좌측에 Cloud Storage 라고 있고 버킷이라는 항목이 있을것이다. 눌러서 들어가보자. 상단에 +만들기 버튼을 눌러서 버킷을 만들어주자. 버킷 이름을 정하고 나머지 읽어볼.. 2023. 3. 31. No Image 📷 [Google cloud storage] 이번 실전프로젝트에서 사용하게된 계기 우선 내가 Google cloud storage를 사용하게 된 계기부터 설명하겠다. 애당초에 원래는 해당 feature를 사용할 계획이 없었다. 하지만, 항상 문제가 생기기 마련. 실전 프로젝트를 진행하는데 문제가 생겼다. Nginx로 로드밸런싱을 구축하고 테스트 하는 과정중에서 이상한 점을 발견했다. 바로 업로드한 프로필 이미지가 언제는 보이고 언제는 안보이는 간헐적인 문제가 생긴것이다. 그때 생각난 것이 아, 로드밸런싱을 하게되어 로컬로 업로드를 하게되면 한쪽에만 업로드가 되어서 이런 문제가 발생하는구나 라는 생각을 하게되었다. 이때 이 문제를 고치기 위한 2가지의 대안이 있었다. 정붕기 팀장이 제안한 AWS EC2 S3 모델을 선택하여 사용하는 것과 내가 제안한 Google cloud storage.. 2023. 3. 31. No Image 📷 [Nginx] Nginx를 이용하여 로드밸런싱 해주기 우선 기본적으로 Nginx가 설치되어 있다고 가정하고 시작하겠다. Nginx.conf를 들어가기 위해서 /etc/nginx 위의 해당경로로 들어가주자 conf.d koi-win nginx.conf sites-enabled fastcgi.conf mime.types proxy_params snippets fastcgi_params modules-available scgi_params uwsgi_params koi-utf modules-enabled sites-available win-utf 해당 경로 폴더에 여러가지 파일들이 보인다. 여기서 우리가 건들여 줄 파일은 nginx.conf다. vi nginx.conf 위의 명령어로 nginx.conf를 설정해주자 user www-data; worker_proc.. 2023. 3. 31. No Image 📷 [23.03.30] Nest.js 니코 강의를 들으며 공부하고, 공부한 Nest.js 를 적용하며 이번 실전 프로젝트를 진행했었다. 아직 복기하는 시간을 가지지 못했어서 포스팅하며, 복기하는 시간을 가지려한다. 2023.03.30 - [𝐟𝐫𝐚𝐦𝐞𝐖𝐨𝐫𝐤/Nest.js] - [Nest.js] Nest.js 기본 세팅 [Nest.js] Nest.js 기본 세팅 INTRODUCTION 0.1 Welcome Let’s learn about Nest.js 0.2 Requirements Nest.js 는 Enterprise 에서 사용하기 좋은 Build 환경 Nest.js 는 TypeScript 기반 insomnia rest (Rest Client )다운로드→ 엔드포인트를 테스트 할 용도 The Colla jrogrammer.tist.. 2023. 3. 30. No Image 📷 [Nest.js] Nest.js를 사용할 때 알아야 할 기본적인 몇 가지 2.4 / 2.5 DTOs and Validation part 여기서 DTO란? → Data Transfer Object 를 의미 파이프는 미들웨어 같은 것. class-validator & class-transformernpm i --save class-validator class-transformer웹 애플리케이션으로 전송되는 데이터의 검증을 도와줍니다.ValidationPipe는 강력한 클래스 유효성 검사기 패키지와 선언적 유효성 검사 데코레이터를 사용합니다. ValidationPipe는 들어오는 모든 클라이언트 페이로드에 대해 유효성 검사 규칙을 적용하는 편리한 접근 방식을 제공합니다.자동 검증따라서 모든 엔드포인트가 잘못된 데이터를 수신하지 못하도록 보호됩니다.whitelistforbidNonW.. 2023. 3. 30. No Image 📷 [Nest.js] Nest.js 에서 Rest한 API create 하는 방법 (2) 2.2 / 2.3 Movies Service part 서비스를 만든다? → nest g s 하면 되겠네 먼저 movie에서 사용되어질 entity 들을 넣어주기 위한 파일을 생성해서 movie.entity.ts 라는 파일을 만들어주고 export class Movie { id: number; title: string; year: number; genres: string[]; } 속성값들을 기입해주자 자세히 살펴보니 express에서 쓰던 Schemas 와 비슷한 느낌을 받았다. 작성이 완료되었다면 service를 하나하나 만들어 나가보자. import { Injectable } from '@nestjs/common'; import { NotFoundException } from '@nestjs/commo.. 2023. 3. 30. No Image 📷 [Nest.js] Nest.js 에서 Rest한 API create 하는 방법 (1) REST API 2.0 Movie Controller Movie Controller 만들어보자 우선 Terminal 창에 아래 코드를 입력하면 nest 위와 같은 목록표가 나온다. 우리는 Controller 를 만들것이니 nest generate co 혹은 nest g co 입력하자 Controller 의 이름을 묻는다. movies controller 만들 것이니 movies 를 입력하자 movies controller 가 생성되었다. 어? 잘 보니까 @Module에 controller 보면 MoviesController 가 이미 import 되었다. @Controller('movies') export class MoviesController { @Get() getAll() { return 'This .. 2023. 3. 30. No Image 📷 [Nest.js] Nest.js의 아키텍쳐 ARCHITECTURE OF NESTJS 1.0 Overview Nestjs 시작하기 npm run start:dev —> localhost:3000 으로 갈 수 있게 해준다는 뜻 src 파일을 헤쳐보자 app.controller.spec.ts → Controller 테스트 파일 app.controller.ts → Controller 파일 app.module.ts → Module 파일 app.service.ts → Service 파일 main.ts → app.js 와 비슷한 기능의 파일 1.1 / 1.2 ARCHITECTURE OF NEST.JS main → main.ts 가 모든 걸 시작 import { NestFactory } from '@nestjs/core'; import { AppModule }.. 2023. 3. 30. No Image 📷 [Nest.js] Nest.js 기본 세팅 INTRODUCTION 0.1 Welcome Let’s learn about Nest.js 0.2 Requirements Nest.js 는 Enterprise 에서 사용하기 좋은 Build 환경 Nest.js 는 TypeScript 기반 insomnia rest (Rest Client )다운로드→ 엔드포인트를 테스트 할 용도 The Collaborative API Development Platform The Collaborative API Development Platform Leading Open Source API Development Platform for HTTP, REST, GraphQL, gRPC, SOAP, and WebSockets insomnia.rest 0.3 Project Setup .. 2023. 3. 30. No Image 📷 [23.03.29] 뭔가 프로젝트가 끝이나고 코드를 더 이상 볼일이 없어져서 그런가 무기력해 질 것 같다. 그런 마음을 다 잡기 위해 그동안 하지 못 했던 부족했던 부분과 이번 실전 프로젝트를 통해 내가 얻은 것 그리고 무엇을 어떻게 왜 그렇게 선택하고 고쳤는지 설명하며 복기하는 시간을 가지기로 했다. 참고로 오늘 postgreSQL을 처음 사용해보았다. MySQL로 sql문에 조금은 거부감이 적어지고 기본적인 사용은 가능하다고 생각했다. 2023.03.29 - [𝐝𝐚𝐭𝐚𝐁𝐚𝐬𝐞/PostgreSQL] - [postgreSQL] postgreSQL 을 dbeaver 와 연결하기 [postgreSQL] postgreSQL 을 dbeaver 와 연결하기 SQL 인 postgreSQL로 데이터 삽입, 수정, 삭제 작업을 해보겠다... 2023. 3. 29. 이전 1 ··· 5 6 7 8 9 10 11 ··· 22 다음 728x90
