YEV.log

git에 올라간 작업들을 vscode에 연동하여 작업을 주로 하는데 아~~주 가끔 희박한 확률로 github 저장소와 연결되지 않는 것처럼 뜨는 일이 있다. (소스컨트롤에 변경사항이 적용되지 않을 때) 그런데 막상 터미널로 git log 나 git branch를 치면 아주 잘 연동이 되어있다고 보여주는데 vs code나 컴퓨터를 껐다켜도 똑같은 상황 🤦🏻‍♀️ 다시 돌아오는 것도 정말 랜덤으로 돌아오는 것 같은데 정확한 해결 방법을 찾지 못하다 이번에 찾게 되어 공유하고자 한다. 해결 방법 1. extension 에서 @builtin git를 검색한다. 2. Enable이라고 나오지만 Disable을 눌러주고 다시 Enable을 눌러준다. 해결 🧚🏼‍♀️ 작업표시줄에도 잘 뜨고, 소스컨트롤에서도 잘 연동..

평일 5일 동안은 꼭 1일 1커밋을 실천하여 잔디밭을 채워놔야지 하는 생각으로 1년 가까이 잔디밭을 꾸준히 가꾸어왔다. 요새 git 레파지토리를 정리하면서 다른 계정으로 내 작업 계정 프로필을 들어가보았는데 이게 왠걸,, 낯선 비어있는 나의 잔디밭이 날 반겨주었다 😭 알고보니, 기본 설정은 public 저장소에 있는 잔디만 보여지기 때문이라고 한다는 것을 알게되었고, private 저장소에서 커밋을 많이 했었기에 모두 같이 보여지는 옵션을 찾아보았는데 의외로 정말 간단했다! 해결 방법 1. 잔디밭 위에 있는 Contribution settings 옵션창 클릭 2. Private contributions 선택 돌아온 나의 잔디밭! 🌱

