TIL

[240627]Today I Learned 시작

[240627] 2. 마음먹은 김에 5일간 배운 html, css today는 아니지만 TIL 적기

SPA(Single Page Application) vs MPA(Multiple Page Application)

CSR(Client Side Rendering) vs SSR(Server Side Rendering)

React Router

useParams

아래 메서드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출됩니다.props 또는 state가 변경되면 갱신이 발생합니다. 아래 메서드들은 컴포넌트가 다시 렌더링될 때 순서대로 호출됩니다.아래 메서드는 컴포넌트가 DOM 상에서 제거될 때에 호출

js 비동기 함수데이터를 요청(input/output)하는 함수로 IO통신이 일어난다.• 이벤트 핸들러를 사용하는 경우• 타이머 함수 사용하는 경우• 클린업(Clean-up) 함수란?

만약 button컴포넌트를 만들었다면 부모 컴포넌트에서 event를 주기는 어려울것이다.이때 event함수를 자식컴포넌트의 prop으로 넘겨줘서 사용해야한다.https://ko.legacy.reactjs.org/docs/handling-events.htmlht

반복을 최소화재사용이 가능한 스타일을 정의참고https://velog.io/@bami/SCSS-SCSS-%EB%AC%B8%EB%B2%955-mixin-inclue

styled component

Automatic critical CSS→ 사용자가 필요한 최소한의 코드만 로드No class name bugs→ 스타일별로 고유한 클래스 이름을 생성Easier deletion of CSS→ 구성 요소에 연결되어 있으므로 명확하게 보여줌으로 파악이 쉬움Simple d

미리 세팅된 유틸리티 클래스를 활용하여 HTML코드 내에서 CSS를 적용 ==미리 정의된 유틸리티 클래스를 사용하여 스타일링1\. 재사용성 재사용 가능하도록 설계되어 프로젝트 전체에서 스타일의 일관성을 유지가 쉽다.2\. 속도 HTML에서 직접 요소의 스타일을 지정할

React version 16부터 사용 가능한 리액트의 내장 APIprops를 사용하지 않고 필요한 데이터(state)를 쉽게 공유하위 컴포넌트로 전달하기 위해 중간 컴포넌트에 프로퍼티를 내려주는것값 추적 용이코드 변경 파악 용이중간 컴포넌트의 불필요한 프로퍼디 전달누

JavaScript 상태관리 라이브러리1\. Predictable\-> 일관되게 동작 다양한 환경에서 실행2\. Centralized\-> 상태와 로직을 중앙에서 관리3\. Debuggable\-> Redux DevTools를 통해 상태가 언제, 어디서, 왜, 어떻게

React를 기반으로 하는 Full-Stack 웹 애플리케이션 프레임워크Recat는 SPA라!이브러리이지만 NEXTjs를 통해 서버 사이드 렌더링을 쉽게 구현가능하다javaScript가 HTML을 생성하기 전에 미리 HTML을 생성하는 방식서버에서 전부 받아서 클라이

리액트에서 라우터 사용 시 파라미터 정보를 가져와 활용하고 싶다면 useParams라는 훅을 사용하면 된다.useParams를 사용하기 위해서 react-router-dom을 설치한다.사용할 파일에서 useParams를 불러와준다.

컴퓨터들을 상호 연결하여 정보 교환 및 처리, 자료 및 하드웨어 등을 위해 구성한 통신망근거리 영역 네트워크 가까운 지역을 네트워크 매체를 이용하여 하나로 묶는 근거리 통신망 대도시 영역 네트워크 도시나 마을 같이 넓은 지역을 연결하는 네트워크광대역 네트워크국가, 대

서버의 무상태성을 보완하면서, 클라이언트의 부담을 줄임무상태성 : 서버와 클라이언트 간의 요청이 독립적: 서버가 클라이언트의 상태를 저장하지 않기 때문에 직전 요청만 기억한다.쿠키 저장 : 크라이언트쿠키 관리 : 서버쿠키를 저장한 서버가 아닌 다른 서버에서도 활용되는

사용자가 인증에 성공한 상태사용자가 인증에 성공한 상태를 서버에 저장해서 관리하는 방식유저의 로그인 정보를 서버쪽에서 관리하고 있기 때문에 유저가 직접 로그아웃하지 않더라도 서버를 운영하는 쪽에서 강제로 로그아웃이 가능하다.보안성이 중요해, 사용자를 강제로 로그아웃 시

연습이기 때문에 보안쪽은 따로 신경쓰지 않았다.프론트 : http://127.0.0.1:5500_javascript 백 : http://localhost:3000_express 이외 : axios, corshttps://developers.k

TypeScrip와 JavaScript 애플리케이션을 위한 ORM개발자가 데이터베이스를 쉽게 사용하고 관리할 수 있도록 다양한 기능을 제공데이터베이스에 대한 타입 안전한 쿼리를 제공하는 자동 생성된 쿼리 빌더,데이터베이스 상호작용을 직관적이고 안전하게 수행 가능데이터베

Object Relational Mapping프로그래밍 언어릐 객체를 데이터베이스의 테이블과 매핑하여, 객체를 통해 데이터베이스의 데이터를 조회, 삽입, 수정, 삭제를 할 수 있다.데이터베이스와 상호작용하는 SQL 쿼리를 자동으로 생성하므로, 개발자는 복잡한 SQL문법

다른 사이트들과 동일하게 가입 하면된다. 옛날에 누가 영어이름이랑 자격증 시험에 적은 영어이름이랑 달라서 시험을 못봤었다는 이야기를 들어서...카드 등록할때 영어이름과 AWS영어이름이 같은지 신경 써줬다.AWS 공식 홈페이지가입하면 콘솔 홈으로 이동한다.헤더에서 S3를

github에서 지원하는 CI/CD 툴이다. github Acion, Jenkins 등 많이 사용하지만, github Acion의 장점으로 빠르고 간편하게 구축이 가능하다.AWS 외부에서 실행되는 애플리케이션\-> 해당 키를 알게 된다면 다른 사람들이 사용할 수 있으므

레포지토리 파기PR 설정하기 (setting/Rules/ Ruleset Name = branch Name, Branch rules_Require a pull request before merging)Issuses에서 작업해야하는 작업 리스트를 각각 작성각각 Issue에