본문 바로가기

전체

 (142)
npm cache error npm ERR! enoent Invalid response body while trying to fetchhttps://registry.npmjs.org/cssselect: ENOENT: no such file or directory, stat 'C:\Users\kimJS\AppData\Local\npm-cachenpm ERR! enoent This is related to npm not being able to find a file. 프로젝트를 깃 클론하고 npm i를 해서 node_modules를 설치하려고 하는데, 이런 에러가 발생했다. 구글링을 해보니 npm의 cache가 수정을 거치면서 꼬일 수 있어 이것을 풀어주는 과정이 필요한데, 결론적으로 두가지 명령어가 있다고 한다. 1. npm cach..
create-react-app 대신 vite로 리액트 프로젝트를 생성하는 이유 프로젝트를 생성하는 것은 할 때마다 약간씩 헷갈린다. 기억왜곡인지 방식을 틀릴 때도 있고, 실수로 폴더 뎁스를 더 타거나 이름을 잘못 설정하기도 하고. 그래서 이번엔 기록으로 남겨두려고 한다. 어느 순간부터 create-react-app(이하 CRA)이 잘 동작하지 않았다. 템플릿을 못 가져와서 올바르게 실행되지 않아 지난번 최종 프로젝트 땐 git에 저장해놓은 패키지를 pull 받아서 사용했었다. 알고보니 CRA는 지원이 중단되었고 Vite라는 리액트 스타터가 뜨고 있다고 한다.  1. React + typesctipt + SWC 설치Vite는 웹팩을 사용했던 CRA와 다르게 내부적으로 esbuild를 사용해 훨씬 빠르다고 한다. 이것을 몰랐다니 억울한 기분이 들었다. 최근 들었던 유데미 강의에서도 파..
프로그래머스 lv.0 특정문자 제거하기 요즘 기초를 다지기 위해 lv.0문제를 하루에 여러개씩 루틴처럼 풀고 있는데, 이런 문제에서도 배울 점이 많다는 것을 알았다.문제는 my_string에서 letter을 제거하고 반환하는 것인데, 나는 이렇게 무식하게 풀었다. 지금 이 답을 구하는 것만은 상관이 없지만 이 로직이 다른 문제에 포함되었을 때는 쓸데없는 시간복잡도를 할애하게 해서 올바른 답을 찾는 데에 방해가 될 것이다.function solution(my_string, letter) { var answer = []; let str = my_string.split(''); for (let i = 0; i  그래서 다른 분들의 풀이를 확인해봤다. 1. split()function solution(my_string, letter)..
Error: ER_BAD_DB_ERROR: Unknown database 'db-name' 한동안 프론트 공부를 하다가 3달만에 백엔드를 과제를 받아서 했더니 localhost는 잘 연결되는데, rds가 연결되지 않는 불상사가 일어났다. 오랜만이라 기억이고 뭐고 없는 상황. 구글링을 하다보니 다행히 나와 같은 사람을 만났다. 1. handshake timeout아예 rds 자체와 연결이 시작되지 않는 경우.알고보니 rds의 퍼블릭 엑세스 설정을 아니오로 둔 상태에서 rds를 만들어서 그런 것이었다. 그것도 모르고 계속 inbound 규칙을 바꿔야하나, 새 프로젝트의 코드가 문제인가 콘솔까지 찍어가며 삽질을 했다. 아마 rds는 ec2에 연결해서 쓰는 것이 보통이고 프로덕션 단계에서는 localhost로 작업하기 때문에 기본 설정이 '아니오'로 되어있는 모양이다.다음에 새로 만들 일이 있으면 주..
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 후기 이번주는 React에 대해 배웠다. Next.js 프로젝트를 이전에 해본적이 있음에도 useState, useEffect, useSearchParams 정도만 써봤는데, hook을 본격적으로 배우니 유용한 훅이 참 많다는 것을 느꼈다. useRef는 포커스, 텍스트 선택영역을 관리할 때 사용한다. 회원가입 페이지에서 폼 내용 중 모자란 부분에 자동으로 커서를 포커스해주는 기능이 바로 그것이다. 그리고 useId를 uuid를 생성할 수 있다. 렌더링 최적화에 대해서도 배웠는데, useCallback, useMemo, React.memo 라는 것으로 memoization 해서 불필요한 렌더링을 줄일 수 있다는 것을 알았다. 최적화를 위해 캐싱만 쓰이는 줄 알았는데, 속도를 더 끌어올리고 리소스를 아낄 수 있..
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 6~7일차 후기 1. 리액트에서 활용하기 좋은 ES6 문법1) 구조분해할당(=비구조화할당)구조분해할당하지 않은 rest를 스프레드연산자로 처리해서 받을 수 있다. 2) 스프레드 연산자a. 함수 매개변수 -> 나머지 매개변수b. 비구조화 할당 -> 비구조화 할당하고 남은 값 처리c. 배열 i) 깊은복사 ii) 배열 합치기배열을  concat 메서드를 이용하면 합칠 수 있지만, 스프레드 연산자를 이용해서도 가능하다.const arr1 = ['a', 'b', 'c']const arr2 = ['1', '2', '3']const combine = [...arr1, arr2]console.log(combine) // ['a', 'b', 'c', '1', '2', '3']d. 객체  i) 깊은복사  :  원본의 주소값과 참조를 끊어..
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 8~9일차 후기 1. 조건부 렌더링import React from 'react'// 조건부 렌더링 : 특정조건에 따라 다른 결과를 보여주는 // if문 , 삼항연산자, 논리연산자(&&), 즉시실행함수const App = () => { const isLoggedin = false; // 즉시실행함수 return ( {(()=> { if (isLoggedin) { return Login Successful } return Login Failed })()} )}export default App  2. React Hook1) useStateimport React, { useState } from 'react'import Input from './compon..
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 1주차 후기 지난 월요일부터 수코딩님이 강의하시고 스나이퍼 팩토리에서 주관하는 일경험 프로그램에 참여하게 되었다.네개의 기업이 협업하는 프로젝트에 참여하여 기술을 경험하고 포트폴리오를 쌓을 수 있는 프로그램이다.  이전에 스파로스에서 했던 Next.js를 다시 잡으니 쉽지 않겠다는 생각과 함께 JS를 복습하는 시간을 가졌다. Node를 하면서 공부했으니 3번째로 다시 보는 내용일 것인데, 아직도 개념이 중구난방으로 헷갈리는 것을 보니 아직 취업하기엔 이르다는 생각만 남았다. 수코딩 님의 강의로 코딩공부를 시작했기에 감회가 새로웠던 점은 있다. 물론 그 때 JS까지만 듣고 간 터라 스파로스에선 고생하긴 했지만, 그래도 남는 것이 많은 경험이긴 했다. 거의 반년정도 놨던 프론트를 다시 한다고 생각하니 걱정이 앞서긴 하지..

티스토리툴바