hahagarden의 블로그

node_modules 디렉토리에는 .bin 폴더가 있다..bin은 이름에서 알 수 있듯이 binary 파일들이 저장되는 곳이다.그리고 리액트를 사용하면서 package.json에 작성하는 npm script와 깊은 연관이 있다. 🔸 모듈을 설치하고 실행시키는 방법먼저, npm으로 모듈을 설치할 때 글로벌 옵션 -g 을 사용하면 터미널에서 바로 실행할 수 있다.그러나 글로벌로 설치하지 않고 로컬로 설치할 때는 터미널에 nodemon ./src/index.js // 실행할 수 없다를 사용할 수 없다. 운영체제 환경변수에 등록되지 않아 nodemon 파일이 어느 경로에 위치해있는지 모르기 때문이다. 이 때 이 nodemon 모듈을 실행할 수 있는 방법은 2가지가 있다.node를 사용하는 방법과 npm을 사..

1. AccessToken 이용해서 unlink 요청 초기에 구현할 때 unlink 요청은 accessToken으로 하면 요청 에러가 발생했다. 요청 파라미터가 부족하다는 에러가 자꾸 났었다. 구글링을 해보니 어떤 인턴하셨던 분께서 정리해놓은 글에도 똑같이 accessToken방식은 요청이 계속 실패한다는 글을 보고 나도 Admin키로 요청하고 있었다. 그런데 오늘 다시 로그인 부분 코드를 수정하고 있는데 문서에 다음과 같은 글을 보았다. 어드민 키는 서버에서만 사용하라는 것. 오늘 AccessToken으로 요청해보니 성공했다. 😳 AccessToken을 사용해서 요청하는 방법으로 바꾸기로 했다. 어드민 키로 요청을 하기 위해서 사전에 user_id가 필요했는데, IDtoken을 추가적으로 받고 파싱해서..

