영차0charBOSS

[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 클래스를 이용할 경우, 컴포넌트..

CS/네트워크

[모든 개발자를 위한 HTTP 웹 기본지식] 04- Http 메서드

2023.10.07

1. HTTP 만들어보기 요구사항 -> 회원 정보 관리 API를 만들어 보자 (진짜 백엔드 x, 개념적 설계 o) 기능 요구사항 -> 회원 목록 조회/ 회원 조회 / 회원 등록 / 회원 수정 / 회원 삭제 기능에 따른 API URI 설계 회원 목록 조회/ read-member-list 회원 조회/ read-member-by-id 회원 등록/ create-member 회원 수정/ update-member 회원 삭제/ delete-member -> 이건 좋은 URI 설계가 아님 1-1. API의 URI (Uniform Resource Identifier)설계시 고려사항 resource 란 회원 등록, 수정, 조회가 아니다. 회원이라는 개념 자체가 바로 리소스 이므로 리소스 식별은 회원을 등록하고 수정하고 조..

CS/네트워크

[모든 개발자를 위한 HTTP 웹 기본지식] 03- Http 기본

2023.10.07

1.HTTP HyperText Transfer Protocol 의 약자로 지금은 모든 것을 HTTP 메시지에 담아서 전송. IMAGE,음성 , 영상, 파일 JSON, XML (API) 거의 모든 형태의 데이터 전송 가능 서버 간 데이터 송수신에도 대부분 HTTP 를 사용한다. (TCP만 직접 이용하는 경우는 거의 없음) 2.HTTP의 역사 HTTP 2.0과 3 버전은 성능 개선에 초점을 맞추었기 때문에 1.1 버전에 맞추어 정리 3. 기반 프로토콜 TCP : HTTP/1.1 , HTTP/2 UDP : HTTP/3 현재는 HTTP/1.1 주로 사용 4. HTTP 특징 client - server 구조 stateless protocol 비연결성 HTTP message 단순하며 확장 가능 4-1 . clien..

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시 특정 작업을 처리합니다. 먼저..

CS/네트워크

[모든 개발자를 위한 HTTP 웹 기본지식] 01- 인터넷 네트워크

2023.10.03

01. 인터넷 통신 인터넷 망에서 컴퓨터들은 어떻게 통신할까요?? 예를 들어 물리적으로 클라이언트 옆에 서버가 있다면 , 간단하게 케이블을 연결해서 'Hello, world!'라는 메시지를 보내면 통신이 된다. 하지만, 클라이언트와 서버 중간에 인터넷망이 있다면 어떻게 통신이 될까? 예를 들어 클라이언트가 한국에 있고 서버가 미국에 있다면, 한국에 있는 클라이언트가 'Hello, world!'라는 메시지를 미국에 있는 서버로 보내는 과정에서 해저광케이블이나, 인공위성등으로 보내면서 수많은 중간 노드라고 하는 서버들을 거쳐 미국에 있는 서버에게 안전하게 메시지를 보내야한다. 이러한 과정에서 어떤 규칙으로 미국에 있는 서버에 안전하게 도착할 수 있는지 이해를 하기 위해서는 IP 프로토콜을 알아야 한다. 02..

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.. 이 개념을 웹에 ..

전체 글

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

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

[모든 개발자를 위한 HTTP 웹 기본지식] 04- Http 메서드

[모든 개발자를 위한 HTTP 웹 기본지식] 03- Http 기본

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

[모든 개발자를 위한 HTTP 웹 기본지식] 01- 인터넷 네트워크

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

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

티스토리툴바