Janu is Developing

아무래도 독학 리액트를 하다 보니 초기 설정도 엉망이고 처음부터 제대로 설정하지 않아 고생을 한 것이 몇개가 있다컴포넌트 나누는것도 처음에 필요없겠지~ 하고 안하다가 나중가서 import 경로 전부 바꾸고...(정리하는 습관을 기르자)오늘은 프로젝트를 열 때 가끔 root파일이 보이지 않을 때의 해결법을 정리할 것이다. 1. 프로젝트 구조 클릭나는 인텔리제이를 한국어로 설정해놔서 한국어 메뉴가 나오는데,,,, 영어를 쓰는 사람들은 아마도 Project Structure로 뜰 것이다.2. 모듈 > +기호>모듈 가져오기(import modules) 선택저기서 플러스기호를 누르고 루트폴더를 선택해야 한다.무조건  '모듈 가져오기(import)'로 눌러야 한다!3. 루트폴더 선택자신의 상황에 맞는 루트폴더를 가..

(시작도 안했지만 벌써 하기 싫음)오늘은 내가 만들고 있는 개인 프로젝트 내에서 사용되는 useState에 대해 알아볼 것이다(나를 위한것) 1. State를 먼저 알아야 한다React 공식문서에서 state는 컴포넌트 별 메모리라고  설명한다. 즉, 컴포넌트는 현재 입력값, 현지 이미지, 장바구니 같은 것을 "기억"하고 있어야 하는데, 그 메모리를 state라고 선언하는 것이다./*state변수를 사용하기 위해선 useState가 반드시 필요하다.*/import {useState} from 'react';/*임의의 변수 하나 선언*/let count = 0;/*[state변수, setter함수 선언]*//*여기서 [] 문법은 배열 구조 분해라고 하며, useState가 반환하는 배열에는 항상 2개의 항..

Vue프로젝트에서 사용하는 vue-query(useQuery)에 대해 공부하기 시작했다.하나하나 뜯어보는것보단 내가 평소에 궁금했던 것들에 답을 하는게 맞는 것 같아서.. 그렇게 해볼려 한다. Vue-Query는 React에서 사용하는 React-Query를 Vue에서 적용할 수 있도록 한 라이브러리이다.서버상태를 관리하며, Vue에서 비동기로 데이터를 가져오고, 캐싱하고, 동기화 하는걸 만들어준다. back단과 데이터를 주고받고 통신할 수 있도록 도와주는 라이브러리라 생각하면 된다.... useQuery란? - SELECT에서 사용, 데이터 조회(GET)데이터를 서버에서 불러오고, 그 결과가 컴포넌트에서 필요할 때 사용하는 Vue Query의 훅(hook).데이터를 가져오는 비동기요청을 캡슐화, 로딩/..

나도 선배 개발자분들처럼 watch로 디버그 하고싶어서 쓰는 글 1. watch란 무엇인가Vue3 Composition API에서 반응형 데이터를 감시하고, 변화가 생길 경우 특정 로직(=콜백함수)를 실행한다.주로 반응형 데이터(ref, reactive)의 변화를 감지하여 사용자가 원하는 작업을 사용하도록 할 수 있다.데이터 변화를 감지 - 특정 작업 트리거비동기 로직 수행(ex. API호출)디버깅에 유용(내가 제일 배우고 싶은 이유!!!!!!1!)불필요한 렌더링 방지 등2. watch의 구조watch(source, callback, options?)source : 감시 대상. 감시할 ref나 reactive, getter함수, 배열로 전달 가능하다.callback : 감지된 변화가 발생했을 때 실행할 ..

오늘도 실무에서 디지게 많이 쓰는 세 메소드를 살펴볼 것이다.셋 다 배열과 관련된 JavaScript, TypeScript메소드이므로 찬찬히 살펴보도록 한다!주의(?)사항 : 배열 내 문자열에 원래 ''를 씌우는게 정석이지만,,, 귀찮아서 걍 생략했다ㅋ1. map() 메소드기능 : 배열의 각 요소를 변환하여 새로운 배열로 반환하여 만든다.각각의 요소에 대해 한번씩 순회하며 콜백 함수를 적용 → 새로운 배열로 반환한다.map메소드를 통해 배열을 새로이 구성해서 똑같은 길이로 반환할 수 있다.[어떠한 배열] + 내가 설정한 콜백 함수 () = [내가 새로 만든 배열]정확하지 않지만 이러한 뉘앙스의 새로운 배열을 뱉어낸다고 생각하면 된다.Vue3.0 js에선 새로운 배열을 뱉어내기 때문에 얕은 복사가 된다 ➡..

자바나 자바스크립트를 사용하면서 가장 어려운 것은 메소드 사용이다.취업하고 개발자로서 먹고살고 있지만 사실 아직 어렵고 헷갈리는 것들이 많다.열심히 공부하고 발전해가야지ㅣ.... 오늘은 개발을 하면서 헷갈렸던 메소드 3개를 묶어서 설명해보고자 한다. 1. length 대상 : 배열(Array)배열의 길이를 나타내는 속성으로, 이친구는 "괄호가 없다"!String fruits = {"apple", "banana", "cherry", "durian"};System.out.println(fruits.length); // 4가 출력됨이친구의 특징은 수정이 불가능하고, 메소드가 아니라 속성이기 때문에 괄호를 사용하지 않는다. 헷갈림 주의!자바에서 {}는 배열초기화, []는 배열 선언 및 인덱스 접근이다 (위 예시..

자바스크립트와 타입스크립트 둘 다 사용되는 옵셔널 체이닝...개발을 하면서 엄청 많이 쓰게 되서 알기 싫어도 알 수밖에 없는 지경에 이르렀다... 옵셔널 체이닝만약 값이 없으면(= null 혹은 undefined라면) 그냥 undefined를 반환하라는 안전장치이다. Exception이나 에러가 나타나지 않도록 도와 오류 없이 프로그램을 실행할 수 있다.속성에 접근할 때 오류가 나는 것을 방지하고, 특히 중첩된 객체의 속성에 접근할 때 유용하게 쓰인다.가장 큰 이점은 (1) 코드의 안정성을 높임 (2) 불필요한 조건문을 줄임 이라고 볼 수 있겠다. 참고로 필자는 인텔리제이에서 빨간줄 생겨서 필요없어도 그냥 쓴다(정상적으로 잘 작동되는데 왜 빨간줄이 나는진 나도 모르겠음¯\_(ツ)_/¯) 예시나루토쿤은 영..

가끔 포트를 제대로 종료하지 않으면 http://localhost:3000/http://localhost:3001/http://localhost:3002/ ..이런식으로 자꾸 올라가는 문제가 생긴다.앞선 포트가 제대로 닫히지 않아서 생기는 문제이다. 이럴땐 강제로 앞선 포트를 닫아야 하는데, 다음과 같이 실행한다. (1) CMD 실행 (Git bash에서도 가능)window + R 클릭 시 바로 할 수 있다. (2) netstat -ano 입력netstat -ano (3) 종료하고 싶은 포트 번호의 PID 번호를 기억한다.(4) 다음을 입력한다.taskkill /F /PID 1234(포트번호의 PID입력)예를들어 닫고싶은 포트번호(3000)의 PID가 1234라면, 위와 같이 작성해야 한다./F : 강제..

Vite와 Git Bash를 다 깔고, Vue 실습을 할려고 했는데...npm run dev를 치자마자 바로 저 에러 화면이 뜬다.원인을 알아보니 PowerShell의 실행 정책 때문이라고 하니, 한번 고쳐보도록 하자 (1) Window 검색창에 관리자 권한으로 Powershell을 오픈한다.(2) 다음 코드를 작성한다.Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned(3) 확인 요청에 Y 입력(4) 다음 코드를 다시 작성한다.Get-ExecutionPolicy -ListRemoteSigned가 뜨는지 확인한다.RemoteSigned : 보안을 유지하면서 NPM 스크립트를 실행할 수 있다.사실 RemoteSigned가 뭔진 잘 모르..

원래 노션에 코드리뷰 등 블로그를 운영하고 싶었으나.용량이 제한되니 무료버전에서 업그레이드 해달라는 독촉메일(?)이 날라온다.어차피 노션은 구글에 검색도 안되는거... 시원하게 티스토리로 개발블로그를 갈아타기로 했다. 용량 제한 때문에 워크스페이스를 3개나 팠던 노션 시절....이제 이 문제들을 한번에 해결하고자 티스토리를 시작한다.잘부탁한다 티스토리! 코드리뷰 페이지 : https://www.notion.so/Dictionary-2441d48d7c4d4016afa6640d45a31b24국비 - 강의 요약 페이지 : https://www.notion.so/isSummary-1ac9d6b82d4549f9af5b97e4eeac13ac