Coding Kitsune

웹 개발에 있어, 가장 기본적인 백엔드 기능인 로그인 / 회원가입을 구현해보고자 한다. 여러가지 강의를 보면서 따라해봤는데, 생각보다 간단하지 않은 작업인거 같아 여러번에 나누어 공부한 것을 포스팅 할 계획이다. 먼저 VS code, Node.js , MYSQL을 통해 구현하였으며 github 실시간으로 올릴 것이다. github 주소 : https://github.com/heebumpark/node_website GitHub - heebumpark/node_website Contribute to heebumpark/node_website development by creating an account on GitHub. github.com 가장먼저 서버와 연결을 하는데, http로 연결하기보다 expre..

MYSQL에서 가장 중요한 기능 중 하나인 JOIN을 이용하여 테이블 몇개들 합쳐보자, JOIN은 정보처리기사에서도 단골 문제로 나와서 대략적인 문법은 알고있기에 수월하게 학습할 수 있었다. topic 테이블은 책에 대한 정보들과 작가의 id가 담겨져 있고, author 테이블은 이 작가에 대한 id와 이름 그리고 간단한 프로필이 담겨져 있다. 이 두 테이블을 비교해보면서 작가에 대한 정보를 알아야할 때, 행이 다섯개라 지금은 확인이 가능하지만, 데이터가 수백 수천개면 도저히 알아보기가 힘들고, 이 때 필요한 기능이 JOIN 이다. SELECT * FROM topic LEFT JOIN author ON topic.author_id = author.id; 이 SQL문을 해석해보자면 모든 속성을 포함해서 보..

이번엔 데이터를 수정하는데 쓰이는 UPDATE와 삭제하는데 쓰이는 DELETE에 대해 알아보자 이전에 작성했던 테이블 중, airjordan1의 가격을 400000 으로 수정해야한다고 가정해보자, 문법은 다음과 같다. UPDATE 테이블명 SET 속성명 = VALUE ... 이후 WHERE이나 ORDER 등 즉 이렇게 airjordan1의 가격을 400000으로 수정할 수 있다. 여기서도 조심해야할게 UPDATE shoes SET price=400000 이렇게만 해버리면 테이블의 모든 가격이 400000이 되기 때문에 실무에서 이런 실수를 하게 되면 거의 재앙 수준이라고 한다.... 그렇기에 DB 관리할 때 조심, 또 조심해야 할 필요가 있는 것으로 보인다. 이번엔 DELETE를 알아보자. UPDATE와..

Oracle, MYSQL, MongoDB 등 여러 DB 중 에서 MYSQL을 가장 먼저 배우로 했고, Oracle은 MYSLQ과 비슷한 구조이기에 추후에 MongoDB도 간단하게 배워볼 예정이다. 먼저 노트북에 MYSQL을 설치해야한다. (Google 검색 : install mysql window) 나는 이전에 학습용으로 설치해두었던 MYSQL이 패스워드가 생각이 안나서 다시 깔았는데, 계속 이전파일이 말써이어서 한참을 고생해서 재설치했다... 먼저 이게 간단한 DB의 구조이고, MYSQL Server폴더가 저 거시적 데이터베이스 서버이며, 우리는 데이터베이스를 생성해서, 그안에서 여러 table을 만들고 table안에 data들을 삽입,삭제,정렬 등을 통해 관리해나갈 것이다. MYSQL Server b..

웹 서비스를 개발하려면 프로젝트 목적에 맞도록 하드웨어와 소프트웨어를 선정해야 한다. 하드웨어 환경 개발환경 하드웨어 개발환경에는 크게 두가지 클라이언트 환경과 서버 환경이 있다. 클라이언트 환경에는 웹 브라우저, 모바일 앱 등 개개인의 기기와 연관이 있고, 개발자의 입장에서는 서버 하드웨어 개발환경이 중요하다. 서버 환경 1. 웹 서버 => 클라이언트에서 요청하는 서비스 속도 향상을 위해 정적 컨텐츠(HTML, CSS, Image) 들을 관리하고, 합법적으로 사용자 인증을 해주며 포화 방지를 위해 응답속도(대역폭) 제한. HTTP를 이용하여 요청/응답을 처리한다. 2. 웹 어플리케이션 서버(WAS) => 동적 컨텐츠(JSP, Servlet)를 수행하고, 데이터베이스와 연결이 되어 있으며, 웹 서버와 구..

