따뜻한 차가움

JSON.parse('객체') : JSON 형태의 '객체'를 JS의 객체나 배열로 변환합니다.(동기적 실행. 한번에 다 바꿈)JSON.stringify('객체') : JS의 객체나 배열을 JSON형태의 객체로 변환합니다.(동기적 실행. 한번에 다 바꿈) fetch 구문을 사용할 때 .json()의 기능을 사용할 텐데. 이것을 비동기적으로 parse하는 기능이다.데이터를 다 읽을 때 까지 수집하면서 완료 후 Promise 객체를 반환한다.주의점으로 .json()의 경우 Stream이 있어야 사용가능하기 때문에 두번은 사용할 수 없다. 따라서 첫번째 then에서 일단 값을 넘긴 다음 두번째 then에서 해당 값을 출력하면 안정적으로 확인할 수 있다.

js가 가지는 차별점은 아래의 3가지 라고 생각한다. 1. html문서의 특정 태그를 추출 및 조작(변경, 제거)2. js를 이용해 html 태그를 삽입3. 이벤트의 활용. 1. 특정 태그의 지정1) 태그 선택하기document.getElementById('id') : html에 지정된 id값을 찾아서 해당 태그를 지정한다.document.getElementsByClassName('class') : html에 지정된 class를 가진 모든 요소를 반환한다.(배열)document.querySelector('selector') : html에서 css선택자 방식으로 선택된 첫번째 요소를 반환한다.document.querySelectorAll('selector') : html에서 css선택자 방식으로 선택된 모..

리눅스에서 git --help 를 입력했을 때 나오는 내용을 옮겨둔 게시글이다. 사용법: git [-v | --version] [-h | --help] [-C ] [-c =] [--exec-path[=]] [--html-path] [--man-path] [--info-path] [-p | --paginate | -P | --no-pager] [--no-replace-objects] [--bare] [--git-dir=] [--work-tree=] [--namespace=] [--config-env==] []다음은 여러가지 상황에서 자주 사용하는 깃 명령입니다:작업 공간 시작 (참고: git help tutorial) clone ..

HTML과 JS는 무난하게 익혔지만 css는 도저히 잘 외워지지 않아서 내가 자주 쓰게되는 부분에 대해서 따로 정리하고 공부하려고 작성한다. 0. 초기화*{ /* 모든 대상에 적용할 내용을 지정. */ margin: 0; /* 바깥 여백을 0 */ padding: 0; /* 내부 여백을 0 */ box-sizing: border-box; /* 박스의 크기를 지정할 때 경계선까지의 길이를 지정. */}/*리스트 스타일 제거*/ul,ol{ list-style: none; /* ul와 ol의 목록 리스트에서 앞에 표시되는 스타일을 없앰 */}/*링크 속성 글자 밑줄 없앰.*/a text-decoration: none; /* 밑줄 없애기 */ color : black; /* 글자색이 바뀌는 것을 변경 */}im..

리눅스에서 개발을 하면서 React에 도전해보기로 했다. 먼저 Node.js를 설치해준다.Node.js — Node.js® 다운로드 Node.js — Node.js® 다운로드Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.nodejs.org공식 홈페이지로 가면 자기의 운영체제에 맞는 파일을 받을 수 있다. 나는 Ubuntu를 사용중이라서Linux환경에서 nvm 방식으로 npm 을 사용해서 설치로 자동설정 되었다.이후 바로 아래 화면에 뜬 내용을 그대로 순서대로 입력했다.# n..

내가 spring boot를 배울 때는 properties 파일을 이용해서 작성하였다.특정한 '키'에 해당하는 '값'을 작성하면 1:1로 해당 값을 적용하거나 변경할 수 있는 방식이다. 다만 yml(yaml) 파일의 경우. 들여쓰기를 통한 종속성을 표기한다.현재 문장이 윗 문장보다 들여쓰기가 되어있다면 그건 현재문장이 윗 문장에 종속된다는 뜻이며,현재 문장이 윗 문장과 동일한 들여쓰기라면 수평적 관계, 혹은 같은 소속임을 나타낸다. 예시로 나타내면db: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: mysecret volumes: - ./mysql_data:/var/lib/mysql 이런 식으로 작성할 수 있다. db 라는 객체에 대한 정보는 ..

