LG CNS AM Inspire 1기

INTRO 최근 많은 기업들이 On Promise 환경에서 클라우드 네이티브 환경으로 전환하고 있다. 이는 단순히 물리적 서버를 클라우드로 옮기는 것이 아닌, 클라우드 환경에 최적화된 애플리케이션을 개발하고 운영하는 것을 의미한다.

INTRO 지난 포스팅에서는 클라우드 네이티브 환경으로의 전환과 가상화 기술에 대해 간단히 살펴봤다. 이번 포스팅에서는 클라우드 네이티브의 핵심 요소 중 하나인 MSA(Microservices Architecture)에 대해서 나름대로 정리해보고자 한다!

INTRO 지난 포스팅에서 MSA와 컨테이너에 대해서 살펴봤다. 이번에는 웹 애플리케이션 아키텍처의 두 가지 주요 방식인 MPA(Multi Page Application) 와 SPA(Single Page Application) 에 대해 간단히 정리해보자

INTRO 첫날 강의를 수강하면서 포트(Port)에 대해서 공부를 할 수 있었다. 개인적으로 강사님께서 설명해주신 내용이 인상깊어서 포스팅으로 내용을 정리하고자 한다. 1. 포트(Port)의 개념과 역할 💡 포트란? 우리가 웹 개발을 하게되면 localhost:8

INTRO 1. HTML 개념 HTML은 데이터를 구조화하는 데 사용하는 마크업 언어이다. "마크업"이란 데이터에 의미를 부여하는 기호 체계로, 우리가 흔히 볼 수 있는 HTML 파일은 의미를 가진 태그들이 트리 형태로 구성된 파일이라고 볼 수 있다. HTML과

INTRO 웹 사이트를 이용하다 보면 화면이 깨져 보이거나, 모바일에서 PC 버전 그대로 표시되어 불편했던 경험이 있다. 특히 요즘처럼 다양한 디바이스로 웹을 접속하는 시대에는 이러한 불편함이 사용자 경험을 크게 해칠 수 있다. 이번 포스팅에서는 이러한 문제를 해

INTRO 지난 포스팅에서 CSS의 기본 개념과 문법에 대해 알아보았다. 이번에는 현대 웹 개발에서 필수가 된 반응형 웹 디자인(Responsive Web Design)에 대해 알아보도록 하자. 1. 반응형 웹이란? 반응형 웹은 하나의 웹사이트로 데스크톱, 태블릿,

INTRO 현대의 웹 개발은 과거와는 많이 달라졌다. 특히 자바스크립트 생태계는 엄청난 속도로 발전하고 있는데, 이번 포스팅을 통해서 모던 자바스크립트의 주요 특징 중 하나인 Virtual DOM과 JavaScript의 기본적인 문법에 대해서 살펴보도록 하자 1.

현대 웹 개발에서는 수많은 도구들이 등장하고 있다.이전 포스팅에서도 언급했지만 특히 자바스크립트 생태계는 빠르게 발전하고 있다.이번 포스팅에서는 모던 자바스크립트 개발에서 필수적인 두 가지 도구인 모듈 번들러와 트랜스파일러에 대해서 간단하게 정리해보고자 한다.모듈 번들

INTRO 웹 개발을 하다 보면 HTTP 통신은 필수적인 요소이다. 특히 프론트엔드 개발자라면 한 번쯤은 Fetch API와 Axios 중 어떤 것을 사용할지 고민해봤을 수 있다. (필자는 사실 아직 프로젝트에서 Axios를 제대로 사용해본적은 없다..)

INTRO React를 이용한 개발을 진행하기에 앞서서 기본적인 내용들을 수업했다. 이번 포스팅에서는 가볍게 리액트를 사용할 때 어떠한 암묵적인 규칙들이 있는지를 컴포넌트, 스타일 적용, 그리고 Props 관점에서 살펴보려고 한다 👀 1. React 컴포넌트의 종

INTRO 리액트에서 가장 중요한 개념 중 하나인 상태(State)에 대해 알아보려고 한다. 특히 함수형 컴포넌트에서 상태를 관리하기 위해 사용하는 useState와 useRef에 대해 자세히 살펴볼 예정이다 👀

INTRO 이전에는 포스팅을 통해, useState & useRef 훅에 대해서 살펴봤다. 원래는 다음으로 리액트에서 많이 사용되는 useEffect 훅을 살펴보려고 했다. 하지만, 강사님께서 컴포넌트의 LifeCycle에 대해서 깊게 설명해주셔서 이 부분을 정리

