목록CodeStates/learning contents (74)
Jieunny의 블로그
📣 CDD ✔️ Component-Driven Development(CDD) ➰ 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 ➰ 재사용할 수 있는 컴포넌트를 개발할 수 있다. 📣 CSS in JS ➰ 다양한 디바이스들의 등장으로 웹사이트들이 다양한 디스플레이를 커버해야 하기 때문에 CSS는 더 복잡해지게 되었다. ➰ 이를 해결하기 위해 CSS 전처리기가 등장헀다. ✔️ CSS 전처리기 : CSS가 구조적으로 작성될 수 있게 도움을 주는 도구 ➰ CSS 전처리기 자체만으로는 웹 서버가 인지하기 못하기 때문에 각 전처리기에 맞는 컴파일러를 사용해야 하고, 컴파일을 하게 되면 실제 우리가 사용하는 CSS 문서로 변환이 된다. ✔️ SASS(Syntactically Awesome Style Sheets) ➰..
📣 UI/UX 개념 ✔️ UI(User Interface) : 사람들이 컴퓨터와 상호 작용하는 시스템 ➰ 화면상의 그래픽, 키보드, 마우스 등 ✔️ GUI(Graphical User Interface) : 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경 ➰ 운영체제의 화면, 애플리케이션 화면, 프론트엔드 개발자로서의 UI는 대부분 GUI를 의미 ✔️ UX(User Experience) : 사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험 ➰ 제품, 서비스 그 자체에 대한 경험 + 홍보, 접근성, 사후처리 등 관련된 모든 경험을 말한다. 📣 UI와 UX 의 관계 ✔️ UX는 UI를 포함한다. ➰ 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은..
📣 JSON의 탄생 배경 ✔️ JSON : JavaScript Object Notation ➰ 데이터 교환을 위해 만들어진 객체 형태의 포맷 ➰ 데이터를 전송 가능한 조건 ﹒ 수신자와 발신자가 같은 프로그램을 사용한다. ﹒ 또는, 문자열처럼 범용적으로 읽을 수 있어야 한다. ➰ 객체는 타입 변환을 이용해 String으로 변환할 경우 객체 내용을 포함하지 않는다 -> JS에서 객체를 문자열로 변환하기 위해 메서드 .toString()이나 String(str)을 사용하면 [object Object] 라는 결과를 리턴한다. ➰ 이를 해결하는 방법은 객체를 JSON의 형태로 변환하거나 JSON을 객체의 형태로 변환하는 것이다. ﹒ JSON.stringiify : 객체를 JSON으로 변환한다(직렬화) ﹒ JSON..
📣 재귀의 개념 ✔️ 재귀 : 원래의 자리로 되돌아가거나 되돌아옴. ➰ 재귀 함수 : 자기 자신을 호출하는 함수 📣 재귀로 문제 해결하기 1️⃣ 문제를 좀 더 작게 쪼갠다. 2️⃣ 1번과 같은 방식으로, 문제가 더는 작아지지 않을 때까지, 가장 작은 단위로 문제를 쪼갠다. 3️⃣ 가장 작은 단위의 문제를 풂으로써 전체 문제를 해결한다. ✔️ 예시 ➰ 배열 [1, 2, 3, 4, 5]의 합을 구하는 과정을 재귀로 풀어보자. 1. 문제를 작게 쪼개기 arrSum([1, 2, 3, 4, 5]) === 1 + arrSum([2, 3, 4, 5]) arrSum([2, 3, 4, 5]) === 2 + arrSum([3, 4, 5]) 2. 문제를 가장 작은 단위로 쪼개기 ➰ 더 이상 쪼갤 수 없는 상태까지 쪼갠다. ..
📌 JavaScript ✔️ Promise의 기능과 필요한 이유에 대해서 설명해주세요. 더보기 ➰ Promise는 자바스크립트 비동기 처리에 사용되는 객체로, 콜백 패턴이 가진 단점을 보완하며 비동기를 처리할 수 있습니다. ➰ 비동기란, 특정 코드의 실행이 완료될 때 까지 기다리지 않고 다음 코드를 먼저 수행하는 것을 말합니다. ➰ Promise를 사용하면 콜백을 중첩하여 사용하였을 때 일어나는 콜백지옥을 해결할 수 있습니다. ➰ Promise는 보통 서버에서 받아온 데이터를 처리하는 데에 사용됩니다. ➰ Promise는 대기, 이행, 거부 상태를 가지며 매개변수로 resolve와 reject 함수를 가집니다. ➰ Promise가 이행 상태인 경우 resolve 함수를 호출하고, 거부 상태인 경우 rej..
📣 Express ✔️ Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 프레임워크 ✔️ Node.js HTTP 모듈로 작성한 서버와 다른 점 ➰ 미들웨어를 추가할 수 있다. ➰ 라우터를 제공한다. 1️⃣ Express 설치 npm install express 2️⃣ 간단한 웹 서버 만들기 const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => { res.send('Hello World!') }) app.listen(port, () => { console.log(`Example app listening on port ${port}`) }) ➰ 응답으로 ..