기존에는 많은 컴퓨터가 필요한 영역이었으나 도커를 활용하면 1개의 컴퓨터의 자원을 분할하여 여러대의 컴퓨터처럼 사용할 수 있게된다.따라서 연관성 있는 서비스끼리 연결을 시키면 특정 서비스가 문제가 생기더라도 나머지 서비스는 정상 작동을 할 수 있는 안정성이 생기게 된다. 이는 한 집에 모든 기능이 있는 것을 여러집에 나눠서 각각의 구역에 격리시켜둔 것과 같다. 그에 따른 구상도는 다음과 같다. 도커로 컨테이너를 통한 영역을 나눈다.먼저 외부 PC에 대한 요청을 Nginx가 받아온다. 이후 필요한 관련 데이터를 backend단에 있는 필요한 기능을 처리할 수 있는 곳으로 해당 요청을 전송한다.그러면 주요기능은 필요하다면 DB영역에서 데이터를 통신한 후 데이터를 가공해서 nginx로 보낸다.그럼 ngix는 ..

docker에 대해서 최신버전을 apt로 받았더니 compse 기능을 쓸 수 없어서 삭제하고 다시 설치하게 되었다. 리눅스 우분투 기준 최신버전의 docker를 받는 방법을 기록해둔다. 터미널에서 아래 명령어를 입력해준다.curl -fsSL https://get.docker.com -o get-docker.sh 그럼 현재 터미널 경로에 get-docker.sh 파일이 다운로드 되었을 것이다. sudo sh get-docker.sh 명령어만 입력해주면 끝. 이후 docker version, docker compose version 을 입력했을 때 쭉 뜨면 정상이다. 하지만 docker ps 를 입력했을 때 사용할 수 없다고 뜨는데 이걸 해결하기 위해서는 도커 권한을 줘야한다.기본적으로 docker는 roo..

해당 내용은 내가 정리한 웹서비스 개발에 대한 개요 정리 게시글에서 이어지는 내용이다.https://warmice8226.tistory.com/66 웹 서비스 개발에 대한 개요 정리해당 글은 전문가가 작성한게 아니라 개인이 생성형AI와 인터넷 검색, 실제 그렇게 작동되는지 검수하는 과정을 기록하는 내용이다. 따라서 보증되지 않은 한 때의 상황으로 받아들여주면 좋겠warmice8226.tistory.com 여기서 웹서버에 대한 부분이 궁금했는데 Spring boot에서는 Tomcat 서버가 내장되어 별도의 웹서버를 설치하지 않아도 서버가 실행되었기 때문에 해당 부분을 공부하지 않았기 때문이다. 따라서 현재 Apache와 NginX에 대한 차이점을 알아보고 해당 내용을 정리해보기로 한다. 1. Apache ..

해당 글은 전문가가 작성한게 아니라 개인이 생성형AI와 인터넷 검색, 실제 그렇게 작동되는지 검수하는 과정을 기록하는 내용이다. 따라서 보증되지 않은 한 때의 상황으로 받아들여주면 좋겠다. 의존성의 경우는 intelliJ Ultimate 이용기간이 끝나서 편하게 확인할 방법이 없어졌다. 현재 Community 버전 사용중. 1. 기존애 배운 구조에 대해 재 탐색먼저 내가 웹 개발을 배우면서 가볍게 넘어갔던 의존성에 대해서 알아보려고 한다.그리고 실제로 웹 개발 및 배포에 대해서 어떻게 진행해야하는지 알아보려고 한다. 2. 웹 개발에서 필요한 기술 스택1) 프론트엔드(Frontend) : 사용자가 브라우저를 통해 직접 보고 상호작용하는 화면을 만드는 기술기술 스택 이름역할설명HTML / CSS구조 및 디자..