먼저 React는 무엇일까? React는 페이스북에서 시작된 UI을 만들기 위한 자바스크립트 라이브러리다. 리액트를 사용하기 위해선 React JS와 React DOM을 import 해줘야한다. React JS가 element를 생성하고 event listener를 더하는것을 도와주고, React DOM은 element들을 가져다가 HTML로 바꿔준다. 먼저 바닐라 자바스크립트로 간단한 웹을 만들어보자 DOCTYPE html> Total click : 0 Click me let counter = 0; const button = document.getElementById("btn"); const h2 = document.querySelector("h2"); function handleClick() { co..

HTML과 CSS로 클론코딩을 해오면서 SVG 태그를 쓴적이 없었다. 이미지를 가져올때 PNG를 사용했었고, 아이콘을 따올때는 font awesome이나 구글폰트에 들어가 아이콘을 따왔다. 하지만 점차 svg태그를 많이 사용하는 것을 보았고, 이에 대해 대강만 듣고 넘어갔다. sgv 태그가 점점 중요하게 쓰이는것을 느꼈고 이에 대해 자세히 알아보고기로 하였다. 우선 svg 태그의 정의는 이렇게 나와있다. SVG stands for Scalable Vector Graphics and is used to define graphics for the Web 즉 내부에 원 삼각형 사각형 등 그래픽을 담을 수 있는 그릇 같은 역할을 한다. PNG => pixel 단위로 구성되며 비트맵 방식이다. SVG => 수학 ..

문제 링크 : https://programmers.co.kr/learn/courses/30/lessons/42584 코딩테스트 연습 - 주식가격 초 단위로 기록된 주식가격이 담긴 배열 prices가 매개변수로 주어질 때, 가격이 떨어지지 않은 기간은 몇 초인지를 return 하도록 solution 함수를 완성하세요. 제한사항 prices의 각 가격은 1 이상 10,00 programmers.co.kr 풀이과정 : 먼저 시간복잡도가 O(n^2)로 보이는데, 이것보다 더 효율적으로 풀어야한다고 생각하여 계속해서 다른방법을 찾다가 풀이과정을 보았고, 그냥 원래 생각했던 대로 풀면 되는것이었다. 큐, 덱을 이용해서 풀어도 되지만 그냥 반복문 두개를 만들고 i, j 중 j를 이동시키며 시간을 i마다 계산해서 an..

문제링크 : https://programmers.co.kr/learn/courses/30/lessons/42626 코딩테스트 연습 - 더 맵게 매운 것을 좋아하는 Leo는 모든 음식의 스코빌 지수를 K 이상으로 만들고 싶습니다. 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 Leo는 스코빌 지수가 가장 낮은 두 개의 음식을 아래와 같 programmers.co.kr 문제풀이 : 처음에 힙을 안쓰고 배열에서 무작정 sort 한뒤 꺼내고 다시 넣고 과정을 반복하다가 역시 시간초과가 떴다. 힙을 사용해줘야 O(logn)의 시간복잡도를 가지고, 런타임 없이 해결된다. 또 다른사람의 풀이를 참고하면서 try, except로 훨씬 깔끔하게, 코딩할 수 있었다. 매개변수로 받은 배열 heapify를 통하여 sc..

DOM은 JS언어의 일부가 아니며, JS로 HTML 문서를 조작하기 위한 모델이다. 즉 JS로 HTML을 조작하는데, 이것을 Document Object Model을 통해서 변경한다. HTML은 Node로 가득한 문서이다.(HTML의 요소 하나하나가 Node이며 트리구조다.) DOM 또한 노드들이 트리 구조로 구성되어있다. JS에서 특정 HTML 속성들을 가져오는 방법에는 여러가지가 있는데, document.getElementById document.getElementsByClassName document.getElementsByTagName 이 세가지가 고전적인 방법이며 각각 id, class, tag를 가져오는 방법이다. 이 모든 요소를 가져올 수 있는, 비교적 최근에 나온것이 바로 querySele..