bloomCode

CSS position 속성은 문서상에 요소를 배치하는 방법을 지정합니다 top,right, bottom, left 속성이 요소를 배치할 최종 위치를 결정합니다. 출처:https://developer.mozilla.org/ko/docs/Web/CSS/position offSet offset은 상대 주소(relative address)의 개념입니다. 상대주소이기 때문에 offset값을 지정해 줄 element와 기준이 되어줄 element가 필요합니다. 기준이 되어줄 element는 html태그일 수도 있고, body태그일 수도 있고, 부모 태그일 수도 있고, 상황에 따라 (작성한 코드에 따라) 다를 것입니다. offset값으로는 top, bottom, left, right이 있습니다. 출처:https:/..

HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜입니다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도 합니다. 클라이언트-서버 프로토콜이란 (보통 웹브라우저인) 수신자 측에 의해 요청이 초기화되는 프로토콜을 의미합니다. 하나의 완전한 문서는 텍스트, 레이아웃 설명, 이미지, 비디오, 스크립트 등 불러온(fetched) 하위 문서들로 재구성됩니다. 클라이언트와 서버들은 (데이터 스트림과 대조적으로) 개별적인 메시지 교환에 의해 통신합니다. 보통 브라우저인 클라이언트에 의해 전송되는 메시지를 요청(requests)이라고 부르며, 그에 대해 서버에서 응답으로 전송되는 메시지를 응답(responses)이라고 부릅니다. 요청 클라이언트가 요청..

캐시(Cache)란? 데이터나 값을 미리 복사해 놓는 임시 저장소를 말합니다. 웹 프런트엔드에서 필요한 데이터를 매번 서버에 요청해서 가져와 사용하는 것은 비효율 적이며 서버에 부담을 주고 시간도 오래 걸린다. 만약 같은 요청에 같은 데이터를 응답하는 요청이라면 데이터를 메모리에 저장해 놓고 쓰는 것이 효율적이다. 이렇게 응답 데이터의 사본을 저장하는 공간을 캐시라고 합니다. 캐시는 웹에도 존재하며, 웹 캐시(web cache) 또는 HTTP 캐시(HTTP cache)라고 말합니다. 웹 캐시에는 서버-클라이언트 통신간 발생하는 정적 자산(HTML pages, CSS, JavaScript files, images, JSON 등)을 웹 캐시에 복사합니다. 캐시의 종류 종류 위치 설명 브라우저 캐시 브라우저 ..

Framework(프레임워크) 프레임워크는 뼈대나 기반구조를 뜻하고, 제어의 역전 개념이 적용된 대표적인 기술입니다. 소프트웨어에서의 프레임워크는 '소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합' 이라 할 수 있으며, 완성된 어플리케이션이 아닌 프로그래머가 완성시키는 작업을 해야합니다. 객체 지향 개발을 하게 되면서 통합성, 일관성의 부족이 발생되는 문제를 해결할 방법중 하나라고 할 수 있습니다. 프레임워크의 특징 특정 개념들의 추상화를 제공하는 여러 클래스나 컴포넌트로 구성되어 있습니다. 추상적인 개념들이 문제를 해결하기 위해 같이 작업하는 방법을 정의합니다. 컴포넌트들은 재사용이 가능합니다. 높은 수준에서 패턴들을 조작화 할 수 있습니다. 라이브러리(Library)..

argument = 전달인자 = 값 함수를 호출할 때 값을 전달한다고 해서 전달인자라고도 부른다. 매개변수와 달리 전달인자는 고정되어 있지 않고, 호출할 때마다 수시로 변하는 값(Value)이기 때문에 변수가 아닌 값(Value)으로 정의한다. 인수라고도 한다. parameter = 매개변수 = 변수 함수 내부에 있는 인자로써, 특정한 값으로 정해져 있는 것이 아니라, 함수가 호출하면서 건네준 argument의 값이 변수 ( Variable )에 담기게 된다. 들어오는 인자가 매개체 역할을 하기 때문에 매개변수라고도 하며 영문으로 parameter라고 한다.

