반응형

전체보기 160

[React] Component, Props란? 클래스형/함수형 컴포넌트, 컴포넌트에 변수 전달하기

목차 Components란? 컴포넌트는 재사용할 수 있는 단위를 말한다. 레고로 자동차를 만들 때, 다양한 크기의 블럭을 조립하여 만들 듯이 공통되는 UI를 조각내고 다양한 곳에서 조립하듯이 앱을 만들 수 있도록 나누는 것이 컴포넌트이다! //리액트 컴포넌트 예시 //클래스형 class App extends React.Component { render() { return Hello world! } } ▶ 컴포넌트 //함수형 function Head(){ return ( 제목1 제목2 ); } ▶ 컴포넌트 우리는 이미 리액트 컴포넌트를 사용해봤다. 리액트 컴포넌트는 HTML에 정의된 태그가 아닌 , 와 같이 사용자 정의 태그를 만드는 것이라 생각해도 될 것 같다. 클래스형 컴포넌트 React.Compone..

Front 2023.02.04

[React] Element. 변경된 부분만 다시 렌더링하자

목차 Element const element = Hello, world; 리액트의 가장 작은 단위이다. Component와는 다르다! Element는 Component의 구성요소이며 화면에 렌더링할 DOM 정보를 React에 알려주는 객체이다. Element가 있기 때문에 값이 변경된 부분만 다시 렌더링 할 수 있다. 어떻게 가능할까? JS의 경우 변경점은 시간 뿐임에도 불구하고 root부터 모든 태그가 전체적으로 다 변경된다. React의 경우 //root 아이디를 가진 태그를 찾아서 루트로 선언한다 const root = ReactDOM.createRoot( document.getElementById('root') ); //현재 시간을 보여주도록 jsx 작성 function tick() { //ele..

Front 2023.02.04

[React] JSX(JavaScript XML) 문법

목차 순수 HTML 파일에서 React를 사용해보자 일단은 순수 HTML에서 React를 사용하는 방법을 알아보자. CDN으로 불러오는 라이브러리들은 무슨역할을 하고있는걸까? React - 가장 기본적으로 필요한 라이브러리이다. Babel - 리액트는 JSX라는 문법을 사용하는데, 이 Babel이 JSX를 JS로 변환해준다. - JSX는 다음에 자세히 알아볼 예정. 예제에서 return Hello world! 부분이 JSX가 사용된 부분이다. React-DOM - 최종적으로 Babel을 통해 JS로 변환된 코드를 HTML DOM으로 변환해준다. - 이런 태그는 HTML에 존재하지 않는다. 이런 특이한 태그들을 HTML DOM으로 변환해준다. Script 설명 render() : DOM 노드 렌더링 시 필..

Front 2023.01.27

[React] 프로젝트 셋팅

저는 JS와 부트스트랩으로 웹사이트를 만들어본 경험이 있는데 쌩 HTML, CSS, JS로 프론트를 관리하다보면... 만든사람만 알게되는 구조가 되고 심지어 만든사람조차 이게 어디서 호출되는 함수인지 알수없는 현상이 발생하더라구요 그래서.. 프론트엔드 개발자가 사용하는 가장 유명한 라이브러리, React를 배워보려합니다! React가 뭘까?! 간단하게 말해서 웹사이트를 만들 수 있는 자바스크립트 라이브러리. 동적으로 웹사이트를 변화시키려면 수많은 작업이 필요한데, 이 수많은 작업을 쌩 Javascript로만 관리하기엔 복잡하고 어려워서 나오게 된것이 리액트입니다. React 프로젝트 셋팅하기 1. Node.Js 설치 https://nodejs.org/en/ 해당 사이트에 접속해서 LTS 버전 설치 (20..

Front 2023.01.05

[SpringBoot] UnexpectedRollbackException: Transaction silently rolled back because it has been marked as rollback-only 해결후기

목차 상황 1. 이벤트에 당첨된 경우 휴대폰번호를 입력하고 [쿠폰받기] 버튼을 누르면 쿠폰이 즉시 발송된다. 2. 근데 가끔씩 [쿠폰받기] 버튼이 눌린채로 아무런 반응이 없는 경우가 있다. (브라우저 자체가 멈춘다던가... 아무런 액션 없이 그냥 대기만 한다던가...) 3. 기다려도 응답이 없으니 사람들은 [쿠폰 안받기] 버튼을 누른다. 4. [쿠폰 안받기] 버튼을 누르면 당첨내역을 초기화시킨다. (다른사람에게 할당되어야하므로) 서버에 찍힌 로그는 아래와 같다. 2022-12-05 10:45:24 쿠폰받기 시작 2022-12-05 10:45:25 쿠폰안받기 시작 2022-12-05 10:45:25 쿠폰받기-쿠폰발송 성공 2022-12-05 10:45:26 쿠폰안받기 종료 2022-12-05 10:45:2..

Backend 2022.12.06

[SpringBoot] Jpa Connection Minimum-Idle 설정하지 말자... 에러 후기