스크롤 제일 아래로 보내는 이벤트와 스크랩 페이지에서 선택했던 메세지가 있는 곳으로 이동시키는 스크롤 이벤트 두 가지가 있다. 1. 컴포넌트 초기 렌더링 시 URI에 hash가 있으면 hash로 스크롤 위치시키고 없으면 맨 아래로 내려야 함. scrollRef.current.scrollTop에 할당. useEffect(( ) => { // hash 엘리먼트로 scroll 이동시키는 로직 }, [ ]) 2. useSelector가 렌더링 이후에 실행되기 때문에 업데이트된 messages 상태를 가지고 scroll을 내리기 위해 useEffect(( ) => { // messages 맨 아래로 scroll 이동시키는 로직 }, [messages]) 3. 이렇게 되면 1번은 항상 덮어씌어진다. 1번이 실행되고..

카테고리 추가시 이미 존재하는 경우 예외 처리 const ERROR_CATEGORY_DUPLICATE = "이미 등록된 카테고리입니다."; const { register, handleSubmit, setError, formState: { errors }, } = useForm(); const categoryTemplate = useRecoilValue(categoryTemplateAtom); const addCategorySubmit = async (data: IAddCategoryForm) => { if (categoryTemplate[data.categoryName]) return setError("categoryName", { message: ERROR_CATEGORY_DUPLICATE }, { s..

이 문제 나만 겪는 것인가....? 구글링, 네이버, 다음을 아무리 뒤져봐도 답이 나오지 않았다. $7이 신용카드로 결제되고 있다. 설정을 바꾸어야 하는데 로그인을 할 수가 없다. 인증자앱이 생성한 코드를 입력하십시오. 무엇을 입력하는 것인지. 2단계 인증이 설정되어있는 것 같은데, 나는 설정한 기억이 없다... QR코드를 스캔한 적도 없는 것 같은데... 그래서 아무리 해도 안되는 것인지... Google authenticator OTP코드와 Github 2fa method로 시도해보았는데 '잘못되거나 만료된 코드입니다. 다른항목으로 시도하십시오', '요청된 형식과 일치시키세요' 라는 메세지만 떴다. 공식 홈페이지에도 더이상의 문제는 support@heroku.com에 문의하라고 되어있어서 연락해 보았..

전체적인 스타일링 변경 중간완성을 한 데 이어 모달창 디자인을 개선하려고 한다. MyLikes💖 스타일링 변경 중간완성 이전 포스팅에서 프로젝트 전체 디자인을 새롭게 변경하기로 계획했다. 피그마로 초안을 작성하고 코드로 옮기는데 대략 3주정도 걸렸다. 중간완성은 했고 부분부분 보완하고 추가할 기능이 보 hahagarden.tistory.com Figma 디자인 특히 선택형 필드의 옵션값을 추가하는 방법으로 여러 사이트에서 사용하는 해시태그를 추가하는 UI를 적용해보기로 했다. 쉼표를 입력하면 입력한 텍스트가 박스형식으로 변하고 지울 수도 있다. Tagify라는 라이브러리로 손쉽게 구현 가능한데, 직접 연습해보기로 했다. 결과 직접 구현해보니 눈에 잘 안들어와서 디자인을 조금 바꾸었다. 분홍색깔을 더 잘어..

그동안 초기스타일링이었긴 하지만 기존 디자인 자체가 웹페이지의 전체 영역이 아닌 중간 부분만 쓰는 것이어서 비효율적이고 조금 답답하게 느껴진다는 피드백을 받았다. 스타일링을 수정하였다. 전체 페이지를 전부 사용할 수 있도록 하고 조금 더 웹 페이지의 느낌을 주었다. 또한 팀원과 highlight기능은 빼고 완성도에 집중하기로 하였다. 앞으로 스크랩 기능과 마이 페이지 기능을 완성한다.

이전 포스팅에서 프로젝트 전체 디자인을 새롭게 변경하기로 계획했다. 피그마로 초안을 작성하고 코드로 옮기는데 대략 3주정도 걸렸다. 중간완성은 했고 부분부분 보완하고 추가할 기능이 보여서 조금 더 작업을 해야할 것 같다. MyLikes💖 전체적인 스타일링 변경하기(Figma 디자인) MyLikes 프로젝트 기능구현을 거의 완성해간다. 예외 케이스를 더 추가하고, 리팩토링이 남았다. 그런데 중간에 사람들에게 보여줬더니 디자인이 조금 구리다는 피드백을 받았다....😅 나도 동감 hahagarden.tistory.com 스타일링 적용 후 중간완성본 Restructure 아무래도 첫 프로젝트이고, 개념이 많이 없는 상태에서 시작하다보니 라우팅이 무분별하게 되어있었고 프로젝트 구조가 복잡했다. 불필요한 컴포넌트와..

개발 프로세스 요구분석 및 시스템 명세서 작성 → 설계 → 구현 → 테스트 → 배포 및 유지보수 전통적인 개발 프로세스, Waterfall 폭포수 개발 방식 실제 출시 기한을 정해놓고 순차적으로 단계를 진행한다. 실제로 배포되어 유저에게 제공되는 시간이 오래 걸린다. 또한 실제 디자인 또는 개발 화면을 볼 수 있는 것은 꽤 많은 단계를 지나온 시점이기 때문에 버그나 수정 사항이 생기면 다시 처음으로 돌아가야 하므로 비용과 시간 등이 소요된다. 따라서 소프트웨어의 신뢰성 및 안정성을 보장하기가 힘들며, 배포된 후에도 많은 버그가 있을 수 있다. 모던 개발 프로세스, Agile 애자일 방식 전통적인 개발 프로세스에서 벗어나기 위해 고안된 방식으로, 짧은 주기인 스프린트(sprint)를 기준으로 개발 사이클이..

useLocation path 정보를 담고있는 객체를 반환한다. const location = useLocation(); useMatch url일치여부를 반환한다. 일치하면 해당 path 정보를 담은 객체를 반환하고, 일치하지 않으면 null을 반환한다. const matchChats = useMatch('/'); const matchScrapbooks = useMatch('/scrapbooks/:id'); // => object 또는 null matchPath Nav에서 위치한 url에 따라 Nav버튼을 활성화시키고 싶어서 현재 url과 라우터를 매칭하는 작업이 필요했다. 처음에는 다음과 같이 함수 내부에서 useMatch훅을 사용하여 규칙을 어겼다. 리액트 훅은 컴포넌트 최상위 레벨에서 사용해야 한다..

인터페이스 상속 // 인터페이스 상속 interface Person { name: string; age: number; } interface Developer extends Person { language: string; } const person: Developer = { language: "TypeScript", age: 20, name: "Anna", } // 여러 인터페이스 상속 interface FoodStuff { name: string; } interface FoodAmount { amount: number; } interface FoodFreshness extends FoodStuff, FoodAmount { isFreshed: boolean; } const food = {} as Food..

TypeScript 프로젝트 환경 구성하기 cd 폴더명 npm init -y npm install typescript --save-dev // tsconfig.json { "compilerOptions": { "target": "es6", "module": "commonjs", "sourceMap": true, "outDir": "./dist" }, "include": [ "src/**/*" ] } npm i -D @babel/core @babel/preset-env @babel/preset-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint prettier eslint-plugin-prettier TypeScript의..