강승규

MVC 패턴을 공부하며JSP/Servlet을 학원에서 봤던 단어들이라, 그때 제대로 공부하지 못한 것 같아 자세히 알아보려고 합니다. 찾아보니 MVC 패턴이 서블릿을 기반으로 동작한다고 해서, '이거 완전 럭키비키잖아?'가 떠올랐습니다... 그러므로 원영적 사고를 활용하여 배워보겠습니다.JSP란?JSP(JavaServer Pages)는 HTML 문서 내에 자바 코드를 포함할 수 있는 기술로, 동적인 웹 페이지를 쉽게 작성할 수 있도록 도와주는 도구입니다. 서버에서 실행될 때 JSP는 Servlet으로 변환되어 실행됩니다.Servlet이란?서블릿은 서버에서 실행되는 자바 클래스로, 사용자로부터의 요청을 처리하고 적절한 응답을 생성하는 서버 측 컴포넌트입니다. HTTP 요청을 처리하는 데 사용됩니다.Serv..

MVC패턴이란?MDN Web Docs에 정리 된 내용으로는, MVC(모델-뷰-컨트롤러)는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴입니다. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있습니다. 이러한 "관심사 분리" 는 더 나은 업무의 분리와 향상된 관리를 제공합니다. MVC에 기반을 둔 몇 가지 다른 디자인 패턴으로 MVVM(모델-뷰-뷰모델), MVP(모델-뷰-프리젠터), MVW(모델-뷰-왓에버)가 있습니다. 그러면 Model, View, Controller 역할과 규칙에 대해 알아보자.Model의 역할은 Controller에게 요청을 받아 비지니스 로직을 처리한다.비즈니스 로직과 데이터 처리 전담: Model은 데이터와 비즈니스 로직을 ..

리액트를 공부하다가 백엔드 코드에 궁금증이 생겨 코드를 한번 분석해보는 글을 시작할려고 합니다. 틀리거나 부족한 부분이 있으면 과감한 지적 부탁드립니다.

동기 처리란?순차적으로 작업을 실행하는 방식이다. A와 B가 있다고 가정을 하자. A라는 작업이 끝나야만 B라는 작업을 할 수가 있다. 반대로 비동기 처리란?위 상황과 같이 A와 B가 있다고 가정을 했을 때, A와 B 작업을 같이 시작한다. 동기 처리와 비동기 처리의 최적의 상황은 어떻게 될까?상황동기 처리비동기 처리간단한 작업적합불필요작업 간의 의존성적합작업 간의 의존성이 없다면 병렬 처리가 적합시간이 오래 걸리는 작업시간이 오래 걸리는 작업이라면 성능 저하 발생적합UI 반응성 유지부적합적합병렬 작업부적합적합복잡한 작업 흐름적합부적합 일반적으로는 React에서 비동기 처리 작업을 많이 한다고 한다. 왜 일까?개인적인 생각으로는 리액트는 컴포넌트에 데이터 바로바로 바껴야하는데 동기 처리를 한다면, 데이터..

프로젝트 코드를 보면 Axios라는 것을 사용하고 있다. '근데 문득 드는 생각이 왜 Axios를 쓰게 됐나? Fetch API도 있는데' 그럼 Axios와 Fetch의 차이점을 알아보자. AxiosFetch API설치 여부필요불필요Json 변환자동으로 변환수동으로 변환네트워크 에러 발생 시기본적으로 처리가 잘 되어 있음수동으로 처리해야함 이거보다 더한 차이점도 있을거라고 생각을 하지만, Axios가 조금 . 더 편리하고 사용하기 쉽다는 것을 알 수 있다.그래서 프로젝트 기간에는 Axios를 선택해서 한 것 같다. 결론적으로는, Axios와 Fetch 둘 다 HTTP 요청을 통해 사용하게 되고, Axios가 사용하기 편리하다. Axios 사용법Axios를 사용하기 위해서는 메소드에 따라 요청하는 방법이 ..

이전 글에서 부모 컴포넌트에서 자식 컴포넌트로 값을 전달하기 위해 사용하는 것이 props라는 것을 알았다. 전달받은 값을 사용하기 위해서는 새로운 문법인 UseState와 useEffect를 알아야 한다. 프로젝트하면서 useState와 useEffect 두 개의 Hook을 많이 사용한 것 같다. useState란?함수형 컴포넌트 내에서 상태 관리할 수 있게 해주는 함수이다.import { useState } from 'react';function Example() => { const [examData, setExamData] = useState();}export default Example;사용할 때는, 위 코드처럼 사용하면 된다. const [examData, setExamData] = useSta..

props란?부모 컴포넌트에서 자식 컴포넌트에게 전달하는 값이다.부모 컴포넌트에서 값을 받기 때문에 자식 컴포넌트는 값을 수정할 수 없는 '읽기 전용' 상태가 되며, 부모 컴포넌트에서 prop의 값이 변경이 된다면 자식 컴포넌트에서 해당 값이 리렌더링이 된다. 코드를 통하여 확인을 해보자.import React, { useEffect, useState } from "react";import axios from 'axios';import MypageLeft from "./MypageLeft";import config from '../../../config';function MypageLeftContent() { const userId = localStorage.getItem('userId') c..

최종 프로젝트가 끝나고 한 달이 지났다.최종 프로젝트를 하면서도 리액트에 대한 공부가 부족하다고 생각이 되어, 리액트에 대한 공부와 프로젝트 때 사용한 코드를 리팩토링을 시작할 것이다.