오늘 하루 보지 않기 기능을 구현할 때, Local Storage나 Cookies를 사용합니다. Local Storage는 간단하게 key-value 형식으로 저장할 수 있지만 Cookies를 사용하게 되면 만료기간을 설정 시에 저장할 수 있어서, 만료기간이 지나면 자동으로 쿠키가 삭제되기 때문에 더 유용하게 쓸 수 있습니다. 🍋 구현 방법 저 같은 경우에는 프로젝트를 진행할때 쿠키 관련 스크립트를 utils 폴더에 넣어놓고 사용합니다. setCookie 함수에서는 쿠키이름, 쿠키의 value, 만료일자(1일, 2일, 3일...) , getCookieValue와 deleteValue 함수의 인자로는 앞단에서 설정한 쿠키의 이름만 설정해주면 됩니다. const setCookie = (name: string..

CSS 컨트롤 css 속성 지정하여 추가하기 $('#searchBtn').css('display', 'none'); class 추가 하기 , 삭제 하기 $('#searchBtn').addClass('disabled-btn'); $('#searchBtn').removeClass('disabled-btn'); class 가 있는지 없는지 확인 $('#searchBtn').hasClass('on') // true & false 로 반환 태그 속성 컨트롤 a 태그 href 변경하기 마이페이지 $('#mypage').attr( 'href', `/mypage?offset=0&limit=20` ); a 태그의 href 제거하기 (클릭 disabled) $('#mypage').removeAttr('href'); but..

'string' 형식의 식을 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다. 'string' 형식의 매개 변수가 포함된 인덱스 시그니처를 찾을 수 없습니다.ts(7053) 게시판 기능을 구현 중에 카테고리 - 세부카테고리를 상수 데이터로 미리 정의하고, 사용자가 선택한 카테고리(writeBody.board_type)값에 맞는 세부카테고리를 보여주고자 했습니다. 객체명[변수명] 이렇게 접근하면 될 줄 알았지만 타입스크립트는 호락호락하지 않았고 빨간줄을 띄며 에러를 또 내뱉엇습니다. 이 에러는 상수객체에 타입을 지정해주지 않았기에 접근할 수 없다는 에러였으며, 타입을 지정해주면 해결할 수 있었습니다. 🚧 해결 방법 interface BoardDetailType { [props..

모듈 'quill-image-resize'에 대한 선언 파일을 찾을 수 없습니다. '/Users/quill-image-resize/image-resize.min.js'에는 암시적으로 'any' 형식이 포함됩니다. 해당 항목이 있는 경우 'npm i --save-dev @types/quill-image-resize'을(를) 시도하거나, 'declare module 'quill-image-resize';'을(를) 포함하는 새 선언(.d.ts) 파일 추가ts(7016) 타입스크립트에서 npm install 또는 yarn add로 모듈들을 설치하고 import해서 사용하려고 할 때 모듈 '~~~'에 대한 선언 파일을 찾을 수 없습니다. 라는 에러가 뜨는 경우가 종종 있습니다. 이러한 오류는 대게 모듈을 만든 개..

✋🏻잠깐! 들어가기 전에 React-pixel 라이브러리를 사용하여 구현하였습니다. 광고를 통해 들어온 사람들만의 행동을 따로 측정할 수 있도록 하였습니다. 픽셀의 고급 매칭 기능은 자세히 다루지 않습니다. 앞 부분은 설명입니다. 바로 구현하길 원하시는 분은 React Facebook Pixel - 실제사용법 부터 봐주세요 페이스북 픽셀이란? 페이스북 픽셀은 잠재 고객이 광고를 클릭한 이후에 웹사이트에 도착해서 어떤 특정 행동을 하는지 알려 줍니다. 페이스북 픽셀을 사용함으로써 이 타겟을 기반으로 광고 효율을 높일 수 있습니다. 픽셀로 사용자들의 어떤 행동들을 확인할 수 있을까요? 전반적으로 페이지를 보거나, 상품을 구매하거나 문서를 등록하는 행동들을 통계로 확인할 수 있게됩니다. 버튼을 클릭하는 것으로..

사이트맵이란? 사이트 맵(Sitemap.xml) 파일 형식 프로젝트에 사이트맵 생성하기 사이트 맵 확인 하기 robots.txt 설정하기 ✋🏻 잠깐! 들어가기 전에... 이 글은 react-router-sitemap 등의 사이트맵 라이브러리를 사용하지 않고 사이트 맵을 생성합니다. Why? react sitemap 를 검색했을 때 나오는 글들을 참고하여 구현하려다가 오랜시간을 들여 시도해도 sitemap.xml 이 생성되지 않아 직접 javascript로 구현하였습니다.🤦🏻‍♀️ 사이트맵이란? 💡 검색 엔진 크롤링 로봇에게 웹 사이트에서 크롤링 해야 할 URL을 전달하는 역할 사이트 맵 파일은 해당 사이트의 URL 모두를 XML 파일 형식으로 포함하는데 웹 사이트 운영자는 각 URL과 추가 정보로서 이 ..

유저들의 랭킹을 보여줄 때, 닉네임을 그대로 노출하지 않고 앞에서부터 2글자만 노출한 뒤 뒷글자는 모두 *로 마스킹해야하는 기능을 구현하여야했다. 🍋 구현 방법 간단하게 닉네임의 길이별로 조건을 걸어주고, 정규표현식을 사용하여 노출하는 글자 이후 문자는 모두 * 로 대체해준다. 나는 3글자 이상의 닉네임이 들어올때에는 2글자 이후의 모든 문자는 *로 대체했고, 2글자 닉네임이 들어올때에는 1글자만 문자만 대체, 1글자의 닉네임이 들어오면 그대로 노출시켰다. const maskingName = (value) => { if (value.length === 2) { return value.replace(/(? 2) { return value.replace(/(?

TypeError: Cannot read properties of undefined (reading '0') API 통신 전에 Mock data로 작업하는 중에 number 형식의 배열을 가져와 React JSX 형식의 텍스트로 요소 하나씩 뿌려주는 부분에서만 에러가 났다. 단순한 number나, string 형식은 문제없이 보이는데 arrayData[0], arrayData[1] 이렇게 요소 하나씩 접근하는 부분에서 undefined 에러가 났다. 🚧 받아오는 데이터 형식과 JSX 문제는 "pair_profit" 배열이다. 🤦🏻‍♀️ { "data": { "id": "1", "max_price": 51200000.333, "min_price": 40000000.333, "pair_profit": [0...

string 형식의 데이터를 JSX문법으로 렌더링 할 때 제목, 날짜 등 한 줄짜리 string은 문제없이 출력이 된다. 그렇지만 본문의 내용이든지, 채팅할 때 줄 바꿈 처리는 어떻게 렌더링 해야 할까? JSX문법은 \n 을 줄바꿈으로 읽지 않고 string 형식으로 그대로 출력을 한다. 불러오는 데이터 자체가 문자열이니 \n 을 줄바꿈의 표시라고 읽는것도 말이 안되는 것 같기도 ... 🧐 🍋 받아오는 데이터 형식 react에서는 수많은 데이터의 양으로 반복되는 부분을 줄이기 위해 데이터 파일을 따로 만들어 map을 사용하여 불필요한 코드를 줄여준다. [ { id: 1, title: '첫번째 글', date: '2022-01-01', main: '새해입니다!\n모두모두 건강하세요.', }, { id: 2..

에러 eslint(pretter/prettier) [6,10] 저장을 하면 줄바꿈, 문자 수정이 되어 코드가 예쁘게 저장이 되어야하는데, 저장도 안되고 오히려 에러 문구가 난다. 확장팩으로 두가지 다 설치하고 설정 파일도 생성하고 수정해줬는데... 해결법 VS code 설정으로 들어가 확인을 해주어야하는 부분들이 있다. Format on Save 체크 Default Formatter 확인 Prettier - Code formatter 으로 설정해준다.

node, npm 설치 CRA(Create-React-App) CRA Setting 라이브러리 설치 프로젝트 파일 , 폴더 수정 및 삭제 ESLint + Prettier node, npm 설치 node.js를 설치하면 npm도 함께 설치된다. 설치가 잘 되었는지 확인하려면 터미널을 실행시켜 node-v / npm-v 를 입력후 버전을 확인해준다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org CRA(Create-React-App) 💡 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구 (toolchain) 리액트는 UI 기능만 제공한..

EC2 인스턴스 생성하기 터미널에서 EC2 인스턴스에 접속하기 웹 프로젝트 배포 하기 웹 프로젝트 배포 확인 리액트로 만든 웹페이지를 로컬 호스트 주소가 아닌 누구든 볼 수 있는 url로 변경하기 위해서는 배포라는 작업을 해야 합니다. aws로 배포하기 위해서는 크게 s3 방식과 EC2 방식이 있는데, 기존 회사들은 s3 방식보다 EC2 방식을 많이 사용하고 있어 알아두어야 했습니다. 정리한 글은 가장 기본적이고 무겁지 않은 React 코드로 테스트하였기 때문에 프로젝트별 설정해야 하는 값이 다를 수 있습니다. ✅ 인터페이스가 많이 변경되어 22.12.04 자로 내용을 업데이트 하였습니다. EC2 인스턴스 생성하기 인스턴스 시작 aws에서 EC2를 검색한 후 EC2 대시보드에 위치한 인스턴스 시작을 누릅..

레이아웃과 제품 컴포넌트 작업을 끝내고 한 페이지에 sub_category 별로 직접 url 을 수정하여 제품을 띄우는 것은 성공시켰다. 하지만 카테고리를 클릭할때는 카테고리에 해당하는 제품들로 업데이트가 되어야하는데 이게 한페이지에서 어떻게 일어나는지에 대한 이해가 잘 가지 않았고 이 모든게 쿼리파라미터를 이용한 동적 라우팅 기능을 사용하면 해결할 수 있다는 걸 알았다. 구현 기능 카테고리를 클릭할 때마다 url 주소를 변경하고 그 url 주소를 가져와 컴포넌트를 변경한다. ⭐Key Point onClick 이벤트 history.push() location.search() componentDidUpdate Output Code 🥕 API Data ${BASE_URL}/categories=1 더보기 { ..

1주차에 보라님이 상수 데이터로 구현했던 nav 바의 카테고리 목록을 2주차에는 백엔드에서 주는 API 데이터로 교체해야하는 상황이 오게 되었다. 보라님의 코드에서 상수데이터를 API 데이터로 교체 + 내가 구현한 카테고리별 쿼리 파라미터 주소를 link 연결하는것이 목표이다. 구현 기능 상수데이터를 API 데이터로 교체 + 내가 구현한 카테고리별 쿼리 파라미터 주소를 link 연결하기 ⭐Key Point API 데이터 분석 map 메소드 이중으로 사용하여 카테고리 이름 표시 개별 링크 연결 Output Code 🥕 API Data ${BASE_URL}/categories 더보기 { "results": [ { "category_id": 1, "category_name": "샤워", "sub_categor..

상수 데이터 mock data 상수 데이터 UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API등을 통해서 가져올 필요가 없는 정적인 데이터들을 상수 데이터로 만들어 UI를 효율적으로 구성할 수 있습니다. 상수데이터는 반복되는 UI를 상수 데이터 + Array.map( ) 함수의 조합을 이용해서 간결하게 표현할 수 있어 유지보수가 용이합니다. 상수 데이터의 활용 - 댓글 예제 상수 데이터는 별도의 JS 파일로 분리하거나, 필요한 파일 내부에서 선언해서 사용할 수 있습니다. 상수 데이터 변수는 대문자 + snake case 를 이용해서 변수의 이름을 짓는 컨벤션이 있습니다. 별도의 JS파일로 분리할 경우 export / import를 통해서 필요한 파일에서 사용합니다. JS파일은 데이터를 impor..

Props Props & event State Event & setState Props props는 컴포넌트의 속성값으로 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체입니다. 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있습니다. Props 객체 //Parent.js import React from 'react'; import Child from '../pages/Child/Child'; class Parent extends React.Component { constructor() { super(); this.state = { color: 'red' }; } render() { return ( Parent Component ); } } exp..

Component란 Class vs Functional Component 컴포넌트 생명주기 Component Lifecycle Component란 component란 재활용 가능한 UI 구성단위를 뜻합니다. 컴포넌트를 사용하면 반복되는 코드가 길어지는 것을 방지해주기 때문에 코드 유지보수에 좋고 해당 페이지가 어떻게 구성되어있는지 한눈에 파악하기가 좋습니다. 또한 컴포넌트는 또 다른 컴포넌트를 포함할 수 있습니다 (부모 컴포넌트 - 자식 컴포넌트) Class vs Functional Component 컴포넌트를 선언하는 방식에는 크게 class형 컴포넌트와 함수형 컴포넌트가 있습니다. Class Component import React from 'react' class Component extends R..

JSX JSX 문법의 특징 및 준수사항 JSX const element = Hello, world!; 리액트에서는 JSX라는 독특한 문법을 가지고 있습니다. JSX는 자바스크립트와 HTML을 동시에 사용하며, HTML에 자바스크립트의 변수들을 바로 사용할 수 있는 일종의 템플릿 언어입니다. JSX 문법의 특징 1. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나가 감싸는 형태여야 합니다. 리액트가 사용하는 Virtual DOM 방식에서는 컴포넌트 변화를 감지할 때 효율적으로 비교하고자 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다. import React from 'react'; function App(){ return( header1 header2 ) } 2...