안녕와 같이 HTML 텍스트를 그대로 렌더링 하기 위해선 dangerouslySetInnerHTML를 사용할 수 있다. dangerouslySetInnerHTML란? HTML 텍스트를 동적으로 렌더링할 수 있는 리액트의 속성이다. 리액트 컴포넌트에 직접적으로 HTML 코드를 삽입할 수 있다. __html이라는 key를 가지고 있으며, 이를 통해 렌더링 할 HTML 코드를 문자열 형식으로 전달한다. 사용법 import React from 'react'; function Component(){ const markup = { __html: "contains HTML!!" }; return ; } 주의점 이름에서도 dangerous라고 나타나듯이, 위험하게 설정된 HTML을 뜻한다. XSS(Cross-site ..

노드와 리액트를 연동시키기 위한 세팅을 알아보겠다. 프로젝트 생성 터미널에서 하단의 내용들을 순서대로 입력해준다. Node.js 서버 생성 $ mkdir node_react $ cd node_react $ npm init node_react 파일을 만들고 들어간다. $ npm install mongoose --save $ npm install express --save $ npm install nodemon concurrently --save-dev 몽고 DB 연동을 위한 mongoose Node.js의 웹앱 프레임워크인 Express 여러 개의 명령어를 동시에 실행하는 nodemon concurrently. 변경될 때마다 자동으로 재실행되게 한다. React App 생성 $ npm create reac..

자바 미니 프로젝트에 이어, JSP와 Servlet을 배우고 이를 활용해 세미 프로젝트를 진행하였다. 즐거웠던 프로젝트 후기를 써보려고 한다! 팀은 나를 포함한 5명의 팀원으로 구성되었으며 강사님께서 팀은 강의실에 앉은자리대로 나누셨지만, 우리 조는 마지막에 정해졌기 때문에 맨 뒤, 중간, 맨 앞의 자리에 앉은 사람들로 모이게 되었다. 그래서 팀명은 '외곽순환도로'로 정해졌다. 😁 🚗 PROJECT 프로젝트 주제는 마켓컬리 쇼핑몰을 구현하는 것으로 정하였다. 온라인 쇼핑몰 중에서 마켓컬리가 가장 깔끔한 레이아웃이라고 생각했으며 구현할 수 있는 다양한 기능이 있었기 때문이다. 물론 코딩을 하면서 구현하는 것은 깔끔하지 않더라는 말을 하기도... 프로젝트 기간은 일주일간 진행되었다. 하필 학원이 비대면으로 ..

3주 벌써 국비 학원 다니기 시작한 지 3주가 되었다! 시간이 증말 빠르당 처음엔 학원 다니는 자체가 낯설어서 긴장도 많이 됐었고 하루 종일 앉아서 공부해야 되다 보니 무리해서 몸살로 고생하기도 하였다ㅠㅠ 그래도 이제는 나름 적응이 돼서 어떻게 공부해야 되겠다는 갈피가 잡히고 있다. 오픈마인드로 동기들과 인사도 하며 점점 알아가고 있는 중이다! 전 기수 분들을 보니 서로 친하시던데 우리 반도 나중에 그럴 거라고 생각하니 기대가 되었다 (mbti I에서 E로 변했더니^^,,) 전공자 비전공자 모두 섞여있지만 서로 알려주고 공유하면서 함께 성장하는 우리 반의 분위기가 너무 좋은 것 같다. 나의 부끄러운 블로그를 공유하는 유일한 동기분이 있는데 이 글을 보고 계실지 모르겠지만,, 파이팅 해 봅시다👊 학원 St..