INTRO 이제부터는 리액트의 또 다른 중요한 Hook인 useEffect에 대해 알아보려고 한다. 특히 클래스형 컴포넌트의 생명주기 메서드들을 함수형 컴포넌트에서는 어떻게 구현하는지 살펴보자 👀

INTRO 이번에는 지금까지 배웠던 개념으로 신호등을 한번 만들어봤다. 다른 방법도 많겠지만 해당 포스팅을 통해 어떤 개념을 어떻게 사용했는지 간단하게 정리해보자 1. 요구사항 우선 신호등 예제의 요구사항 명세를 정리해보자 >정리 >1. 신호등의 사이즈와 점멸 간

INTRO 이번 포스팅에서는 리액트 컴포넌트의 렌더링 과정에서 발생할 수 있는 성능 문제와 이를 해결하기 위한 주요 최적화 도구인 useMemo, useCallback 훅과 React.memo HOC를 자세히 알아보려고 한다. 1. useMemo() 성능 최적화 도

INTRO 1. React.memo React.memo는 고차 컴포넌트(HOC)로, 컴포넌트가 동일한 props로 동일한 결과를 렌더링한다면 메모이제이션을 통해 리렌더링을 방지한다. 즉, props가 변경되지 않았다면 메모이징된 내용을 재사용하여 불필요한 리렌더링을

INTRO 이번 포스팅에서는 React의 Hook 중 하나인 useContext에 대해 자세히 살펴보려고 한다. React 애플리케이션을 개발하다 보면 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하기 위해 여러 단계의 컴포넌트를 거쳐야 하는 경우가 발생한다. 이

이번 포스팅에서는 리액트 애플리케이션에서 페이지 이동을 관리하는 핵심 라이브러리인 React Router에 대해 알아보려고 한다. React Router는 싱글 페이지 애플리케이션(SPA)에서 마치 여러 페이지가 있는 것처럼 사용자 경험을 제공하는 도구이다.이제부터 R

INTRO 이전 포스팅에서 BrowserRouter에 대해서 간단한 개념을 살펴봤다. 동적 라우팅을 살펴보기 위해서는 URL로 전달되는 값을 사용하는 방법을 알아야 한다. 이번 포스팅을 통해 URL로 전달되는 데이터를 사용하는 훅인 useParams와 useSea

이전에는 URL을 통해 동적으로 데이터를 전달하는 방법과 이를 사용하기 위한 2가지 훅에 대해서 살펴봤다.이번 포스팅에서는 React Router의 중요한 기능 중 하나인 중첩 라우팅(Nested Routing)에 대해 살펴보자 👀중첩 라우팅은 라우트 안에 다시 라우

원래 프론트엔드를 공부하던 사람으로써 배운 내용을 응용해서 뭐하나 만들어보려고 했던 내용을 일기처럼 가볍게 기록해보려고 한다.처음에 뭘 만들어볼까 조금 고민했다.사실 웹 어플리케이션은 이미 너무 많아서 새로운 아이디어를 찾는건 버겁다고 느꼈다. 물론 아직 개발 실력도

INTRO 이전 포스팅에서 Naver Map API의 명세를 확인하지 않아서 삽질한 내용을 정리했다. 주소 기반 검색 으로 근처 OO을 찾아 화면에 보여주는 웹 어플리케이션을 만들어보자

INTRO 이전 포스팅에서 Naver Search API를 사용하여 검색 훅을 만들어봤다. 이제는 지금까지 만든 내용을 응용하여 주소를 입력하면 근처 카페를 검색해주는 웹 어플리케이션을 만들어보자 11. 구조

INTRO 이제부터 코드를 리팩토링하는 과정을 정리할 에정이다. 이 포스팅을 작성한 목적이기도 하다. 참고로 전역 관리를 위해 Context API 대신 Zustand를 사용했으니 이 부분은 참고하자

INTRO 이제부터는 백엔드 Course를 위해 Java에 대한 기본적인 문법을 정리하려고 한다. 필자는 이전에 자바를 공부했었던 경험이 있기 때문에 개인적으로 중요하다고 느껴지는 개념들만 따로 빼서 정리해보려고 한다. 이번 포스팅에서는 상속 이라는 개념을 살펴보자

INTRO 다음으로 살펴볼 개념은 바로 제네릭이다. 이 제네릭이라는 개념은 TypeScript에서도 자주 사용되기 때문에 생소하거나 어려운 개념은 아니었다. 다만, TypeScript는 타입을 정의하기 위한 방법이 주를 이뤘다면 자바는 제네릭을 좀 더 광범위하게

