기록하는 개발자

- 카테고리를 선택하면 해당 카테고리를 tag로 가진 영화들이 화면에 보이게 된다. - 현재 선택된 카테고리를 보여주기 위해 font-weight를 style로 적용했다. //Card.js const movieData = [ { title: "Sing Street", date: "2016", image: "https://m.media-amazon.com/images/M/MV5BMjEzODA3MDcxMl5BMl5BanBnXkFtZTgwODgxNDk3NzE@._V1_.jpg", tags: ["all", "music"], }, { title: "Tenet", date: "2020", image: "http://img.movist.com/?img=/x00/05/32/55_p1.jpg", tags: ["all",..

scss에서 색을 지정할 때 rgba형식에서 opacity 적용이 안되는데 아래와 같이 변수로 지정하여 넣어주면 rgba에서 opacity 사용이 가능하다. 결과화면 Main.js import "./main.scss"; const Main = () => { return ( Scss에서 rgba 사용 시 opacity 적용 방법입니다. ); }; export default Main; main.scss $custum-color: #000000; $custum-opacity: 0.5; .container { background-color: rgba($custum-color, $custum-opacity); width: 500px; height: 500px; margin: 0 auto; }

프로젝트를 하면서 modal창을 직접 만들어 쓰곤 했는데 기록한 적은 없었던 것 같아 글을 써본다. React hooks usestate를 사용해 modal창을 만들었다. 클릭 전 화면 클릭 후 화면 폴더 구조 //App.js import React, { useEffect } from "react"; import AppRouter from "./AppRouter"; function App() { return ; } export default App; //AppRouter.tsx import React, { useState } from "react"; import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"; import Home ..

https://mingmeng030.tistory.com/249 SSR과 CSR, MPA와 SPA react로 개발을 하면서 spa는 많이 들어봤지만 single page application이라는 것만 알았지 정확히 무엇이고, 왜 사용해야하는지, 장단점은 무엇인지 등에 대해 모르고 있었다. 블로그 정리를 위해 서치 mingmeng030.tistory.com 바로 이전 포스트에서 SPA, MPA 등을 소개했다. 서치하며 공부하던 중 SSG라는 것도 있어서 기록해보려한다. SSG: Static Site Generator SSG로 생성되는 웹사이트는 모든 웹페이지를 미리 모두 만들어놓고 요청이 들어오면 만들어 놓은 웹페이지를 그대로 응답만 해준다. 특징 서버와 클라이언트 측 모두 렌더링을 위해 할 일이 별로..

react로 개발을 하면서 spa는 많이 들어봤지만 single page application이라는 것만 알았지 정확히 무엇이고, 왜 사용해야하는지, 장단점은 무엇인지 등에 대해 모르고 있었다. 블로그 정리를 위해 서치 중 MPA와 SPA 그리고 SSR과 CSR을 같이 정리하는 것이 맞다고 생각해서 글 주제를 SPA 에서 좀 더 넓혀보았다. SSR(Server Side Rendering) SSR의 과정 - 페이지를 이동할 때마다 새로운 페이지를 요청한다. - 모든 템플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답한다. 장점 - 초기 로딩 속도가 빨라 사용자가 빠르게 컨텐츠에 접근할 수 있다. - SEO(Search Engine Optimization) → MPA는 브라우저에서 JavaSc..

자바스크립트에는 HTTP Requests를 위한 방법으로 Fetch와 Axios있다. 두 가지를 모두 사용해보면서 장점과 단점을 느꼈었는데 정확히 어떤 점이 더 낫고 다른지 자세히 알아보자! Fetch ES6부터 들어온 JavaScript 내장 라이브러리다. Promise 기반으로 만들어졌기 때문에 데이터를 다루기가 쉽다. fetch("https://localhost:3000/dashboard/post", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: "mingmeng030", title: "fetch and axios", description : "what's the differe..

↓이전 글 https://mingmeng030.tistory.com/244 [vanillaJs] 프레임워크없이 SinglePageApplication 만들기-1. 라우팅 설정하기 폴더 구조 1. frontend 폴더 내부에 index.html 파일 생성 후 아래와 같이 구성 // index.html SPA with no framework Home Posts Settings - url 이동에 사용하게 될 a 링크들에 대하여 data-li.. mingmeng030.tistory.com https://mingmeng030.tistory.com/245 [vanillaJs] 프레임워크없이 SinglePageApplication 만들기-2. 라우팅 페이지 구성 https://mingmeng030.tistory.co..

Regular Expression: Regex 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. 1. 정규표현식 형식 / 패턴 / 플래그 - 슬래시(/)와 슬래시(/) 사이에는 매칭시킬 패턴을 써준다. - 슬래시(/) 다음에는 옵션을 설정하는 플래그를 써준다. *플래그는 하나만 찾을지, 모두 다 찾을지 등을 설정하는 옵션이다. 2. 정규표현식 매칭 패턴(문자, 숫자, 기호 등) 매칭 패턴을 사용하면, 문자/숫자/기호를 보다 쉽게 표현할 수 있다. 패턴 의미 a-zA-Z 영어알파벳(-으로 범위 지정) ㄱ-ㅎ가-힣 한글 문자(-으로 범위 지정) 0-9 숫자(-으로 범위 지정) . 모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두! 단, 줄바꿈X) \d 숫자 \D 숫자가 아닌..