TIL

변수이름 설정에서 camelCase vs. snake_case1) camelCasecamelCase란 낙타 등처럼 울퉁불퉁하다는 소리입니다.단어가 새로 시작할 때부터 대문자로 쓰면 됩니다.example)firstSecondmyProfileImgtoDoListArray2

함수를 정의만 해서는 실행되지 않음!1) add 함수 정의function add() { let sum = 3+3; return sum;}function add() { let sum = 3+3; return sum;}아래는 add라는 이름을 가진 함수입니다. ad

Array (배열) 배열을 사용하면 몇 천 개의 변수를 생성하지 않고, 하나의 변수에 모든 데이터를 갖고 있을 수 있습니다. 배열은 대괄호( [    ] )로 감싸져 있습니다.

toLowerCase() - 대문자를 소문자로 바꿔주는 메소드toUpperCase() - 소문자를 대문자로 바꿔주는 메소드let name = prompt("성함을 입력해주세요");if (name.length === 2) { alert("외자이시군요! 이름이 이쁘네요.

규칙property 이름은 중복될 수 없다.property이름과 property값 사이에 : (콜론)으로 구분한다.property를 추가할 때는 , (쉼표)를 붙여준다.property 값에는 어느 type이나 가능하다(string, number, array, objec

클래스 (Class) 클래스는 객체지향 프로그래밍의 핵심. 원하는 구조의 객체 틀을 짜놓고, 비슷한 모양의 객체를 공장처럼 찍어낼 수 있다. 객체를 매번 만들어서 사용해도 좋지만, 큰 큐모의 객체 이거나 비슷한 모양의 객체를 계속 만들어야 한다면, class라

객체의 키에는 스페이스, 한글, 특수문자 등이 들어갈 수 있다.변수 선언에서 할 수 없었던 표현이 가능const 로 선언된 변수는 값을 절대 수정할 수 없었습니다.const 로 선언된 변수에 객체를 다시 할당하면 오류가 생기지만그 객체에 프로퍼티를 추가하거나 수정하는

ES(ECMA Script)는 JavaScript를 표준화시키고, 규격화하기 위해 만들어진 것ES6의 기능const and letArrow functions(화살표 함수)Template Literals(템플릿 리터럴)Default parameters(기본 매개 변수)A

arrow function을 가장 많이 사용할 때는 callback 함수로 사용할 때map 메서드 : 배열을 반복해주는 메서드callback 함수에서 return한 값으로 매(each) 요소를 수정해 준다.map 메서드의 return 값은 수정된 값으로 다시 생성된 배

A의 방식으로 할당할 경우 변수 verb와 project가 가지는 값에 따라 다른 키와 다른 값을 가지는게 가능해진다.B의 방식으로 할당할 경우키와 값은 항상 정해져 있음. 배열과 다르게 명확하게 정해진 순서가 없기 때문에, 어떤 순서에 따라 객체의 키에 접근하게 될지

DOM(돔)이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델 JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있습니다.DOM은 HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 잇는 역할JavaS

interaction은 HTML이나 CSS만으로 구현할 수 없고 자바스크립트 코딩이 필요 이렇게 특정 요소에 interactive한 반응을 할 수 있게 하는 것을 이벤트라고 한다.이벤트의 종류 - 매우다양함클릭 이벤트마우스 이벤트스크롤 이벤트터치 이벤트resize(화면

목표 현업에 들어가서 꼭 절대로 필수적으로 쓰기 때문에 많이 써보고 많이 틀려보고 해서 익숙해지도록 해보자! 개인작업 플로우 1. git clone & git pull remote repository를 git clone 이후 git pull 명령어를 사용해 loc

경로에 따라 각기 다른 화면을 보여주기즉 라우팅 이란, 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것.정적라우팅동적라우팅url 을 살펴보면 url 마지막에 특정 id 값이 들어간다.해당 id 값에 따라 서로 다른 상세 페이지 정보가 화면에 그려진다

url 경로에서 달라지는 부분을 저장하는 매개 변수를 Path Parameter 라고 합니다.: 는 Path Parameter 가 올 것이다.id 는 해당 Path Parameter 의 이름을 의미하고 임의의 이름 지정 가능useNavigate 를 통해 페이지를 이동하

백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 전부 보여줄 수 없다면 흔히 말해 쇼핑몰에서 페이지마다 보여주는 상품의 개수는 정해져있고 계속해서 다음페이지를 눌러 보는 경우라고 생각하면 편하다.프론트엔드에서 현재의 위치(Offset)과 추가로 보여줄 컨

AWS는 Amazon Web ServiceAWS는 클라우드 서비스 클라우드 서비스서버 등의 인프라스트럭쳐를 필요한대로 on demand로 사용할 수 있는 서비스 즉, 유저가 직접 서버를 구입하고 설치할 필요 없이 AWS상에서 클릭 몇번으로 서버를 구축하고 사용.AWS

고객의 피드백을 수렴하고 조금씩 발전시켜가면서 제품을 다양하게 만드는 방식이 프로젝트에 적합제조업 방식에 많이 쓰임 / 최종결과물 1개Big outcome at end요구-디자인-개발-테스팅-배포하지만 결과물은 하나cumulativ outcomes요구 디자인 개발 테스

항상 코딩을 할때 웹사이트를 참고하는 과정해서 ARIA-label을 보면서 저건 뭐길래 쓰는걸까라는 생각이 든적이 있다. 이번기회에 갑자기 궁금해졌고 앞으로 여러 부분에서 알아두면 좋을것 같아서 정리해보고자 한다.ARIA는 요소에 레이블과 설명을 추가하기 위한 여러가지

이벤트버블링이 프로젝트하는 와중에 나를 너무 괴롭혀서 글을 포스팅해본다.이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미이벤트 캡쳐는 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식하위

버튼을 하나의 state로 개별적으로 작동시키기 위해 해당 함수를 걸었다.첫번째와 두번째의 차이는 selectedBtn 을 선언해서 쓰느냐 마느냐의 차이이다.하지만 실제로 첫번째도 문제가 없어보였다고 생각을했다. 몇시간의 뻘짓끝에 너무나 안되서 멘토님에게 찾아가보았다.

<a href="https://reactjs.org/docs/hooks-reference.html두개의 코드의 차이는 useState 변수를 직접 넣는가와 즉시실행 화살표 함수를 넣는지에 차이가 있다.useState에 직접적인 값 대신에 함수를 넘기는 것

막연히 동작이 돌아가는것에 심취해 있던 누군가 나에게 정말 간단한 실행순서에 대해 물어 보았을때 나는 그 물음에 제대로 대답할 수 있을까? hook들의 호출 타이밍useEffect -> render 가 끝난 뒤update시 -> useEffect clean up / u

propscomponent Life Cycleeventconditional Renderinglistform공식문서 보러가기내용과 관련된 코드 보러가기기본적인 리액트 관련 내용입니다. 리액트를 처음 시작했을때 봤을때와 느낌이 많이 달랐다. 그때는 몰랐고 이해가 되지 않던

HooksCompositionHOCMemoizationContextPortalsPropTypesReconciliation공식문서 보러가기내용과 관련된 코드 보러가기공식문서의 고급안내서 관련 내용입니다. 이전의 기본을 바탕으로 심화된 내용까지 다뤄보자!해당 주제와 관련된