이번에는 자바의 람다식(Lambda Expression)에 대해 정리해보려고 한다.자바스크립트에서 화살표 함수를 자주 사용해서 그런지 꽤 친숙한 느낌이었다.람다 표현식은 함수형 프로그래밍을 가능하게 만들어주는 중요한 문법이라고 하는데, 간단하게 람다식에 대해서 정리해보

INTRO 이번에는 자바의 스트림(Stream)에 대해서 정리해보려고 한다. 이전 포스팅에서 람다식을 정리하면서 스트림 API를 살짝 다뤘었는데, 이번 포스팅에서 본격적으로 알아보자 👀 1. 스트림이란? 스트림은 컬렉션, 배열 등의 저장 요소를 하나씩 참조하면

INTRO 이전에 스프링 부트를 사용해서 간단하게 백엔드 프로젝트를 진행해본적이 있다. 하지만, 그 당시에는 너무 급하게 공부를 시작했기에 기본기가 제대로 정립되지 않은 상태로 개발을 진행했던 기억이 있다. 이번 LG CNS AM Inspire Camp에서 강의를

INTRO 이전 포스팅을 통해 스프링 컨테이너와 빈에 대해서 간단하게 살펴봤다. 이번 포스팅에서는 분량 조절에 실패하여, 이전에 다루지 못한 스프링 컨테이너가 Bean을 어떻게 관리하는지를 다뤄보려고 한다 👀 1. Bean 등록 스프링 컨테이너는 빈의 생성부터

INTRO 이전 포스팅에서는 스프링 컨테이너가 빈을 관리하는 방법들을 살펴봤다. 라이프 사이클에서도 잠깐 언급했지만, 의존성 주입이라는 단계가 있는데 이번에 의존성 주입에 대해서 조금 자세히 정리해보고자 한다 👀 1. 의존성 주입(DI)의 필요성 의존성 주입은

INTRO 이번 포스팅에서는 컴포넌트 스캔이라는 스프링의 빈등록 방법을 살펴보려고 한다. 기존에는 @Bean 어노테이션을 사용해서 스프링 컨테이너에 빈을 등록했다. 다른 스프링 빈 등록 방법인 컴포넌트 스캔에 대해서 한번 살펴보도록 하자

