TIL

1) 통신2) 렌더링 : Dom을 화면에 그림 3) 스크립트 실행 : Dom 조작 동작1) communication2) UI3) 네트워크4) 보안5) 브라우저6) 디자인1) CS 무시2) CSS 안하기3) 코더가 되는 것 (Framework나 라이브러리만 잘 사용하는)

1) 고정된 크기를 가진다. 2) JS같은 스크립트언어는 자동으로 증감3) JS는 인덱스를 문자나 논리값이 가능하나 문자열로 변환된 키값이 되고 이는 length에 영향을 미치지 않으므로 사용권장 X4) 번호를 알고 있다면 O(1)로 원소를 찾는다. 5) 원소를 삭제

1) 이진트리 : 정점이 최대 2개의 자식을 가짐2) 완전이진트리 : 마지막 레벨을 제외한 모든 정점이 채워짐3) 포화이진트리 : 마지막 레벨까지 모두 채워짐4) 편향 트리 : 정점히 한개로 한쪽으로 치우침1) 이진탐색2) 힙3) AVL4) 레드블랙트리1) 최대 힙 :

HTML : 구조/의미 담당CSS : 문서의 표현 CSS3 : 어디에(selector) 어떤(property) 어떻게(value)JS와 같이 등장점차 발전하여 HTML 문서를 직접 수정까지도 가능문서노드 : 최상위요소노드 : 태그를 표현속성노드 : 자식노드가 아닌 태

process.stdout.write : 결과를 연결해준다.Node.js기준결과단, process.stdout.write를 쓸 때는 문자열이어야한다.

Promise : 일급으로 비동기 값을 다룬다. 대기/성공/실패 상태를 리턴한다. 그 후 원하는 일을 다룰 수 있다. callback : undefined를 리턴한다.

애자일워터폴제한된 시간 + 한정된 자원 => 목표 완수목표하는 일을 완수해야 하는 작업일정과 관련내용 포함 => 프로젝트 관리 방법론과 관련주기를 짧게 하고 디자인 -> 테스트 -> 런칭하며 시장의 반응을 보며 빠르게 진행한다. 빠르게 변화해야하므로 야근이 많다. 제품

\|

내부구조까지 한번에 들이붓는 innerHTML과 다르게 innerText나 textContent의 경우 DOM 요소 하나의 값만 바꾸는 텍스트 형태로 넣는것이다. innerText나 textContents 형식으로 하려면 innerHTML로 밀어넣는 HTML 형식을 d

사용되거나 사용하지 않는 스크립트 추적 가능script로 여러개를 불러오는 것은 순서가 중요하지만 import로 불러오는 경우 순서는 무관script src와 다르게 전역오염이 일어나지 않는다.

