개별공부

alert알림 BOX를 띄우는 메서드                                                                  ↓↓↓prompt사용자에게 (값)을 입력받을 때 사용1.prompt는 두 번째 인수를 입력할 수 있고, 이 때 두번

정규표현식은 /pattern/flag로 표현하며 test(string) 함수는 인자로 전달된 문자열이 정규표현식의 패턴과 일치하면 true를 리턴, 그렇지 않으면 false를 리턴^ => 문자열의 시작\[ㄱ-ㅎ|가-힣|a-z|A-Z|0-9|] => 한글, 소문자영어,

해당 태그의 문자열 최대길이를 임의로 설정할 때 사용.ex <input type=number placeholder="여기에입력" Maxlength=5> ↓ ↓ ↓문제점! => Maxlength는 type="number"에서 동작하지 않음↓↓↓해결책 => Patte

let 선언으로 각각의 value값 지정각 지정 값이 ""(공백)이 아니라면 send\_\_button 비활성화 해제하나라도 ""(공백)이 있다면 send\_\_button 비활성화phone1 의 입력길이가 3이 되면 phone2로 칸 이동phone2의 입력길이가 4

input 태그를 클릭하여 입력가능한 상태가 된 것을 ''focus를 얻었다\`\`\` 라고 함따라서 focus()는 지정한 태그에 입력상태를 만들어 주는 것예시1\. phone1에 value를 할당2.if문으로 phone1.length가 3이 되면 phone2로

<select> 태그의 value값을 변수에 할당해 줌 selected 되어있는 <option> 태그에 value="" 추가<select>가 <option>을 담고있기 때문에 <select>의 value는 <option>의 value가

ex. width:100px일 경우 => aspect-ratio : 4 / 1 은 width 100px, height 25px의 비율을 유지함\*width, height 둘 다 지정되어 있는 경우에는 적용되지 않음 (X)

ex. if(NaN===obj) 같이 동치연산자가 NaN에는 적용되지 않음↓JS내장함수 활용 => isNaN(obj) (해당 값이 NaN인지를 판단하는 함수)IndexOf앞에서부터 시작해서 ( )안의 값이 몇 번째 index에 위치하고 있는지를 반환.indexOf("찾

document.getElementsByClassName 은 해당되는 요소들 전체를 선택하여 객체 형태로 반환 ↓따라서 index 값을 이용하여 객체 내에서 원하는 요소만 뽑아서 사용 가능for문을 활용해 각 index자리의 숫자를 배정하고, 색상코드를 적용시키는 과정

브라우저에서 드래그나 더블클릭을 사용한 텍스트 선택 등의 허용 유무 결정user-select:auto =>(default값) 브라우저 허용 시 텍스트 선택 가능 user-select:all => 더블클릭이 아닌, 클릭 만으로 텍스트 선택 가능 user-select:te

사람이 읽을 수 있는 text 형식의 데이터 포맷데이터를 저장하거나 전송할 때 이용되는 DATA 교환 방식JSON은 데이터 포맷일 뿐, 프로그래밍 문법이 아니며 단순히 데이터를 표시하는 표현방법임배열의 경우 String(arr) 같은 방식으로 문자열 변환 안 됨(X)이

classList 자체는 읽기 전용 속성으로 지정한 요소의 클래스 목록에 접근하는 방식임classList.add( ) => 지정한 class 값 추가 (이미 해당 class 값이 있다면 이를 무시)classList.remove( ) => 지정한 class 값을 제거cl

event 는 어떠한 사건이 발생했음을 의미 (ex. 버튼을 클릭할 때, 키보드 키가 눌렸을 때)event가 발생하면 event 객체가 생성되고, event와 관련된 모든 정보는 해당 객체에 저장됨(ex.키보드 event => 누른 키의 keyCode 등..)↑ 위 처

if문 을 대체해서 쓸 수 있는 문법조건을 우선 작성? => 조건이 true일 경우: => 조건이 false일 경우

매개변수로 전달받은, 매개변수의 자리에 인자로 들어가는 함수주로 함수 내부에서 다른 함수를 쓰고 싶을 때 Callback함수 이용Callback 함수는 정의된 함수 뿐만 아니라 익명함수도 사용 가능↑위와 같이 Callback함수는 매개변수로 함수자체를 넣고, 이후 필요

Javascript가 사용자의 실제 위치를 브라우저에 요청하도록 해주는 APInavigator.Geolocation.getCurrentPosition(success, error, options) 로 작성\-success = 위치정보 허용시 실행 되는 콜백함수 (위치에

html,css 문제발생 => 개발자도구 element 창에서 수정해보며 체크 (처음엔 개발자도구로 확인, 이후 vscode로 최종적용)js 문제 발생 => 개발자도구 console 창에서 체크하면서 확인네트워크 상 문제발생 개발자도구 Network 에서 에러 rech

이벤트 버블링이란 화면의 특정 요소에서 이벤트가 발생하였을 때, 그 이벤트가 요소의 상위 요소 (부모 요소) 로 계속해서 전달되어 부모요소들에도 이벤트가 적용되는 것을 말함\+a) 이벤트 캡쳐링 => 상위요소에서 하위요소로 이벤트가 전파되는 것\*캡쳐링을 코드에서 발견

코드린터 = eslint\-중복선언 금지, ==연산자 금지 등의 규칙이 있을 수 있음\-코드린터는 문법상 에러는 아니지만 에러로 약속하자고 규칙을 정하는 것\*에러가 아닌, 규칙에 어긋나는지 여부를 검사하기에 vscode에서 빨간 줄이 그여도 실행에는 문제 X코드 포메

1\. 함수 내에서 카운트 수 5번 증가 ( 증가 안됨 X )기본적으로 State 에 담기는 값은 해당 값이 할당되자마자 담기는 것이 아님!State의 값이 할당되면 그 값은 임시저장소에 들어가게 되며, 최종적으로 함수가 종료되었을 때 임시저장소에서 다시 불러와지면서

CORS 정책이 도입되기 전부터 있던 정책으로 동일한 출처(Origin, URL)에서의 요청에만 응답을 허용하는 정책ex. (Daum 브라우저에서 요청을 보냈다면 Daum 백엔드에서만 요청 응답 허용 가능, Naver 백엔드에서는 요청 허용 X)이런 정책은 브라우저가

any = 어떤 타입의 입력 값이라도 전부 허용됨 (오류발생 가능하기에 가급적 사용을 자제해야 함!)unKnown = 알 수없음, 모름을 뜻하며 타입이 지정되지 않았음으로 오류가 발생할 수 있음을 경고하는 타입unKnown의 경우 타입 지정은 any처럼 다 되지만, 타

기존에 사용하던 refetch는 사실 효율적인 방법이 아님graphql 에서 useQuery( ) 를 사용해 data를 fetch 하면 해당 data는 cache-state 라는 저장소에 저장되는데, refetch를 사용하면 백엔드에서 새롭게 data를 받아와서 이를

결제를 완료해서 백엔드로 API 요청을 보낼 시 결제가 이루어진 시점의 시간을 DB에 저장하게 됨이 때 시간을 새로 생성하는 작업은 프론트 서버에서 진행되면 안 됨 X\*사용자가 PC의 시간을 조작해서 사용할 경우, 프론트에서 생성되는 시간은 조작된 시간을 따라가기 때

Representational State Transfer 의 약자로 소프트웨어 프로그램 아키텍처의 한 형식네트워크로 연결된 어플리케이션의 설계를 안내하는 일련의 원칙HTTP 통신에서 어떤 자원에 대한 요청을 Resource와 Method로 표현하여 특정한 형태로 전달하

자원(resource)을 조회 (데이터를 가져올 때만 주로 사용)Server 에 전달할 데이터를 query(쿼리 파라미터 등)를 통해 전달\+a) GET 예시위와 같이 /search 라는 resource 경로 뒤에 q, hl 같이 key에 value 형태로 데이터를 전

기존의 서버의 코드를 수정하면 다시 재실행해줘야하는 번거로운 과정을 배제해 주는 라이브러리 노드가 실행하는 파일이 속한 디렉토리를 감시하고 있다가 파일이 수정되면 자동으로 노드 애플리케이션을 재시작하는 확장 모듈nodemon 을 사용하면 수정할 때마다 매번 server

API 연동시에 보내는 자원을 명시하기 위해 사용하는 것즉 요청 시 들어가는 body의 정보에 대한 type을 정의해주는 것이라고 보면 됨 text/css, text/html... = 텍스트 타입 audio/mpeg, audio/x-ms-wma... = 오디오 타입 a

일반적으로 개발, 테스트, 운영 등 여러 환경에 애플리케이션을 배포하는데 어느 환경에 배포하느냐에 따라서 다르게 설정해야하는 항목은 보통 운영 체제 레벨에서 환경 변수를 통해 관리하게 됨대표적인 예로, 개발 환경에서는 로컬 DB를 사용해야하는데, 운영 환경에서는 원격

공식 문서에 따르면 axios 는 위와 같이 인스턴스 형식으로 만들어서 공통적으로 여러 컴포넌트에서 import 하여 사용 가능위와 같이 api 변수에 axios 로 만든 인스턴스를 담음인스턴스에는 기본 default 엔드포인트 경로와, default로 headers

관련 문서사용자 정보를 입력하는 공간의 큰 틀을 만들기 위해 사용form 을 사용해서 그룹 안의 입력된 값들을 한 번에 전송하여 로직 처리 가능action = 폼을 전송할 서버 쪽 스크립트 파일을 지정 (data를 보낼 경로 지정)name = form을 식별하기 위한

CSS 접두어에는 -webkit-, -moz-, -ms-, -o- 등이 존재하며, 이들 은 각 브라우저에서 css 속성이 적용되도록 하는데 이용됨각 브라우저에는 CSS 를 해석하고 웹페이지를 렌더링하는 엔진이 있으며, 모든 엔진이 CSS 를 같은 방식으로 해석하지는 않

크롬 개발자도구를 이용해서 웹사이트의 CSS 구조를 변경하며 실적용해볼 수 있음위의 경우 특정 요소를 선택한 다음, tex-shadow 속성을 적용해서 좌표위치를 변경하며 CSS 스타일 적용상태를 테스트

inline 요소의 가로정렬은 text-align 같은 속성으로 쉽게 정렬 가능그러나 inline 요소는 수직정렬이 쉽지않음 HTMLHTMLCSS위와 같은 html 구조에서 CSS 속성을 위와 같이 줌현재 text-align 으로 가로정렬은 되어 있는 상태(정확히는 박

요소를 숨기는 세 가지 방식 opacity 속성을 0으로 하면 모습만 감춤 스크린 리더에 따라 읽지 않을 수도 있음 (자리는 그대로 차지) visibility 속성을 hidden으로 하면 위 효과에 더하여 마우스 오버 효과나 포커스, 클릭 등도 무효 스크린

ref 오류 프로젝트 중, 커스텀 훅 내부에서 인자로 받아온 ref를 다시 return하는 다른 컴포넌트에 props로 전달해 줄 일이 있었다. 해당 코드는 커스텀 훅 내부에 정의된 함수로, 지정한 커스텀 select 컴포넌트를 반환하는 데 이 때 내부 로직처리에

기존에 작성했던 category select 컴포넌트를 반환하는 함수에 react hook form 의 register를 등록할 필요성이 생겼다. 문제는 일반 컴포넌트라면 props 속성으로 넘겨줄 수 있겠으나 해당 렌더함수는 말그대로 함수를 호출해서 return값

현재 Toast UI의 Editor를 적용해서 게시글 작성 페이지를 구상하고 있다. 다만 아쉬운 점이 있다면 폰트사이즈, 폰트 색상 옵션에 대해 기본적으로 제공을 하지 않는다는 것이다. 물론 이 부분은 플러그인만 추가하면 쉽게 해결이 가능하나 본인에게는 살짝 못미더운

기존에 프로젝트나 작업을 할 때면 항상 img 태그로 작업을 해오곤 했다. 최적화나 빠른 전송 등의 부분은 후에 lazy Loading 기법이나 여타 다른 방도로 해결할 수 있지 않을까 했기 때문이다.이번 기회에 Next의 Image 컴포넌트를 활용하게 된 것도 의도적

ES6 부터 도입된 개념으로, 객체를 선언하는 순간에 변수를 활용하여 동적인 프로퍼티명을 할당할 수 있다. 즉, computed property 방식으로 자바스크립트 객체의 key 속성명을 표현식(변수, 함수 등)을 통해 지정하는 문법이다.위처럼 keyProps 라는

브라우저의 렌더링 주기에 맞춰 부드러운 애니메이션 효과를 제공할 수 있도록 하는 자바스크립트 내장 api raf는 현재 해상도에 맞는 모니터의 주사율 만큼 (일반적으로 60fps) 이벤트를 발생시킴raf 를 활용하여 reflow, repaint 최적화를 통해 성능향상

각 쇼핑몰 아이템 목록에서 추천되는 카테고리 항목별로 8개씩 보여주는 아이템을 구현하고자 했다. 그냥 리스트별로 보여주기에는 심심한 느낌이 들어 각 쇼핑몰 템플릿을 참고해 찾아본 후, 가로로 스크롤되면서 drag로 움직일 수 있는 기능적 요소를 더해 구현하기로 했다.일