이번 포스팅에서는 OOP의 한계를 해결하기 위해 등장한 AOP의 개념을 살펴보고, 스프링에서는 이 개념을 어떻게 사용하는지를 살펴보자 👀AOP는 관점 지향 프로그래밍이라고 하며, 어플리케이션의 핵심 비즈니스 로직과 공통적인 기능 (횡단 관심사, cross-cuttin

# INTRO 웹 애플리케이션을 개발할 때 가장 중요한 것은 코드의 구조화다. 잘 구조화된 코드는 유지보수가 쉽고, 확장성이 좋으며, 테스트하기 용이하다. 이번 포스팅에서는 스프링의 MVC 패턴과 DAL을 통해 효율적인 계층형 아키텍처를 구현하는 방법을 알아보

INTRO SpringBoot 프로젝트와 MySQL Database를 연결하는 방법을 정리하고자 한다. 제목에 LAB이 붙은 포스팅은 앞으로 개발하면서 마주쳤던 에러를 기록하고 어떻게 해결했는지를 정리하는 포스팅으로 작성하고자 한다. 1. What Project?

INTRO 이전 포스팅에서 DB까지 연결한 과정을 정리해봤다. 이번에는 미니 프로젝트를 MVC 패턴에 맞춰 개발하는 과정에서 생긴 궁금증과 그 해답을 정리해보려고 한다. (지금 생각해보면 어이없는 궁금증도 많았던 것 같다 😂) 1. UserMapper는 인터페

이번에는 Spring MVC 패턴을 적용하면서 궁금했던 HTML을 불러오는 부분을 정리해보려고 한다.미니 프로젝트를 진행하면서 궁금했던 또 다른 부분은 바로 컨트롤러 코드에 있었다.우선 코드를 살펴보자Sample Code위에서 작성된 UserController의 코드를

INTRO 이번 포스팅에서는 Interceptor와 AOP가 스프링부트에서 어떻게 사용되는지 간단하게 정리할 예정이다. AOP 관련 개념은 이전에 Spring을 공부하면서 정리한 포스팅이 있기 때문에 간단하게 예제 코드를 작성해보는 식으로 살펴보자 👀 1. 인터

이번 포스팅에서는 Spring Boot에서 트랜잭션(Transaction)이 어떻게 동작하고, 어떤 방식으로 관리할 수 있는지 알아볼 예정이다 👀트랜잭션은 데이터베이스의 상태를 변화시키는 하나의 논리적인 작업 단위를 말한다.여러 작업들을 하나의 단위로 묶어서 '모두

이번 포스팅에서는 이전에 MyBatis 기반으로 동작하던 Spring Boot 구조를 JPA로 변경하면서 배운 내용을 정리해보려고 한다.우선 JPA를 사용하게 된 배경을 살펴보자.MyBatis를 사용할 때는 Controller, Service, Mapper에서 자바 코

INTRO 이번 포스팅에서는 CORS 에러를 정리해보려고 한다. 사실 프론트엔드 서버에서 백엔드 서버로 Request를 보낼 때 마주하는 가장 흔한 에러가 바로 CORS 에러이다. 사실 이전에 Naver Map API를 사용하여 프론트엔드로 개발을 하면서 CORS

이번 포스팅에서는 스프링 시큐리티(Spring Security) 의 기본 개념과 적용 방법을 정리해보려 한다.웹 애플리케이션에서 보안은 필수적인 요소이며, 특히 사용자의 인증(Authentication)과 권한 부여(Authorization)를 효과적으로 처리하는 것이

INTRO 이번 포스팅에서는 스프링 시큐리티(Spring Security)를 활용하여 커스텀 로그인 기능을 구현하는 방법을 정리해보려고 한다. 기본적으로 spring-boot-starter-security 의존성을 추가하면 모든 요청이 인증을 요구하며, /login

INTRO 이번 포스팅에서는 웹 애플리케이션에서 인증된 사용자를 식별하는 방법 중 하나인 쿠키(Cookie)와 세션(Session) 에 대해 정리해보려고 한다. HTTP는 기본적으로 Stateless(상태를 저장하지 않는 프로토콜) 이다. 즉, 사용자가 로그인한

INTRO 이전 포스팅에서는 SpringSecurity의 formLogin을 사용한 세션 기반 인증에 대해 살펴봤다. 세션 방식은 구현이 간단하지만, 현대의 분산 시스템 환경에서는 한계가 있다. 특히 MSA(Microservice Architecture)와 같이 서

이번 포스팅부터는 Docker와 관련된 기초 개념부터 어떻게 우리가 만든 프로젝트를 컨테이너 기반으로 관리할 수 있는지를 정리해보려고 한다.사실 필자는 도커를 제대로 사용해본 경험이 없다.이번에 LG CNS AM Inspire Camp에서 도커 관련 내용을 수강하고 있

# INTRO 이전 포스팅에서는 Docker에서 사용되는 레이어드 아키텍처라는 개념과 간단한 커맨드를 입력하고 로그를 살펴보는 식으로 정리했다. 이번 포스팅에서는 이전에 설명없이 작성했던 부분에 대해서 조금 더 자세히 정리해보려고 한다 👀

어떻게 하면 Dockerfile을 효율적으로 사용할 수 있을까?이번 포스팅에서는 효율적인 Docker 이미지 생성을 위한 Dockerfile 작성 방법에 대해 간단하게 정리해보자 👀도커를 이용한 배포는 네트워크를 통한 배포가 가능하다는 특징이 있다.하지만, 이미지 파

이전 포스팅에서는 Dockerfile을 작성할 때 이미지 크기를 최적화하는 방법에 대해 알아보았다.이번에는 Dockerfile에서 자주 사용되는 RUN , CMD , ENTRYPOINT 등의 지시어들의 차이점과 각각의 사용 방법에 대해 자세히 알아보도록 하자 👀1\.

이번 포스팅에서는 컨테이너 내부에서 생성되는 데이터들을 관리하는 방법에 대해서 정리해보려고 한다.일반적으로 우리가 사용하는 컨테이너는 휘발성의 특징을 가지고 있다.즉, 컨테이너가 죽으면 내부의 모든 내용이 사라지는 특성이 있다.하지만, 우리는 컨테이너 내부에서 관리된

이전 포스팅에서 wordpress와 MySQL DB를 Bind mount하는 예제를 살펴봤었다.그 과정에서 --link 옵션을 사용하여 MySQL 컨테이너와 wordpress 컨테이너를 연결했는데, 실제로는 docker network 기능을 사용하여 연결하는 것이 더

이번 포스팅에서는 지금까지 진행했던 React 프로젝트와 Springboot 프로젝트, 그리고 MySQL DB를 도커라이징하여 컨테이너로 띄우는 과정을 정리하려고 한다.이 과정에서 여러개의 컨테이너를 띄우기 위해 Docker Compose를 사용할 예정이며 실제로 도커