TDD

→2022.05.18

[Next.js] Next.js에 대해서(React와의 차이점, Next.js+Typescript+Styled-components 초기 세팅)

1. Next.js란? Next.js는 React 라이브러리의 프레임워크 + React는 언제든지 가져와서 사용할 수 있는 라이브러리, Nextjs는 이미 정해진 규칙에 따라 코드 작성시 알아서 작성시켜주는 프레임워크 라고 생각하면 편할 듯 하다. - React의 동작방식 브라우저가 자바스크립트 코드를 가져와서 client-side의 자바스크립트가 모든 UI를 만들게 된다. (브라우저 렌더링 과정) 즉, 브라우저가 HTML을 가져올 때 비어있는 div를 가져오고 그다음 모든 JS를 요청해서 브라우저가 자바스크립트와 react.js를 실행시키고 그다음 앱이 유저에게 보여지게 된다. js를 가져와야만 화면을 띄울 수 있기 때문에 네트워크 연결이 느리거나, 파일이 큰 경우 처음에 흰 화면만 보이고 천천히 화면..

→2022.04.12

[Node.js] Multer-S3를 이용한 이미지 업로드

Front-End에서 유저가 이미지를 업로드 하게 될 경우, 이미지를 저장하는 방법은 많지만 아마존 AWS S3버킷에 이미지 파일을 저장하고 DB에는 이미지 파일경로(이미지 주소)를 저장하여 보여주는 방식을 설명하겠습니다. 이는 Multer-S3와, AWS-SDK 모듈을 사용하여 구현할 수 있습니다. multer의 주요 메소드 single, array, fields에 대해 알아보겠습니다. https://www.npmjs.com/package/multer multer Middleware for handling `multipart/form-data`.. Latest version: 1.4.4, last published: 3 months ago. Start using multer in your project..

→2022.02.24

[React] 실습

✍🏻 기존코드 App.js 코드 import "./App.css"; function Header(props) { return ( {props.title} ); } function Nav() { return ( html css js ); } function Article(props) { return ( {props.title} {props.body} ); } function App() { return ( ); } export default App; ✍🏻 li태그 동적으로 생성하기 import "./App.css"; function Header(props) { return ( {props.title} ); } function Nav(props) { let lis = []; for (let i = 0; i <..

→2022.01.03

[React] 리액트 CRA로 시작하기(create-react-app)

리액트 CRA로 시작하기 리액트 개발환경 설치 npm install --global create-reate-app 해당 폴더에 리액트 프로젝트 설치 npx create-react-app . + CRA 설치, 파일명 앞에 . 을 붙이면 현재 디렉터리에 그대로 생성된다. npx create-react-app react-app 리액트 프로젝트 디렉토리로 이동 cd react-app 리액트 실행 npm run start 아래와 같은 빌드화면 확인 가능하다. create-react-app 성공적으로 실행되었다면, react-app 으로 된 폴더가 생성되고 아래와 같은 파일 구조를 가진다. . ├── README.md ├── node_modules ├── package.json ├── public ├── src └..

→2021.12.31

템플릿 엔진 Template Engine (+Pug)

템플릿엔진이란 ? SSR을 구현하는 방법으로, 서버에서 클라이언트로 보낼 HTML의 형태를 미리 템플릿으로 저장 동작 시에 미리 작성된 템플릿에 데이터를 넣어서 완성된 HTML 생성 => 템플릿 작성 문법과 작성된 템플릿을 HTML로 변환하는 기능을 제공 템플릿엔진의 종류 EJS - html과 유사한 문법의 템플릿엔진 Mustache - 간단한 데이터 치환 정도만 제공하는 경량화된 템플릿 엔진 Pug - 들여쓰기 표현식을 이용한 간략한 표기와 레이아웃 등 강력한 기능을 제공 (가독성이 좋고 개발 생산성이 높음.) Pug알아보기 express-generator사용 시 기본적으로 jade라는 템플릿엔진을 사용하고 있으며, jade는 pug의 이전이름으로 템플릿엔진을 pug로 지정해 줘야햔다. express ..

→2021.12.08