'SeSAC' 카테고리의 글 목록

2차 프로젝트 회고 [열줌쉬어]

2023.11.20

프로젝트 소개 열줌쉬어는 학습자를 위한 웹 서비스로 스탑워치/타이머 기능을 통해 실시간으로 공부시간을 기록하고, 가입한 그룹 내에 공부량을 시각화하여 보여주는 웹 사이트 입니다. 개발 기간23. 10. 23 ~ 23. 11. 10 (약 2주) 사실 진행중 개발 환경 Language, Framework - Javascript, React DataBase - MySQL, MongoDB Devops - AWS EC2, AWS RDS, Nginx 기술 스택 프론트 엔드 - 2명ViteReactJSJavaScriptRedux-ToolkitTailwindCSSSocket.IO- client 백엔드 - 3명ExpressMongooseSequelizeJWT (jsonwebtoken)Socket.IOMongoDB, AW..

SeSAC

[SeSACXCodingOn] 웹풀스택과정 14W_02 : React hook form

2023.10.16

React hook form React hook form은 react 기반의 폼 관리 라이브러리로, 폼 상태와 유효성 검사를 처리하기 위한 간편한 방법을 제공하고 있습니다. 이를통한 폼 컴포넌트의 개발과 유지 보수를 용이하게 할 수 있습니다. React hook form 을 사용하면 폼 컴포넌트의 상태 및 유효성검사를 관리하는데 필요한 코드의 양을 대폭 줄일 수 있습니다. 폼 요소의 값이나 상태변경에 대한 이벤트를 관리하기 위해 명시적인 이벤트 핸들러를 작성할 필요 없이 단순히 hook (useForm)을 사용하여 관련 데이터를 추적하고 업데이트 할 수 있습니다. Register 입력 요소에 연결하기 위한 함수로 이 함수를 통해 입력 요소에 유효성 검사 규칙을 설정합니다. handleSubmit 폼의 제..

SeSAC

[SeSACXCodingOn] 웹풀스택과정 14W_01 : 리액트 라우터

2023.10.16

웹 렌더링SPA (Single Page Application)SPA(Single Page Application)는 단일페이지로 기존의 서버 사이드 렌더링과 비교할 때, 배포가 간단하며 네이티브 앱과 비슷한 사용자 경험을 제공한다는 장점이 있습니다. SPA는 웹 앱에 필요한 모든 정적 리소스를 처음에 한번 다운로드합니다. 페이지 간 이동시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소시킬 수 있고, 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공할 수 있습니다. 그러나, SPA는 처음에 모든 정적 리소스를 한번 다운로드하기 때문에 초기 구동속도가 느린편입니다. 또한 SEO(..

SeSAC

[SeSACXCodingOn] 웹풀스택과정 13W_02 : 리액트 (3)

2023.10.11

React style리액트에서 스타일을 적용하는 방법은 일반 CSS 적용Sass Style Components3가지 방식이 있다. 첫번째로 일반적인 CSS 적용에서는 소규모 프로젝트에 적합하다. 2번째 Sass 는 Syntactically Awesome Style sheets의 약자로 css 전처리기를 이용하여 복잡한 작업을 보다 쉽게 가능하게 할 수 있다. 마지막으로 Styled components 란 자바스크립트 안에서 CSS를 작성하도록 도와주는 CSS-in-JS 라이브러리로 컴포넌트 기반의 설계 양식이다. css 전처리기란? 자신만의 특별한 문법을 가지고 CSS를 생성하는 프로그램으로 변수, 함수 개념을 사용하여 재활용성과 가독성을 높인다. CSS (1)기존 CSS 클래스를 이용할 경우, 컴포넌트..

SeSAC

[SeSACXCodingOn] 웹풀스택과정 12W_03 : 리액트 (2)

2023.10.06

[🌱목차🌱] Life Cycle 함수형 컴포넌트 클래스형 컴포넌트 실습 hooks useMemo useCallback useReducer 커스텀 훅 +) 회고 1. Life CycleLife cycle은 실행부터 종료까지를 말하며 모든 리액트 컴포넌트에 존재합니다. Life Cycle의 용어를 알아보자면, Mount 컴포넌트가 처음 실행될 때 그것을 Mount라고 표현합니다. DOM이 생성되고 웹 브라우저 상에 나타남 Update props 나 state 가 바뀌었을 때 업데이트 Unmount 컴포넌트가 화면에서 사라질 때 [Life Cycle 이해하기]01 - 1. 함수형컴포넌트함수형 컴포넌트에서는 useEffect()를 사용하여 Mount, Update, Unmount시 특정 작업을 처리합니다. 먼저..

