전체 글
-
[React] UI 디자인codeStates front-end/React 2023. 2. 15. 22:12
HTML 삽입 미리보기할 수 없는 소스 📌 UI 디자인 📍 UI 디자인 패턴 반복되는 문제점에 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태를 만든 패턴 쉽게 말해 자주 사용되는 UI 컴포넌트 🔗 자주 쓰이는 UI 디자인 패턴 모달 (Modal) 모들 윈도(Modal Window)는 사용자 인터페이스 디자인 개념에서 자식 윈도에서 부모 윈도로 돌아가기 전에 사용자의 상호동작을 요구하는 창을 말한다. 모달은 기존에 이용하던 화면 위에 오버레이 되는 창을 뜻한다. 닫기 버튼, 혹은 모달 범위 밖을 클릭하면 모달이 닫히는 것이 일반적이다. 모달을 닫기 전에는 기존 화면고 상호작용 X 꼭 보여주고 싶은 내용이 있다면 모달을 사용하는 것이 좋다. //click 이라는 버튼을 눌러 onclick이 발생할..
-
[React] UI/UXcodeStates front-end/React 2023. 2. 15. 21:35
📌 UI/UX 📍 UI(User Interface) 사용자 인터페이스 사람들이 컴퓨터와 상호 작용하는 시스템을 의미 화면상의 그래픽 요소 외에도, 키보드, 마우스, 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템 GUI(Graphical User Interface, 그래픽 사용자 인터페이스) 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경 운영체제(window, mac, os) 화면, 애플리케이션 화면 프론트엔드 개발에게 -> UI 즉 GUI 📍 UX(User Experience) 사용자 경험 사용자가 어떤 시스템,제품,서비스를 직/간접적으로 이용하면서 느끼고 생각하는 총체적 경험 📍 UI와 UX의 관계 UX는 UI를 포함한다. UI가 항상 좋은 UX를 보장하지 않는다. 나쁜 UI는 나..
-
[JS] chapter23. Tree UIcodeStates front-end/Java Script 2023. 2. 14. 20:39
📌 Tree UI 📍 트리구조 화면을 구성할 때 재귀를 사용하는 가장 대표적인 예시 DOM의 대해 학습 후 실습 진행 [JS] chapter11. DOM/DOM 다루기(CRUD) DOM (Document Object Model) HTML 요소를 object 처럼 조작할 수 있는 모델 즉, DOM으로 HTML을 조작 가능하다. HTML안의 JS 파일을 적용하기 위해 ----------------------------------------------------------------------------------- hwantech.tistory.com 재귀에 대해 학습 후 실습 진행 [알고리즘] 재귀 함수 📌 재귀 📍재귀의 이해 재귀 : 원래의 자리로 되돌아가거나 되돌아옴 🔗 재귀의 코드 function r..
-
JSON.stringifycodeStates front-end/node(server) 2023. 2. 14. 16:18
📌 JSON.stringify 📍JSON의 탄생 배경 "JavaScript Object Notation" 데이터 교환을 위해 만들어진 객체 형태의 포맷 전송 가능한 조건 수신자(reciever)와 발신자(sender)가 같은 프로그램을 사용한다. 또는, 문자열처럼 범용적으로 읽을 수 있어야 한다(String -> 큰따옴표). const message = { sender: "김코딩", receiver: "박해커", message: "해커야 오늘 저녁 같이 먹을래?", createdAt: "2021-01-12 10:10:10" } ❗️❗️ 객체는 타입 변환을 이용해 String으로 변환할 경우 객체 내용 포함 X JS에서 객체를 문자열로 변환하기 위해 메서드(message.toString())나 형변환(St..
-
[알고리즘] 재귀 함수codeStates front-end/Algorithm 2023. 2. 14. 15:12
📌 재귀 📍재귀의 이해 재귀 : 원래의 자리로 되돌아가거나 되돌아옴 🔗 재귀의 코드 function recursion () { console.log("This is") console.log("recursion!") recursion() } recursion() 함수? 자기 자신을 끝없이 호출하면서 같은 코드가 계속해서 실행된다 👉🏼 이 함수처럼 자기 자신을 호출하는 함수를 재귀 함수라고 한다 🔗 재귀로 문제 해결하기 문제 : 자연수로 이루어진 리스트(배열)을 입력받고, 리스트의 합을 리턴하는 함수 'arrSum'을 작성하세요. 1. 문제를 작게 쪼개기 [1, 2, 3, 4, 5] 의 합을 구하는 과정 1 + 2 + 3 + 4 + 5 =? 2 + 3 + 4 + 5 =? 3 + 4 + 5 =? 4 + 5 =..
-
[job preparation] 기술 면접3 - JS, HTTP/네트워크, 웹서버 기초codeStates front-end/Job Preparation 2023. 2. 10. 12:05
📌기술 면접 tip! 결론은 간단하게, 설명은 구체적으로 자신의 언어로 설명할 수 있어야 함 간명한 정리와 풍부한 설명을 위해서는 지속적인 모의 면접을 통해 기술 설명을 연습하고, 어려운 개념에 대해서 깊게 고민하고 블로그에 기록하는 연습이 필요 기술 면접 준비 JavaScript 🧐 Promise의 기능과 필요한 이유에 대해서 설명해주세요. 👨🏻💼 자바스크립트에서 비동기 처리에 사용되는 객체입니다 비동기란 특정 코드의 실행이 완료될때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성을 말합니다. 프로미스는 서버에서 받아온 데이터를 처리하고, fetch등으로 서버에서 받아온 뒤 데이터를 요청하고 받아온 뒤 처리하기 위하여 프로미스가 필요합니다. 🧐 순수함수란 무엇인가요? 불변성과 사이드 ..
-
My Agora states servercodeStates front-end/node(server) 2023. 2. 9. 16:22
📌 My Agora states server 📖 학습 목표 전의 학습한 statesAirline Server를 구현해보셨다면 어렵지 않습니다! airline 코드를 보면서 구현해 봅시당 StatesAirline Server 📌 StatesAirline Server 📖 학습 목표 이를 학습하기 전의, 아래 기본 내용을 먼저 이해하자 Express 사용 Refactor Express 📌 Refactor Express 📍Express Express 설치 npm install express Hello world! 예제 만들기 Express hwantech.tistory.com 📣 서버를 처음 실행 시키면 미들웨어 셋팅 부분이 동작 그후 '주소/'를 들어가게 되면 라우트 부분이 실행되고 다시 요청을 기다림 주소/..
-
StatesAirline ServercodeStates front-end/node(server) 2023. 2. 9. 15:54
📌 StatesAirline Server 📖 학습 목표 이를 학습하기 전의, 아래 기본 내용을 먼저 이해하자 Express 사용 Refactor Express 📌 Refactor Express 📍Express Express 설치 npm install express Hello world! 예제 만들기 Express "Hello World" 예제 Hello world 예제 기본적으로 이 앱은 여러분이 작성할 수 있는 가장 간단한 Express 앱일 것입니다. hwantech.tistory.com 📣 서버를 처음 실행 시키면 미들웨어 셋팅 부분이 동작 그후 '주소/'를 들어가게 되면 라우트 부분이 실행되고 다시 요청을 기다림 주소/가 아닌 경우 다른 주소로 들어가면 라우트 실행 x 에러처리 동작 1. 미들웨어..