티스토리

wonah's devlog

검색하기

블로그 홈

wonah's devlog

wonah99.tistory.com/m

wonah 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[Canvas API]캔버스(Canvas)를 이용한 도형 그리기 이제 어떻게 캔버스에 그릴 수 있는지에 대해 알아보자. 캔버스 위에 물체를 그릴 때에는 path를 사용하는 것이 필수적이므로 이것이 어떻게 사용되는 지 볼 것이다. 📒 캔버스(Canvas)를 이용한 도형 그리기 📍 그리드 드로잉을 시작하기 앞서, 캔버스 그리드 혹은 좌표공간(coordinate space)에 대하여 이야기 해보겠다. 이전 페이제에서 이야기했던 HTML 골격(skeleton)은 가로 세로 각 150 픽셀의 캔버스 요소를 가지고 있다. 기본적으로 그리드의 1단위는 캔버스의 1픽셀과 같다. 이 그리드의 원점은 좌측상단의 (0, 0)이다. 모든 요소들은 이 원점을 기준으로 위치된다. 그렇기 때문에 왼쪽에서 x 픽셀, y 픽셀 떨어진 것이라 볼 수 있고, 이 사각형의 좌표는 (x, y)가 된다. .. 공감수 0 댓글수 0 2023. 10. 10.
Canvas API Canvas HTML의 태그와 JavaScript를 사용하면 다양한 그래픽 요소를 만들 수 있다. 단순한 도형을 그리는 것은 물론, 데이터 시각화, 애니메이션, 웹 게임 등을 사용하기에 따라 무궁무진한 콘텐츠를 만들어 낼 수 있다. 이제 기본적인 캔버스 사용법부터 알아보자면, 일단 캔버스 태그를 작성하는 것으로 시작된다. 캔버스는 canvas 엘리먼트를 DOM으로 조작하는 방식으로 작성된다. 따라서 엘리먼트를 선택할 때 사용할 id를 작성해주는 것이 좋다. 캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용이 표시된다. 이제 자바스크립트를 사용해서 엘리먼트를 선택해주자! const canvas = document.querySelector("#canvas"); 우선 너비와 높이를 설정해주어야.. 공감수 0 댓글수 0 2023. 10. 10.
[ES6+] callback 콜백 "내가 전달한 함수를 나중에 다시 불러줘(호출해줘)" = Callback 콜백은 다른 함수에 인수로 전달되는 함수를 말함 함수가 다른 함수를 호출할 수 있고 또한 함수가 완료된 후 콜백 함수를 실행할 수도 있음 콜백이 자주 쓰이는 곳 = 하나의 함수가 다른 함수를 기다려야 하는 비동기 함수에서 쓰일 때 대표적인 비동기 함수 setTimeout() : 시간 이후 실행 function myMessage1(){ document.getElementById('demo1').innerHTML = 'I love you!!'; } setTimeout(myMessage1, 3000); // 인자값을 전달받는(즉, 매개변수가 존재하는) 함수인 경우..? function myMessage2(value){ documen.. 공감수 0 댓글수 0 2023. 9. 22.
동기와 비동기 동기(synchronous)와 비동기(asynchronous)의 개념 자바스크립트는 동기적으로 작동한다. 일반적으로 각 코드 블록이 이전 블록이 끝난 이후에 순차적으로 실행 💡비동기는 왜 필요할까? 어떤 명령을 실행할 때 그 명령이 언제 끝날지 예측하기 어렵거나 또는 주가 되는 작업이 아닐 때 사용 웹 브라우저와 서버가 통신할 때 언제 끝날 지 예측하기 힘들다. (인터넷이 느리거나, 서버가 느리거나) 통신이 끝날 때까지 아무것도 못하고 있는 것보다는 다른 일을 하고 있다가 통신이 끝났을 때 콜백이 호출되면서 작업을 나중에 하면 훨씬 효율적 (예시1) 네이버에서 네트워크 탭 열고 검색창에 ㅅ만 입력하고 통신한 것들 확인(비동기 통신, 새로고침 현상 안 일어남) (예시2) 네이버 지도 같은 경우 모든 데이터.. 공감수 0 댓글수 0 2023. 9. 22.
[ES6+] var, let, const var, let, const의 차이 var 함수 스코프에 종속, 그 외엔 전역 블록 기준으로 스코프가 생기지 않기 때문에 블록 밖에서 접근 가능 예: for문(블록 스코프) 내에서 var로 선언하면 for문 밖에서도 사용 가능 let 블록 스코프에 종속, 그외엔 전역 변수가 선언된 블록과 그 하위 블록 내에서만 사용 가능 const 블록 스코프에 종속, 그외엔 전역 값이 변경될 수 없다.(값 재할당 불가) (예시) const에 객체가 담겼다면 const person = { name: 'wonah', age: 23 }; person.age = 24; 변수 전체를 재할당하는 것이 아니라 그 속성 중 하나에 대한 재할당은 가능하다. 객체 내용을 변경할 수 없게 const 객체를 고정할 수는 있다. Object.. 공감수 0 댓글수 0 2023. 9. 22.
HTML 요소 접근 JavaScript에서의 HTML 요소 접근 JavaScript에서 HTML의 요소를 제어하기 위해서 특정 Web API를 이용하여 요소를 선택해야한다. Document.querySelector() 선택된 선택자 또는 선택자 그룹과 일치하는 문서 내 첫 번째 Element를 반환한다. 일치하는 요소가 없으면 null을 반환한다. let a = document.querySelector('.txt'); console.log(a); txt라는 class를 가진 요소 중 첫 번째 요소를 반환한다. Document.querySelectorAll() 선택된 선택자 그룹에 일치하는 document의 element list를 나타내는 NodeList를 반환한다. let a = document.querySelectorA.. 공감수 0 댓글수 0 2023. 9. 22.
dataset : 문서 객체 사용자 정의 속성 dataset이란? 사용자가 해당 요소에 커스텀 속성을 추가한 객체 dataset 사용법 1. HTML 태그에 접두어(data-)가 붙은 속성을 추가하고, 거기에 사용하고자 하는 값을 지정해놓는다. 2. 자바스크립트에서 요소를 선택하고, dataset객체에서 커스텀 속성을 읽어들인다. 이때 접두어는 생략한다. dataset 속성의 값은 개수 제한이 특별히 없다. 자바스크립트에서의 data-* 값 가져오기 📍 getAttribute() - data-* 속성도 결국엔 태그 속성이기 때문에 getAttribute() 메서드로 값을 가져와서 활용할 수 있다. ✏️ 코드 예시 h1을 클릭하면 해당 [data-index]값을 경고창에 반환하도록 하였다. 제목태그1 제목태그2 위 코드에서 보다시피 CSS에서도 속성 .. 공감수 0 댓글수 0 2023. 9. 22.
[HTML] Canvas 요소는 HTML page의 비트맵 영역을 정의한다. Canvas API를 사용하면 JavaScript가 캔버스에 그래픽을 그릴 수 있다. Canvas API는 색상, 회전, 투명도 및 기타 픽셀 조작을 사용하여 모양, 선, 곡선, 상자, 텍스트 및 이미지를 그릴 수 있다. HTML DOM 메소드를 사용하여 요소에 액세스할 수 있습니다. getElementById() 캔버스에 그리려면 2D 컨텍스트 객체를 생성해야 한다. const myCanvas = document.getElementById("myCanvas"); const ctx = myCanvas.getContext("2d"); HTML 요소 자체에는 그리기 기능이 없다. 그래픽을 그리려면 JavaScript를 사용해야 한다. 이 getContext.. 공감수 0 댓글수 0 2023. 9. 22.
5. function 함수 여러 실행 코드들의 묶음(그룹화) 자주 사용하는 코드들(기능)을 저장했다가 필요할 때 호출해서 사용 function 키워드를 사용하여 정의 => ES6차에서는 화살표 함수를 사용 1. 함수 선언문 : 기명 함수로 정의 function 함수명() { 실행코드; } 2. 함수 표현식 : 익명 함수를 변수에 할당 변수 = function() { 실행코드; } 위와 같이 정의된 함수는 즉시 실행되지 않음 메모리에 할당되어 있다가 함수가 호출되면 실행 1. 함수명(); 2. 변수명(); function greeting(){ document.write('hello'); } greeting(); 📍함수 선언문과 함수 표현식의 차이점 함수 선언문은 호이스팅(끌어 올리기)이 일어난다. 해당 스코프(유효 범위)의 최.. 공감수 0 댓글수 0 2023. 9. 22.
4-4. Audio 객체 Audio 객체 오디오를 재생하기 위해 사용되는 요소 MP3, WAV, OGG 등 다양한 오디오 포맷 파일을 재생할 수 있음ㅈ 자바스크립트 상에서 audio객체를 생성하거나 혹은 HTML상에 태그를 선언해둔 상태라면 엘리먼트 취득 방식으로 audio 객체 확보할 수도 있다. const audio = new Audio('audio.mp3'); // 'audio.mp3' 파일을 로딩 audio.play(); // 오디오 재생 이러한 Audio 객체는 다양한 메서드와 이벤트를 제공하므로, 다양한 오디오 제어 기능을 구현할 수 있다. Audio 객체 프로퍼티 src - 음원 파일 경로 : "경로/파일명. 확장자" volumn - 볼륨 : 0.0 ~ 1.0 loop - 반복 여부 : true | false aut.. 공감수 0 댓글수 0 2023. 9. 22.
4-1. object 객체 여러 데이터들의 묶음 속성(데이터, Property)과 기능(동작, Method)을 가지는 모든 것 객체 안에 객체도 가능함 자바스크립트의 객체의 종류 1. 사용자 정의 객체 2. 내장 객체 3. 브라우저 객체(BOM) 4. 문서 객체(DOM) 1. 사용자 정의 객체 1) Object 내장 객체 이용 변수 = new 객체 생성자 함수(); new: 객체 생성 키워드 생성한 객체를 사용하기 위해 변수에 저장 객체 생성자 함수(constructor)는 대문자로 시작 속성 및 메소드 추가, 객체 접근은 도트 연산자(.)를 이용 this: 객체 자기 자신을 가리킴 2) 리터럴 방식 이용 직접 작성 객체 속성 = key : value 1쌍의 형태 공감수 0 댓글수 0 2023. 9. 21.
3-2.loop 반복문 조건식을 만족하는 동안 실행코드를 반복하여 수행 예) 데이터를 반복해서 처리해야 될 때 while문 1->2->3 반복 while (1. 3. 조건식){ 2. 실행코드; } for문(가장 많이 사용) for (1. 초기화식; 2. 5.조건식; 4. 증감식) { 3. 실행코드; } 4번에는 모든 증감식이 올 수 있음 i++, i--, i = i * 10 break문 switch문 또는 반복문 빠져나갈때 사용 continue문 반복문에서만 사용 가능 뒤에 오는 코드는 무시하고 다음 반복(for문 : 조건식)을 계속할 때 사용 공감수 0 댓글수 0 2023. 9. 21.
3-1. conditional 조건문 조건 만족 여부(true/false)에 따라 코드 수행 여부가 결정됨 if문 조건식을 만족하면 실행 코드 실행 if(조건식){ 실행코드; } if ~ else 문 조건식을 만족하면 if문 실행, 만족하지 않으면 else문 실행 조건식의 결과에 따라 두 가지 결과 중 하나를 실행시킬 때 사용 if ~ else if 문 여러 if문 조건식 중 만족하는 것을 찾아 실행, 만족하는게 없으면 else문 실행 조건식의 결과에 따라 여러가지 결과 중 하나를 실행시킬 때 사용 선택문 일치하는 경우의 값이 있을 경우 선택하여 실행 코드를 수행 일치하는 값이 없을 경우 default문(optional) 수행 switch문 const 변수 = 값; switch (변수) { case 값1: 코드1 break; case.. 공감수 0 댓글수 0 2023. 9. 21.
2. operator 연산 : 데이터를 처리하여 결과가 나오는 것 예) 연산식 : 10 + 20 연산자 : + 피연산자 : 10, 20 산술 연산자 +, - , * , / , %(나머지 연산자) 문자 결합 연산자 + 여러 개의 문자를 하나의 문자로 결합할 때 사용 문자 데이터가 하나라도 포함되어 있으면 문자 결합 연산 연산의 기본 방향 : 왼쪽에서 오른쪽으로 대입 연산자 = 값(데이터)을 변수에 저장할 때 사용 복합 대입 연산자 +=, -=, *=, /=, %= 대입 연산자 응용 : 데이터를 동적으로 받아와서 넣어줄 때 사용 innerHTML, appendChild(), insertBefore() 증감 연산자 ++(1씩 증가), --(1씩 감소) 📍다른 연산자와 같이 사용 시 위치(전위, 후위)에 따라 연산이 달라짐 비교 연.. 공감수 0 댓글수 0 2023. 9. 21.
[CSS]화면고정 position: sticky; top: 0; 스크롤로 인해서 화면에서 벗어날 상황에서 최상단에 고정된다. 부모 태그가 있고 부모 태그가 더 크다면 부모 태그가 화면에서 벗어날 때 같이 사라지게 된다. 공감수 0 댓글수 0 2023. 9. 5.
17. 환경변수 그동안 작업한 application은 주소가 localhost로 하드코딩되어있다. 그런데 개발할 때 사용할 api와 서버의 deploy에서 실서버에서 사용할 api 주소가 다를 수도 있다. 이런 정보를 application의 소스코드에서 떨어뜨려서 별도로 관리해야 할 필요성이 있다. 그때 환경변수를 보면 된다. .env .local 파일을 홈 디렉토리에 생성하고 파일에 application에 사용할 정보들을 작성하면 된다. 이 데이터를 가지고 오는 방법 📍 ./ layout.js ↓ (변경) 📍 create/ page.js ↓ (변경) 🚧 글 생성 시 undefined 에러 발생 기본적으로 환경변수에는 기밀이 포함될 데이터가 포함될 가능성이 높다. 이런 기밀 정보까지 클라이언트 컴포넌트에 노출된다면 이 .. 공감수 0 댓글수 0 2023. 8. 26.
16. 글 삭제 📍 삭제 기능 구현 Control.js 파일에서 delete 버튼을 클릭했을때 delete 기능이 동작해야하므로 onClick 추가 삭제를 하기 위해서는 서버쪽으로 메소드를 delete로 전달해야하기 때문에 option으로 DELETE 메소드 추가하면 해당 글이 삭제된다. 그러면 사용자가 열어볼 데이터가 삭제되었기 때문에 root로 redirection 해야한다. 그러기 위해서는 router가 필요하다. 삭제 작업이 끝났다면 root로 이동을 하고 그다음에 서버 컴포넌트들을 refresh하면 글이 삭제된다. 공감수 0 댓글수 0 2023. 8. 26.
15. 글 수정 http://localhost:9999/update/3 구현하기 🔔 먼저 app 폴더 밑에 update 폴더 생성, 그 밑에 [id] 폴더 생성, 그 밑에 page.js 생성 update 기능에는 create 기능과 read 기능이 필요하다. 💡 기본적인 UI는 create를 가져오는 게 더 편하기 때문에 create 기능 가져오면 된다. create/page.js 내용 그대로 복사 붙여넣기 후 컴포넌트 함수명을 Create에서 Update로 변경해준다. 💡 update에서는 title, body input 값에 원본이 적혀있어야 하기 때문에 read 기능 가져오면 된다. read/page.js 열어보면 read page는 현재 서버 컴포넌트이기 때문에 그대로 사용할 수 없다. 왜냐하면 update는 클.. 공감수 0 댓글수 0 2023. 8. 26.
14. update & delete 버튼 구현 🔨사전 작업 글을 선택하지 않고 있는 홈으로 갔을때 update, delete 버튼 안 보여야 한다. 글을 선택했을때 update, delete 버튼이 보여야 한다. 어디에 있던 update/1 으로 이동을 하는데 그게 아니라 선택한 글의 id가 update/id값 이렇게 나오도록 해야한다. 이 코드를 변경하면 된다. 보였다 안 보였다 하기 위해서는 주소의 id가 있는지 없는지 확인해야한다. 루트 layout.js 에서는 id가 있는지 없는지 확인할 수 없다. read/[id]/pages에서 props.params를 이용하여 id 값을 확인할 수 있다. 그러나 layout.js는 [id] 폴더보다 상위에 존재하기 때문에 props로 params가 주입되지 않는다. 💡 useParmas 사용? usePar.. 공감수 0 댓글수 0 2023. 8. 25.
13. cache create에서 create하게 되면 content가 생성이 돼서 db.json에 데이터가 추가되고 URL 과 내용이 잘 변경된다. 그런데 글 목록에 content가 추가되지 않았다. 이는 캐시와 관련이 있다. 서버에서 글 목록을 가져오는 코드에서 fetch 명령어를 사용하게 되면 Next.js는 우리가 한 번 가져온 정보를 .next 폴더에 저장해둔다. reload를 해도 통신이 이루어지지 않고 있다. cache 가 HIT 이기 때문이다. 이 문제를 해결하기 위해서 글을 생성하고 서버 컴포넌트를 refresh하기 전에 layout.js에서 fetch로 인해서 만들어진 캐시를 지워야 한다. 📍 Revalidating Data 캐시된 데이터를 일정 시간 간격으로 재검증하려면 fetch()에서 next.re.. 공감수 0 댓글수 0 2023. 8. 25.
12. 글 생성 🔔 만약에 서버를 껐다 켜도 문제가 생기면 next 폴더를 지우고 reload하면 됨 > [mac] rm -rf .next [window] rmdir /s /q .next > npm run dev 💡 form 태그 사용하기 onSubmit 사용한다. 이를 통해 사용자와 상호작용을 하기 때문에 Server Component에서 사용하지 못하므로 Client Component로 변경해야 한다. > "use client" onSubmit은 기본적으로 페이지 이동을 하기 때문에 기본 동작을 방지하기 위해서 > (e) => { e.preventDefault(); } 💡 input 값 찾기 e.target : form 전체 e.target.title : name이 title인 element e.target.titl.. 공감수 0 댓글수 0 2023. 8. 25.
11. 글 읽기 read/[id]/page.js에서 읽기 기능 구현 💡 먼저 생각할 부분 이 페이지는 사용자와 상호작용 하는가? 그냥 데이터를 읽어서 출력할 뿐이다. = Server Component 데이터를 가져올 때는 함수를 async / await 방식 사용 id값을 URL에 반영해서 데이터를 가지고 옴 공감수 0 댓글수 0 2023. 8. 25.
10. 글 목록 가져오기 Server Component 어떤 정보를 단순히 보여줌 사용자와 상호작용 X Client Component 버튼과 같이 사용자와 상호작용 O 📍 Client Component Next.js는 기본적으로 Server Component로 간주하기 때문에 Server Component에서 useState, useEffect 같은 api를 사용하려고 했더니 에러 발생 그러면 이 코드를(모듈을) Client Component로 변경하고 싶으면 맨 위에다가 "use client"; 작성하면 정상 작동 topics를 가지고 글 목록 만들기 위 코드 중에서 몇 가지 아쉬운 점 useEffect를 이용해서 데이터를 fetching 하고 있음. 즉 서버에서 클라이언트로 데이터를 가져오고 있음. 만약에 서버가 상파울루에 .. 공감수 0 댓글수 0 2023. 8. 25.
09. Backend 현재 html, css 하드 코딩 되어있는 상태이다. 백엔드를 구축해서 백엔드에 있는 데이터를 가지고 와서 동적으로 위 내용을 표시 이때 Next.js를 순수하게 백엔드로 사용하고 싶다면 메뉴얼 Routing > Route Handlers 참고하면 Next.js로 API 구축 가능 📍 json server로 백엔드 구축 > npx json-server --port 9999 --watch db.json 9999 포트에 서버 연결 db.json파일에 내용(정보)를 저장 --watch : 내용이 변경되었을때 서버에 바로 적용 http://localhost:9999/topics 라는 주소로 접속하면 글 목록 보여주기 위해 db.json 파일에 "topics" 추가 데이터를 자바스크립트로 가져오기 위해 개발도구_.. 공감수 0 댓글수 0 2023. 8. 25.
08. CSS Next.js에서 기본적인 CSS 사용 방법 루트 layout.js에서 globals.css를 import 하여 어떤 페이지를 방문하여도 해당 css파일이 로드된다. globals.css 파일은 전역적으로 디자인을 적용할 수 있다. 공감수 0 댓글수 0 2023. 8. 24.
07. 정적 자원 사용하기 이미지와 같은 정적인 컨텐트를 사용하려면 public 폴더에다가 이미지와 같은 파일을 위치 시키면 된다. 위치 시키고 싶은 page.js에서 img 태그를 사용하면 된다. 공감수 0 댓글수 0 2023. 8. 24.
06. Single Page Application Next.js 사용하면 그냥 좋아지는 Server Side Rendering 개발자 도구에서 Run command 클릭 disable javascript 클릭하면 자바스크립트 꺼짐 React는 javascript 기술이기 때문에 자바스크립트가 꺼지면 웹 페이지가 아예 렌더링이 되지 않는다. 하지만 Next.js로 만든 웹 페이지는 reload해도 렌더링이 잘 된다. 그 이유는 js가 서버 쪽에서 react를 실행해서 그 응답 결과를 .next에 저장해서 그것을 응답하기 때문이다. 즉 Next.js는 javascript가 아닌 html를 응답한다. 현재 웹 페이지에서는 링크를 옮길 때마다 페이지를 다운로드 받고, 또 이전에 방문했던 페이지로 돌아갈 때에도 다운로드 받게 되어있다. 이러한 문제점은 사용자에게.. 공감수 0 댓글수 0 2023. 8. 24.
05.라우팅 라우팅 사용자가 접속한 URL의 path에 따라서 콘텐츠를 응답해주는 작업 어떤 프레임워크든 그 중심에는 반드시 라우팅 존재한다. 라우팅은 웹 개발의 가장 중요한 요소 중 하나이다. app 폴더 안에 layout.js, page.js 존재하는데 layout.js 파일이 웹 페이지의 기본적인 뼈대(골격)이다. 그리고 layout.js에 {children} 코드 위치에 page.js 파일에서의 return 값이 위치하게 된다. 이는 path가 없을 때 구성이고 각 a태그에 라우팅 기능을 부여하기 위한 절차는 다음과 같다. http://localhost:3000/create 로 이동했을 때의 페이지를 만들려면 app 폴더 안에 create 폴더 생성 create 폴더 안에 page.js 파일 생성 create.. 공감수 0 댓글수 0 2023. 8. 24.
04. 뼈대 만들기 웹을 소개하는 튜토리얼 사이트 첫 번째 페이지를 방문하면 welcome 메시지 보여주기 Create, Update,Delete 기능 - welcome메시지 content는 src/app/page.js return하는 값 - 공통된 부분은 layout.js에서 다루는 것이 효과적 공감수 0 댓글수 0 2023. 8. 24.
01. 설치와 실행 ~ 03. 배포 설치 > npx create-next-app@lastest . 실행 > npm run dev layout.js 파일이 기본 HTML layout.js 파일에서 children은 page.js파일에서 return한 값 개발 버전 기본적 용량이 6.4MB로 큼 -> 용량을 줄이고 불필요한 메시지 지우기 package.json 파일에서 "scripts" 아래에 프로젝트 유지보수를 위한 명령 존재 "dev"는 개발 버전 실행 명령 "build"는 실서버를 위한 배포판을 만드는 명령 "start"는 그 배포판을 서비스하는 명령 배포판은 용량이 302KB로 용량이 현저히 작음 공감수 0 댓글수 0 2023. 8. 24.

728x90

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.