합정 맛집 스푼 합정파스타, 와인 : 수제통베이컨•풀드포크 존맛 지하에 위치한 합정 파스타 맛집 스푼 Spoon 🥄 식당에 들어오면 이렇게 모든 테이블에 가지런히 세팅이... blog.naver.com 합정 파스타 맛집 합정 데이트, 소개팅 장소로 추천! 합정 파스타 맛집 키친485 Kitchen 485 예전에 고객사랑 식사하려고 방문했었던 합정 파스타 맛집 합정역맛집, 조용한 분위기에서 맛보는 리가토니 파스타와 풀드포크 :: 스푼 # 합정역맛집 에 갔다왔어요~ 얼마전 새로 오픈한 파스타집이더라고요ㅎㅎ 합정역 5번 또는 6... blog.naver.com 합정 데이트 | 와인바 디껨, 합정 소개팅 장소로 딱이에요. 당장 저장해 남친님이랑 홍대에서 향수만들기 원데이 클래스 끝나고 저녁으로 합정역 와인바 디..
2022.08.01
웹팩 개발 서버 ESLint 에러 띄우기 리액트 환경에서 수동으로 웹팩과 타입스크립트까지 적용했고 이후 Prettier & ESLint 설정도 했고 .eslintrc 파일에 원하는 규칙도 작성해놨는데 문제가 발생했다. IDE에서는 린트에 맞지 않는 코드는 빨간 줄로 잘 표시가 되지만 웹팩 개발 서버에서는 잘 돌아가고 빌드 또한 잘 된다. 내가 원하는 건 개발 서버나 빌드 시 린트에 맞지 않는 코드는 에러를 띄우고 싶었다. CRA(Create-React-App) 명령어로 ESLint 설정을 하면 자동으로 개발 서버에서 에러 창이 떴는데, 수동으로 셋팅했을 때만 안 되는 경우였다. 그래서 웹팩과 관련한 플러그인을 찾아봤는데.. 역시나 관련된 플러그인이 있었다. 나중에 CRA 프로젝트를 eject을 해서 파악..
2022.07.26
BrowerRouter 새로고침 시 빈화면 리액트18 버전으로 React-router-dom v6 버전을 사용하고 있고, 타입스크립트를 적용해서 수동으로 웹팩 설정까지 해놓은 상태에서 발생된 에러입니다. 버전 문제는 아니지만, 새로고침 할 때 빈 화면이 보이는 현상이 나타나더라구요. 콘솔 창에서 네트워크 탭에 가서 확인해보니 /about/app.js 경로로 JS 파일을 호출하고 있었습니다. 정상적이라면 루트경로에 /app.js를 호출해야합니다. 콘솔 에러 메세지 http://localhost:3000/about/app.js net::ERR_ABORTED 404 (Not Found) BrowserRouter에서 HashRouter로 변경하면 정상작동 했지만.. 알아보니 웹팩 설정 문제였습니다. // web..
2022.07.17
최근 프론트엔드와 관련 한 카카오톡 오픈 채팅방을 통해 스터디를 시작했고 관련해서 공부했던 내용을 토대로 포스팅을 진행해봤습니다. SWR이란? 클라이언트는 서버에서 데이터를 받는 순간 이 데이터가 최신 데이터인지 알 수 없다. 그렇다고 무작정 서버에서 데이터를 요청하면 아래처럼 무한의 굴레에 빠져버려 본인 서버에 디도스 공격을 하는 꼴이 돼버린다. 그래서 효율적으로 최신 데이터를 유지하기 위해 여러 HTTP 캐싱 전략이라는게 존재하는데, 그중 하나가 SWR(Stale-While-Revalidate)이라는 방식이다. 이 외에 Cache-First, Network-First, Network-Only, Cache-Only 등 있다. SWR훅은 Next.js로 유명한 vercel에서 만들었으며, Stale-Wh..
2022.07.16
1. 터미널 실행 2. 포트를 사용중인 프로세스 찾기 lsof -i :8080
2022.07.16
요즘 리액트18 버전으로 타입스크립트 셋팅을 하고 있던 와중 기본 리액트에서 잘 됐던 웹팩 설정이 안 먹혀 해결방법을 알아보았습니다. webpack.config.js ... plugins: [ new Webpack.ProvidePlugin({ React: "react", }), ], ... 이전 자바스크립트에서 사용했을 때 처럼 아래와 같이 웹팩에서 ProvidePlugin()으로 리액트를 설정해주면 jsx 파일에서 'import React form 'react' 선언을 안해줘도 됐었습니다. 그런데 타입스크립트에서 설정을 했을 때는 아래와 같은 오류가 발생하더군요. Error Message 'React' refers to a UMD global, but the current file is a module..
2022.07.13
타입스크립트를 프로젝트에 사용하려면 설정이 필요한데, 한 번에 외우는 건 불가능하기에 반복 학습으로 메모장 처럼 기록해두고 자주 찾아보려한다. 앞으로 타입스크립트를 사용하면서 계속 추가될 예정. 타입스크립트는 트랜스파일러로 ts에서 js로 변환시켜준다. 변환해야하는 이유는 브라우저는 only 자바스크립트만 이해할 수 있다. 자바스크립트도 여러 버전이 존재하는데(commonJS, es5, es6+ 등), 어떤 버전으로 ts 파일들을 js파일로 변환할지 설정을 해줘야하고 부가적인 설정들도 해줘야한다. 타입스크립트 문법 위주로만 공부했지만 이러한 세부적인 지식들도 중요하다. 트랜스파일러(Transpiler)와 바벨(Babel) 자바스크립트를 공부하다 보면 쉽게 들을 수 있는 폴리필과 바벨에 대해서 다시 공부해..
2022.07.11
안녕하세요. 꾸생입니다 :) 오늘은 리액트에서 효율적으로 Document Title을 설정하는 방법에 대해 기록해봅니다. Document Title이란 무엇인지 부터 알아보며 시작하도록 하겠습니다. Document Title이란? 브라우저를 통해 웹사이트에 접속하면 대표적으로 상단 탭에 페이지 제목이 위치하게 되는데요. 이 페이지 제목이 Document Title입니다. 가장 대표적인 웹사이트의 타이틀로, 고정적인 경우도 있으나 해당하는 페이지마다 달라지는 경우가 대부분입니다. 검색엔진 뿐만 아니라 사용자한테도 중요하게 보이는 요소라 생각합니다. Document Title은 HTML 문서에서 아래와 같이 작성됩니다. ... 타이틀의 변경이 필요하다면 index.html 파일의 태그 내용을 수정해주면 되지..
2022.06.25
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev