[사이트 추천] 프론트엔드를 위한 디자인 보조 사이트 추천 (컬러 팔레트, 보더, SVG 필터, 배경 제거)

1. 컬러 팔레트 추천 사이트 Coolors - The super fast color palettes generator!Generate or browse beautiful color combinations for your designs.coolors.co🔗 https://coolors.co/컬러 팔레트 추천해 주는 사이트개인 플젝할 때 대표 색상 정하고 시작하기 좋다 2. border-style: dashed 커스텀 사이트 Coolors - The super fast color palettes generator!Generate or browse beautiful color combinations for your designs.coolors.co🔗 https://kovart.github.io/dash..

[폰트] Apple 가이드 라인에 따른 pt단위 글꼴

iOS app 표준 SF PRO Text & Display 글꼴이 Apple의 대표 표준이다.또한, 이 글꼴을 선택하면 사용자의 설정에 따라 자동으로 조정된다. - 큰제목(Large Title): 34pt- 제목1(Title1): 28pt- 제목3(Title3): 20pt- 본문(Body): 17pt- 서브헤드(Subhead): 15pt- 캡션(Caption): 12pt StyleWeightSize (points)Large TitleRegular34Title 1Regular28Title 2Regular22Title 3Regular20HeadlineRegular17BodyRegular18CalloutRegular16SubheadRegular15FootnoteRegular13Caption 1Regular12..

[유용한 사이트] UI/UX 관련 무료 사이트 모음

세계 1,966 앱의 UX/UI 무료 모음 사이트uxdnas.com2. 숨겨진 UX/UI 전략을 소개해주는 사이트 (물론 무료)growth.design 3. 세계 앱 매출, DAU, 상세 정보 분석 사이트 (일부 유료지만, 무료도 충분)appmagic.rocks ref - https://www.threads.com/@2one.product/post/DKEM2jevjQX?xmt=AQGzgWiFWT-_I4EFVJTG6xy3J4BVywFKifD2Ztw1zcV1MRs

[Cursor] 자동 프로젝트 맞춤 규칙 생성하기

/Generate Cursor Rules 명령어 한 줄이면 자동으로 프로젝트 맞춤 규칙을 생성해줍니다. ref - https://www.threads.com/@promppy_com/post/DJaKIXLT5rs?xmt=AQGzgWiFWT-_I4EFVJTG6xy3J4BVywFKifD2Ztw1zcV1MRs

[Vue] Watch, Computed 차이점

method method는 주로 두가지 경우에 사용 1. 데이터 바인딩 2. 이벤트 바인딩 데이터 바인딩을 위해 메서드를 사용하는 경우 즉, 중괄호 사이에 메서드를 사용해 템플릿에서 vue 인스턴스로 아웃소싱하는 경우 메서드는 컴포넌트 리렌더링 주기에 맞춰 매번 실행됨 그러므로 변동 사항이 생기면 템플릿을 재평가하고 해당 템플릿에 호출된 모든 메서드를 다시 호출하게 됨 그래서 이벤트 바인딩 시에는 method를 주로 사용하게 되는 것 computed computed(연산) 프로퍼티는 데이터 바인딩에만 쓰임 이벤트 바인딩에는 알맞지 않음 게다가 연산 프로퍼티는 다른 데이터를 기반하는 데이터를 가져오기에 유용하여 의존하는 데이터가 바뀔 경우에만 vue에 의해 재평가되거나 재실행 된다는 장점이 있음 즉, co..

[JavaScript] 일반 함수로 호출 시의 this바인딩

this바인딩은 함수 호출 방식, 즉 함수가 어떻게 호출되었는지에 따라 동적으로 결정이 되는데요, 주의할 점은 동일한 함수도 다양한 방식으로 호출될 수 있음에 따라 this가 변하게 된다는 점입니다. 일반 함수 호출 메서드 호출 생성자 함수 호출 Function.prototype.apply/call/bind 메서드에 의한 간접 호출 그중에서도 일반 함수로 호출되었을때의 this에 대해 정리해보겠습니다. 🤔 일반 함수 호출 기본적으로 this에는 전역 객체(global object)가 바인딩 됩니다. function foo() { console.log("foo's this: ", this); // window function bar() { console.log("bar's this: ", this);// ..

[React/error] consider using transient props (`$` prefix for automatic filtering.)

styled component를 사용할 때 props를 보낼 때 가끔 consider using transient props (`$` prefix for automatic filtering.) 이런 에러가 발생하는데 에러 그대로 보내는 props앞에 '$'를 붙어주면 해결됩니다. import React from 'react'; import styled from 'styled-components'; const StyledDiv = styled.div` background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), ${props => `url(${props.$imageurl})` || 'none'}; background-size: cov..

[JavaScript] 변수 호이스팅과 함수 호이스팅

var 키워드로 선언된 변수는 변수 선언 이전에 참조하려고 undefined가 나오고 let/const 키워드로 선언된 변수는 reference error가 발생합니다. 또, 함수는 함수 정의 이전에 실행 가능합니다 ????? 호이스팅에는 함수 호이스팅과 변수 호이스팅이 있는데 둘은 런타임 이전에 자바스크립트 엔진에 의해 먼저 실행되어 식별자를 생성한다는 점에선 동일하지만, var키워드로 선언된 변수는 undefined로 초기화되고, 함수 선언문을 통해 암묵적으로 생성된 식별자는 함수 객체로 초기화됩니다. 즉, var키워드로 선언된 변수는 변수 선언 이전에 참조하려고 하면 함수 호이스팅에 의해 undefined로 평가되지만, 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출하면 함수가 코드 선두로 ..

[JavaScript] for문에서 var키워드를 쓰면 안 되는 이유 (var/let/const 차이)

javascript scope에는 크게 두 가지가 있음 구분 설명 스코프 변수 전역 코드의 가장 바깥 영역 전역 스코프 전역 변수 지역 함수 몸체 내부 지역 스코프 지역 변수 변수는 자신이 선언된 위치(전역 또는 지역)에 의해 자신이 유효한 범위인 스코프가 결정됨. 즉, 전역에서 선언된 변수는 전역스코프를 갖는 전역변수이고, 지역에서 선언된 변수는 지역 스코프를 갖는 지역 변수임 js에서 var를 쓰면 안 되는 이유는 저번 렉시컬환경 때 어느 정도 이해했었음 대충 var 키워드를 사용해서 변수를 선언하면 전역 스코프를 가지게 되는데 전역 스코프에는 js가 기본적으로 가진 함수가 존재함 예를 들어 알림을 띄울 수 있는 alert 만약 var alert = "alert" 이런 식으로 기존에 있는 이름을 가져..

[React] 간단한 todo 프로젝트(3) - Todo

이번에는 todoList를 구현해 보겠습니다. 근데 이번 파트는 큰 틀인 Todo와 안에 child component인 TodoItem 두 파트로 나눠서 포스팅할게요 🤔 Todo component Todo component에 필요한 css 파일을 Todo.module.css파일로 빼서 만들어줍니다. import React, { useEffect, useState } from 'react'; import TodoItem from './TodoItem'; import useInput from './hooks/use-input'; import classes from './Todo.module.css'; (1) 로그인 편에서 만든 custom hooks인 useInput과 여러 필요한 파일들을 import //..