ALL 썸네일형 리스트형 (비) 최댓값 구하기 보호되어 있는 글입니다. FE/JavaScript [JS] 재귀 * 자기 자신을 호출하는 함수인 재귀(recursion) 함수를 활용하는 방법 재귀의 개념 재귀 : 원래의 자리로 되돌아가거나 되돌아옴. 표준국어대사전에서는 위와 같이 재귀의 뜻을 정의하고 있다. 재귀의 시각적 예시를 든다면 계속해서 원래의 상태로 돌아오는 아래 이미지와 같을 것이다. 위 정의와 예시를 참고하여 재귀를 코드로 표현하면 다음과 같이 작성할 수 있다. function recursion () { console.log("This is") console.log("recursion!") recursion() } recursion 함수를 호출하면 자기 자신을 끝없이 호출하면서 같은 코드가 계속해서 실행되는 것을 볼 수 있다. 이 recursion 함수처럼 자기 자신을 호출하는 함수를 재귀 함수라고 한.. 📌 TOY-PROJECT/2303 문답게시판 [연습 프로젝트] 문답 게시판_서버 개발 1. fetch로 서버 연결 2. GET : 전체 데이터 조회 3. POST : 새로운 글 생성 4. DELETE : 특정 글 삭제 결과물 GitHub PR 서버 서버 쪽은 정말 간단하게 끝났다... 재밌어! 폴더 구조 1. my-agora-states-server my-agora-states-server/app.js 는 서비스에 필요한 미들웨어와 웹 서버를 실행하는 코드가 작성되어 있다. 2. router my-agora-states-server/router/ 안에는 discussion API 요청을 수행하는 라우터가 작성되어 있다. 작성된 라우터 내용을 통해 API 요청을 받을 수 있다. 3. controller my-agora-states-server/controller/ 안에는 정의된 API 요청.. 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 정보.. FE/개발 관련 뉴스, 서적, 자료 [Leiapix Converter] Create 3D GIFs 평면 그림을 입체적으로 만들어주는 Leiapix Converter에 내 작품을 넣어 보았다. 회원가입을 하고, 원하는 그림 혹은 사진을 넣어주면 간단하게 움직이는 3D 영상 혹은 GIF 파일을 만들 수 있다...! 첫 번째 작품 🤍 한줄평 : 그래 이거지 ㅠㅠ 다만 뒤의 풍경까지 각도에 따라서 움직였으면 더 좋겠다는 아쉬움 한 스푼 (사실 입체감 조절 커스터마이징도 된다.) 두 번째 작품 🤍 한줄평 : 화질이 좋지 않은데 오히려 좋아...!! 자동으로 오후 2시 한강의 반짝반짝 효과를 얻었다ㅋㅋㅋ 이 작품의 경우에는 처음에 그림 속에 있는 음표가 따로 움직이지 않고 주변 배경에 고정된 채로 같이 움직여서 어색한 느낌이 들었다. 그래서 아래와 같이 살짝 커스터마이징을 해주었다. 하지만 불편한 점은 실행취.. FE/React [React] 데이터 흐름 & State 끌어올리기 (Lifting State Up) 이전 글 참고 : React 데이터의 흐름 * State 끌어올리기 - 상태 변경 함수가 정의된 컴포넌트 - 상태 변경 함수를 호출하는 컴포넌트 * React 공식 문서의 주요 개념 일단 이거부터 보고 가자 ㅋㅋㅋㅋ (bgm과 같이 보는 유튜브 쇼츠 링크 클릭!) 역방향 데이터? (스포: 아니다.) 저번 글과 비교하며 컴포넌트들의 달라진 관계를 보면, Tweets 컴포넌트에서 관리하고 있었던 데이터(전체 트윗 목록)은 NewTweetForm 컴포넌트를 통해 변경이 된다. 즉, 새 글을 추가하는 이벤트가 발생할 경우, 이때 전체 트윗 목록에 새로운 트윗 객체를 추가할 수 있어야 한다. NewTweetForm과 Tweets 두 컴포넌트 모두 트윗 목록에 의존한다. 그렇다면, 두 컴포넌트의 부모인 Twittl.. FE/React [React] Goodbye create-react-app! https://dev.to/ag2byte/create-react-app-is-officially-dead-h7o Goodbye create-react-app React developer team recently removed create-react-app from the official documentation. This means it... dev.to 1. React developer team recently removed create-react-app from the official documentation. This means it is no longer the default method of setting up a new project in React. According to this pull .. FE/Network [Network] Postman으로 HTTP 요청 및 응답 받아오기 Postman으로 HTTP 요청 해보기(API 테스팅) Open Weather Map의 Open API 사용해보기 웹 개발에서 사용하는 대표적인 클라이언트는 브라우저이다. 브라우저는 서버에 HTTP 요청을 보낼 수 있는 훌륭한 도구이지만, 주로 웹 페이지를 받아오는 GET 요청에 사용한다. 브라우저의 주소창에 URL을 입력하면, 해당 URL의 root-endpoint로 GET 요청을 보낸다. 테스트를 위해 GET 요청이 아닌 다른 요청을 보내려면, 개발자 도구의 콘솔 창에서 Web API fetch를 사용해야 한다. 테스트를 위해 매번 코드를 작성하는 것은 상당히 번거로운 작업이다. 매번 코드를 작성하는 것 대신에, HTTP 요청을 테스트할 수 있는 다양한 API 테스트 도구들이 있다. 이러한 API 테.. ⬆︎ 이전 1 ··· 4 5 6 7 8 9 10 ··· 12 다음
