본문 바로가기

전체 글47

반응형 웹 연습하기 - 개념 정리 반응형 웹이란 다양한 기기나 브라우저의 크기에 맞게~~스마트 모바일 기기의 등장으로 데스크톱 화면을 위해 존재했던 웹 문서의 설계에도 변화가 요구되기 시작했다. 변화의 초기에는 모바일 전용 url을 제공하는 방법으로 주로 사용됨. 예시 (naver.com)태블릿, 스마트 워치,. 자동차모바일 환경과의 격리가 성공적으로 정착한 사례도 물론 있지만, 기기의 유형이 갈수록 다양해짐에 따라 한계를 드러낼 수 밖에 없다.기기에 최적화된 콘텐츠 생성해내는 것이 현실적으로 어려움가변성 이 핵심 키워드뷰포트 변화의 첫걸음현재 화면에 보여지고 있는 영역을 의미배율 조정 문제로 기기별로 다르게 보임메타 태그를 통해 뷰포트 설정을 해줄 수 있다.문서 기본 구조~기기의 너비에 맞게 기본 스케일을 잡겠다.기기에 따라 다른 화면.. 2024. 10. 4.
GraphQL 맛보기 GraphQL 맛보기해당 포스팅은 책 GraphQLr과 타입스크립트로 개발하는 웹 서비스 - 강희수 저자의 1장 일부를 정리한 내용입니다.GraphQL은 클라이언트 애플리케이션을 위한 쿼리 언어.페이스북이 기능이 복잡해짐에따라 발생하는 충돌과 성능 저하를 감당하기 위해 본인들의 서비스에 맞는 GraphQL을 시작함.모바일 애플리케이션을 위한 Model과 View를 새롭게 구축하기 시작이 과정에서 RESTful API서버를 통해 받아온 데이터 형태와 애플리케이션 화면상에서 필요한 데이터 형태에 많은 차이가 있음을 발견함.API 요청을 통해 받아온 데이터를 실제 화면상에서 필요한 데이터의 형태로 구성하기 위해 API서버와 프런트엔드 클라이언트 양쪽에 걸쳐 데이터를 가공하는 상당한 양의 코드를 작성해야했음.데.. 2024. 10. 2.
CICD 마스터가 될거야 오전부터 프로덕션 서버랑 개발 서버 CI/CD 배포 끝내리라 다짐하고 불태웠다. 매번해도 자꾸 잊어버리고 헷갈리니 요번 기회에 블로그에 과정도 다 정리해두었다..✩ 뭐든 처음에 할 땨 부지런해야 뒤에 고생하지 않는 것 같다. 2시간만에 깔끔하게 CI/CD 마무리와 가비아 도메인연결까지 끝낼 수 있었다. 생각보다 일찍 마무리한 덕분에 미루고 미루던 프로젝트도 개인 레포로 가져오면서 리드미도 함께 정리했다ㅏ 이번에 다시 cname설정하면서 알게됐는데 acm인증서 설정할 때 cname 설정시 *.testcite.com을 추가할 때 www.testcite.com이라던가, api.testcite.com 정도까지만 허용이 되는 것이었고, www.api.testcite.com을 할 시에는 설정해둔 허용범위에 포함되지.. 2024. 9. 9.
fatal: the remote end hung up unexpectedly 오류 해결 👀 원인 파악push할 내용이 1MB를 넘을 경우 발생하는 에러💡 해결 방법용량을 늘여주면된다. 먼저 아래 http 명령어를 써보고 다시 push해볼시 안되면 ssh 명령어를 이용해주면 된다. 이때 바이트는 각자 업로드할 파일에 맞는 바이트로 계산하여 입력할 수 있다.git config --local http.postBuffer 2048M재푸시그래도 안될 경우 ssh.postBuffer이용git config --local ssh.postBuffer 2048M만약 local이 아니라 글로벌로 설정하고 싶다면 아래와 같은 명령어를 사용할 수 있다git config --global http.postBuffer 2048Mgit config --global ssh.postBuffer 2048M글로벌로 설정해둔.. 2024. 9. 9.
GitHub Actions Workflow 명령어 정리 GitHub Actions Workflow 명령어 정리매번 복붙하지말구 GitHub Actions Workflows .yml 용어를 정리 해보았다.전체 스크립트스크립트에 관한 설명은 아래 url 을 통해 확인할 수 있다.https://velog.io/@xiu_8/github-action%EC%9C%BC%EB%A1%9C-cicd-feat.-aws-s3-cloudfrontname: DEV CIon: push: branches: ["dev"] pull_request: branches: ["dev"]jobs: build: runs-on: ubuntu-latest strategy: matrix: node-version: [20.x] steps: - u.. 2024. 9. 9.
그래프 그래프 개념 이해하기그래프란?노드 vertex와 간선 edge을 이용한 비선형 데이터 구조. 노드는 정점(vertex)으로 표시된다.동그라미로 표시된 것 | 노드 vertex화살표로 표시된 것 | 간선 edge간선 위에 숫자로 표시된 것 | 가중치 weight그래프의 특징과 종류방향성, 가중치, 순환 특성에 따라 종류를 구분한다.방향 그래프 directed graph와 무방향 그래프 undirected graph가중치 그래프 weighted graph순환 그래프 cycle graph와 비순환 그래프 acyclic graph그래프 구현 방식인접 행렬 adjacency matrix과 인접 리스트 adjacency list가 있다.인접 행렬 그래프2차원 배열을 활용하여 구현하는 경우가 많다. 배열의 인덱스는.. 2024. 8. 25.