SeSAC/javascript

[SeSACXCodingOn] 웹풀스택과정 07W_19_01 : MYSQL 연동하기

2023.08.29

[🌱목차🌱] mysql 연동하기방명록 추가하기'등록'된 내용이 아래 Table에 바로 보이기 방명록 지우기삭제 바로보이기 +) Rest API +) insertAdjacentHTML? 이번 수업때는 맨날 임시로 DB에서 받아왔다고 가정을 했었는데 이번엔 직접 DB에서 받아오기를 해보겠습니다. 01. mysql 연동하기 먼저 mysql 연결을 위한 mvc 프로젝트 디렉토리를 생성해줍니다. 그 다음 DB 테이블을 생성합니다. npm install mysql 로 mysql 모듈을 설치해줍니다. -- user 라는 새로운 계정 생성 - mysql 사용자 추가하기 CREATE USER 'user'@'%' IDENTIFIED WITH mysql_native_password by '1234'; --user 계정에 D..

SeSAC/javascript

[SeSACXCodingOn] 웹풀스택과정 06W_3_18 : MVC (+라우터쪼개기)

2023.08.25

[🌱목차🌱] 디자인 패턴이란? MVC 디자인 패턴이란? +) 라우터 쪼개기 해보기 01. 디자인 패턴이란? 디자인 패턴은 소수의 뛰어난 앤지니어가 해결한 문제를 다수의 엔지니어들이 처리 할 수 있도록 한 규칙이면서, 구현자들 간의 커뮤니케이션의 효율성을 높이는 기법입니다. 02. MVC 디자인 패턴이란? Model View Controller의 약자로 애플리케이션을 세가지의 역할로 구분한 개발 방법론입니다. 사용자가 controller를 조작하면 controller는 Model을 통해서 데이터를 가져오고 그 정보를 바탕으로 시각적인 표현을 담당하는 View를 제어해서 사용자에게 전달하게 됩니다. [MVC를 이용한 웹 프레임워크] PHP Django Express Angular Etc.. 이 개념을 웹에 ..

SeSAC/javascript

비동기 처리

2023.08.15

01. 비동기 처리란? 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성입니다. 비동기처리의 이유는 클라이언트가 서버로 데이터를 요청 시 , 서버가 언제 그 요청에 대한 응답을 줄지 모르는데 마냥 다른 코드를 실행하지 않고 기다릴 순 없기 때문입니다. 만약 동기 처리로 실행하게 된다면 웹을 실행하는데 수십분이 걸리는 대참사가 일어나게 됩니다. //편의점에 들어가서 음료수를 사고 나오는 상황 function goMart() { console.log('마트에 가서 어떤 음료를 살지 고민한다.'); } function pickDrink() { setTimeout(function () { console.log('고민 끝!'); product = '제로콜라'..

2차 프로젝트 회고 [열줌쉬어]

[SeSACXCodingOn] 웹풀스택과정 14W_02 : React hook form

[SeSACXCodingOn] 웹풀스택과정 14W_01 : 리액트 라우터

[SeSACXCodingOn] 웹풀스택과정 13W_02 : 리액트 (3)

[SeSACXCodingOn] 웹풀스택과정 12W_03 : 리액트 (2)

[SeSACXCodingOn] 웹풀스택과정 07W_19_01 : MYSQL 연동하기

[SeSACXCodingOn] 웹풀스택과정 06W_3_18 : MVC (+라우터쪼개기)

비동기 처리

티스토리툴바