한동안 DB에 커넥션에러가 발생했어서 maximum-pool-size를 설정주었는데 minimum-idle 셋팅도 있어서 같이 셋팅해주었었다. spring: datasource: hikari: ... minimum-idle: 5 maximum-pool-size: 10 그런데..... 처음보는 에러가 발생했다 HikariPool-1 - Connection is not available, request timed out after 45005ms. 오잉???? 이상하네 이 서버는 처음띄우는 서버가 아니라 이전에도 계속 돌아가고있었던 서버고, 사실 커넥션 에러가 날거였으면 요청이 더 많았을 때 에러가 났어야했는데.. 지금은 요청이 상대적으로 적은편인데 에러가 나서 의아해했다 여러가지 이유가 있었겠지만 단편적으로..

Backend 2022.12.04

[SpringBoot] Apache Poi를 이용한 엑셀다운로드는 SXSSF를 쓰자..!

목차 에러 발생!!!!!!!!!!!! https://lotuus.tistory.com/145 [SpringBoot] Apache Poi를 이용한 엑셀 다운로드 구현 목차 통계 API를 만들다보면 화면에도 값을 보여주어야하고, 엑셀 다운로드도 가능해야합니다 ㅎㅎ 대표적으로 사용되는 Apache Poi를 이용하여 엑셀 다운로드를 구현해보겠습니당! 예제 UserPoint En lotuus.tistory.com 예전에도 엑셀다운로드 게시글을 올렸었는데, 운영에서 갑자기 힙메모리가 부족하다며 Out Of Memory 에러가 발생했다..... 이유는 두가지였다 첫번째 ) 요청 중복 필터링 안함 화면에 보이는 엑셀 다운로드 버튼을 누르고, 실제 다운로드 창이 뜰때까지는 시간이 좀 걸린다 그런데 참을성 없는 분들이 기..

Backend 2022.12.03

Spring Jpa SelfJoin 순환참조 방지하며 다른 엔티티와 맵핑하기

목차 보통 셀프조인은 카테고리처럼 1차, 2차, 3차.... 무한정으로 늘어날 수 있을 때 사용되는데, 하나의 테이블로 모든 관계를 정의할 수 있어서 유용하게 쓰인다. 셀프조인 형태로 구현한 카테고리 엔티티와 메뉴 엔티티를 맵핑하고 Json을 내려주는 과정에서 어떻게 순환참조를 피할 수 있을까?? 예시데이터 카테고리 메뉴 내가 원하는 응답값 카테고리 { "message": "카테고리 정보를 조회하였습니다.", "data": { "id": 2, "categoryCode": "soup_stews", "categoryName": "찜_탕_찌개", "parent": { "id": 1, "categoryCode": "koreanfood", "categoryName": "한식", "parent": null, "ch..

Backend 2022.11.09

Server-Sent Event (SSE)란? feat Node.js

목차 기존 프로젝트에선 백엔드 -> 프론트로 데이터를 보내줄때 웹소켓을 사용하였다. 웹소켓은 양방향인데, 굳이 프론트 -> 백엔드방향으로 연결되어있을 필요가 없어서 이것저것 찾아보니 SSE를 알게되었고, 사용해보았다! SSE란 ? SSE는 서버의 데이터를 실시간으로 스트리밍 하는 기술이다. 변경된 데이터를 가져오기 위해 지속적으로 API를 호출하여 동기화하는 작업을 없앨 수 있는 것이다! - 웹소켓은 WSS 프로토콜을 따로 사용하지만 SSE는 HTTP를 사용하기때문에 별다른 서버 셋팅이 필요하지 않다는 장점이 있다. - 클라이언트와 서버가 최초 한번 HTTP연결을 맺으면 그 뒤로 서버가 클라이언트에게 지속적으로 데이터를 보낼 수 있다. EX ) 서버에서 가끔씩 데이터를 받아야하는데, N초동안 데이터가 실..

Backend 2022.09.20

AWS Lambda | 람다란? 동작방법, DB 커넥션, InvocationType, Serverless

목차 Lambda(람다)란? 람다는 아마존 웹서비스에서 제공하는 서버리스 컴퓨팅 서비스이다. * 서버리스란? 별도의 서버 셋팅없이 바로 코드를 실행할 수 있는 환경을 말한다. 따라서 서버를 계속 띄우기 보다, API를 호출할때만 서버를 동작하게 하고싶을 때 람다를 사용하면 유용하다! 람다는 어떻게 동작할까? - 람다가 실행시킬 수 있는 코드용량은 250MB 이다. - 함수 실행시간은 최대 15분 - 하나의 람다함수는 하나의 실행환경(컨테이너)에서 실행된다. - 람다는 함수가 호출될때 새로운 컨테이너를 띄워 처리한다. -> 가볍게 확장이 가능하다. -> Stateless. = 별도의 상태를 저장하지 않는다. = DB Connection등을 유지할 수 없다. (개념적으로는 그렇다.. Warm Start경우엔..

Infra 2022.09.18
반응형