Jeden Tag, aufrichtig und lustig.

1. Progress bar? 성격유형 검사지를 만들면서 테스트 진행도를 사용자가 알면 사용자 경험에 좋을 것 같아 프로그레스바를 작업해봤다. 구현 할 때 시맨틱하게 마크업을 하고 싶어서 관련 태그가 존재하는지 찾아봤는데, progress라는 태그가 있다는 것을 알게 됐다. 아래 사이트를 참고했다. https://www.w3schools.com/w3css/w3css_progressbar.asp W3.CSS Progress Bars W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScrip..

간편한 import를 위해 기본 import 주소를 src로 지정 할 수 있다. 아래와 같이 입력한 jsconfig.json 파일을 최상위에 생성 하면 된다. "compilerOptions": { "baseUrl": "src" }, "includes": ["src"] } 아래와 같은 에러가 발생 할 수도 있다. > 파일 /private/var/folders/~/~/ Code.app/~/node_modules/typescript/lib/lib.d.ts을(를) 찾을 수 없습니다. > 파일은 다음과 같은 이유로 프로그램에 있습니다. 대상 es3의 기본 라이브러리 사용 할 JS 문법 버전을 선택하는 옵션인 target을 최신 문법을 뜻하는 esnext로 설정하면 오류가 해결 된다. { "compilerOptio..

터미널에서 열고자 하는 폴더(ex. basic)로 이동한 후에 code . 명령어로 vscode를 열려고 할 때, 아래와 같은 오류를 마주한다면? 폴더 경로 basic % code . command not found: code vscode를 열고 Command(Ctrl) + Shift + p 를 단축키를 누르고 입력창에 shell을 입력한 후, Shell Command: Install 'code' command in PATH 를 선택. 다시 터미널에서 code . 시도하면 vscode가 열리는 것을 확인 할 수 있다!

1. 개념 페이지네이션은 페이지를 이동하고 싶을 때 사용하는 것이다. 최근에 페이지네이션을 리액트로 구현해봤다. 구현해보면서 사용한 로직을 정리해보았다. 2. 적용 코드 아래 Wiki 컴포넌트는 페이지네이션과 페이지네이션을 적용할 글 목록 리스트를 리턴해주는 컴포넌트다. const Wiki = () => { const [wikiList, setWikiList] = useState(""); const [limit, setLimit] = useState(5); const [page, setPage] = useState(1); const offset = (page - 1) * limit; const getWiki = async () => { const res = await getWikiAxios(); setW..

1. 에러 발생 상황 json-server 설치 중에 아래와 같이 에러가 발생했다. 2. 해결방법 code EACCES와 syscall rename을 키워드로 구글링을 해보니 json-server를 전역(-g)으로 설치해서 권한 문제가 발생한 것을 알 수 있었다. 설치 명령어 전에 sudo를 입력 하고 엔터치고, 맥북 패스워드를 입력하여 해결했다. sudo npm i -g json-server 이후 펀딩을 요구하는 메세지 발생했다. npm fund 명령어를 입력하면, 펀딩 대상 목록이 나온다. 아래 명령어를 입력하여 해결했다. npm install --no-fund 3. 결론 전역으로 프로그램을 설치해서 권한 문제가 발생하는 경우, 앞에 sudo 단어를 붙이자!

기존에 진행한 프로젝트의 성능을 개선 할 수 있는 방법을 찾는도중 디바운싱 개념을 알게되었다. 나중에도 유용하게 사용할 수 있을 것 같아 정리해보았다. 1. 개념 및 사용 이유 디바운싱은 연속적으로 함수 실행 요청을 하는 경우 가장 마지막 요청만 수행하는 것을 의미한다. 디바운싱은 연속적으로 함수를 실행하는 것은 서버에 부담을 줄 수 있기 때문에, 이 부담을 경감하기 위해 사용 될 수 있다. 2. 적용 예시 아래 코드는 계정을 검색 할 수 있게 만들어주는 코드다. useEffect(() => { if (userInput) { getSearchUser(userInput) .then((data) => { setUserArr(data); }) .catch((error) => { console.log(error..

1. axios interceptors란? axios interceptors는 axios가 then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있다. 2. 사용하게 된 이유 투두리스트를 리액트로 만들면서 로그인 후 할일 목록이 나타나는 페이지로 이동하도록 하고, axios를 활용해서 할일목록을 get하는 로직을 구성했다. const access_token = localStorage.getItem("signInToken"); export const axiosAuthApi = axios.create({ baseURL: BASE_URL, headers: { Authorization: `Bearer ${access_token}`, "Content-Type": "application/json", },..

1. 발생 상황 평소와 같이 코드파일을 깃허브에 커밋 후 푸쉬하려고 했다. 커밋까지는 정상적으로 완료되었지만, 푸쉬 후 터미널에 아래와 같은 메세지가 안내되었다. remote: fatal error in commit_refs ! [remote rejected] main -> main (failure) error: 레퍼런스를 'https://github.com/내깃헙아이디/푸시하려는레포이름.git'에 푸시하는데 실패했습니다 2. 해결 과정 CLI 방법이 아닌 VSC상에서 클릭으로 할 수 있는 GUI 방법도 활용해서 2~3번 반복적으로 시도해봤지만 동일한 에러 메세지가 발생했다. 챗지피티를 활용하여 에러메세지를 분석해봤다. 여러 발생원인 중 하나가 서버에 문제가 있는 경우 발생할 수도 있다고 했다. 깃허브 ..

이전에 리액트를 사용하면서 npm을 사용한 경험이 있다. 이로 인해 npm은 리액트를 사용 할 때만 활용한다고 생각했었는데, JavaScript를 공부하는 와중에 npm을 사용하게 됐다. 이런 경험을 통해 평소 모호하게만 알고 있던 npm에 대해 공부하고 싶어 아래에 정리하게 되었다. 1. NPM이란? NPM은 Node Package Manager의 준말이며, Node.js 기반 패키지(모듈)들을 모아둔 저장소이자 매니저다. npm을 사용하고 싶다면, node.js가 먼저 설치되어야 하는데 node.js와 npm의 버전을 확인하고 npm을 설치하고 싶다면 터미널에 아래와 같이 입력하면 된다. node -v //node 버전 확인 npm -v //npm 버전 확인 npm init // npm 설치 2. N..

자바스크립트를 활용하면서 수 없이 사용하는 array와 object 유형의 데이터는 이미 자바스크립트에 내장된 new Object(), new Array()라는 생성자함수에 의해 인스턴스로서 생성된다. 객체와 배열을 통해 생성자와 인스턴스를 자주 사용하고 있지만, 그 뜻에 대해서는 모호하게 알고 있었고, 일반함수와 다른 점은 무엇인지 궁금하여서 공부하게 되었다. 1. 개념 생성자 함수? 생성자 함수는 생성자를 만드는 함수를 의미 한다. function MakeSong(genre, singer) { this.genre = genre; this.singer = singer; this.introduce = function () { console.log( "이 노래는 " + this.genre + " 장르이고,..