클로리셔 작은 공간

포스트맨으로 GET으로 데이터 불러오는건 많이 해봤는데 POST 보내는건 안해봐서 매번 헷갈려서 정리한 포스팅. POST 사용하여 데이터 넘겨보기 1. POST로 설정 2. 하위 탭에서 'Body' 클릭 3. 그 하위 라디오버튼 리스트에서 'raw' 선택 4. 그럼 아래에 데이터 적을 수 있는 영역에 입력 5. 'send' 눌러서 데이터 보내기 ※ 데이터 넘길때 필수로 들어가야하는 key 값인지 체크해보기 GET에서 데이터 들어갔는지 확인해보기!

[ Infinite Scroll Banner Animation ] - Js 없이 CSS로만 롤링 스크롤 배너 만들기 - 이번에 작업하면서 배너가 무한 자동 스크롤 되는 작업이 들어왔다. CSS로 keyframes로 animation 만들면 되겠지 싶어서 뚝딱 뚝딱 만들었다. 보기 쉽도록 무지개 색상별의 박스 상자를 무한 자동 스크롤 되도록 만들어보앗다. [ HTML ] red orange yellow green blue navy violet [ SCSS ] .container{ position: relative; display: flex; align-items: center; margin: 80px auto; width: 1000px; height: 150px; overflow: hidden; backg..

yarn 커맨드로 작동시킬 때 계속 에러가 났다.. 대체 왜..!! 뭐가 문젠데..!!! 하고 차분히 찾아봄... Error 메세지는 error: Command failed with exit code 1. 이번에 해결하면서 yarn이 업데이트가 적용이 안돼서 동기화가 안먹힌거같은데... 여튼 방법은 2가지가 있다고한다. 1. yarn 관련 모든것 지우기 1-1. yarn 으로 생성된 node_modules & yarn.lock 지우기 rm -rf node_modules rm -rf yarn.lock 1-2. yarn 공유 캐시 파일 지우기 yarn cache clean 1-3. yarn 재설치 yarn install 1-4. yarn으로 시작해보기 yarn start 2. yarn 업데이트 후, 다시 시..

1. commit 메세지 구조 - 기본 적인 커밋 메시지 구조는 제목,본문,꼬리말 세가지 파트로 나누고, 각 파트는 빈줄을 두어 구분한다. type : subject body footer 2. Commit Type Rule - 타입은 태그와 제목으로 구성되고, 태그는 영어로 쓰되 첫 문자는 대문자로 한다. 태그 제목 Feat : 새로운 기능 추가 Fix : 버그 수정 Docs : 문서 수정 Style : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 Refactor : 코드 리펙토링 Test : 테스트(테스트 코드 추가, 수정, 삭제, 비즈니스 로직에 변경이 없는 경우) Chore : 위에 걸리지 않는 기타 변경사항 (빌드 스크립트 수정, assets image, 패키지 매니저 등) Design ..

REACT에서 module화 된 className 적용방법 그냥 기본적인 scss를 작성할때는 className 적용할 때 별 문제없었는데, module화 된 scss를 작업하다보면 갑자기 문법이 헷갈리면서 scss파일이랑 연동이 안돼서 오류가 뜬다. 1. scss 모듈일 때, 조건을 걸어서 class에 2개의 module.scss를 적용시킬 때, - isOpen일때의 조건이 걸릴 때, .hamburger와 .isOpen의 클래스를 같이 넣고싶을 때 적용 방식이다. 2. 컴포넌트 파라미터 값을 모듈 scss로 class 적용할 때, const test = ({type}) => { return ( ) }; - 파라미터로 받은 { type } 값을 className 내에 모듈화로 삽입하고 싶을 땐 style..

React에서 Font Awesome가 필요할 때 있는데.. 항상 뭐 설치해야할것이 많고.. import 할것도 많고.. 하다보면 무슨 에러가 나길래 짜증나서 그냥 내가 내 블로그에 정리함. 폰트어썸(Font Awesome) 공식페이지가면 잘 설명되어있긴하나.. 공식 홈페이지에서 차분히 영어공부하면서 해보고 싶은 분들은 아래 링크를 클릭해주세요. Set Up with React The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com [ 폰트어썸 설치.. 파해쳐버리기 ] 1. 터미널에 ya..

Router란? 결국 페이지 이동을 의미한다. React에서 메뉴의 URL같은 링크 버튼을 클릭했을 때, 그 링크 경로에 맞는 컴포넌트 페이지들을 보여주고싶다. 보통 레거시 스타일로 작업할 땐, 경로 클릭시 새로운 페이지가 로딩이 된다. 그것은 너무나도 데이터 자원낭비! 그럴때는 사용하는것이 Router (리액트 라우터)이다. 라우터를 사용하면 새로운 페이지 로드?? No No!! 업데이트 되는 새로운 페이지만 path와 element로 연결하여 컴포넌트를 불러오는 신박한 기능이다. 아래 예시들은 이해를 돕기위해 개인 홈페이지를 만들면서 필요한 내용을 Router로 만들어보았다. 우선 내가 만들려는 페이지의.. 스케치(?) ---------------------------------------------..

reduce() 기본 문법 reduce() 메서드는 배열의 각 요소에 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환. reduce라는 이름은 배열들을 하나의 값으로 줄이는데 쓰이기 때문에 붙었다. 예로, 배열에 들어있는 숫자를 더하거나 평균을 구하는 것은 배열을 하나의 값으로 줄이는 동작이다. 하지만 reduce가 반환하는 값은 객체일 수도 있고, 다른 배열일 수도 있다. arr.reduce(callback[, initialValue]) 리듀서 함수는 네 개의 인자를 가집니다. 누산기 accumulator (acc) 현재 값 currentValue (cur) 현재 인덱스 currentIndex (idx) 원본 배열 array (src) ◻ accumulator - 콜백의 반환값을 누적한다..

IP 넣어서 로컬호스트 설정하는 방법 1. 바탕화면에 마우스 오른쪽 버튼을 눌러 바로가기 메뉴가 뜨면 새로 만들기 → 바로 가기(S) 메뉴를 선택 합니다. 2. 항목 위치 입력에 아래와 같은 위치를 입력 하고 다음 버튼을 누릅니다. 항목 위치 C:\Windows\System32\notepad.exe C:\Windows\System32\drivers\etc\hosts 3. 바로 가기 파일 이름에 사용할 이름을 임의로 입력 후 마침 버튼을 누릅니다. 4. 바탕화면에 만들었던 host수정 메모장 파일을 마우스 오른쪽 버튼을 눌러 관리자 권한으로 실행 메뉴를 선택합니다. 5. 관련 내용을 입력 후 상황에 맞게 주석 넣었다 뺐다 하면 됩니다. 예시 ## ㅇㅇㅇ 브랜드 호스트 #127.0.0.1 www.someth..