profile
터벅터벅 나의 개발 일상
post-thumbnail

깊이 우선 탐색(DFS) & 너비 우선 탐색(BFS)

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

1일 전
·
0개의 댓글
post-thumbnail

Custom Component 만들기

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

2일 전
·
0개의 댓글

useRef

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

6일 전
·
0개의 댓글
post-thumbnail

CDD, Styled Component

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

6일 전
·
0개의 댓글
post-thumbnail

프로토타입 UI/UX 분석하기

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

7일 전
·
0개의 댓글

Figma (UI 디자인, Prototyping 툴)

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

2022년 6월 29일
·
0개의 댓글

와이어프레임, 프로토타입

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

2022년 6월 28일
·
0개의 댓글
post-thumbnail

제이콥 닐슨의 10가지 사용성 평가 기준 (Jakob’s Ten Usability Heuristics)

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

2022년 6월 27일
·
0개의 댓글
post-thumbnail

UI / UX

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

2022년 6월 26일
·
0개의 댓글

TIL - JSON

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

2022년 6월 24일
·
0개의 댓글
post-thumbnail

재귀

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

2022년 6월 23일
·
0개의 댓글

부트캠프 - 2달 회고

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

2022년 6월 22일
·
0개의 댓글

Express - 서버 시작하기

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

2022년 6월 20일
·
0개의 댓글

Node HTTP 모듈 -> Express 서버로 변경하기

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

2022년 6월 17일
·
0개의 댓글

Express - 시작하기

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

2022년 6월 16일
·
0개의 댓글
post-thumbnail

CORS, SOP

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

2022년 6월 16일
·
0개의 댓글
post-thumbnail

RMM - Richardson Maturity Model (4단계)

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

2022년 6월 10일
·
0개의 댓글
post-thumbnail

REST API

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

2022년 6월 10일
·
0개의 댓글
post-thumbnail

AJAX란?

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

2022년 6월 9일
·
0개의 댓글

HTTP Messages

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

2022년 6월 9일
·
0개의 댓글