본문 바로가기

FrontEnd

 (21)
react-confetti로 폭죽 효과 만들기 연습문제 페이지를 다만들었고 다풀었을때 보여줄 완료 페이지를 만들려고 한다.자격증 이미지를 띄우고 돋보기 추가해볼까 하다가 뭔가 연관되는게없다는 생각이 들어서폭죽을 터뜨리는 것으로 바꾸었다. 그런데 검색해보니 정말 다양한 폭죽 라이브러리가 있었다. 내가 선택한 방법은  react-confetti 라이브러리이다.라이브러를 사용하지않고 Vector와 Class 를 사용한 폭죽을 구현해보고싶었지만,다른작업이 많이 남아있기에 가장 빠르게 할 수 있는걸 선택했다.  react-confettiReact component to draw confetti for your party.. Latest version: 6.1.0, last published: 2 years ago. Start using react-confet..
reducer와 slice Reducer createSlice를 사용하지 않고 순수한 Redux에서의 reducer는 순수 함수로, 현재 상태와 액션을 받아서 새로운 상태를 반환한다. Redux에서는 많은 boilerplate 코드를 작성해야 하고, 액션 생성자와 리듀서를 일일이 정의해야 한다. 개발자는 액션 타입 문자열을 일일이 작성하고 액션 생성자와 리듀서를 따로 만들어야한다. Slice createSlice 함수는 리듀서 함수, 액션 생성자 함수, 초기 상태를 한 번에 생성한다. createSlice는 기본적으로 immer라는 라이브러리를 사용하여 불변성을 유지하는 로직을 자동으로 처리하기때문에 상태를 직접적으로 변경해도 된다. createSlice로 생성된 slice는 자동으로 액션 생성자를 생성하고 액션 타입을 관리하므로..
vercel을 사용한 배포 배포할때 백엔드는 AWS EC2를 프론트엔드는 AWS S3를 사용한 배포를 사용했었는데프론트 배포할때 Vercel이 정말 편하다고 들어서 사용해봤다. 1.  Vercel 사이트에 접속해서 회원가입 Vercel: Build and deploy the best web experiences with the Frontend Cloud – VercelVercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.vercel.com 1.  배포 시작하기가입하면 start deploying을 클릭하고 Import Git Repository 한다.내경우 ..
정적웹페이지 배포 터미널에서 내가 배포할 폴더의 경로로 들어간다. 1. React 앱 build 하기 # react app build 명령어 npx react-scripts build CRA(npx-create-react-aoo)으로 생성한경우 package.json의 build 스크립트를 바로 활용할 수 있다. # CRA로 앱 생성한 경우 package.json의 빌드 스크립트로 가능 npm run build build 하면 build 폴더가 생성되고 내부에 정적 웹 컨텐츠가 생긴다. 2. AWS S3 Bucket 생성하기 클라우드 스토리지 | 웹 스토리지| Amazon Web Services 닫기 이 다이어그램은 데이터를 Amazon S3로 이동하고, 저장된 데이터를 관리하며, 다른 서비스로 데이터를 분석하는 방법을 ..
배포(Deployment) 배포란? 배포는 개발된 소프트웨어나 웹 어플리케이션을 다른 사람들이 접근할 수 있는 환경으로 만들어 개발된 소프트웨어르 실제 사용가능 한 상태로 만드는것. 사람들이 항상 서비스를 이용하기 위해서는 서버와 인프라를 구축하고 24시간동안 가동되게해야한다. 하지만 내컴퓨터를 24시간 돌리는것은 말이 안되고.. 항상 가동되는 컴퓨터를 제3자가 제공할 수 있는데, 이를 클라우드 서비스라한다. 클라우드 서비스는 퓨터를 일정 비용을 내고 구입해서 하루종일 서버를 켜놓을 수 있으며, 다양한 형태와 모델을 제공한다. 클라우드 서비스의 특징 1. 확장성(Scalability): 필요에따라 리소스를 확장/축소 할 수 있다. 2. 유연성(Flexibility): 다양한 서비스와 모델을 사용할 수 있다. 3. 자동화(Autom..
google maps 현재 위치 받기 리뷰 컴포넌트를 만들고보니 '가져올 가게에 있는 리뷰도 google maps에 등록된거잖아?' 라는 생각이 들었다. 우리가 할 일은 24시 카페의 위치와 내용들을 구글맵에서 그대로 받아오는거라서 내가 리뷰를 만들 필요가 없었다. 결국 구글맵스부터 만들고 데이터를 받아와서 작업을 했어야했다. 일단 구글맶는 띄워두었으니 유저가 접속했을때 그 위치를 받아오는 작업을 먼저 하기로 했다. import React, { useEffect, useState } from 'react'; import { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api'; const MapContainer = () => { const { isLoaded, loadError..
react-googleMap 을 띄우며 겪은 에러들 https://www.npmjs.com/package/@react-google-maps/api @react-google-maps/api React.js Google Maps API integration. Latest version: 2.19.2, last published: a month ago. Start using @react-google-maps/api in your project by running `npm i @react-google-maps/api`. There are 298 other projects in the npm registry using @react-google-ma www.npmjs.com npm의 라이브러리를 사용하려면 아래의 코드를 입력하면 된다. npm i @react-goo..
OrderPage 만들기 작업을 시작하기에 앞서 어제 발생한 map함수에대한 걱정이 실화가 되었다. 그저 웃음만 나온다..허허허 이번에 들어오는 데이터는 아래와 같다. { "data": [ { "id": "363", "sub_category_id": "600*1200*20", "surface_type_id": "HARD MATT", "name": "P_1_CTN_01", "weight": "30", "type": "천장용", "price": "10000.00", "sell_counts": "5", "image_url": "images/6.jpg" }, { "id": "2", "sub_category_id": 2, "surface_type_id": 2, "name": "SDH211", "weight": "60", "price": ..
제품상세 페이지 만들기 제일 해보고 싶었던 상품 상세페이지! 주말동안에 개구리 css문제도 다풀어봤다고?! 푸터를 끝내고 처음으로 내가 꾸미고 싶은대로(이솝을 참고해서이지만..) 할수있어 너무 설렜다. 일단 데이터는 이렇게 주고 받기로 하였다. 구현 과정 1. map 함수로 데이터 처리 이미 레이아웃을 만들때 상수데이터를 사용해서 만들어두어서 목데이터만 추가로 map을 돌려서 만들어보았다. 그렇게 자신감 넘치게 npm start를 쳤다. 그런데 앗 맵함수 잘못썼다 이렇게 작성한 이유는 타입명 옆에 값들이 map함수로 착착 들어갈거라 생각해서.. 하지만 현실은 타입(주르륵), 값(주르륵) 'map함수를 돌려서 바로바로 옆에 띄우는 방법은 없는걸까?' 고민해보았으나 답이 보이지않았다. 하나씩 해보자며 맵함수를 분리하니 아래 이미지..
display:flex 음..css 공부를 안하고 바로 프론트로 '공부하면서 프로젝트 해보지 뭐' 했다가 화면이 다 깨지는경험을 했다. margin, padding 쓰지말고 display나 grid를 쓰라고하는데 그게 뭐지 display: flex CSS의 속성 중 하나로, 해당 요소를 플렉스 컨테이너로 만드는 역할을 합니다. 이를 통해 자식 요소들을 플렉스 아이템으로 배치할 수 있다. 플렉스 컨테이너를 설정하면 해당 요소의 자식 요소들을 수평 또는 수직으로 배치하고 정렬할 수 있으며, 플렉스 박스 레이아웃은 요소들을 좀 더 효율적으로 배치하고 정렬할 수 있도록 도와준다. justify-content flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정..
컴포넌트 분리하기 리엑트 4일차인데 어제만든 컴포넌트중 하나를 분리하는 과제를 받았다. 🔨 과제 가이드 - src > pages > Product > components 폴더에 ColorButton 폴더를 생성해주세요 - 생성한 ColorButton 폴더에 ColorButton.js 파일과 ColorButton.scss 파일을 생성해주세요 - [Assignment 3-1]에서 구현했던 Color.js에서 colorButton을 분리해 ColorButton 컴포넌트로 구현해주세요 - Color.scss에서 적용된 스타일도 분리해서 ColorButton.scss에 입력해주세요 - 생성한 컴포넌트를 Color 컴포넌트에서 import 해주세요 - 총 3개의 ColorButton 컴포넌트를 사용하고 props로 각각 다른 데이터..
CRA 처음 리엑트를 설치하면 리엑트는 기본적인 UI기능만을 제공한다. 그래서 개발환경을 구축하기(패키지 설치, 유지보수 등)에 어려움이있는데 이런 문제를 돕기위해 리엑트는 프로젝트를 시작하는데 필요한 개발환경을 세팅해주는 툴체인(toolchain)을 제공한다. 그게 Create-React-App(CRA)고 안의 명령어만으로 리엑트의 개발환경을 구축할 수 있다. Create-React-App 프로젝트이름 명령어를 입력하면 진행할것인지 물어보는데 y를 눌러 설치한다. 이떄 프로젝트 명에는 대문자나 ~,!,(),*,^등의 특수문자를 포함하면 에러가 발생한다. 프로젝트 명은 소문자나 kebaa-case를 사용하여야한다. 설치가 완료되면 터미널 아래에 happy Hacking이라는 문구가 뜬다. 이때 바로 npm st..
DOM 으.. 프론트엔드 과제를하면서 html이나 css는 검색해보면서 하니 금방 할 수 있었다. 하지만 html파일과 js파일을 어떻게 관계시켜야할지 감이 오지 않았다. HTML과 Javascript를 어떻게 연결할까? 1. HTML에서 Javascript로 연결 태그를 이용 js파일을 연결해서 이용 2. Javascript에서 HTML로 연결 DOM을 사용하여 javascript로 HTML에 접근하여 조작하기 자바스크립트에서 html(웹페이지)에 접근하기위해서는 DOM을 사용해야한다. DOM을 사용하여 요소를 생성하거나 내용추가,클래스부여,스타일수정등 여러 작업을 할 수 있다. 근데 DOM이 뭔데...? DOM DOM은 문서(Document) 객체(Object) 모델(Model)의 약자로, HTML 이나 X..
개발자 도구 개발자도구란? Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster. 개발자 도구는 브라우저에 제공하는 하나의 tool(도구)이다. 웹사이트를 즉각적으로 수정하고 문제 발생시 원인을 빠르게 파악할수 있어 빠르게 처리하 수 있도록 도와준다. 개발자도구 열기: cmd+option+i/ctrl+shift+i 개발자도구에는 여러개의 패널이 존재하는데 상황에따라 각 ..
sementic Web & Tag 1. sementic web? Semantic Web은 인터넷의 급속한 활성화로인해 웹에 많은양의 데이터가 축적되었고 그 많은 데이터에서 원하는 데이터를 편하게 가져오기 위해 사용하기 시작하였다. 웹은 문서(document) 단위로 정보가 공유되는데 Semantic Web은 이러한 기존의 문서 중심의 웹을 "데이터 중심(data-centric)의 웹"으로 발전시키기 위해 개발되었다. Semantic Web서는 RDF(Resource Description Framework), OWL(Web Ontology Language), SPARQL(SPARQL Protocol and RDF Query Language) 등의 기술을 사용하여 컴퓨터가 사람의 언어로 알아들을 수 있게 데이터를 표현한다. 이러한 기술들은 ..
HTML과 HTTP 1. HTML(HyperText Markup Language)란? HTML이란 하이퍼텍스트를 활용하여 네트워크가 연결된 웹페이지에서 문서를 작성하고 읽거나 공유하기 위해 만들어진 체계이다. HyperText? 웹 페이지 등 다른 대상의 링크가 들어있는텍스트르 말하는데, HTML은 이 하이퍼텍스트를 활용하여 다른 사이트로 이동한다. 그렇다면 어떻게 다른 페이지로 이동할까? 그 답은 Markup Languague에 있다. Markup Languague? 이름 그대로 표시(markup)하는 언어를 뜻하며, 텍스트와 구분할수 있는 마크를 추가하는 언어이다. 쉽게 말하면 학교에 과제를 냈을때 선생님 또는 교수님이 어떻게 하면 좋겠다라고 색깔펜으로 표시해 주셨는데 컴퓨터에서 무언가를 하라고 지시하는 것이다. 웹 서..
HTML 1. HTML Hyper Text Markup Language의 약자로 네트워크가 연결된 웹페이지에서 문서를 읽고, 작성, 공유하기 위해 만들어진 체계이다. HTML은 웹 페이지를 만들기 위한 언어로 HTML로 웹페이지의 구조를 잡을 수 있다. HTML 파일은 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성하고 있다. 브라우저(safari, chrome, ie..)는 HTML파일을 통해 어떻게 화면에 그려내면 되는지 파악한 후에 웹 페이지를 생성한다. 2. HTML 파일 HTML은 .html확장자가 붙은 텍스트 파일이다. 텍스트편집기(Text Editor)같은 간단한 메모작성 앱을 열고, .html 확장자로 저장한 후, 해당파일을 브라우저(크롬)에 drag & drop 하면 브라우저에서..
cdnjs 백엔드 공부를 하면서 mvp를 사용햇었는데 이제 css를 사용할 때가 왔다. 사용해오던 mvp부분을 지워주니 마음에 안들음.. 이제 사이트를 꾸며보려고하는데 cdnjs를 사용해야한다. 근데 cdnjs가 뭐지? CDN (Content Delivery Network) 분산된 서버 네트워크를 활용하여 웹 콘텐츠를 빠르고 안정적으로 제공하는 서비스이다. 웹 사이트의 이미지, 스타일 시트, 자바스크립트 파일 등과 같은 정적 콘텐츠를 여러 지역의 서버에 캐시하고, 사용자가 해당 콘텐츠를 요청할 때 가장 가까운 서버에서 제공하여 응답 시간을 최소화하고 부하를 분산할 수 있다. 이점으로는 다운로드 속도향상, 높은가용성, 트래픽 분산을 통한 부하 분산, DDos 방어를 통한 강한 보안이있다. cdnjs cdnjs는 Co..
SASS 내가 기억하기로는 프론트분들이 싸스라고 했던거같은데 왜 scss를 sass라고 부르는지 궁금해서 검색해봤다. SCSS(SASS)란? Syntactically Awesome StyleShee로 CSS의 단점(selector, 연산기능 등)을 보완하고 편의성을 높인 CSS 전처리기이다. 전처리기는 CSS가 동작하기 전, 개발단계에서는 SCSS를 사용하고, 웹에서는 CSS로 변환해서 작동한다. .sass? sass는 css의 전처리기로 해석되어 CSS로 컴파일되는 스크립트 언어이다. sass에서는 중괄호대신 들역쓰기를 사용하여 코드블록을 정의한다. body font-family: Arial, sans-serif .container background-color: $primary-color padding: 20..
webpack webpack은 웹에서 사용되는 자원(asset)들을 번들링해주는 도구이다. 번들링은 여러파일의 종속성이 존재하는경우 그파일들을 모아서 압축,변형시켜 최소화하고 필요한 과정을 거쳐 정리한 코드를 결과물로 반환한다. 쉽게말해 그 종속성이 존재하는 파일을 하나의 파일로 묶어주는 패키징과정을 말한다. js를 구버번의 js로 바꾸거나 Sass를 CSS로 변경할 수 있는 등 많은 것을 할 수 있다. 보통 React난 Next.js 같은 것에는 webpack이 기본적을 포함되어있다. 모든 webpack.config.js파일들은 동일한 구조를 갖는데, entry, output, rules, 변형할 파일을 설정하는 방법은 기억해두자. Webpack 설치과정 webpack documentation npm i webpac..
CSS의 레이아웃 CSS 레이아웃 보통 무언가를 만든다거나 계획을 세울때 우리는 기본틀부터 짜기 시작합니다. 이곳에는 이렇게하고 저기에는 저렇게, 저곳은 또 이렇게해야지 구성을 짜는것을 CSS에서는 layout이라 합니다. 즉, layout은 내가 원하는곳에 블록의 요소들을 배치하는 것입니다. 배치방법으로는 display 사용하는 방법, table태그 를 사용하는 방법, float 속성을 사용하는 방법 등이 있습니다. table태그를 사용하거나 float을 쓰는것은 과거에 많이 사용했으나 요즘에는 display:flex를 많이 쓴다고 합니다. 1.Position의 property(속성) CSS의 position은 웹문서 안의 요소들을 어떻게 배치하여 나타낼지를 정하는 속성입니다. position속성을 사용하면, html ..

티스토리툴바