REST란 “Representational State Transfer” 의 약자 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고받는 모든 것을 의미한다. API 작동 방식에 대한 조건을 부과하는 소프트웨어 아키텍처이며. REST는 처음에 인터넷과 같은 복잡한 네트워크에서 통신을 관리하기 위한 지침으로 만들어졌다. REST 기반 아키텍처를 사용하여 대규모의 고성능 통신을 안정적으로 지원할 수 있으며. 쉽게 구현하고 수정할 수 있어 모든 API 시스템을 파악하고 여러 플랫폼에서 사용할 수 있다. HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원..

CSS 스크롤 스냅 프로젝트에서 유튜브 쇼츠 형식의 스크롤로 게시글을 보여줘야 하는 부분이 있었다. 유튜브에서는 CSS Scroll-Snap 기술을 사용한 것 같아 도입해 보았다 CSS 스크롤 스냅은 스냅 위치로 이동 및 스크롤 동작을 제어하는 ​​기능이 포함된 CSS 모듈이며.Scroll snap 모듈을 사용하면 사용자가 터치, 휠 스크롤 조작을 마쳤을 때의 오프셋을 설정할 수 있다. 스크롤링은 사용자와 웹 콘텐츠 간의 자연스러운 인터랙션이지만 정밀도가 부족하여 콘텐츠의 중간에서 멈추거나주요 콘텐츠의 일부만 보이기도 한다. 하지만 미리 설정한 위치로 이동한다면 자연스러운 스크롤 움직임과 함께 사용자 경험은 더욱 향상될 수 있으며. CSS Scroll snap 모듈을 사용하면 스크롤 동작을 정의하기 위한..

프로젝트에서 이미지 리사이징을 도입하였다. browser-image-compression 라이브러리를 통해 이미지 리사이징을 할 수 있었다 이미지 리사이징 처리를 통해 확연히 이미지 파일의 용량이 달라지는 것을 확인할 수 있었다. 라이트 하우스 측정 이미지 리사이징 전 이미지 리사이징 후 참고 사이트: https://velog.io/@rachaen/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%AC%EB%9F%AC%EC%9E%A5-%EC%98%AC%EB%A0%A4%EC%84%9C-%ED%99%95%EC%9D%B8%ED%95%98%EA%B8%B0-2 https://velog.io/@gsphyo91/%EC%97%85%EB%A1%9C%EB%93..

프로젝트에서 sns기반의 플랫폼 형식을 띠고 있다 보니 웹 페이지 안에서 많은 영상과 이미지 게시글들의 데이터를 가능한 한 빨리 로딩시키고 ,가져올지 방법에 대한 문제로 AWS에서 제공하는 Cloud Front를 도입하기로 하였다. Cloud Front의 이점 Amazon CloudFront는. html,. css,. js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스입니다. CloudFront는 에지 로케이션이라고 하는 데이터 센터의 전 세계 네트워크를 통해 콘텐츠를 제공합니다. CloudFront를 통해 서비스하는 콘텐츠를 사용자가 요청하면 지연 시간이 가장 낮은 에지 로케이션으로 요청이 라우팅 되므로 가능한 최고의 성능으로 콘텐츠가 제공됩니다. ..

프로젝트에서 가장 애기를 많이 했었던 부분은 "크루(문화예술인)" 유저 권한을 승인해 주고 승인받은 크루유저는 행사에 관련된 게시글을 올릴 수 있는 부분이었다. 결국 그 승인요청을 어디서 받고 처리할 것이며, 어떠한 기준으로 승인을 수락할 것인지 대해서 많은 얘기를 했었던 것 같다. 유저의 인스타나 특별한 활동 영상 이미지, 인스타 등등 많은 방법을 생각해 봤지만 기능적인 부분에서 구현을 못할 것 같다는 결론이 나와서 특별한 기준 없이 관리자가 승인만 해준다면 행사글을 작성할 수 있도록 기능을 구현하였다. 관리자 페이지가 필요하게 되었고 관리자는 백엔드 데이터 베이스에서 ROLE_ADMIN이라는 user_role을 부여받아서 관리자 페이지에 접근가능하게끔 구현하였다. 백엔드에서 받은 userRole을 로..