티스토리

studyHard
검색하기

블로그 홈

studyHard

studyhard-everyday.tistory.com/m

언젠간 내가 제일 잘함;

구독자
14
방명록 방문하기
공지 2023.02.13 ~ 0.3.0.4⋯ 모두보기

주요 글 목록

  • (DevOps)CI/CD CI/CD CI/CD는 애플리케이션 개발 단계부터 배포까지의 모든 단계를 자동화를 통해 효율적이고 빠르게 사용자에게 배포할 수 있는 것을 말합니다. (CI/CD는 DevOps 엔지니어의 핵심 업무라고 한다) CI CI는 간단히 요약하자면 빌드/테스트 자동화 과정입니다. 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration)을 의미합니다. CI를 성공적으로 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 레포지토리에 통합되므로 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있습니다. 지속적 통합의 실행은 소스/버전 관리 시스템에 대한 변경 사항을 정기적으로 커밋.. 공감수 0 댓글수 0 2023. 8. 18.
  • Webpack과 Babel 리액트를 사용해서 개발을 하면 npm build 입력으로 빌드가 완료됩니다. create-react-app은 개발 환경부터 빌드까지 모든 것이 다 갖추어져 있습니다. 하지만 프론트엔드 개발자라면 그 뒷단의 이야기에 대해 알 필요가 있습니다. 자신의 프로젝트를 온전히 커스터마이징 하고 싶다면 CRA를 이용하지 않고 환경 설정부터 빌드 세팅까지 스스로 해야 합니다. 웹팩(Webpack) 웹팩은 오픈 소스 자바스크립트 모듈 번들러입니다. 말 그대로 여러 개의 파일을 하나의 파일로 모아주는 역할을 합니다. 여러 개의 파일을 하나로 모아주는 것은 왜 필요할까요? 이전에 모듈 번들러가 없을 때는 HTML에 모든 스크립트 파일을 불러왔어야 했습니다. 그러다 ES2015부터 모듈 시스템이 등장하여 exports로 모듈.. 공감수 0 댓글수 0 2023. 8. 10.
  • Proxy CORS 정책이 필요한 이유 브라우저에서 기본적으로 API를 요청할 때, 브라우저의 현재 주소와 API의 주소의 도메인이 일치해야만 데이터를 접근할 수 있게 되어 있습니다. 만약 다른 도메인에서 API를 요청해서 사용할 수 있게 해주려면 CORS 설정이 필요합니다. CORS 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 출처 웹 콘텐츠의 출처(origin)는 접근할 때 사용하는 URL의 스킴(프로토콜), 호스트(도메인), 포트로 정의됩니다. 두 객체의 스킴, 호스트, 포트가 모두 일치하는 경우 같.. 공감수 1 댓글수 2 2023. 6. 7.
  • Cookie 🍪 Cookie 쿠키는 🍪? 서버에서 클라이언트에 영속성 있는 데이터를 저장하는 방법이다. 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있다. 쿠키를 이용하는 것은 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고 클라이언트에서 서버로 쿠키를 다시 전송하는 것도 포함된다. 데이터를 저장한 이후 특정 조건들이 만족되면 데이터를 다시 가져올 수 있다. 이런 조건들은 아래 코드처럼 http 헤더를 사용해 쿠키 옵션으로 표현할 수 있다. 'Set-Cookie':[ 'cookie=yummy', 'Secure=Secure; Secure', 'HttpOnly=HttpOnly; HttpOnly', 'Path=Path; Path=/cookie', 'Doamin=Domain; Domain=codestat.. 공감수 0 댓글수 2 2023. 5. 3.
  • Session 😶‍🌫️ 세션기반 인증 (Session-based Authentication) 로그인 사용자가 만일 정확한 아이디와 비밀번호를 입력했다면, 서버는 인증(Authentication)에 성공했다고 판단. 다음번에 인증을 필요로 하는 작업(장바구니에 물품 추가 등)을 요청할 경우, 서버는 아이디 및 비밀번호의 해시를 이미 알고 있기 때문에 매번 로그인할 필요가 없음. 이때 서버와 클라이언트에 필요한 것은 다음과 같다. 서버: 사용자가 인증에 성공했음을 알고 있어야 한다. 클라이언트: 인증 성공을 증명할 수단을 갖고 있어야 한다. 사용자가 인증에 성공한 상태는 세션이라고 부른다. 서버는 일종의 저장소에 세션을 저장한다. (그림에서 2번) 주로 in-memory, 또는 세션 스토어(redis)등과 같은 트 랜잭션.. 공감수 0 댓글수 0 2023. 5. 3.
  • 웹 표준, 접근성 Semantic HTML 웹 표준에서는 HTML을 시멘틱(semantic)하게 작성하는 것의 중요성을 강조한다. 그렇다면 시멘틱 HTML이 어떤 의미일까? 시멘틱 HTML은 영단어인 semantic과 HTML의 합성어이고, 각 단어의 의미는 다음과 같다. semantic: 의미의, 의미가 있는 이라는 뜻의 영단어 HTML: 화면의 구조를 만드는 마크업 언어 시멘틱 HTML의 필요성 개발자 간 소통 검색 효율성 웹 접근성 자주 사용되는 시멘틱 요소의 종류 페이지나 요소의 최상단에 위치하는 머리말 역할의 요소 메뉴, 목차 등에 사용되는 요소 문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소 이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할.. 공감수 0 댓글수 0 2023. 4. 27.
  • OSI 7계층 OSI 7 계층은 국제표준화기구(ISO)에서 개발한 모델로서, 네트워크 프로토콜 디자인과 통신 과정을 7개의 계층으로 구분하여 만든 표준구격이다. 초창기의 네트워크는 각 컴퓨터마다 시스템이 달랐기 때문에 하드웨어와 소프트웨어의 논리적인 변경 없이 통신할 수 있는 표준 모델이 나타나게 되었다. 통신이 일어나는 과정을 7단계로 크게 구분하여 단계별로 파악이 가능 컴퓨팅 장치나 네트워킹 장치를 만들 때 이 모델을 참조해서 모든 통신 장치를 만듬 네트워크 구성 요소를 표준화함으로 서로 다른 통신 장치와의 상호 호환 가능 각 계층은 독립적인 모듈로 구성되어 있음 이상이 생기면 해당 단계만 고쳐서 해결 가능 각 계층은 상하 계급 구조를 가지고 있음 물리 계층: 하드웨어 / 데이터링크 계층: 하드웨어 + 소프트웨어 .. 공감수 0 댓글수 0 2023. 4. 26.
  • UI, UX UI 사람들이 컴퓨터와 상호 작용하는 시스템 화면상의 그래픽 요소들 외에도 컴퓨터와 상호작용을 위한 시스템인 키보드, 마우스 등의 물리적 요소. UX 사용자가 어떤 시스템, 제품, 서비스를 직 간접적으로 이용하면서 느끼고 생각하는 총체적 경험 서비스 그 자체에 대한 경험. 홍보, 접근성, 사후처리 등 말 그대로 총체적 경험. 프론트엔드에서 UX에 가장 영향을 많이 끼치는 것은 UI 만약 홈페이지가 정렬도 안되어있고, 글자 크기도 뒤죽박죽이면 UX가 좋지 않다. UI UX 차이점 UX는 UI를 포함한다. UI UX는 서로 보완하는 역할 UX가 좋지 않은 곳을 찾아냄으로 UI개선점을 찾아낼 수 있고, UI를 개선함으로 UX가 좋아지기도 함 공감수 0 댓글수 0 2023. 4. 13.
  • MVC 패턴 MVC 패턴이란? MVC 패턴은 소프트웨어 디자인 패턴 중 하나로, Model-View-Controller의 약어입니다. 이 패턴은 소프트웨어의 구성 요소들을 세 가지 역할로 분리하여 각각의 역할에 따라 코드를 작성하고 유지보수할 수 있게끔 합니다. Model: 데이터와 데이터를 처리하는 로직을 담당합니다. View: 사용자 인터페이스(UI)를 담당합니다. Controller: Model과 View를 연결하여 사용자의 입력에 따라 데이터를 업데이트하고 UI를 갱신합니다. 사용자가 Controller를 조작하면 Controller는 Model을 통해 데이터를 가져오고 그 데이터를 바탕으로 View를 통해 시각적 표현을 제어하여 사용자에게 전달하게 됩니다. 이러한 패턴을 성공적으로 사용하면, 사용자 인터페이.. 공감수 0 댓글수 0 2023. 4. 4.
  • REST API API 애플리케이션 프로그래밍 인터페이스(API)는 다른 소프트웨어 시스템과 통신하기 위해 따라야 하는 규칙을 정의합니다. 개발자는 다른 애플리케이션이 프로그래밍 방식으로 애플리케이션과 통신할 수 있도록 API를 표시하거나 생성합니다. 웹 API는 클라이언트와 웹 리소스 사이의 게이트웨이라고 생각할 수 있습니다. REST REST (Representational State Transfer)는 애플리케이션 개발의 아키텍처 중 하나입니다. REST는 처음에 인터넷과 같은 복잡한 네트워크에서 통신을 관리하기 위한 지침으로 만들어졌습니다... (아키텍처: 애플리케이션을 설계, 제작하는 데 사용하는 패턴과 기술의 총칭) REST는 다음의 구성으로 이루어져 있습니다. 자원 (Resource) - URI (URL) .. 공감수 4 댓글수 5 2023. 3. 29.
  • MPA & SPA, CSR & SSR MPA MPA (multi page application)는 여러 페이지로 구성된 웹 어플리케이션입니다. 사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html을 받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식입니다. SPA SPA (Single Page Application)는 하나의 페이지로 구성된 웹 어플리케이션입니다. 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식입니다. SPA는 현재 웹 개발의 트랜드로 볼 수 있고 react, vue, 앵귤러와 같은 자바스크립트 프레임워크등이 SPA의 방식을 가지고 있습니다. CSR CSR (Client Side Rendering)은 렌.. 공감수 0 댓글수 0 2023. 3. 29.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.