본문 바로가기

전체 글

 (12)
AWS Cloud Front와 s3 버킷 연동하기 목표 이미지 https -> http 요청을 위해 SSL 인증 s3 url은 접근 허용 x & CloudFront url만 접근 허용하고 싶음 기존 호스팅에 레코드 추가 1. s3 버킷 만들기 객체 소유권 -비활성화 퍼블릭액세스 차단 - 모든 퍼블릭 액세스 차단 버킷 버전 관리 - 비활성화 기본 암호화 - 비활성화 (고급설정)객체 잠금 - 비활성화 파일 하나 업로드 하기 => 후에 연결 테스트용 2. cloud front 배포 생성 원본 원본 도메인 선택(만든 버킷 선택) 버킷을 선택했다면 이름은 자동으로 들어감 목표2를 위해 S3 버킷 액세스 "예" => CloudFront 원본 액세스 ID(OAI) 생성 =>버킷 정책에 사용(CloudFront -> 원본 액세스 ID에서 확인) 설정 대체 도메인 이름..
[React] 인스타 클론코딩 기록 (4-1) - css 서버사이드렌더링 front에 npm i babel-plugin-styled-components 설치 해주고요 파일 .babelrc 생성 { "presets": ["next/babel"], "plugins": [ ["babel-plugin-styled-components", { "ssr": true, "displayName": true }] ] } 확인 next/babel은 이미 깔려있다는 가정 모든 페이지의 공통요소인 _app.js 에 먹이고 싶은데 어떻게? 그 상위의 요소인 _document.js를 pages 디렉토리 안에 생성 import React from 'react'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import {..
[React] 인스타 클론코딩 기록 (4) - 서버사이드렌더링과 쿠키설정 앞서 next가 서버사이드렌더링을 편하게 해주기 때문에 설치해 사용했습니다. 클라이언트사이드렌더링은 브라우저 -> 프론트서버 -> (!) 브라우저 -> 프론트서버 (!) -> 백서버 -> 프론트서버 -> 브라우저 순서로 데이터를 요청하고 받아오게 되면서 (!) 사이의 단계일 때, 모양은 있지만 데이터가 없는 화면이 보여지게 됩니다. 서버사이드렌더링은 웹페이지를 리프레쉬 하면 브라우저에서 백엔드 서버로 요청을 보내 데이터를 받아오게 됩니다. 브라우저 -> 프론트서버 -> 백서버 -> 프론트서버 -> 브라우저 요청 한번으로 초기 로딩속도가 좀 빨라지는 듯한 느낌을 줍니다. pages 의 index 페이지의 서버사이드렌더링을 위해 초기에 로딩되어야 하는 액션을 파악하고, const Home = () => { ..
[React] 인스타 클론코딩 기록 (3) - redux-saga, REST API 미들웨어는 redux가 비동기 액션을 dispatch 할 수 있도록 합니다. 이전 글의 코드 부분에 middlewares가 있었는데 이 부분이 비동기를 디스패치를 해주는 역할을 합니다. const loggerMiddleware = ({ dispatch, getState }) => (next) => (action) => { console.log(action); return next(action); }; 여기서 미들웨어는 dispatch가 실행될 때 마다 동작하고 action은 dispatch가 일어날 때의 action입니다. next는 다음 미들웨어를 호출하는 역할을 합니다. 다음 미들웨어가 없으면 dispatch 됩니다. 위의 loggerMiddleware 는 액션을 실행할 때 마다 콘솔이 찍히도록 되어..
[HTML] 태그 - 텍스트 관련(1) html 태그는 종류가 정말 다양합니다. 의미있는 웹 사이트를 만들기 위해 콘텐츠의 용도에 맞는 올바른 태그의 사용이 꼭 필요합니다. 제목 제목(heading) 태그입니다. 제목 태그는 h1부터 h6까지 있습니다. h1이 제일 크고 h6가 제일 작습니다. 제목1 제목2 제목3 제목4 제목5 제목6 제목을 표시할 때 사용되며 간격, 색상, 폰트두께, 폰트크기 등은 css로 설정이 가능합니다. h1 태그는 문서 전체에서 하나만 사용하는 것을 권장합니다. 보통 header 안의 로고 등에서 h1이 사용되거나, 섹션의 제목에 사용됩니다. 블록요소로 기본적으로 margin 등이 설정되어 있어 간격이 띄워집니다. 문단태그 문단(paragraph)을 만드는 태그입니다. p 사이에 문단의 내용을 넣습니다. 블록요소로 ..
[React] 인스타 클론코딩 기록 (2) - redux 여러 페이지, 컴포넌트의 공통적인 데이터(ex 로그인 정보)를 부모에 저장하고, 자식에 잘 전달해주는 과정이 필요합니다. 이 과정을 관리, 전달 해주는 기능으로는 contextAPI(React), Redux, MobX 등이 있습니다. 몹엑스의 인기가 많아지고 있지만 저는 초보니 많이 쓰이는 리덕스를 사용하려고 합니다. 리액트는 객체나 배열로 전달된 데이터를 업데이트할 때, 불변성을 지키며 업데이트 해줘야 합니다. (...state, { } 이런 느낌으로...) 이 과정이 참 번거롭고 해서 이후에는 immer 를 사용해 불변성을 신경쓰지 않을 방법으로 업데이트 예정입니다. 설치 갑니다. react-redux, redux, next-redux-wrapper 다 설치해 줍니다. npm i react-redux..
[React] 인스타 클론코딩 기록(1) React와 next.js를 활용해 인스타그램 클론(??)을 시작해 보겠습니다! 저는 react-create-app을 사용하지 않고 필요한, 사용할 것들을 확인하며 해보려 합니다. 오늘은 개발환경 설정 기록이 많을 것 같습니다. 노드 잘 설치 됐는지 확인 해보고 프로젝트 디렉토리에 npm init 으로 시작을 합니다. 시작~ npm init react, react-dom, next 9버전 설치합니다. npm i react react-dom npm i next@9 next는 자동으로 pages 디렉토리 안의 파일들을 개별적인 페이지로 인식하고, 코드 스플리팅 된 페이지로 만들어줍니다. 그 안의 index.js 가 index 페이지가 되는 원리입니다. 또 좋은 점이 import React from 'reac..
[webpack]핫리로딩 수정마다 반복되는 빌드를 줄여줄 리액트 리프레쉬 npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D 프론트 서버도 필요하다 해서 npm i -D webpack-dev-server 설치가 좀 걸리시네... 왜 오래 걸리지 그러면 이렇게 설치 되어있음 package.json 의 devDependencies 배열에 추가되어 있음 "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3", "react-refresh": "^0.9.0", "webpack-dev-server": "^3.11.0" 그리고 위의 script 옵션을 "scripts": { "dev": "webpack serve --env development" }, 이..
[React] 웹팩 바벨설치 추가 init npm init 리액트, 리액트돔 설치 npm i react react-dom 웹팩 설치 npm i -D webpack webpack-cli 바벨 npm i babel-loader @babel/core 환경에 맞게 알아서 바벨로 맞춰줌 npm i -D @babel/preset-env 얘가 있어야 JSX 쓸수있음 npm i -D @babel/preset-react 다 깔리면 폴더에 webpack.config.js 생성 mode - entry - module - plugins - output 5개가 중요 //webpack.config.js const path = require('path'); module.exports = { mode: 'development', //개발시: development /..
[HTML] tag(태그)와 요소 알아보기 안녕하세요. 지난 글에서는 HTML의 기본 구조에 관해 알아보았습니다. 이번 글 부터는 body 태그에 들어가는, 즉 웹페이지의 내용을 구성하는 태그들을 알아보겠습니다. 우선 태그의 기본구조입니다. 태그 속성 내용 이렇게 내용을 태그로 감싸는 것이 기본 구조입니다. 그리고 이 사용하는 태그에 따라 내용의 성격과 의미를 결정합니다. 예로 ~ 의 태그 안에 내용이 들어있다면 그 내용은 제목이라는 의미일 것이고, 안에 들어가면 문단(paragraph), 안에 들어가면 링크로 정의 됩니다. 속성과 속성값은 그 태그에 기본적으로 포함되는 내용 또는 임의로 부여하는 내용으로 요소에 실제로 나타내고 싶지 않지만 추가적인 내용을 담을 때 사용합니다. 속성을 사용할 때는 지켜야할 사항이 있습니다. 요소 이름 다음에 바로..

티스토리툴바