본문 바로가기

FE
FE/JavaScript [JS] 재귀를 이용하여 Tree UI 구현하기 Tree UI Tree UI는 화면을 구성할 때 재귀를 사용하는 가장 대표적인 예시이다. 만들고자 하는 간단한 HTML DOM 구조 (예: 음료 -> 콜드브루 -> 나이트로 콜드브루) 음료 콜드브루 나이트로 콜드 브루 돌체 콜드 브루 제주 비자림 콜드 브루 콜드 브루 메뉴 데이터 (길어서 생략) 더보기 const menu = [ { type: 'group', name: '음료', children: [ { type: 'group', name: '콜드 브루', children: [ { type: 'item', name: '나이트로 콜드 브루' }, { type: 'item', name: '돌체 콜드 브루' }, { type: 'item', name: '제주 비자림 콜드 브루' }, { type: 'item'..
FE/JavaScript [JS] JSON.stringify 재귀를 이용하여 직접 구현하기 * 재귀를 이용해 메서드 JSON.stringify를 함수의 형태로 직접 구현하기 JSON.stringify는 객체를 JSON으로 변환하는 메서드이다. 이 메서드를 재귀를 사용하여 함수의 형태로 직접 구현해본다. 자바스크립트 객체와 JSON은 대표적인 트리 구조로 되어 있다. 즉, 전형적인 재귀 탐색이 가능한 구조(객체의 값으로 객체를 포함하는 구조)이기 때문에 재귀 사용을 적극 권장한다. JSON.stringify 아래의 JSON.stringify와 같은 결과를 구현하는 함수를 만들어본다. JSON.stringify 규칙 [Browser에 존재하는 JSON.stringfy 함수 === 구현할 stringifyJSON] JSON.stringfy 함수는 input 값을 JSON 형식으로 변환한다. 1. ..
FE/JavaScript [JS] JSON 개요 (JavaScript Object Notation) JSON의 탄생 배경 JSON은 JavaScript Object Notation의 줄임말이다. (자바스크립트 객체 표기법) 데이터 교환을 위해 만들어진 객체 형태의 포맷이다. 네트워크를 통해, 어떤 객체 내용을 다른 프로그램에 전송한다고 가정해보자. 이 객체 내용을 일종의 메신저 혹은 채팅 프로그램에서 쓰는 하나의 메시지라 한다면, 다음 객체를 어떻게 전송할 수 있을까? const message = { sender: "김코딩", receiver: "박해커", message: "해커야 오늘 저녁 같이 먹을래?", createdAt: "2023-01-12 10:10:10" } 메시지 객체가 전송할 수 있게 하려면, 메시지를 보내는 발신자와 메시지를 받는 수신자가 같은 프로그램을 사용하거나, 문자열처럼 범용적..
FE/코딩테스트 [JS] 재귀 - 상, 중 상 1. giftBox function unpackGiftbox(giftBox, wish) { // recursive case for (let i = 0; i < giftBox.length; i++) { if (giftBox[i] === wish) { return true; } else if (Array.isArray(giftBox[i])) { // ** 배열 속 배열인 경우 const result = unpackGiftbox(giftBox[i], wish); // ** 재귀 if (result === true) { return true; } } } // base case return false; } // 📌 다른 풀이 방법 1 (추천) function unpackGiftbox(giftBox, wish)..
FE/코딩테스트 [JS] 재귀 - 하 하 1. sumTo 먼저 base case, recursive case를 생각하자. 2. factorial 3. fibonacci 메모리제이션은 금지된다. 그림으로 살펴보면 금방 이해가 된다. // 🟣 반복문일 때 function fibonacci(num) { // 피보나치를 한 마디로? // 다음 수 = 맨 끝에 있는 수 + 그 앞에 있는 수 // 1. 피보나치 수열을 넣어줄 배열을 만든다. let fib = []; // 2. 반복문을 돌린다. -> 0부터 num까지 반복 // 0과 1은 피보나치수열의 기본세팅 // i가 0일 때, 1일 때는 바로 배열에 push한다. for (let i = 0; i fib[2] = fib[1] + fib[0] // 다음 반복 // i = 3, fib = [0, 1, ..
(비) 최댓값 구하기 보호되어 있는 글입니다.
FE/JavaScript [JS] 재귀 * 자기 자신을 호출하는 함수인 재귀(recursion) 함수를 활용하는 방법 재귀의 개념 재귀 : 원래의 자리로 되돌아가거나 되돌아옴. 표준국어대사전에서는 위와 같이 재귀의 뜻을 정의하고 있다. 재귀의 시각적 예시를 든다면 계속해서 원래의 상태로 돌아오는 아래 이미지와 같을 것이다. 위 정의와 예시를 참고하여 재귀를 코드로 표현하면 다음과 같이 작성할 수 있다. function recursion () { console.log("This is") console.log("recursion!") recursion() } recursion 함수를 호출하면 자기 자신을 끝없이 호출하면서 같은 코드가 계속해서 실행되는 것을 볼 수 있다. 이 recursion 함수처럼 자기 자신을 호출하는 함수를 재귀 함수라고 한..
FE/Server [Network] Airline 서버 구현 (2) : 서버 개발하기 * 이전 글 : StatesAirline Server API document * Airline Server 개발하기 - Airport API - Book API - Flight API 초기세팅 폴더 구조 1. statesairline statesairline/app.js 는 서비스에 필요한 미들웨어와 웹 서버를 실행하는 코드가 작성되어 있다. 2. router statesairline/router/ 안에는 airport API, book API, flight API 요청을 수행하는 라우터가 작성되어 있다. 작성된 라우터 내용을 통해 API 요청을 받을 수 있다. 3. controller statesairline/controller/ 안에는 정의된 API 요청을 수행하는 코드가 작성되어 있다. 4. rep..
(비) 알고리즘 - 바빌로니아 법의 점화식 보호되어 있는 글입니다.
(비) 알고리즘 - 카이사르 암호 보호되어 있는 글입니다.
FE/Server [Network] Airline 서버 구현 (1) : Airline Server API document * Express 프레임워크를 이용해 API 서버를 만들고, 로컬 호스트와 연결하기 * 클라이언트의 요청에 따라 항공편과 예약 데이터를 조회, 생성, 수정, 그리고 삭제하는 기능을 수행하는 서버 개발하기 - Express 프로젝트에서 사용하는 폴더 구조를 이해하기 - Express를 활용하여 API 요청 처리하기 - router, controller 활용하기 - Airport API, Flight API, Book API 에서 정의한 API 요청을 수행하는 코드를 작성하기 * 다음 글 : Airline 서버 구현 (2) : 서버 개발하기 문제를 해결하기 전에, 문제가 무엇인지 파악하는 것이 우선이 돼야 한다. 생산적인 고민을 통해 문제를 정의하고, 차근차근 해결할 수 있어야 한다. 소프트웨어 엔지니어로서..
FE/Network [Network] Express의 미들웨어(Middleware) Express로 구현한 서버가 Node.js HTTP 모듈로 작성한 서버와 다른 점은 다음과 같다. 라우터를 제공한다. (이전 포스팅) 미들웨어를 추가할 수 있다. (해당 포스팅) 이번 포스팅에서는 미들웨어에 대해 알아보겠다. 미들웨어 (Middleware)란? 사전적 의미 미들웨어(서로 다른 여러 프로그램을 함께 운용할 수 있는 소프트웨어) software that acts as a bridge between an operating system or database and applications, especially on a network 미들웨어(Middleware)는 자동차 공장의 공정과 비슷하다. 자동차 공장에서는 컨베이어 벨트 위에 올려진 자동차의 뼈대에, 공정마다 부품을 추가한다. 모든 부품이..
(비)[Network] HTTP모듈을 Express로 리팩토링 보호되어 있는 글입니다.
FE/Server [Network] Express로 간단한 웹 서버 만들어보기 (라우터) MERN stack은 JavaScript 생태계에서 인기 있는 프레임워크인 MongoDB, Express, React, Node.js를 지칭하는 말이다. 이 중에서 Express는 (1) Node.js 환경에서 (2) 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 인기 있는 프레임워크이다. Express로 구현한 서버가 Node.js HTTP 모듈로 작성한 서버와 다른 점은 다음과 같다. 라우터를 제공한다. (해당 포스팅) 미들웨어를 추가할 수 있다. (다음 포스팅) 이번 포스팅에서는 Express 공식 문서를 따라 간단한 웹 서버를 만들어 보겠다. Express로 간단한 웹 서버 만들어보기 1. Express 설치 나의 경우, Express 공식 문서의 시작하기 - 설치 를 참고해서 아예 연습폴..
FE/Server [Network] HTTP 모듈을 사용한 서버 다뤄보기 HTTP 모듈을 사용한 서버 다뤄보기 브라우저에는 서버에 요청을 보내기 위해 fetch 같은 HTTP 요청을 보내는 도구가 기본적으로 내장되어 있다. 서버는 클라이언트(브라우저)의 HTTP 요청에 맞게 응답을 보낼 수 있도록 코드를 작성해야 한다. Node.js는 HTTP 요청을 보내거나, 응답을 받을 수 있는 도구들을 제공한다. HTTP 요청을 처리하고 응답을 보내 주는 프로그램을 웹 서버(Web Server)라고 부른다. Node.js의 http 모듈을 이용해 웹 서버를 만들 수 있다. Node.js에서 파일을 읽거나 쓰기 위해 fs 모듈을 사용하듯이, HTTP 요청과 응답을 다루기 위해 HTTP 모듈을 사용한다. 이 HTTP 모듈 공식 문서중 무엇부터 봐야 할까? HTTP 모듈 공식 문서에 들어가..
FE/Network [Network] SOP & CORS - CORS 동작 방식 - CORS 설정 방법 - node.js를 이용하여 서버 구축하기 같은 JavaScript를 사용하지만 node.js 환경에서 사용하는 코드에는, CommonJS나 모듈 등 브라우저에서 찾아볼 수 없는 다소 생소한 개념이 포함되어 있다. node.js에서 사용하는 이 개념들은 백엔드뿐만 아니라, 프론트엔드에서도 적극 사용한다. API 서버는 프론트엔드 개발자라도 구현할 수 있어야 한다. 새로운 서비스를 만들려고 해도, 필요한 데이터를 저장하거나 불러오는 기본적인 API 서버를 구현할 수 없다면 아무런 동적 활동을 할 수 없는 클라이언트만 구현하게 될 것이다. node.js에 대한 내용은 프론트엔트와 백엔드 등 웹 개발에서 공통적으로 사용하므로 반드시 알아야 한다. CORS 에러 웹..
FE/React [React] StateAirline Client (2) : Effect Hook * React를 이용해 서버와 정보를 주고 받는 웹 페이지를 구성하기 - Effect Hook을 활용하여 비동기 호출 및 Ajax 요청과 같은 side effect를 처리 - 네트워크 요청이 느릴 경우에 표시되는 로딩 화면을 구현 네트워크 요청을 통해 항공편 리스트를 받아오고, 도착지 정보 검색 기능 구현하기 검색 조건을 변경하면 네트워크 요청을 보내고, 서버로부터 받은 응답을 결과 목록에 적용한다. (1) Side Effect가 발생하는 함수를 Main 컴포넌트에서 호출 앞서 검색 조건을 담은 객체 condition이 바뀌면, Main 컴포넌트 자체 필터링에 의해서 검색 결과가 바뀌는 것을 알았다. (아래 참고) // ** Main 컴포넌트에 구현되어 있었던 필터링 함수 : (1)편에서 사용했음 con..
FE/React [React] StateAirline Client (1) : 상태 끌어올리기 * 상태 끌어올리기, 데이터 흐름 개념을 활용하여 항공편 검색 기능을 구현한다. - React의 데이터 흐름에 대해 이해하고 state를 전달할 수 있다. - 상태 끌어올리기를 활용하여, 원하는 컴포넌트에서 state를 변경할 수 있다. - 검색 조건을 변경하면, 해당 검색 조건에 맞는 항공권이 필터링되어 목록에 표시되게 한다. 디렉토리 구조 . ├── README.md ├── __tests__ │ └── index.test.js # 테스트 파일 ├── api │ └── FlightDataApi.js # 항공편 정보를 받아오는 API ├── package.json ├── pages │ ├── Main.js # 첫 화면 컴포넌트, 필터링 상태를 담고 있다. │ ├── component │ ├── Debug..
FE/React [React] State & Props로 간단한 트위터 추가 기능 구현하기 추가 기능 1. 특정 유저 게시글 필터 기능 2. 게시글 삭제 기능 1. 특정 유저 게시글 필터 기능 tweets.js // ** Tweets.js import React, { useState } from "react"; import Footer from '../Footer'; import Tweet from '../Components/Tweet'; import './Tweets.css'; import dummyTweets from '../static/dummyData'; const Tweets = () => { const [username, setUsername] = useState("Doyu 🤍"); const [msg, setMsg] = useState(""); const [tweets, setTw..
FE/Network [Network] Effect Hook & Ajax 요청 * Effect Hook과 Ajax의 개념 및 활용 - side effect로부터 분리하여 React 컴포넌트를 만들기 (비즈니스 로직과 표현 영역 구분) - Effect Hook과 Ajax를 사용해 서버로부터 데이터를 받아오는 방법 - 컴포넌트 내에서 네트워크 요청 시, 로딩 화면과 같이 보다 나은 UI 만들기 - Effect Hook을 이용해 비동기 호출 및 AJAX 요청과 같은 side effect를 React 컴포넌트 내에서 처리하는 방법 Side Effect (부수 효과) 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기한다. React에서는 Side Effect가 발생했다고 말하는 경우는 컴포넌트 내에서 fetch를 사용해 API 정보..
⬆︎
728x90

티스토리툴바