Vue.js에서 watch는 말 그대로 '지켜보고 있다' 이다.예를 들어 개발을 하다가 어떤 값을 지켜보는 상태일때, 그 값이 바뀌었을때에 따라 특정 작업을 하고 싶다면 watch를 사용하면 된다 watch가 사용되는 겨우 1. 검색창에 키워드를 입력했을때, 키워드에 따라 데이터를 다시 불러와야 할 때2. 검색 필터나 옵션을 선택했을때, 그 선택에 따라 화면을 업데이트 하고 싶을 때3. 특정 데이터가 바뀌었을 때, 자동으로 다른 데이터를 계산하거나 변경하고 싶을 때   watch 사용법기본 구조Search.vuewatch: { searchData(newVal, oldVal){ //newVal: 새로운 값, oldVal: 옛날 값 console.log(oldVal+"값이 "+newVal+"로 바뀌었..

코딩을 하다 보면 배열에서 최대값(max) 또는 최소값(min)을 구하는 일이 자주 있다자바스크립트의 Math.max와 Math.min 메서드는 이를 쉽게 처리할 수 있는 도구이지만, 배열에서는 바로 사용할 수 없다는 점에서 약간의 이해가 필요하다  Math.max와 Math.min의 기본 사용법Math.max와 Math.min 메서드는 개별 값을 입력 받아 그중 최댓값과 최솟값을 반환한다. Math.max(1, 2, 3); // 3Math.min(1, 2, 3); // 1 하지만 배열을 직접 전달하면 NaN이 반환된다그 이유는 이 메서드들이 고유한 변수를 기대하기 때문이다 const nums = [1, 2, 3];Math.max(nums); // NaNMath.min(nums); // NaN 해결책 -..

짝수 행에만 배경 색상 적용해보자엑셀과 같은 여러가지 문서를 활용하다 보면 표를 삽입하였을때 자연스럽게 짝수 행에 색칠이 되어있는 것을 볼 수 있다.이렇게 데이터 테이블에서 행의 배경색을 교차로 설정하면 가독성이 좋아진다. 이를 구현하기 위한 핵심은 nth-child(even)이다. CSS의 nth-child(even) 선택자를 활용하면 짝수 행에만 배경색을 입힐 수 있다.만약 홀수 행에만 배경색을 입히고 싶다면 nth-child(odd)를 사용하면 된다.    코드 예제datatable이라는 클래스를 가진 테이블의 짝수 행에만 색을 적용해보자. HTML //데이터테이블 생성 이름 나이 직업 주지훈 25 판교 개발자 ..

※ 제가 고수라는 뜻은 아닙니다 위 코드의 출력 값은 어떻게 될까? 첫줄에서 선언한 그대로 [9,8,7,6][1,2]이렇게 출력될까?결과를 마음 속으로 생각해보고, 아래 더보기를 눌러 답을 확인해보자.더보기놀랍게도 답은 7이 나온다.자바스크립트 배열의 접근 방식 이해하기자바스크립트에서 배열은 매우 자주 사용 되는 자료형이다.배열은 값들의 집합을 담고 있으며, 각 값은 인덱스를 통해 접근할 수 있다.이번 글에서는 배열에 접근하는 방법과, 자바스크립트의 특이한 배열 접근 방식에 대해 알아보자! 자바스크립트 배열 기초자바스크립트 배열은 값을 여러 개 저장할 수 있는 리스트 형태의 자료 구조이다. 배열에 저장된 각 값은 인덱스를 통해 접근할 수 있다.배열의 인덱스는 0부터 시작하며, 배열[인덱스] 형식으로 배열..

아래 문제를 풀다가 처음으로 프로그래머스 효율성 테스트에서 실패를 받았다. 문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/12906 문제 설명배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면,arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다.arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다.배열 arr에서 연속적으로 나타나는 ..

한 줄 설명vite로 배포중인 리액트 프로젝트 모바일로 localhost 접속해서 확인하기문제 상황웹앱을 개발하면서 모바일 환경에 맞춰 화면을 구성하다 보니, 계속해서 개발자 도구를 이용해 모바일 화면을 확인해야 했다. 이 과정이 상당히 번거로웠고, 특히 아이폰의 노치 때문에 실제 배포된 화면을 직접 핸드폰으로 확인하고 수정해야 했다. 그래서 개발 중인 localhost를 내 핸드폰에서 바로 확인할 수 있으면 좋겠다고 생각하게 되었다.  시도했던 첫번째 방법일단 검색해서 나온 첫번째 방법으로 시도했다기존에는 npm run dev로 했다면, 뒤에 --host를 붙인다(-가 두개다)npm run dev -- --host또는vite --host로 개발 서버 실행해준다그러나.. 트러블 슈팅근데 나는 안 됐다. ..

들어가기 앞서...실행 컨텍스트는 자바스크립트의 동작원리를 담고 있는 핵심 개념이다실행 컨텍스트를 바르게 이해해야, 스코트를 기반으로 바이딩을 관리하는 방법과, 호이스팅이 발생하는 이유, 클로저의 동작 방식, 이벤트 핸들러와 비동기 처리 방식을 이해할 수 있다  소스코드의 타입코드 종류설명전역 코드전역에 존재하는 소스코드를 말한다. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함하지 않는다함수 코드함수 내부에 존재하는 소스코드를 말한다. 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않는다eval 코드빌트인 전역함수인 eval 함수에 인수로 전달되는 소스코드 그 자체를 말한다모듈 코드모듈 내부에 존재하는 소스 코드를 말한다.모듈 내부의 함수, 클래스 등의 내부 코드는 '포함되지 않는다!..

모던 자바스크립트 딥다이브에서 타입 변환(형변환)파트를 읽던 중 발생한 일이다.아래와 같은 구절이 눈에 띄었다     명시적 형변환과 암묵적 형변환에 대해 간단히 짚고 넘어가자.명시적 형변환 (Explicit Type Conversion):    * 프로그래머가 코드에서 명확하게 타입 변환을 지정한다    * 예시: Number("123"), String(123), (10).toString()    * 코드 가독성이 높고, 코드 리뷰 시 의도를 명확히 알 수 있다암묵적 형변환, 자동 형변환 (Implicit Type Conversion)    * 자바스크립트 엔진이 자동으로 타입을 변환해준다    * 예를 들어 10 + ''처럼 숫자 10 뒤에 빈 문자열('')을 합하면숫자 10을 문자열 "10"으로 변..

코테 문제를 풀다 보면 인자에 대해 약수를 구해야 하는 경우가 자주 나온다그때마다 약수 구하는 함수를 새로 짰는데, 계속 반복해서 같은 코드를 관리하다 보니 너무 귀찮아져서 블로그에 기록해두고 필요할 때 마다 복사해서 사용하려고 한다 😊 일반적인 코드-1부터 n까지 나머지가 0인 값을 더하기const findDivisors = (n) => { var answer = [1]; //1은 모든 수의 약수니까 약수 배열을 1 포함해 만든다 for(let i = 2; i 사람의 사고 방식으로 작성된 코드이다하지만 1부터 n까지 모든 숫자를 검사하기 때문에 시간 복잡도가 O(n)이라 비효율적이다. 더 효율적인 코드- 1부터 √n까지만 검사하기const findDivisors = (n) => { ..

문제상황 Next.js 환경에서 페이지를 구현하고 있었다모든 코드에서 문제 없는데, localhost에 접속하니 이런 build error가 떴다 You'r importing a compoenet that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.Learn more: https://nextjs.org/docs/getting-started/react-essentials 에러 메세지를 읽어보니 useState를 쓰려면 use client를 명시해야 한다고 한다  해결 방법 해결 방법은 간단하..

✏️ 한 줄 설명동아리 홈페이지를 React+Next.js+schadcn/ui 를 이용해 개발중인데, Card content에 넣은 이미지가 불러와지지 않는 문제를 next.js의 Image 태그로 해결한 이야기를 기록해본다   문제 상황Next.js + shadcn/ui 를 이용해서 개발중인데, card 컴포넌트 사용시 card contents에서 이미지가 안 불러와지는 오류가 발생했다 코드를 살펴보자 1.우선 이렇게 코드 맨 위에 이미지를 import 했다 2.그리고 카드 배열을 만들었다 3.마지막으로 Card 컴포넌트의 CardContent 부분에 img 태그로 scr={card}로 붙여넣었다 그럼 문제가 뭐였는지 자세히 살펴보자  트러블 슈팅문제는 이미지가 StaticImageData 타입이라 과..

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/120883문제 설명머쓱이는 프로그래머스에 로그인하려고 합니다. 머쓱이가 입력한 아이디와 패스워드가 담긴 배열 id_pw와 회원들의 정보가 담긴 2차원 배열 db가 주어질 때, 다음과 같이 로그인 성공, 실패에 따른 메시지를 return하도록 solution 함수를 완성해주세요.아이디와 비밀번호가 모두 일치하는 회원정보가 있으면 "login"을 return합니다.로그인이 실패했을 때 아이디가 일치하는 회원이 없다면 “fail”를, 아이디는 일치하지만 비밀번호가 일치하는 회원이 없다면 “wrong pw”를 return 합니다.제한사항회원들의 아이디는 문자열입니다.회원들의 아이디는 알파벳 소문..