본문 바로가기
728x90
반응형

전체 글107

[WEB] 클라이언트/서버 데이터 관리 - Cookie, Session, Storage, Cash 개요웹에서 데이터를 관리하는 기술은 cookie와 session이 있다. 웹은 서버와 프론트 엔드 간에 데이터를 주고받는데, 이때 cookie와 session이 사용된다. 간단히 말하면, session은 서버에서 관리하는 데이터이고 cookie는 프론트 엔드, 즉 웹 브라우저에서 관리하는 데이터를 의미한다.해당 포스팅에서는 session과 cookie의 차이를 이해하고, 웹 브라우저에서 데이터를 저장하는 방법에 대해 자세히 알아보자.서버1. session클라이언트(브라우저)1. cookie2. storeage2.1. session storeage2.2 local storeage2.3 cash  1. Session (세션)서버 측에서 유지되는 상태 정보를 저장하는 방법사용자가 웹 사이트 접속 시 서버에서 .. 2024. 1. 11.
[React] React 프로젝트 - 1. 개발환경, 모듈 및 개발 도구 (프레임워크, 라이브러리) 라이브러리보조적인 모듈, 오브젝트, 클래스, 함수, 코드들의 집합내가 가져다 사용해서 자유롭게 사용하는 방식예)ReactjQueryRedux  프레임워크다양한 api들 컴파일러, 애플리케이션 지원기능, 라이브러리 등이 모두 포함된 것짜여진 패턴이나 틀 기반에서 내가 코딩을 하는 것예) Ext JSExpressSpringAngular 라이브러리와 프레임워크 차이 프레임워크라이브러리코드 작성 방식 일반적으로 프레임워크에서 정의한 규칙에 따라 코드를 작성해야 합니다. 개발자는 프레임워크가 제공하는 틀 안에서 작업하며, 특정 이벤트에 대한 콜백 함수를 정의하거나 상속을 통해 프레임워크의 기능을 확장할 수 있습니다. 라이브러리는 개발자가 직접 호출하여 사용하는 형태이므로, 코드의 흐름은 주로 사용자가 제어합니다.. 2024. 1. 11.
[WEB] 서버와 클라이언트 통신 방식 (API, Rest API, Restful API 란?) 개요서버-클라이언트 관계에서의 역할을 이해하기API의 개념에서부터 시작하여 REST API와 RESTful API   서버와 클라이언트의 역할서버- 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 것- 클라이언트의 요청을 처리하여 결과를 응답하는 시스템 클라이언트- 클라이언트는 서버에서 받은 서비스를 사용하는 사용자- 서버에게 데이터를 요청하고 서버로부터 응답을 받아 사용하는 시스템  서버-클라이언트 통신 방식은 다양한 프로토콜과 기술을 통해 구현된다.1. HTTP를 기반으로 한 요청-응답 패턴2. WebSocket을 이용한 실시간 통신3. gRPC와 같은 고성능 RPC 프레임워크4. GraphQL을 통한 데이터 쿼리      API애플리케이션 간의 상호작용을 가능하게 하는 정의 및 프로토콜 인터.. 2024. 1. 11.
[ESLint] 코드 컨벤션 (Code Convention) ESLint, Prettier 프로젝트  연결 방법  1. 프로젝트 내 라이브러리 설치$ npm install eslint --save-dev  2. 프로젝트 내 설정 파일 '.eslintrc' 생성 1) 직접 파일 추가하기2) npx 사용하기$ npx eslint --init   3. eslintrc 규칙 작성- eslint 제공하는 룰에서 낱개 사용 방법- eslint 제공하는 룰 규칙 전체 사용 방법  4. 프로젝트 내 실행$ npx eslint app.js$ npx eslint    $ npx eslint app.js --fix   Eslint 코드 규칙은 아래 링크에서 확인 가능https://eslint.org/docs/latest/rules/ Rules Reference - ESLint - Pluggable JavaScri.. 2024. 1. 9.
[JavaScript] 웹표준 자바스크립트 ECMAScript(es5, es6) 웹 표준 정의W3C표준화 단체가 권고한 웹에서 표준적으로 사용되느 기술과 규칙 (HTML, CSS, JavaScript 등의 규정)https://www.w3.org/ W3CThe World Wide Web Consortium (W3C) develops standards and guidelines to help everyone build a web based on the principles of accessibility, internationalization, privacy and security.www.w3.org  웹 표준 원칙어떤 운영체제, 브라우저를 사용하더라도 웹페이지가 동일하게 보이고, 정상적으로 동작 해야 함사용자가 신체적, 환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장 되어야 .. 2024. 1. 8.
[TDD] Postman를 사용하여 DB 연결 및 데이터 추가하기(Jest, Mongo DB) React에서 개발한 create 함수를 Postman 활용하여 API 요청해보자.   프로젝트 Mongo DB 연결 작업+ create 함수를 추가했다는 전재하여postman에서 post API를 요청해보자 !  Mongo DB 연결 작업+ create 함수를 추가 방법은 아래 포스팅 참고.https://sillimmouse.tistory.com/30 [TDD] React에서 TDD개발 환경 적용 (Jest, Mongo DB)React에서 Jest 라이브러리와 Mongo DB를 활용하여 TDD개발을 적용해보자. product 객체를 모델링하여 상품을 관리하는 프로젝트를 만든다고 가정하여 create문을 작성해보자 ! 단위테스트(Unit test) : 함수sillimmouse.tistory.com  1... 2024. 1. 6.
[TDD] React에서 TDD개발 환경 적용 (Jest, Mongo DB) React에서 Jest 라이브러리와 Mongo DB를 활용하여 TDD개발을 적용해보자.   product 객체를 모델링하여 상품을 관리하는 프로젝트를 만든다고 가정하여create문을 작성해보자 !단위테스트(Unit test) : 함수, 클래스 등 작은 프로세스 단위테스트통합테스트(Integration test) : 서로 다른 시스템들의 상호작용 테스트TDD(Test-driven development) : 테스트가 주가 되어 개발하는 방법  1. 프로젝트를 생성하고 해당 프로젝트에 TDD 관련 라이브러리 설치jestnode-mocks0httpsupertestnpm install jest--devnpm install node-mocks-http--devnpm install supertest--dev  2. .. 2024. 1. 6.
[WEB] Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal your identity or take control of your computer 오류 내용Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal your identity or take control of your computer. Please type ‘allow pasting’ below to allow pasting. 경고: 이해하지 못하거나 직접 검토하지 않은 코드를 DevTools 콘솔에 붙여넣지 마세요. 이로 인해 공격자가 귀하의 신원을 도용하거나 컴퓨터를 제어할 수 있습니다. 붙여넣기를 허용하려면 아래에 '붙여넣기 허용'을 입력하세요. 해결 방법콘솔창에 'allow past.. 2024. 1. 4.
[OS] 폴더 파일명을 텍스트 문서로 만들기 1. 폴더 경로로 이동한다.  2. 원하는 옵션의 내용을 메모장에 작성한다.dir /b /s > test.txt  3. .bat 파일로 저장한다. 4. test.bat 파일을 더블 클릭하여 실행한다.  5. test.txt 파일이 생성된다. 파일을 확인한다.  마무리- 이미지 파일명을 리스트업하거나.- 파일별 제목, 경로, 용량 등을 리스트업 할때 유용할거 같다. 2024. 1. 3.
728x90
반응형