본문 바로가기

Frontend Dev

 (147)
Section3 Unit2 [사용자 친화 웹] UI/UX Section3 Unit2 [사용자 친화 웹] UI/UX 📌 Chapter1. UI/UX 개념 • UI (User Interface, 사용자 인터페이스) • UX (User Experience, 사용자 경험) → 이전 섹션에서도 언급되었지만, 좋은 사용자 경험(UX; user experience)은 직관적이고 쉬운 UI에서 나온다. 📌 Chapter2. UI 디자인 • UI 디자인 패턴은 프로그래밍 시 자주 반복되어 나타나는 문제점을 해결하고자, 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴이다. 자주 쓰이는 UI 디자인 패턴을 익혀두면 UI를 디자인하기가 보다 쉬워지고, 프론트엔드 개발자, 디자이너, PM 과의 의사소통도 원활해져 협업 효율도 높아진다. → 모달, 토글, 탭, 드..
Section3 Unit1 [자료구조/알고리즘] 재귀 - 과제 JSON.stringify, Tree UI Section3 Unit1 [자료구조/알고리즘] 재귀 - 과제 JSON.stringify, Tree UI ⭐️ 과제 1. JSON.stringify ✏️ 이번 과제는 재귀를 이용해 메서드 JSON.stringify를 함수의 형태로 직접 구현하는 과제였다. 재귀함수를 구현하는것에 어려움을 느껴서 그런지 이번 과제는 쉽지 않았다. 테스트에 그냥 통화하고 싶다면 const stringifyJSON = JSON.stringify; 이렇게 구현하면 된다. (너무나 손쉽게 해결~) 하지만 이 과제는 재귀를 공부하기 위한 것이니, 하나씩 구현해보자. ✨ 구현과정 & 코드 1. 처음에는 감이 잡히지 않아서 한참을 헤매고, 시작을 못하고 있었다... 😭 2. 배열과 객체를 제외하고는, 단순히 "" 이렇게 따옴표가 추가되..
Section3 Unit1 [자료구조/알고리즘] 재귀 Section3 Unit1 [자료구조/알고리즘] 재귀 📌 Chapter1. 재귀의 이해 • 재귀함수란? 자기 자신을 호출하는 함수 • 재귀는 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우나 중첩된 반복문이 많거나 반복문의 중첩 횟수를 예측하기 어려운 경우 사용하기 적합하다. 📌 Chapter2. 재귀의 활용 ✔️ 재귀적으로 사고하기 function arrSum (arr) { // base case : 문제를 더 이상 쪼갤 수 없는 경우 (재귀의 기초) -> 재귀의 탈출 조건 if (arr.length === 0) { return 0 } return arr.shift() + arrSum(arr); } → 내가 간과하고 있었던 부분인데, 함수의 종료는 return을 했을 때이다. → 무한루..
Section2 회고, 장거리 달리기를 시작하는 기분으로 Section2 회고, 장거리 달리기를 시작하는 기분으로 Section1을 마무리하는 글을 쓴게 엊그제 같은게 벌써 Section2도 끝나고, 프론트엔드 부트캠프에서 공부를 한지도 두 달이 지났다. 오전에는 커리어 세션으로 목표 설정에 대한 이야기가 있었고, 오후에는 보이는 라디오 라는 세션으로 온라인 부트캠프를 진행하며 어렵거나 힘들었던 사연 등을 제보(?)하고 공유하는 시간이 있었다. Section2의 마지막 Chapter로 기술면접 준비와 추천하는 github repository 등도 있었다. 하지만 이번에도 지난번과 같이 다른 내용은 제외하고 KPT 회고 (다소 별 내용이 없는 것 같지만)로 마무리를 해볼까 한다. 📌 목표: 👩🏻‍💻 2023년 안에 프론트엔드 개발자로 커리어 시작하기 나의 목표는..
Section2 Unit11 [솔로 프로젝트] 나만의 아고라 스테이츠 서버 만들기 Section2 Unit11 [솔로 프로젝트] 나만의 아고라 스테이츠 서버 만들기 ⭐️ 과제. 나만의 아고라 스테이츠 서버 만들기 GitHub - sw2377/fe-sprint-my-agora-states-server: 나만의 아고라 스테이츠 서버 만들기 나만의 아고라 스테이츠 서버 만들기. Contribute to sw2377/fe-sprint-my-agora-states-server development by creating an account on GitHub. github.com ✔️ Bare Minimum Requirement ✅ my-agora-states-server/app.js • 모든 Origin, 경로에 대해 CORS 요청을 허용하게 미들웨어를 적용합니다. • POST 요청 등에 포함된..
Express 요청 객체 req.body, req.params, req.query 사용 예제 req.body req.params req.query는 Express의 요청 객체의 프로퍼티로 각각 요청 본문, 경로 매개변수, 쿼리 매개변수에 접근하기 위해 사용된다. 👾 req.body POST 요청의 본문(body)에 포함된 데이터를 나타내는 객체이다. 주로 HTML form이나 AJAX 요청과 같이 POST 메서드를 통해 데이터를 전송할 때 사용된다. req.body를 사용하기 전에는 body-parser와 같은 미들웨어를 설정하여 요청 본문을 파싱(parse)할 수 있도록 해야 한다. 파싱하지 않은 요청 본문의 기본값은 undefined이다. const express = require('express') const app = express() const port = 3000 // Ex. POST..
Section2 Unit10 [Web Server] 기초 - StatesAirline Server Section2 Unit10 [Web Server] 기초 - StatesAirline Server ⭐️ 과제. StatesAirline Server ✔️ Bare Minimum Requirement ✅ statesairline/controller/flightController.js와 statesairline/controller/bookController.js 에 코드를 작성하세요. ✅ Express 공식문서에서 req.query , req.params를 사용하는 방법을 확인하세요. Query와 Params를 기준으로 데이터를 필터링하는 코드를 작성해야 합니다. ✅ 예약 데이터는 controller/bookController.js 안에 작성된 let booking = []; 배열에 저장해야 합니다. ✅ F..
Section2 Unit10 [Web Server] 기초 - Refactor Express Section2 Unit10 [Web Server] 기초 - Refactor Express 📌 Chapter2. Refactor Express ⭐️ 과제. Mini-Node Server를 Express로 리팩토링 구현과정 💡 TIP. 포스트맨을 활용해서 간편하게 요청을 보내고 응답을 확인할 수 있다. 1. express 모듈 학습 어제 node.js 맛 좀 보고, 하루만에 express로 넘어왔다… 여전히 모르는거 투성이에 감도 안잡혀서 express도 node.js 찍먹한 것처럼 간단한 구현만 먼저 해보기로 했다. express를 공부하다 보니 node.js로 코드를 작성할 때 어려웠던 부분들이 훨씬 편하게 해결되는 것들이 보였다. express가 편하다더니, 왜 그런지 알 것 같은 느낌에 기분이 약간..
반응형

티스토리툴바