사진출처깊이 내려간 후, 더이상 내려갈 곳 없으면 옆으로 이동: Root Node나 임의의 Node에서 다음 분기(Branch)로 넘어가기 전 해당 분기를 완벽하게 탐색하는 방식Stack 이나 재귀함수로 구현1\. 모든 노드를 방문하고자 할 때 사용 ex) 미로게임에서

미리보기open/close - useState로 상태 변경조건부렌더링 - open상태만 modal컴포넌트 렌더링on/off - useState로 상태 변경조건부 렌더링 - on상태일 때 className 추가현재 탭 - useState로 인덱스 상태 저장탭 li - m

useState 변화 => 렌더링 => 변수 값 초기화 됨useRef 변화 => 렌더링 안함 => 변수들의 값 유지useState 변화 => 렌더링 => ref의 값 유지<input> - focus()media playback - play(), pause(),

Component Driven Development상향식 개발컴포넌트 단위로 만들어서 페이지를 레고처럼 조립하는 개발 방식재사용 가능한 UI 컴포넌트디자인, 개발단계에서부터 재사용 가능한 UI 컴포넌트를 고안한다면,이후에도 새롭게 만드는 것이 아닌, 재사용할 수 있게

클론 모델 : H&M 어플리케이션 클론 결과물 :위 클론 결과물의 UI/UX를 분석 및 개선하고자 한다.캐러셀 Carousel최상위메뉴 GNB (Global Navigation Bar)컬럼 그리드 추가안함 ❌=> 개선함 ✅column: 4 countmargin: 32g

Figma 2016년 9월에 출시된 UI Design & Prototyping tools. 관련 툴 : Sketch, Adobe XD, Adobd Illustrator, Adobe Photoshop 2021년 UI/UX 툴 통계 - uxtools

: wire 선으로 frame 틀을 잡는다는 의미.기획단계에서 구조를 잡는 과정품질 수준을 나타내는 3가지의 레벨스케치로 만든 수준수정하기에 용이하며 아이디어를 구체화할 때 사용한다.보기 좋게 다듬은 수준레이아웃, 글자 크기, 이미지 위치 등 조정한 것해당 페이지의 작

Heuristic(휴리스틱) ?: '체험적인'이라는 뜻으로, 직관과 경험을 활용하는 방법론.합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행 상황에 대한 정보를 항상 제공해야 한다.예) 파일첨부할 때 업로딩 상황을 표시하는 것피드백이 존재하나요?피드백이 즉시 제

UI(User Interface, 사용자 인터페이스)컴퓨터와 상호작용하는 시스템물리적 요소 예) 키보드, 마우스, 리모콘그래픽 요소 예) 스마트폰 터치, 키오스크, 스마트워치, 터치스크린 - GUImodal 모달toggle 토글tab 탭tag 태그autocomplete

JSON (JavaScript Object Notation) : 데이터 교환을 위해 만들어진 객체 형태의 포맷네트워크를 통해 메시지 객체를 전송하려면 조건을 만족해야 보낼 수 있다.전송 가능한 조건 (transferable condition)수신자(reciever)와

자기 자신을 호출하는 함수재귀(再歸) : 원래의 자리로 되돌아가거나 되돌아옴.입출력값 정의하기문제를 쪼개고, 입력값이 빈 배열인 경우와 아닌 경우를 나눈다단순한 문제 해결하기탈출조건을 구성한다. 입력값이 빈배열인 경우 0을 리턴복잡한 문제 해결하기arrSum(\[요소1

먼저 세션2는 세션1때보다 훨씬 더 빨리 지나갔다.. 아직 자바스크립트에서 event loop, execution context 같은 복잡한 개념들도 정리 다 못했는데,,, 리액트 들어가고 서버 배우니깐 뇌에 과부하가 와서 머리가 아픈 날이 많았다ㅠ 지금도 블로깅 해야

폴더 생성app.js 파일 생성nodemon 으로 서버 열기라우팅하기cors

request.body 받아오는 방식이 복잡함CORS 설정을 각각 메서드마다 돌려줘야 함미들웨어 추가 가능함내장 미들웨어 \[express.json(options)](https://expressjs.com/ko/4x/api.html - CORS설정 - cors

MERN stack= MongoDB, Express, React, Node.jsExpress는 Node.js 환경에서 웹 서버, API 서버를 만들기 위해 사용하는 프레임워크Express로 구현한 서버 - Node.js HTTP 모듈로 작성한 서버와의 차이점미들웨어를

Same-Origin Policy 동일 출처 정책같은 출처(Origin)의 리로스만 공유가 가능하다프로토콜 다른 경우 ( https / http )https://www.codestates.com vs http://www.codestates.com⇒ 두

레오나르드 리차드슨(Leonard Richardson)은 REST API를 잘 적용하기 위한 4단계 모델을 정의했다.사진 출처 - 마틴 파울러(리팩토링 저자)Richardson 성숙도 모델원문 링크 - Richardson Maturity Model - 마틴파울러리팩토링

기초 영상!youtubeiOueE9AXDQQ심도 있는 영상!youtubeRP_f5dMoHFcRepresentational State Transfer2000년, 로이 필딩 Roy T. Fielding의 박사 논문으로 발표됐고, 로이는 HTTP 1.0과 1.1의 주요 저자

Asynchronous JavaScript And XMLHttpRequest데이터를 비동기적으로 서버로부터 받아서 브라우저에 렌더링하는 기법JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법웹 페이

클라이언트 - 서버 사이에서 데이터 교환되는 방식요청 (requests)응답 (responses)start line : 요청이나 응답의 상태를 나타낸다. 항상 첫 번째 줄에 위치하고 응답에서는 status line이라고 부른다.HTTP headers : 요청을 지정하거