RestAPI & import 간단 메모
·
👩🏻‍💻 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞/⠀⠀⠀⠀ Nᴏᴅᴇ.Jꜱ
RestAPI실습 express 자체에선 JSON 데이터를 읽을 능력이 없다 읽게 해줄려면 .use()메서드를 이용한다 💡 주의점 윗쪽에서 부터 읽어오기 때문에 app.use는 최상단에 배치하는 게 좋다 import Javascript 파일간에 Import하는 방법은 여러가지가 있다 연결할때엔 상단에 import구문이 필요하며 자원을 주는 쪽에 파일엔 export 키워드가 앞단에 있어야 가져올 수 있다 전체적으로 불러올 수 있고, 부분만 가져올 수 있다 그리고 default 메서드로 지정하여 따로 자원을 명시하지 않고 import할 경우 해당 메서드가 자동으로 세팅되게 할 수 있다 기본 문법 import 자원이름 from './파일경로' // 요즘 방식 이며 가장 기본방식 import { 자원1, 자원2..
cors , 꼭 알고 가야한다
·
👩🏻‍💻 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞/⠀⠀⠀⠀ Nᴏᴅᴇ.Jꜱ
CORS sop(same origin policy) : 같은 출발지 정책 브라우저에선 보안적 이슈로 cross-origin http 요청을 제한한다 그래서 cross-origin 요청을 하려면 서버의 동의가 필요하다 만약 서버가 동의한다면 브라우저에서는 요청을 허락하고 동의하지 않는다면 브라우저 에서 막는다(거절) 이러한 동의하는 로직을 HTTP-header를 이용한다 이를 cors(Cross-origin Resource Sharing)이라 부른다 Cross-origin이란? 프로토콜이 다르다 : http와 https는 프로토콜이 다르다 도메인 : domain.com과 other-domain.com은 다르다 포트 번호 : 8080 포트와 3000포트는 다르다 CORS가 필요한 이유 CORS가 없이 모든 ..
express기초-nodemon
·
👩🏻‍💻 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞/⠀⠀⠀⠀ Nᴏᴅᴇ.Jꜱ
express 사용법 // js 파일 상단에 Import를 먼저 해야함 import express from 'express' // 해당 js파일이 있는 경로로 터미널을 실행한다 yarn init // packag.json 파일이 생성됨 "type" : "module" // 패키지 파일에 해당 내용을 추가하고 저장한다 // yarn을 통해 express 설치 // json파일의 "dependencies" 내용에 설치한 Express 목록이 추가되어야 한다 dependencies란? 설치했던 파일 목록이고 개발 환경의 히스토리이다 만일 nodemoules 파일 삭제시 재설치를 해야하며 재 설치시 yarn install 만 입력하면 처리됨 [주의점] 모든 명령어는 package.json 파일이 있는 폴더에서 ..
데이터통신-요청헤더,응답헤더
·
👩🏻‍💻 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞/⠀⠀⠀⠀ Nᴏᴅᴇ.Jꜱ
주요 프로토콜 FTP : 파일 프로토콜 SMP : 메일 프로토콜 HTTP : 하이퍼텍스트 프로토콜 HPPS : 하이퍼 텍스트 시큐리티 프로토콜 (보안) HTTP 요청(requrst) 과 응답(response)으로 통신한다 전달 데이터 형식 : 헤더와 바디로 구분된다 Requst 요청 헤더 : 브라우저의 정보, 전달하는 객체의 형태 요청 바디 : 내용 [ 내용은 객체에 담아서 전송한다 ] Response 응답헤더 : 보내는 곳의 정보 , 보내는 내용의 객체 형태 응답바디 : 내용 [ Key : Value ] 형태로 전달된다 요청 헤더와 응답 헤더는 다른 것 이다 [!상태코드] 응답 헤더에는 상태코드(100,200,400,…)가 포함되어 있다 상태코드가 별도로 있는 이유는 컴퓨터가 인식할 수 있도록 하는 ..
API CRUD 간단정리
·
👩🏻‍💻 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞/⠀⠀⠀⠀ Nᴏᴅᴇ.Jꜱ
CRUD create / read / update / delete C : 생성 post메서드(axios rest-API) mutation(apollo-client/graphql-API) R : 조회 get메서드(axios rest-API) query(apollo-client/graphql-API) U : 수정 put메서드(axios rest-API) mutation(apollo-client/graphql-API) D : 삭제 delete(axios rest-API) mutation(apollo-client/graphql-API) Mutation과 Query차이 데이터베이스 안에서 무언가 조작하여 데이터 변형이 있는 경우 위험한 작업임을 알 수 있도록 메서드 명이 mutation 이다 몇번을 조회하더라도 ..
API와 Node
·
👩🏻‍💻 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞/⠀⠀⠀⠀ Nᴏᴅᴇ.Jꜱ
API를 꼭 써야하는지 ? 백앤드 API를 꼭 거쳐야 하나요 ? 브라우저에서 바로 DB로 저장하면 안돼나요 ? 안됩니다 . 데이터를 꼭 검사해야합니다. 백엔드에서 하는 역할은 '검증,보안,안전’입니다 보안이 중요하다보니 해커가 데이터를 이상하게 보내게되어 DB에 문제가 생길 수 있는 부분이 발생될 수 있다. 브라우저에서는 자바스크립트 코드가 노출되어있기 때문에 보안이 취약하다 그래서 보안에 취약한 로직들이나 함수 등등 이런 부분들을 백엔드에서 처리한다 모듈화 프로그램 모든 프로그래밍에 기법은 모듈화가 일반적이다. 개발자가 모든 기능을 다 개발할 수 없기 때문에 다른 사람들이 올린 기능들을 가져다 쓸 수 있는 장점이 있다. java -> Maven(예전에 자주쓴 라이브러리) / Grandle (요즘 쓰는 ..
2023/12/19 😛 네이버장바구니 구현해보기
·
👩🏻‍💻 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞/⠀⠀⠀⠀ JᴀᴠᴀSᴄʀɪᴘᴛ
❤ 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤ GitHub - gayulz/StudyHistory: 나의 공부 기록 commit 나의 공부 기록 commit . Contribute to gayulz/StudyHistory development by creating an account on GitHub. github.com 수업 전 노드 접근 방법 노드 메서드 부모노드 parentNode 자식 노드 리스트 childNodes 첫번째 자식 노드 firstChild 마지막 자식 노드 lastChild 다음 형제 노드 nextSibling 다음 형제 노트(요소만) nextElementSibling 이전 형제 노드 previosSibling 오늘의 과제 :: 네이버 장바구니를 구현해 보자 상품 ..
2023/12/18 😤 자바스크립트 , 방대한 그릇
·
👩🏻‍💻 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞/⠀⠀⠀⠀ JᴀᴠᴀSᴄʀɪᴘᴛ
❤ 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤ GitHub - gayulz/StudyHistory: 나의 공부 기록 commit 나의 공부 기록 commit . Contribute to gayulz/StudyHistory development by creating an account on GitHub. github.com 수업 전 정리 html html tag 공부 포인트 태그의 특성 태그의 디스플레이 특징 태그의 속성 태그의 값 태그의 사용 예제 meta tag : 개발 정보, 개발 환경에 대해 정의 charset : UTF-8 은 한글 표현 2바이트 HTML 화면을 보여주기 위한 정적 문서이다. 클라이언트에게 정보를 보여주거나 클라이언트가 서버에 요청하는 목적으로 사용되는 View 파..
2023/12/15 🚧 삐뽀삐뽀 응급상황
·
👩🏻‍💻 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞/⠀⠀⠀⠀ JᴀᴠᴀSᴄʀɪᴘᴛ
❤ 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤ GitHub - gayulz/StudyHistory: 나의 공부 기록 commit 나의 공부 기록 commit . Contribute to gayulz/StudyHistory development by creating an account on GitHub. github.com 응급상황 오늘 오후 과제 제출인데 팀장님이 개인사로 탈주 😥 어쩔 수 없이 남은 둘이서 마저 진행을 해야 하는 데 다른 팀원도 아직 구현중이고 바빴다. 그래서 먼저 끝낸 내가 어찌어찌 메인 화면을 구현하고 연결하는 것 까지 진행하기로 하였다 너무 급하게 하던 프로젝트라 너무 허접해 보일 까봐 첫 화면에 큰 기능이 없더라도 특이해 보이게 하고싶었다. 그래서 유튜브를 뒤져보..
2023/12/14 ‼️ 내일까지 제출 미니토이프로젝트
·
👩🏻‍💻 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞/⠀⠀⠀⠀ JᴀᴠᴀSᴄʀɪᴘᴛ
❤ 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤ GitHub - gayulz/StudyHistory: 나의 공부 기록 commit 나의 공부 기록 commit . Contribute to gayulz/StudyHistory development by creating an account on GitHub. github.com 토이 미니 프로젝트 - 미니게임을 만들어보자 나의 역할 : 팀원 각자 1개씩 게임을 만드는것으로 진행함 나의 게임 컨셉 크리스마스에 즐겨요 짝맞추기 게임 크리스마스 느낌의 디자인으로 진행하며 카드뒤집을때 최대한 자연스럽고 부드럽게 뒤집혀 지도록 고민함 구글링 하면서 느낀점 : 자료가 참 많네.. # 요구사항 분석 1. 여러 블록 카드게임으로 시작한다 2. 게임이 시작되면..
2023/12/13 🍎 자바스크립트를 1주일만에 끝낸다구 ?
·
👩🏻‍💻 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞/⠀⠀⠀⠀ JᴀᴠᴀSᴄʀɪᴘᴛ
❤ 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤ GitHub - gayulz/StudyHistory: 나의 공부 기록 commit 나의 공부 기록 commit . Contribute to gayulz/StudyHistory development by creating an account on GitHub. github.com 수업 전 정리 DataBase : 단순반복 // 프로시저 트리거 등등은 혼자 혼공 해야 한다 Java : 개발자의 태도, 객체/상속/인터페이스/의존.,.. Javascript , Spring : 현업에서 실제 만나는 것, 팀 구성후 프로젝트 제안서 만들 예정 가장 중요한 건 기본기부터 탄탄하게 다져야 한다 ** 기술 스택을 매일 같이 정리해야 한다 ** 본인의 기술 스택..
2023/12/12 ✨ 자바스크립트 수업 - 혼자만의 공부시간이 필요할 것 같다
·
👩🏻‍💻 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞/⠀⠀⠀⠀ JᴀᴠᴀSᴄʀɪᴘᴛ
❤ 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤ GitHub - gayulz/StudyHistory: 나의 공부 기록 commit 나의 공부 기록 commit . Contribute to gayulz/StudyHistory development by creating an account on GitHub. github.com 수업 전 기술노트 작성 필수, 매일 작성하고 하루에 두세 번씩 읽어봐야 한다 목표 그림판 만들기 기한 2023/12/12 1일 게임 만들기 기한 : 2023/12/13 ~ 2023/12/15 조건 : 1인당 1개의 게임 만들기 JavaScript 수업 체크박스는 다중 선택이 가능하며 radio는 단일선택이 가능하다 단 radio의 id를 동일하게 해야 단일 선택이 가능하..
유리쯔의일상
'👩🏻‍💻 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞' 카테고리의 글 목록 (2 Page)
상단으로

티스토리툴바