fetch의 기본응답 결과는 Response 객체이다.res.json() : Response 스트림을 가져와 스트림 완료까지 읽는다.res.text() : text 형태로 읽어서 처리한다. ( 그 후 JSON.parse를 하면 res.json()과 같은 결과를 얻는다.

SPA(Single Page Application)는 한 개(Single)의 Page로 구성된 Application이다.MPA(Multiple Page Application)는 여러 개(Single)의 Page로 구성된 Application이다.그래서 SPA를 CSR(

querySelectorAll로 li태그를 전부 받아서 전부 핸들러를 거는 것 => 매번 핸들러를 전부 각각 설정해야해서 좋은 방법은 아니다.li를 묶는 전체에 이벤트를 걸고 해당 이벤트 클릭시 e.target의 className (class)를 확인하여 만약 li에서

Intellij나 VSCODE에서 어떠한 path로 오든 index.html로 돌아가도록 하는 처리를 해준다. => localhost : 5000 이 생성된다.encodeURI(대상) / decodeURI(대상)http://localhost:5000/찬민이라

해당 부분의 this.state.title이 만약 '오늘의 학습일지'라면 이는 value에는 실제로 value="오늘의" 학습일지이렇게 오늘의밖에 적용이 안된다. 이를 대처하려면 value=${this.state.title}부분을value="${this.state.ti

localStorage에 저장된 값이 만약 오염되었을때 (막 바뀌었을때)가져온 TodoList를 오염된 부분을 제외한 부분들을 처리하는 것에서 오류가 발생한다. 내부값 손상상태에서 새로고침으로 main.js에서 App Component 생성,App Component 내

태그에서 data-isOpen으로 지정해서 값을 찾아올땐 $dom.dataset.isopen으로 처리해야한다. 태그에서 data-is-open으로 지정해서 값을 찾아올땐 $dom.dataset.isOpen으로 처리해야한다.

인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다. 웹사이트중 Favicon을 만드는 사이트에 들어가 ~.ico 형태의 파일을 만들고 아래 코드를 추가한다. option을 기준으로 select에 원하는 상품을 놓는 기능을 한다. 원하는 o

수평정렬 역할현재는 1차원 레이아웃을 Flex가 담당float를 사용하는 요소의 형제들을 float를 전부 사용하게 처리해야한다.::after를 추가하여 대상의 내부의 가장 뒤쪽에 가상의 요소를 만든다. 사용예시기존의 오른쪽 정렬은 먼저 정렬된 것이 오른쪽에 가 있는다

scroll 이벤트intersectionObserver API단점단시간에 수백번, 수천번 호출될 수 있고 동기적으로 실행되기 때문에 메인 스레드(Main Thread) 영향각 엘리먼트마다 이벤트가 등록되어 있기 때문에 사용자가 스크롤할 때마다 이를 감지하는 이벤트가 끊

3차원의 변환효과가 적용이 된 요소(tranform:rotateY(45deg))의 자식요소에서 또 다른 3차원의 변환효과를 추가하는 것이 기본적으로 허용이 되어있지않다. 이를 해결하기 위한 속성이 transform-style이라는 속성이다.

SASS : 중괄호와 ;가 존재하지않아 가독성은 좋지만 들여쓰기가 중요하다SCSS : 중괄호와 ;가 존재하고 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합이다.

해당 지정한 코드내용을 @include를 통해 사용한다. 이때 지정한 대상은 매개변수가 없을 수도 있고 있을 수도 있고 있어도 default값이 존재할 수도 있다. SCSSCSS

npm install -g sass sass scss:css2번의 경우 scss:css의 scss와 css는 폴더 혹은 파일도 상관없다. ex1) sass scss/main.scss : css=> scss폴더의 main.scss를 css 폴더에 (main.css)로 만

하나의 모듈을 기준으로 독립적으로 진행되는 가장 작은 단위의 테스트모듈을 통합하는 과정에서 모듈 간의 호환성을 확인하기 위해 수행되는 테스트유닛테스트

객체 리터럴과 key value 형식으로 작성=> isActive와 isLarge가 각각 true false에 따라 class에 active / large가 추가key 와 value가 같은 값이라면 생략도 가능하다. BEM 표기법을 위해 key부분을 ''를 묶어서 사

v-for를 통해 ()를 사용하여 첫번재는 item(배열값)을 두번째는 index(순서)를 얻을 수 있다. v-for를 통해 ()를 사용하여첫번재는 value(객체값)을 두번째는 name(key값)을세번째는 index(순서)를 얻을 수 있다.반복되는 화면을 렌더링하는데

현재 header부분이 height가 66px인 상황이다. 이때 css를 아래와 같이 지정한다면 input 부분이 해당 검은 라인의 아래에 위치한다. 그림을 보면 margin이 10px 적용되고 콘텐츠의 영역은 50px인데세로를 전부 더하면 10 + 2 + 1 + 50

@로 대체가 가능하다. 메소드 이벤트 핸들러 : @click="greet"인라인 메소드 핸들러 : @click="say('hi')복합 이벤트 핸들러 : @click="one($event), two($event)"2,3의 경우 매개변수로 $event를 지정하면 event

:value와 @input을 사용하여 msg를 양방향 데이터 바인딩을 다루었다. type은 생략시 type="text"로 처리 input 부분의 :value와 @input을 사용하지 않고 v-model을 이용하였다. 주의 : 한글 반영할때 하나의 글자를 완성되기 전까지

nvm -> node.js -> npmnvm설치 : sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bashnode.js, npm설치 : nvm install

npm run dev와 같은 명령어로 localhost:8080에서 작업을 하면 코드만 수정해도 반영된다. webpack.config.js에서 localhost 기본 8080을 다른 숫자로 설정할 수 있다. webpack은 js만 이해 할 수 있어서 css를 이해하려면

기본적으로 0기본은 최대한 커질려고 하지않고 자기자신 만큼 영역을 만들려한다(0)값이 1이 되면 최대한 커질려하며 다른 영역을 채울 수 있는 만큼 채운다. ex)A와 B를 양 옆으로 하고 싶은데A의 속성에 flex-grow:1로 하면 B를 쭉 밀어낸다. A영역이 쭉 늘

나의 정보를 변경합니다.PUT /settings/update-user내 계정 비밀번호를 변경합니다.PUT /settings/update-passwordpostman으로 사용하는 것 뿐만 아니라 코드에서도 사용할 수 있게 코드를 작성했다. axios의첫번째 매개변수로 u

해당 사진은 기존에 token값을 가진 사람의 RestAPI를 통해 image를 가져와 보여주었고 아래 파일 선택으로 원하는 파일을 선택 후 생성 부분을 누르면 서버에서의 image 링크가 바뀌게 된다. 간단히 3부분으로 나뉜다. 처음 imageGetProps를 s

API_END_POINT url은 생략src/api/GetAuthUser.jssessionStorage가 안에서 존재한다. src/api/GetAuthUser.jssrc/SessionStorage/index.jsSessionStorage 폴더로 처리하여 분리하였고 ta

설정부분 나의 작성글과 분리나의 작성글 코드 작성하기ant-design을 이용하여 틀을 짰다. 2개의 메뉴를 만들고 해당 부분을 click이벤트를 등록해주었고 값의 대상은 headerName의 titleName에서 처리했다. 위와같이 이러한 선택할 수 있는 배너가 만들

online / offline을 유저목록에서 쓸 방법 생각coverImage로 받아온 image 크기가 다 다르므로 고정하기검색해서 하나만 찾는 기능 구현 배경색 똑같이 맞추기container (styled 컴포넌트) 이름 수정하기팀원분꺼 merge하기loading 기

HOC : 컴포넌트 로직을 재사용하기 위한 React의 고급 기술 ex) await Promise.all(\[axios.get(...),axios.get(...)])CSS 프레임워크로 기존 다른 프레임워크에 비해 커스터마이징이 용이하다고 한다(실제 Ant-design을