CI/CD CI/CD는 애플리케이션 개발 단계부터 배포까지의 모든 단계를 자동화를 통해 효율적이고 빠르게 사용자에게 배포할 수 있는 것을 말합니다. (CI/CD는 DevOps 엔지니어의 핵심 업무라고 한다) CI CI는 간단히 요약하자면 빌드/테스트 자동화 과정입니다. 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration)을 의미합니다. CI를 성공적으로 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 레포지토리에 통합되므로 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있습니다. 지속적 통합의 실행은 소스/버전 관리 시스템에 대한 변경 사항을 정기적으로 커밋..

리액트를 사용해서 개발을 하면 npm build 입력으로 빌드가 완료됩니다. create-react-app은 개발 환경부터 빌드까지 모든 것이 다 갖추어져 있습니다. 하지만 프론트엔드 개발자라면 그 뒷단의 이야기에 대해 알 필요가 있습니다. 자신의 프로젝트를 온전히 커스터마이징 하고 싶다면 CRA를 이용하지 않고 환경 설정부터 빌드 세팅까지 스스로 해야 합니다. 웹팩(Webpack) 웹팩은 오픈 소스 자바스크립트 모듈 번들러입니다. 말 그대로 여러 개의 파일을 하나의 파일로 모아주는 역할을 합니다. 여러 개의 파일을 하나로 모아주는 것은 왜 필요할까요? 이전에 모듈 번들러가 없을 때는 HTML에 모든 스크립트 파일을 불러왔어야 했습니다. 그러다 ES2015부터 모듈 시스템이 등장하여 exports로 모듈..

CORS 정책이 필요한 이유 브라우저에서 기본적으로 API를 요청할 때, 브라우저의 현재 주소와 API의 주소의 도메인이 일치해야만 데이터를 접근할 수 있게 되어 있습니다. 만약 다른 도메인에서 API를 요청해서 사용할 수 있게 해주려면 CORS 설정이 필요합니다. CORS 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 출처 웹 콘텐츠의 출처(origin)는 접근할 때 사용하는 URL의 스킴(프로토콜), 호스트(도메인), 포트로 정의됩니다. 두 객체의 스킴, 호스트, 포트가 모두 일치하는 경우 같..

🍪 Cookie 쿠키는 🍪? 서버에서 클라이언트에 영속성 있는 데이터를 저장하는 방법이다. 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있다. 쿠키를 이용하는 것은 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고 클라이언트에서 서버로 쿠키를 다시 전송하는 것도 포함된다. 데이터를 저장한 이후 특정 조건들이 만족되면 데이터를 다시 가져올 수 있다. 이런 조건들은 아래 코드처럼 http 헤더를 사용해 쿠키 옵션으로 표현할 수 있다. 'Set-Cookie':[ 'cookie=yummy', 'Secure=Secure; Secure', 'HttpOnly=HttpOnly; HttpOnly', 'Path=Path; Path=/cookie', 'Doamin=Domain; Domain=codestat..

😶‍🌫️ 세션기반 인증 (Session-based Authentication) 로그인 사용자가 만일 정확한 아이디와 비밀번호를 입력했다면, 서버는 인증(Authentication)에 성공했다고 판단. 다음번에 인증을 필요로 하는 작업(장바구니에 물품 추가 등)을 요청할 경우, 서버는 아이디 및 비밀번호의 해시를 이미 알고 있기 때문에 매번 로그인할 필요가 없음. 이때 서버와 클라이언트에 필요한 것은 다음과 같다. 서버: 사용자가 인증에 성공했음을 알고 있어야 한다. 클라이언트: 인증 성공을 증명할 수단을 갖고 있어야 한다. 사용자가 인증에 성공한 상태는 세션이라고 부른다. 서버는 일종의 저장소에 세션을 저장한다. (그림에서 2번) 주로 in-memory, 또는 세션 스토어(redis)등과 같은 트 랜잭션..

Semantic HTML 웹 표준에서는 HTML을 시멘틱(semantic)하게 작성하는 것의 중요성을 강조한다. 그렇다면 시멘틱 HTML이 어떤 의미일까? 시멘틱 HTML은 영단어인 semantic과 HTML의 합성어이고, 각 단어의 의미는 다음과 같다. semantic: 의미의, 의미가 있는 이라는 뜻의 영단어 HTML: 화면의 구조를 만드는 마크업 언어 시멘틱 HTML의 필요성 개발자 간 소통 검색 효율성 웹 접근성 자주 사용되는 시멘틱 요소의 종류 페이지나 요소의 최상단에 위치하는 머리말 역할의 요소 메뉴, 목차 등에 사용되는 요소 문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소 이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할..

OSI 7 계층은 국제표준화기구(ISO)에서 개발한 모델로서, 네트워크 프로토콜 디자인과 통신 과정을 7개의 계층으로 구분하여 만든 표준구격이다. 초창기의 네트워크는 각 컴퓨터마다 시스템이 달랐기 때문에 하드웨어와 소프트웨어의 논리적인 변경 없이 통신할 수 있는 표준 모델이 나타나게 되었다. 통신이 일어나는 과정을 7단계로 크게 구분하여 단계별로 파악이 가능 컴퓨팅 장치나 네트워킹 장치를 만들 때 이 모델을 참조해서 모든 통신 장치를 만듬 네트워크 구성 요소를 표준화함으로 서로 다른 통신 장치와의 상호 호환 가능 각 계층은 독립적인 모듈로 구성되어 있음 이상이 생기면 해당 단계만 고쳐서 해결 가능 각 계층은 상하 계급 구조를 가지고 있음 물리 계층: 하드웨어 / 데이터링크 계층: 하드웨어 + 소프트웨어 ..

UI 사람들이 컴퓨터와 상호 작용하는 시스템 화면상의 그래픽 요소들 외에도 컴퓨터와 상호작용을 위한 시스템인 키보드, 마우스 등의 물리적 요소. UX 사용자가 어떤 시스템, 제품, 서비스를 직 간접적으로 이용하면서 느끼고 생각하는 총체적 경험 서비스 그 자체에 대한 경험. 홍보, 접근성, 사후처리 등 말 그대로 총체적 경험. 프론트엔드에서 UX에 가장 영향을 많이 끼치는 것은 UI 만약 홈페이지가 정렬도 안되어있고, 글자 크기도 뒤죽박죽이면 UX가 좋지 않다. UI UX 차이점 UX는 UI를 포함한다. UI UX는 서로 보완하는 역할 UX가 좋지 않은 곳을 찾아냄으로 UI개선점을 찾아낼 수 있고, UI를 개선함으로 UX가 좋아지기도 함