[SeSAC] React - 실행 환경 React를 어느 환경에서 사용해야 할까요? React를 사용할 때, 어느 환경을 선택해야 하는지에 대한 고민 : 실습때 npm으로 React를 설치했는데 왜 프론트엔드에서 라이브러리를 추가해서 쓰질 않고 이렇게 하는지 궁금증이 생겼습니다. 1. React 설치 가능한 환경 - React 라이브러리는 브라우저 환경과 Node.js 환경에서 모두 사용 가능합니다. - 두 환경에서 React 라이브러리와 JSX 문법을 사용할 수 있습니다. 결론: React 코드 자체는 Node.js와 브라우저에서 동일하게 작동하지만, 어느 환경에서 사용할지에 따라 차이점이 있습니다. 2. 차이점 - 모듈 시스템: Node.js는 CommonJS 모듈 시스템을 사용하며, 브라우저에서는 ES6 모듈을 사용하는 것이 일반적입니다.. 2023. 9. 27. [SeSAC] React - 데이터 바인딩 1. 데이터 바인딩 화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것 저는 위의 데이터 바인딩 정의보다 아래 정의를 통해 더 이해가 되었습니다. 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터(여러 개의 JS 객체)를 일치시키는 것 제가 아는 회원가입의 경우를 예로들어 보면 (다른방식도 많을거라고 생각합니다.) 이 경우는 화면 데이터 --> 메모리 데이터 순서로 동기화를 한 경우입니다. 1. 유저는 ID,PW 와 같은 화면에 보여지는 사용자가 데이터를 입력하고 회원가입 버튼을 누릅니다. 2. 이때 이벤트를 발생시켜서 HTML요소 안에서 사용자가 입력한 데이터를 찾아서 변수에 할당(메모리에 저장)합니다. 3. 변.. 2023. 9. 26. [SeSAC] React 학습 정리(1) 1. React React는 웹 UI를 구성하기 위한 프론트엔드 자바스크립트 라이브러리이다. 2. React 프로젝트 생성 및 실행 방법 https://dksl00.tistory.com/57 - 리액트 프로젝트 이름 규칙 : 대문자 사용X, 단어 구분은 하이픈(-) 사용 - 프로젝트 생성 & 실행 : - npx create-react-app my-test-app - npm start * npx create-react-app my-test-app 명령어로 생성된 디렉토리 구조 * npm start 명령어로 서버 실행시 브라우저를 통해 접근 3. React는 단방향 데이터 바인딩 React는 단방향 데이터 바인딩을 지원하고 권장해서 데이터의 흐름이 한 방향으로만 흐르는 것을 지향 합니다. https://dk.. 2023. 9. 26. [SeSAC] 웹 풀스택 과정_프로젝트_새싹 커뮤니티 웹사이트 만들기(2) MVC 구조와 Sequelize 까지 학습 한 후에 진행한 팀프로젝트에 대한 회고록 입니다. 며칠 전 프로젝트 발표를 마친 후에 주말이 되어서야 회고록을 작성 합니다. 프로젝트는 대략 20일의 시간이 주어졌고 모든 팀은 그에 맞춰 기획,설계,개발,발표를 진행했습니다. 맡은 역할 백엔드 포지션에서 자유게시판 섹션 API 개발 및 개발일정 관리, 서버 배포 무슨 프로젝트 인가 청년취업 사관학교(새싹) 에서 교육을 받는 교육생들의 커뮤니티 게시판 프로젝트 입니다. 프로젝트 이름은 SesacIN 으로 질문과 답변으로 이루어진 지식인에서 따왔습니다. - 사이트 : https://sesacin.online - Github : https://github.com/SesacProjectTeamC/SesacIn GitHu.. 2023. 9. 24. [SeSAC] 웹 풀스택 과정_프로젝트_새싹 커뮤니티 웹사이트 만들기(1) MVC 구조와 Sequelize 까지 학습 한 후에 진행한 팀프로젝트에 대한 회고록 입니다. 1. 기간 : 9/4 ~ 9/22 2. 팀 구성 및 사용 기술 - 프론트 2명 CSS / Js / EJS / BootStrap - 백엔드 3명 Nodejs / Express / MySQL / ORM(Sequelize) 3. 주제 선정 - 주제 선정은 팀별로 진행하며 자유 주제 입니다. - 저희팀은 새싹(청년취업 사관학교)의 다양한 과정을 학습하고 있는 사람들이 이용할 수 있도록 질문과 답변 위주의 게시판 형식의 웹사이트를 만들기로 했습니다. 4. 설계 단계 ( ~ 9/7) 4-1. 개발에 들어가기 전 팀 회의를 통해 프로젝트 컨셉에 따라 필요한 기능들을 표로 정리 했습니다. 4-2. ERD(Entity Relat.. 2023. 9. 17. [SeSAC] 웹 풀스택 과정_프론트엔드와 백엔드에서의 자바스크립트 역할 / 클라이언트-서버 구조 3주 동안 HTML, CSS, JavaScript, Bootstrap, JQuery 등 흔히 프론트엔트라고 분류되는 것들을 배워서 직접 만든 페이지를 웹브라우저에 띄우는 것들을 해봤습니다. 그리고 4주 차에는 JavaScript로 프로그램을 만들고 그 프로그램을 Node.js 위에서 실행하기 위한 백엔드 수업이 시작되었습니다. 제가 작성한 자바스크립트 코드가 의도한 대로 동작할 수 있는 이유는, 브라우저 자체에 내장된 API들을 활용할 수 있기 때문입니다. 이렇게 웹브라우저는 자바스크립트 코드가 실행되기 위한 API 등의 환경을 제공해 주고 이런 환경을 런타임이라고 합니다. 따라서 웹 브라우저는 자바스크립트의 여러 런타임 중 하나로 볼 수 있습니다. 반면에 Node.js는 웹 브라우저와 유사한 방식으로 .. 2023. 8. 12. 이전 1 2 3 4 다음
