당니의 개발자 스토리

1/3 수업 시간에 다룬 ref에 대해서 review 할 것이다. ref란?참조(reference)의 줄임말로, DOM 요소나 컴포넌트에 직접 접근할 수 있게 해주는 참조값 이다. 즉, 특정 DOM 요소나 React 컴포넌트를 가리킬 수 있는 참조를 제공한다고 생각하면 쉽다. 이 ref를 통해 직접 접근이 가능해진다.  ref는 언제 사용할까?리액트에서는 상태(state), 속성(props)를 사용해서 사용자 인터페이스(UI)를 업데이트 한다. 그리고 이 값들이 바뀔 때마다 컴포넌트가 리렌더링 되는데, 이렇게 불필요한 리렌더링이 발생하면 성능에 부담이 된다.import React, { useState } from 'react';function InputComponent() { const [text, s..

LG CNS AM Inspire Camp 1기 최종합격을 했다.부트캠프를 진행하면서 AM의 중요성과 이를 위한 다양한 최신 기술들을 배우게 될 것이다.  그래서 오늘은 AM이 뭔지, 어떻게 AM이 나온 것인지 그 역사에 대해서 정리하고자 한다.정확히는 첫 수업에 대한 review 하는 내용이 될 것이다. AM(Application Modernization)은 무엇일까?먼저 아래의 [LG CNS AM 채용공고]를 보면 AM이 무엇인지 이해하기에 도움이 될 것이다. https://www.lgcns.com/employment/application-modernization-%EA%B2%BD%EB%A0%A5%EC%82%AC%EC%9B%90-%EB%AA%A8%EC%A7%91/ AM(Application Modern..

DOM은 웹페이지의 구조를 컴퓨터가 이해할 수 있는 형태로 바꾼 것이라고 생각하시면 됩니다.웹페이지는 HTML로 되어 있는데, 이 HTML을 자바스크립트가 다룰 수 있도록 객체(Object) 형태로 만들어 놓은 게 DOM입니다. 쉽게 말해, 웹페이지의 원본 구조를 자바스크립트가 조작할 수 있게 해주는 창고라고 생각하면 돼요.예를 들어, 우리가 자바스크립트로 "이 버튼을 클릭하면 텍스트가 바뀌게 하고 싶다"고 할 때, DOM을 통해 버튼이나 텍스트와 같은 HTML 요소를 찾아서 바꿀 수 있습니다. DOM은 문서 자체를 트리 구조로 관리한다. 가상 DOM (Virtual DOM)가상 DOM은 이름 그대로 가상으로 존재하는 DOM입니다.웹페이지에서 많은 변화가 일어날 때, DOM을 매번 실제로 업데이트하는 건..

1교시 클래스형과 함수형 컴포넌트를 지난 시간에 봤었고 외부에서 컴포넌트 쪽으로 값을 넘겨 주는 거 props 변수에 대해서 봤고요컴포넌트 내부에서 사용하고 있는 값, status 변수를 봤습니다. props 변수는 컴포넌트 외부에서 부모 컴포넌트가 자식 컴퍼넌트에게 넘겨 주는 값이다. props 변수를 통해서 컴포넌트가 아주 유연하게 재사용 될 수 있도록 해준다는 거예요. 어떤 값을 넘겨주냐 따라서 동일한 형태 와 동작을 제공 하는데 안에 내용은 바껴가지고 동작을 하는 거죠Class형 컴포넌트의 경우에는 this.props라는 변수를 가지고 props 변수를 끄집어낼 수 있고함수에서는 매개변수를 이용해서 매개 변수로 전달 된 인자 값을 이용해서 가지고 올 수 있다.둘 다 개체 형태로 전달이 됩니다. S..

강사: 박창렴myanjini@gmail.com010-2982-7033 데이콤에서 일했었음 https://poiemaweb.com/ 웹 프로그래밍 튜토리얼 | PoiemaWebFront-end Development Tutorialpoiemaweb.com참고하면 좋은 사이트  1교시AM 기존 어플리케이션 환경을 현대화한다.최근에 나오고 있는 여러가지 개발 트렌드나 아키텍처 등을 반영해서 현대화하는 과정이다. 클라우드 네이티브는클라우드 환경에 최적화 되어서 수행될 수 있는 어플리케이션을 개발하는 것을 말한다. gpt[좀 더 쉽게 설명하면, 클라우드는 인터넷을 통해 컴퓨터 자원을 빌려서 쓰는 방식이고, 네이티브는 원래 태어난 환경을 의미해요. 그래서 클라우드 네이티브는 애플리케이션이 클라우드 환경에서 원활하게 ..

블로그 효과적인 블로그 구성 요소 1. 소개글내가 어떤 사람인지, 어떤 분야를 목표, 뭘 해왔는지2. 프로젝트 사례 (경험)어떤 기술, 어떤 버전을 썼는지, 검색한 것과 개발의 과정 및 결과물을 공유3. 문제 해결 과정트러블 슈팅, 한번에 결과물이 나오진 x, 자기가 문제를 어떻게 해결했는지문제를 직면했을 때 어떻게 해쳐나갔는지최근에 겪은 힘든 일, 문제는 어떤 일이 있었는지. 그걸 어떻게 풀려고 했는지 미리미리 정리하기프로젝트 진행하면서 맞닥뜨린 문제일을 통해서 앞으로 나아갈 점이 프로젝트를 하면서 무엇을 배웠고 무엇을 하고있고 어떤 걸 희망하고 어떤 걸 지양한다를 블로그로 정리4. 배운 점 및 결과  블로그 작성 시 유의사항우리의 목표는 포트폴리오임정확한 주제를 선정하는 것은 '기술 블로그'를 초점에..

실전 예제 4 - 상속관계 매핑 저희가 배운 상속관계 맵핑을 가지고, 실전에서 어떻게 쓰는지 실전 예제를 한번 보겠습니다.저희가 했던 쇼핑몰에서 요구사항이 추가된 거예요. 상품의 종류는 음반, 도서, 영화가 있고 이후에 더 확장될 수 있다. 모든 데이터는 등록일과 수정일이 필수다. 이제는 무슨 말인지 알겠죠? 위에 말은 상속관계 맵핑을 쓰고, 아래 말은 @MappedSuperclass를 써야된다는 거겠죠.그래서 도메인 모델을 보면 상품의 도서, 음반, 영화 이런 식으로 상속관계로 맵핑을 했구요.이거를 보시면 기존 거에다가 Album, Book, Movie 한 다음에 상속관계로 만들었습니다. 자 이렇게 하고테이블은 보시면 저는 싱글 테이블로 설계했습니다. 이제 어떻게 하면 되는지 한번 보겠습니다. jpas..

Mapped Superclass - 매핑 정보 상속자 이번에는 @MappedSuperclass 라는 것에 대해서 설명을 해드리겠습니다.일단 이거는 상속관계 맵핑이랑 별로 관계가 없습니다.자 얘가 뭐냐면,이렇게 예를 들어 볼게요. 예를 들어서 상속 관계를 맵핑하려면 이전 시간에 배웠던 그거대로 해야 되거든요. 테이블까지 되게 고민해야 되잖아요. 이건 그런 게 아니고 그냥 진짜 단순하게 객체 입장에서 id랑 name이라는 필드가 계속 나오는 거예요. id랑 name이라는 필드가 Member에도 나오고 Seller에도 나오고 계속 나오는 거예요. 그러니까 맨날 객체 클래스를 만들 때마다 막 id랑 name을 넣어야되는 게 귀찮다보니, 부모 클래스에 두고 속성만 상속해서 사용하고 싶죠.아래 그림을 보면, @Ma..