2024.02.07 - [프로그래밍 공부/Javascript] - [혼공JS] 리액트 시작하기 2024.02.08 - [프로그래밍 공부/Javascript] - [혼공JS] SQL 간단 예제 및 CRUD 예제 2024.02.09 - [프로그래밍 공부/Javascript] - [혼공JS] 리액트 JSX 2024.02.09 - [프로그래밍 공부/Javascript] - [혼공JS] API와 RESTAPI 리액트를 처음 접하고나서의 나의 심정입니다. 아니... 자바스크립트 라이브러리라며! 왜 새로운게 계속 나와욧! 자바스크립트 문법에서 이어서 나가는거 아니였나.... 어렵네요 어려워요 이번 달에는 멋지게 react -express - mysql 로 프로젝트를 완성하고 싶었는데 갈길이 아주 멉니다 거기에 공부할..

RESTAPI, RESTful한 개발 등등 도대체 RESTAPI가 뭔지 몰라 찾아보고 간단하게 정리하고자 합니다. -AWS 학습페이지 참조 https://aws.amazon.com/ko/what-is/restful-api/ API란? 애플리케이션 프로그래밍 인터페이스(API)는 다른 소프트웨어 시스템과 통신하기 위해 따라야 하는 규칙을 말한다. 즉 백엔드 서버와 클라이언트 간에 통신으로 데이터를 주고 받기위한 개발자가 설정한 규칙을 말하는거 같다! (오류 있을수 있습니다. 반박시 여러분의 말이 맞습니다.) RESTAPI REST 설계 규칙을 따르는 API를 REST API 를 뜻한다. GET : 리소스 조회. GET 메서드는 데이터를 가져올때만 사용 PUT : 요청 데이터를 사용하여 새로운 리소스를 생성..

JSX란? - JSX(Javascript Syntax eXtension)는 Javascript 확장한 문법이다 - JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아니다 - JSX는 자바스크립트 코드보단 HTML코드 처럼 보이며 좀더 간결하고 보기 쉽다. - div, span 태그들을 사용할 수 있으며 앞으로 만들 컴포넌트도 html태그 쓰듯이 쉽게 작성가능 앞서 React.createElement 를 사용할 경우 사용하기 너무 복잡하기에 리액트 팀은 언어 확장형태로 React를 보다 쉽게 사용할 수 있게 JSX문법을 만들었습니다. 매번 DOM을 추가할때 마다 React.createElement를 호출하여 작성하기 보단 JSX로 간결하게 작성하여 개발하기 쉽게 진행할 수 있..

백엔드 프로젝트를 위해 mysql을 공부한 TIL 데이터베이스 데이터베이스는 엑셀과 같이 데이터를 저장하고 관리하기 쉽고 사용하기 쉽게 만들기 위해 만들어진 시스템이다. 엑셀보다 좋은 이유 - 작은 용량의 데이터라면 엑셀도 가능하지만 수십 수만 TB의 데이터들을 입출력하기 위해선 데이터 베이스가 필요하다. 기본 사용 예제 테이블 생성 명령어 Create Table [테이블 이름] ( 열 - 엑셀 시트 테이블 생성 CREATE TABLE Users ( ID INT AUTO_INCREMENT PRIMARY KEY, Name VARCHAR(50) NOT NULL, id VARCHAR(100) UNIQUE NOT NULL, pass VARCHAR(15) ); 이 쿼리는 "ID", "이름", "이메일" 및 "패스..

혼공JS에서 리액트를 맛봤으면서 왜 또 다시 시작하냐?! 라고 생각할 수 있지만 이번엔 좀더 딥하게 알고 넘어가고자 한다. React --사용자 인터페이스를 만들기 위한 JavaScript 라이브러리임 프레임워크가 아니다 React 특징 컴포넌트 기반의 개발 방식 복잡성 감소 재사용 특화 오직 View만 신경씀 효율적인 렌더링을 위한 Virtual DOM 사용 지속적으로 데이터가 변화하는 대규모 애플리케이션에서 사용하기 적합함 업데이트 처리 간결성을 제공 UI를 업데이트하는 과정에서 생기는 복잡함을 모두 해소하고, 더욱 쉽게 업데이트에 접근 오해 가상 돔을 사용한다고해서 무조건 빠르다는건 아님 코드 최적화를 한다던가 아니면 단순히 라우팅만 있는경우 리액트가 더 느려질 수 도 있습니다. React 사용 이..

2024.02.06 - [프로그래밍 공부/Javascript] - [혼공JS] React 시작하기 2024.02.07 - [컴퓨터 사이언스/컴퓨터 구조 & 운영체제] - [혼공JS] Express 서버 시작하기 2024.02.01 - [프로그래밍 공부/Javascript] - [혼공JS] 미니 프로젝트 2 - Todo list 사실 처음 목표를 간단한 웹 게시판을 AWS에 배포까지 완료하는걸 목표로 하고있었습니다..... 그런데 지금 모양새를 보아하니 음.... React하고 나면 못할거 같은뎅.....너무 목표가 거대했나... 어쨋든 영차영차 힘내서 마지막 데드라인 16일 까지 웹 배포까지 완성해볼 계획입니다. (6주차 미션은 16일에 올리겠다는 지각 선전포고) 미니 프로젝트 2도 완성 했습니다 - T..

리액트의 특징 리액트만의 특별한 문법 : JSX 를 사용함 단방향 데이터 바인딩 가상 돔 선언형 프로그래밍 컴포넌트 기반 가장 중요한 : SPA (Single Page Application) 단 하나의 페이지에서 페이지 새로 고침없이 데이터만을 변경 가능함! React 시작하기 전 설정 우선 Node.js 구성을 좀더 새로운 방식으로 진행하고싶었습니다. (아무것도 모르지만 일단 도전) 버전관리 - FNM -- 기존 NVM 보다 빠른 속도 패키지 관리 - PNPM -- 기존 NPM 보다 디스크 공간 절약 Node 버전 - LTS 버전 번들러 - Vite -- 기존의 웹펙보다 빠른 속도 FNM 설치 & Node.js 설치 & PNPM설치 https://github.com/Schniz/fnm https://p..

chatgpt 선정 입문용 프로젝트 2번째 Todo list를 만들어 볼 시간입니다. 아니 근데 이미 DOM객체 조작에서 다 한거 아니냐구요? 맞습니다. 하지만 이번엔 조금더 추가하여 만들어 보려고 합니다. 이름하여 뽀모도르 투두리스트 저는 업무나 공부를 하다보면 30분 40분이 넘어가면 집중력이 흩어지고 생각이 어지러워지는데 이번에 만들어내는 Todo로 도움이 되었으면 좋겠습니다. 프로젝트명 : TO-DO list & 타이머 기능 정의 입력칸에 Todo를 넣으면 객체 또는 배열에 저장됨 저장된 Todo를 리스트로 출력함 삭제버튼을 누르면 Todo를 삭제함 시작 버튼을 누르면 타이머가 동작함 (30분) 타이머를 이용한 뽀모도르 및 타이머 완료후 todo 완료기능(취소선) 구현 css 는 부트스트랩 대체!..