Naver Blog
키자드에 등록된 총 420개의 포스트를 확인하실 수 있습니다.
이 문제는 원을 그리는 것이다. 좌표가 주어지면 r1 r2는 반지름이라고 취급하면 된다. 이건 중학교 수식의 원 계산이므로 한번 해보자.
얕은 복사와 깊은 복사가 있다. 새롭게 생성하는 변수에 다른 변수의 값을 대입하기 위해 대입연산자를 사용한다. 위와 같이 복사를 할 수 있는 기본 형태다. 얕은 복사라고 할 수 있다. 그렇다면 깊은 복사는? 조금있다가 알아보자. 복사생성자 C++에서 복사생성자란 자신과 같은 클래스 타입의 다른 객체에 대한 참조를 인수로 전달받아 참조를 가지고 자신을 초기화 하는 것이다. 새롭게 생성되는 객체는 원본 객체와 같으면서 완전한 독립성을 가지게 해준다. 복사 생성자를 이용한 대입은 깊은 복사를 통한 값의 복사이기 때문이다. 복사생성자는 아래와 같이 주로 사용된다. 1. 객체가 함수에 인수로 전달될때 2. 함수가 객체를 반환값으로.......
이거는 간단한 꿀팁이라서 올리는 글이다. 배열의 길이를 일일이 지정하고 함수의 값에 배열을 쉽게 보낼 방법은 없을까? 연구하다가 공부하면서 만든 것이다. 도움이 됬기를 바란다.
immer immer 는 상태를 업데이트 할때 불변성을 신경 쓰지 않으면서 업데이트를 해주면 immer가 불변성 관리를 대신 해준다. 우선 라이브러리를 설치한다. 이렇게 produce를 부를 수 있다. produce 함수를 사용할 때는 첫번째 파라미터에는 수정하고 싶은 상태, 두번째 파라미터에는 어떻게 업데이트하고 싶을지 정의하는 함수를 넣는다. 두번째 파라미터는 불변성에 신경 쓰지 않고 그냥 업데이트만 해주면 알아서 처리해준다. 우선 위와 같이 세팅을 한다. 여기서 produce를 immer에서 꺼낸다. produce의 역할은 오히려 간단하다. 원본 복사를 한뒤 값을 수정 했지만 produce는 바로 원본을 적고 수정할 값을 적으면 된다. ...원본데이터 로 복.......
Node.js에서 express-generator로 프로젝트를 시작하거나 직접 app.js를 구성한다. 하지만 React에도 koa라는 것이 있다. 위와 같이 index.js를 만들자. 기본적으로 node.js처럼 구성이 된다. 실행하면 localhost:4000으로 들어가면 hello 가 잘 나온다. ctx는 context의 약자다. 응답이나 요청의 정보를 ctx가 가지고 있다. 즉, ctx는 웹 요청과 응답에 관한 정보이고 이제 볼 것은 현재 처리중 이번에는 미들웨어를 사용해보자. next를 사용하는 것으로 next는 다음 미들웨어를 호출하는데 next를 호출하지 않으면 다음 미들웨어는 호출이 되지않고 종료한다. 위와 같이 미들웨어를 추가적으로 적으면 다시 node src를 한 다음에 잘나오는 것을.......
React에서 SPA앱을 만들때 사용되는 react-router-dom 패키지는 react-router = > 웹&앱 react-router-dom = > 웹 react-router-native = > 앱 이렇게 3가지가 있다. 내가 할 것은 웹이므로 웹을 설치해야한다. react-router-dom 위와 같이 yarn으로 설치를 합니다. react-router-dom 안에는 // BrowserRouter BrowserRouter : history API를 사용해 URL과 UI를 동기화하는 라우터다. 제일 큰 이유는 HTML5 history API를 사용해서 새로고침 하지 않아도 주소를 변경이 가능하며 페이지를 전환이 가능하고 현재 주소의 관련된 정보를 props로 조회, 사용할 수 있게 해준다. // Link Link : 'a'태그와 매우.......
이번에는 뉴스를 만들어보자. 당연히 BrowserRouter을 이용해 새로고침을 하지않고 필요한 컴포넌트만 전환하게 하자. 우선 완성본을 보면 뉴스 리스트가 전체보기로 모든 항목이 다나온다. 그리고 다른 곳을 클릭하면 대기중.... 이 나오면서 로딩이 되면서 이렇게 비즈니스와 관련된 기사들이 나온다. 그럼 기본 세팅부터 먼저 하자. 이제 BrowserRouter를 위한 react-router-dom을 설치하자. 위와 같이 말했던대로 BrowserRouter를 불러와서 return에 <App />을 씌워주자. 먼저 구조를 작성하려한다. app.js가 index다음으로 최상위에 있고 하위순으로 보면 NewsItem -> NewsList == Categories -> NewsPage =.......
이번에는 color를 클릭할시 색상이 변경되는 것을 해보자. 왼쪽으로 클릭하면 색상이 큰 상자가 바뀐다. 우클릭하면 아래 작은 상자가 바뀐다. 한번 구현해보자. 구성은 아래와 같다. SelectColors를 만들자. 각 색을 선택하는 항목들이 나오는 것이다. SelectColors SelectColors 에서 createContext를 사용한다. context는 React 컴포넌트 트리안에서 전역적으로 데이터를 공유하는 것을 고안한 것이다. 즉, 중간에 있는 엘리먼트들에게 props를 넘겨주지 않아도 된다. 이런 식으로 Provider로 다른 파일에서 context를 구독하는 파일에 변화를 알리는 역할을 한다. Provider 컴포넌트 하위에서는 context를 구독하는 모든 컴포넌트는 Provider.......
React react는 컴포넌트 자신이 개별적으로 상태를 관리한다. 즉, 트리 구조로 부모 컴포넌트가 자식 컴포넌트까지 내려보내는 것이다. 소규모나 적당한 규모는 리액트를 사용해도 된다. 즉, 부모가 상태를 관리해도 트래픽이나 속도는 상관이 없다. 하지만 컴포넌트가 많거나 큰 규모는 안된다. 만약 상태가 변하면 부모와 자식간에 사이에 100개 컴포넌트가 있으면 커진다. 그래서 나온 것이 리덕스이다. Redux 리덕스는 라이브러리다. 가장 많이 사용하는 리액트 상태 관리 라이브러리다. 즉, 관련 로직을 다른 파일로 분리시켜 다른 곳에서 관리하는 것이다. 컴포넌트끼리 상태를 공유해야할 때 여러 컴포넌트를 안 거치고 손쉽게 전달이 되.......
프로그램을 하기전에 메모리구조 즉, 메모리 영역을 알아야한다. 1. OS에 프로그램을 실행요청을 한다. 2. 그 프로그램의 정보를 읽어 메모리에 로드를 해준다. 3. 프로그램의 코드를 읽고 메모리를 관리하며 해당 명령어들을 실행한다. 4.동적메모리 힙이 할당되면 위쪽에서 아래쪽으로 데이터를 사용한다. 5.스택메모리 스택이 할당되면 아래에서 위쪽으로 데이터를 사용한다. 우선적으로 이렇게 구조가 되어있다. 우리가 프로그램을 실행하면 우선적으로 보조기억장치에 HDD나 SSD에서 읽어온다. 왜냐하면 주기억장치(RAM)은 휘발성이라 저장이 안되는 곳이다. 저장은 보조기억장치가 하기에 그쪽에서 데이터를 읽어야 한다. 프로그램을 읽고.......
C++을 배워보자. 블록체인을 배우기에 앞서 배우는 C++이다. C++이란? C++은 기존의 C언어에 여러 가지 기능을 추가하여 만든 프로그래밍 언어다. C언어의 절차 지향적 언어의 특징을 가져왔다. 또한 클래스를 사용하는 객체 지향적 언어의 특징을 가져왔다. C언어를 기초로 삼아 만든 언어이므로 C 표준 라이브러리를 그대로 사용한다. 문법, 연산자, 타입, 제어문, 포인터 등을 C에서 가져왔기에 C언어를 알고있으면 더 좋다. 1. C++은 절차 지향적이며 구조적 프로그래밍 언어다. 2. C++은 객체 지향 프로그래밍 언어다. 3. C++은 일반화 프로그래밍 언어다. 1) 소스파일 작성 우선적으로 할 것은 확장자가 .cpp 파일을 만드는 것이다. 소스파.......
기본에 앞서 먼저 세팅을 해보자. 우선적으로 위와 같이 기본형태를 나타낸다. void를 이용해서 출력도 된다. 일단 기본 세팅부터 자세히 들여다보자. 선행처리문? #include는 선행처리문이라고 한다. 선행처리문이란? 외부에 선언된 함수나 상수 등을 사용하기 위해서 헤더파일에 적는다. iostream은 말그래도 input과 output이 있는 것이라고 이해를 하면된다. c언어는 #include <stdio.h>를 사용하는 것으로 알고 있다. c++은 위와 같이 선행처리문을 사용하면 된다. 위의 내용은 문자열 타입을 지정하는 것이다. 만약 17버전의 비쥬얼 스튜디오를 사용하면 위를 명시해야 하지만 19버전 이상을 사용한다면 명시를 하지 않아도 된다. 위.......
간단한 삭제 추가 useState를 사용하여 만드는 것을 해보자. cmd창에 간단한 리액트 프로그램을 만들자 폴더를 만들었으면 위와 같이 간단한 Test파일을 연결하기 위해 App.js 에 세팅을 해놨다. 자식 컴포넌트에게 타이틀 제목을 주는 것도 만들어보았다. Test.js로 와서 우선적으로 rafce로 간단한 틀을 만들자. 물론 extension 확장 팩에 react가 없으면 위와 같은 rafce같은 명령어는 듣지 않는다. 우선적으로 부모 컴포넌트에서 보낸 title을 받아오자. props.title로 쓰기 번거로워서 나는 미리 꺼내놨다. 우선적으로 기본 세팅 데이터를 만들었다. useState를 이용해 기본 디폴트 값의 menu 데이터를 만들어놨다. 그리고는 이제 menu데이.......
이번에는 간단한 색상 만들기를 해보자. 단순하면서도 스타일을 적용시키는 재미(?)가 있다. 우선적으로 16진수로 랜덤값을 받아와야한다. 그 값을 만들기 위해서는 위와같이 하면 된다. 랜덤값을 통해 색상코드를 만들고 앞에 #을 붙여주면 우리가 css를 적용할때 사용하는 색상 값이다. 그 값을 우선 기본적으로 적용하기 위해서는 클래스나 함수중에 나는 우선적으로 함수로 구현하였다. useState로 간단하게 구현이 가능하며 대신 클릭 이벤트를 할때 그값을 받아오게만 설정하면 된다. 위의 삭제 추가 만들기 버튼을 통해 useState를 잘 사용할 수 있다면 이번 색상은 색상코드를 만들기만 하면 되는 것이라 어렵지는 않았다.
Hooks는 함수형 컴포넌트에서도 클래스에 사용하던 상태 관리를 사용할 수 있게 해주는 것이다. 렌더링 전이나 렌더링 후에 설정하는 작업들을 다양하게 함수형 컴포넌트로 실행한다. 1. useState useState는 기본적인 Hook으로서 함수형 컴포넌트에서 가변적인 상태를 지니게 해준다. 함수형 상태를 관리해야 한다면 이 useState를 사용해야한다. 간단하게 숫자형 카운터를 예로 들 수 있다. 위와 같이 import에 { useState } 를 불러오고 사용해야 한다. 이 부분이 배열 비구조화 할당 문법이다. 이 부분의 장점은 여러개가 있더라도 useState를 여러번 사용을 하면 된다. 굳이 클래스를 만들지 않아도 간편하게 사용할 수 있기 때문이다. 이렇.......
scss 우리가 쓰는 css를 더 간편하게 사용하는 것이다. scss라고 하는데 일단 css 보다는 간편하게 틀형식으로 구별지어서 스타일을 꾸밀 수 있어 가독성에도 좋다. 우선 위와같이 알록달록 네모 박스를 만들 것이다. scss를 사용하기 위해서는 를 먼저 설치를 해줘야한다. 색깔을 재사용 간단하게 변수로 지정해 담아놓고 여러번 사용을 할 수가 있다. 그리고 mixin으로 함수처럼 function과 같은 것이다. 함수로 활용을하면 좋을 것 같다. 이런식으로 태그의 안에는 scss에서 css 와 다른 점은 태그 안의 태그는 이렇게 감싸줘서 그안에 설정을 해야한다. 한마디로 가독성은 좋고 찾기도 편할 것이다. &현재 선택자로 &.클래스이름을 하.......
part07 이라는 리액트 프로젝트 파일을 만든다. 기본 app.js 세팅을 해놓는다. 우선적으로 Todo는 1) 첫번째 컴포넌트 TodoTemplate 이름이 명시하는대로 템플릿의 역할은 한다. 즉, 하나의 틀이라고 보면 된다. 이 탬플릿에 추가하는 거 할일 목록 등이 나오기 위한 모양을 만드는 곳이다. 우선적으로 props를 받아오는데 바로 정제를 해도 된다. { } 통해 children 즉, 태그 사이의 문구를 가져올 수 있다. 위와 같이 작성을 하고 를 설치한뒤 css를 꾸며보자. scss는 자식태그를 안에 넣을 수 있어서 가독성이 좋다. app.js에 위와 같이 수정을 하고 index.css를 다지우고 위와 같이 정리한다. 그러면 위와 같이 나오는 것을 확인 할 수 있다.......
문제의 핵심은 우선적으로 삼각형의 조건이다. 짧은 2개의 합이 긴 1개의 길이보다 커야한다. 같거나 작으면 만들수가 없다. 그래서 이번 알고리즘을 풀때는 큰 길이를 찾아서 구하는데 작은 길이 두개를 구하는 것보다 큰 길이를 하나 찾아서 모든 선의 길이를 더해 큰 길이를 빼면 작은 두 길이를 빠르게 찾을 수 있다. 혹은 위와 같이 answer를 리턴 하지 않아도 된다. 위와 같이 그냥 string으로 반환을 해도 된다.
이번에는 Math.ceil로 간편하게 풀 수 있다. ceil은 나눠서 나머지가 잇으면 올림을 해버리는 함수다. 즉 연필을 12자루에 하나씩이니 12개를 나눠서 나머지가 있으면 한 다스를 더 필요하니 올림을 해야한다. Math.floor는 소수점을 아예 없애버리는 내림이다. Math.round는 반올림을 하는 함수다. Math.ceil은 올림을 해버리는 함수다. 이런식으로 유동적이게 쓰면 좋다.
별 다른 이유는 없다 블록체인에 흥미가 있고 그거에 대해 공부하면서 투자도 하고 각종 디파이, 스왑, 기술 등을 보면서 내가 원하는 투자도 하면서 공부해나갔다. 투자한지 8개월에서 1년 기다렸다. 초기 투자 자본은 400만원이다. 하지만 막상 이제와서 팔고보니 5천7백만원이 되어있었다 하지만 투자는 배울때 내돈이 아니라고 하고 투자하는 것이다. 지금은 저 5천만원이 5천원으로 생각하고 앞으로도 투자하면서 배울것이다. 이돈은 계속 공부하는데 쓰일것이다.
배열의 가장 작은것을 찾아내기위해 가장 큰 수를 넣는 Number.MAX_SAFE_INTEGER를 먼저 넣거나 배열의 처음 것을 먼저 넣어서 해결을 하면 된다.
node.js를 배우면서 많은 어려움을 느낀적이 있다. 그럴때마다 새로 엎어서 새로한다. 그러면서 이번에 과제로 나온 로그인과 회원가입을 할 수 있는 사이트를 만들어라고 하였다. 우선 해보자! (이해하기가 힘들어서 만들고 지우고 3일은 삽질했습니다!) 포기하지 않는 것이 중요하다. 위와 같이 우선적으로 사용할 기본 세팅을 한다. app.js 여기서 우선 처음 세팅할 값은 세션을 사용하기 위한 미들웨어들을 설정하는 것이다. 1) express를 사용하여 로그인 회원가입을 만들 것이라서 express를 사용했다. 2) mysql 데이터 베이스를 연결하여 설정했다. 비밀번호는 본인이 mysql을 설정한 비밀번호를 사용해라! 3) 정적 파일 즉, 내가 사용할.......
문제) 입력을 공백 기준으로 나눠서 합계의 평균을 구하라. 소수점은 제외하라. 답) 문제) 입력을 공백 기준으로 나눠서 a와 b 기준으로 주어지면 a의 b승을 구하는 프로그램을 짜라. 답) 문제) 입력받는 문자가 대문자가 되도록 바꿔라. 답) 문제) 원의 넓이를 구하는 함수를 만들어보자. 반지름 * 반지름 * 3.14로 구할 수 있다. 답)
문제) 아래와 같이 공백기준으로 입력받아 객체를 만드시오. 답) 문제) 아래와 같이 2개의 연속된 요소를 출력하는 2-gram을 만들어보자. 답)
원래 node.js로 구성해서 쳐야하지만 나는 아직 기초로 js로 할것이다. 알고리즘에서 javascript는 한계가 있다. node.js로 쳐야하지만 문제는 풀 수 있으니 js로 최대한 구현해보자! if문이라서 if와 else if를 쓰면 무난한 문제다.
이번 프로젝트는 Node.js 와 MySQL로 하는 프로젝트다. 개발일정은 03/08 ~ 03/22 동안 진행이 될 예정이다. Node.js로 구현하면서 뭔가 내가 하고싶었던 주식거래소나 블록체인 거래소보다 아직은 그것에 근접한 비상장 주식 거래소를 하려고 한다. The King Of Ant로 개미도 왕이 될 수 있는 것이다. 그것이 목표로 정한 홈페이지다. 일단 클론과 유사하게 만들라고 한다. 위의 사이트가 내가 클론을 하면서 나만의 형식으로 꾸미려고 한다. 기획 파일을 진행하려한다. 핵심적인 기능이 중요하므로 기능에는 자세히 적었다.
<카페24 홈페이지> <깃허브> 프로필 : 백민기 / 26세 사용기술 : HTML / CSS / Javascript / Node.js / HeidiSQL 제작기간 : 기획 1일 / 제작 14일 2020/03/08 ~ 2020/03/22 개발도구 : Microsoft Visual Studio Code / HeidiSQL / Express-generator 기획의도 : 비상장 주식 거래소 사이트 제작의도 : Node.js를 활용한 백엔드 서버 구축 구현한 기능 1)회원가입 중복방지, 암호화, 로그인시 세션관리 2)모달 상자 3)socket.io를 활용한 대화창 4)종목토론 게시판 작성, 삭제 5)cheerio_httpcli를 활용한 실시간 크롤링 뉴스 6)회사 관련 비상장 주식 응모 7)보유포인트와 응모 잔액 계산 후 처리 8)응모 완료 후 마이페이지 기록 9.......
React란? 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수 된다. 기본적으로 화면 출력 속도를 높이고 코드의 복잡성을 줄였다. 제이쿼리나 핸들바라는 라이브러리는 간결하게 화면을 구성하지만 전체 화면이 일부만 수정되어도 다시 화면을 그린다. 하지만 리액트는 일부만 다시 그리는 것이다. 주로 HTML, JS를 알면 이해하기가 쉬울 것이다. 또한 CSS도 바로 적용이되니 한결 편안하다. 프론트엔드 라이브러리에는 React, Angular, Vue가 있다. 하지만 React는 '컴포넌트'라는 단어에 집중되어 있는 라이브러리다. 데이터를 넣으면 유저 인.......
우선적으로 node.js 및 yarn을 설치되었다고 생각하고 진행을 하겠다. 아래와 같이 생성할 곳에 react를 만든다. 위와 같이 완성된다. 이제 그 파일로 들어가 아래와 같이 입력하면 브라우저가 뜨면서 리액트가 뜰 것이다. 아래와 같이 소스파일들이 만들어져있다. 위와 같이 src에 소스코드들이 들어 있다. 그곳에서 app.js 를 키고 위와 같이 입력하면 우선적으로 Node.js 처럼 기본세팅이 되어 있고 (라우팅으로) 4번부터 App으로 만들면 된다. 여기서 중요한 점은 return을 해줘야 한다. 그 안에 jsx파일을 만드는데 바로 html이나 css등을 적용할 수 잇는 프론트 영역이다. 그리고 여기서 react의 중요한 점은 input이나 br 태그 등은 뒤에.......
컴포넌트란? 리액트의 꽃이라 불리는 컴포넌트는 리액트에서 가장 중요한 요소이다. 리액트로 작성된 화면은 컴포넌트로만 구성되어있다. 즉, 레고 블록처럼 여러개를 쌓아서 만드는 것인데 독립적으로 사용하거나 재사용이 가능하다. 기본적으로 props를 가지고 상속하거나 state를 이용해 수정할 수 있는 2가지가 있다. props는 컴포넌트의 mounting이나 updating 프로세스 시점에 값이 할당 될 뿐 컴포넌트 내부에서 값을 변경할 수 없다. 변경되어야 할 것들은 state를 사용해야 한다. 왜 그럴까? 컴포넌트 간에 무조건 props를 통해서만 데이터를 주고받고 데이터가 변경되지 말아야 할 것들을 사용한다. state는 값이 입력하거나 수정될때.......
이번에는 state를 알아보자. 앞서 배운 props랑은 조금 다르다. props는 값을 받아오면 그 값을 바꾸지 않고 사용하는데 state는 직접 수정도 가능하다. 추가/삭제/수정 등 let 개념과 같다고 보면 된다. state는 2가지 종류가 있다. 클래스형 컴포넌트가 가지고 있는 state, 함수형 컴포넌트가 가지고 있는 useState가 있다. 위와 같이 적용을 할 수가 있다. state를 위해선 2가지 방법이 있지만 한가지부터 해보면 상속을 위와같이 super(props)를 한다음에 state로 선언하는데 this.state로 해야된다. 선언을 한뒤에 우선적으로 값을 클릭할때마다 증가시켜보자. state값을 바꾸긴 위해서는 setState를 하면 state값이 바뀌는 것을 적용할 수.......
이번에는 활용을 해서 http 서버를 여는데 fs로 파일을 가져와보자. 위와 같이 파일 html을 가져오는 것은 fs모듈을 사용하면 된다. 그리고 오류를 잡기위해서 try{ } catch( ) { }를 사용하였다. 파일이 잘 가져와지는 것을 볼 수 있다. 이렇게 간단하게 파일을 가져올 수 있고 요청하는 데이터를 이제 원하는 걸로 제공하는 REST와 라우팅에서 배울 것이다.
익스프레스 웹 서버를 만들어보자. 우선 간단하게 기본 절차가 있다. 위와 같이 순서있게 설치를 해야한다. npm init로 package.json을 실행할 것인데 npm init를 실행하면 package name : 프로젝트이름을 입력한다 version : 프로젝트 버전을 입력 엔터 entry point : 해당 js 파일(필자는 app.js) 엔터 엔터 엔터 엔터 엔터 yes하면 npm init의 설치가 끝난다. 그러면 package.json파일이 생성 되는데 위와같이 "start" : "nodemon app"으로 고치면 된다. 그리고 main에 보면 app.js 가 있는데 그전에 위에 설치할 파일을 미리 설치하자. 이 2개를 후딱 설치하고 app.js파일을 만든다. express는 불러와야되서 위와 같이 1.......
미들웨어란? 미들웨어는 운영체제와 해당 운영 체제에서 실행되는 응용프로그램 사이에 존재하는 소프트웨어이고 공통 서비스 및 기능을 애플리케이션에 제공하는 소프트웨어다. 데이터 관리, 애플리케이션 서비스, 메시징, 인증 및 API관리는 주로 미들웨어를 통해 처리된다. 미들웨어는 개발자들이 애플리케이션을 보다 효율적으로 구축할 수 있도록 지원하며 애플리케이션, 데이터 및 사용자 사이를 연결하는 요소처럼 작동한다. 숨겨진 변환 계층으로 기능하는 미들웨어는 분산 응용 프로그램의 통신 및 데이터 관리를 가능하게 한다. 미들웨어를 사용하면 사용자가 웹 브라우저에서 양식을 제출하거나 웹 서버가 사용자의 프로필을 기반으로.......
라우터는 말그대로 여러개를 만들어주는 것이다. 네트워크 공부한 사람의 라우터가 아니다. 단지 파일하나가 너무 길고 관리하기가 힘들어서 분산해서 적는것이다. 우선 간단하게 만들어보자. 위와 같이 잘되는 것을 볼 수 있다. index자체는 생략이 가능하다.
이벤트 처리는 말그대로 이벤트 행동을 하는 것이다.on('data', 콜백) 또는 on('end', 콜백)을 사용한다.data 라는 이벤트와 end 이벤트가 발생한다.<이벤트 종류>
서버는 클라이언트가 요청을 하면 서버라는 것이 존재한다.클라이언트에서 서버로 요청을 보내고서버에서는 요청의 내용을 읽고 처리한 뒤 클라이언트에응답을 보낸다.이벤트 리스너를 사용해 어떤 요청이 왔을때 그에 맞게 행동을하는 것이다.createServer의 콜백 부분을 보면 req, res 매개변수가 있다.설명은 주석으로 적어놨다.이런식으로 포트를 열면 이제 콘솔창에 node 해당 파일을 치면이런식으로 계속 실행이 되어있는다.그러면 브라우저를 키고 위와 같이 들어가면해당 파일들이 서버가 응답하여 주는 것을 볼 수 있다.2개도 동시에 열 수 있다.동시에 잘 열리는 것을 확인할 수 있다.이번에는 다른방법으로 열어보자.위와 같이.......
url이란?인터넷 주소를 쉽게 조작하도록 도와주는 모듈이다.url처리에는 주로 WHATWG(웹 표준을 정하는 단체 이름)의 방식의url과 노드에서 사용하던 방식의 url 2개를 사용한다.우선 url을 사용해보자.첫번째 방식 - whatwg에서 정한 표준 방식1)위와 같은 형식으로 나온다.즉 구별하기 쉽게 나오는 것이다.두번째 방식 - 일반적인 노드에서 사용하는 방식2)위의 두 방식을 사용해도 무관하지만 꼭 노드의 일방적인 방식을 사용해야될 때가 있다. host 부분 없이 pathname부분만 오는 주소인 경우whatwg방식은 사용할 수 없다.searchParams란?하지만 whatwg에는search부분을 searchParams라는 특수한 객체로 반환하므로 유용하게.......
Node.js 를 하면서함수를 많이 사용하게 된다.그래서 복습차원에서 다시 보게 된다.복습차원에서 다시 해보자!아주 간단하게만 보고 필요한 함수는 자세히 보자.1) 일반적인 출력하는 함수2) 값이 들어오는 함수3) 함수 선언 다른 방법 (익명 함수 표현식)4) argument는 입력 받는 값이 많거나 길이를 모를때5) 디폴트 매개변수6-1) 화살표 함수(arrow)6-2)입력받는 화살표 함수(arrow)7)콜백함수8) 콜백지옥
드디어 어진 1년을 기다려가는 클레이02월 17일 비상장주식으로 클레이로 관리하는 것으로 인해1000원의 뚫기 어려운 베를린 장벽처럼뚫고 상승중이다.내가 산 곳은 260원 가족들도 260원 440원 660원에 샀다.980원을 찍고 내려와서 500원에도 담담했지만가족들은 불안해서 내가 전부 관리를 해서그대로 유지하고 있다.하지만 지금 오른다고 파는 것은 아니다 만원을 보고 있기에그게 언제 걸리든 나는 기다릴 것이다.카카오의 주식을 못사서 미련을 가지는 것보다카카오의 블록체인을 사서 후회를 하는 것이 좋지 미련은원망만 남는다.현재 수익률은 계산하면 알겠지만 어마무시하다.물론 투자한 나는 작은돈이라 크지가 않다.가족돈은 크.......
crypto란?다양한 방식의 암호화를 도와주는 모듈이다.비밀번호 같은 보안적인 측면이나 공개되서는안되는 것들을 암호화 해야한다.암호화에는 단방향 암호화, 양방향 암호화가 있다.단방향 암호화?고객의 비밀번호를 암호화해서 데이터베이스에 저장한다.로그인 할때 입력한 비밀번호를 암호화 알고리즘으로 암호화 한 후비교하는 것이다. 주로 hash기법을 사용한다.createHash(알고리즘)- 사용할 hash 알고리즘을 적는다. md5, sha1, sha256, sha512등이가능하지만 현재 다 해커들에게 뚫리고 현재로써는 sha512가 안전하다.update(문자열)- 변환할 문자열을 넣는다.digest(인코딩)- 인코딩할 알고리즘을 넣는다. base64, hex, latin1.......
util?각종 편의 기능을 모아둔 모듈이다.API가 추가되고 있으며 가끔 deprecated가 되어 사라지는 경우가 있다.deprecated는 중요도가 떨어져 더 이상 사용되지 않고 앞으로는 사라지게될 것이라는 뜻으로 기능을 제거하지는 않지만없앨 예정이니 사용하지말라고 알려주는 것이다.util.deprecate- 함수가 deprecated 처리되었음을 알린다.첫번째 인수로 넣은 함수를 사용했을때 경고 메시지가 출력된다.두번째 인수로 경고 메시지 내용을 넣으면 된다.util.promisify- 콜백 패턴을 프로미스 패턴으로 바꾼다. 바꿀 함수를 인수로 제공하면 된다.async / await 패턴까지 사용할 수 있어 좋다.
멀티스레드란?노드에서 멀티 스레드 방식으로 작업하는 방법이다.멀티스레드란 하나의 프로세스를 다수의 실행 단위로구분하여 자원을 공유하고 자원의 생성과 관리의 중복을최소화하여 수행능력을 향상시키는 것을 멀티쓰레딩이라고 한다.하나의 프로그램에 동시에 여러개의 일을 수행 할 수 있도록 해주는 것이다.사용하는 이유는?프로세스를 이용하여 동시에 처리하던 일을 쓰레드로 구현할 경우 메모리공간과 시스템 자원소모가 줄어들게 된다.쓰레드 간의 통신이 필요한 경우에도 별도의 자원을 이용하는 것이 아니라전역 변수의 공간 또는 동적으로 할당된 공간의 힙(Heap) 영역을이용하여 데이터를 주고 받을 수 있다.하지만 싱글스.......
fs란?파일 시스템 접근하기 위한 것으로fs 모듈은 파일 시스템에 접근하는 모듈이라고 할 수 있다.파일을 생성하거나 삭제하고 읽거나 쓸 수 있다.폴더도 만들거나 지울 수 있다.<파일 읽기>위와 같이 readFile은 데이터를 buffer 형식으로 제공된다.버퍼를 메모리의 데이터라고 생각하면 된다.그래서 사람이 읽을 수 있는 글로 표현하기 위해서는 toString으로 적어야 한다.하지만 실무에서는 위와 같이 콜백 형식의 모듈이므로 불편해서프로미스 형식으로 바꿔주는 방법을 사용한다.promise로 만든 형식이다. 결과는 동일하다.그럼 promise로 파일 쓰기도 만들어보자.<파일 쓰기>
동기(sync) 비동기(async)동기(synchronous)요청과 그 결과가 동시에 일어난다. 하지만요청 처리 속도에 따라 응답을 바로 받을 수 있고 기다려야 할 수도 있다.프로그램은 응답이 완료 될때가지 프로그램이 정지되서 응답을 받고다시 작동을 한다.비동기(asynchronous)요청한 결과에 대한 응답을 바로 받지않아도 되고 받아도 된다.즉, 요청을 보내서 기다리지 않고 프로그램이 할 일을 하고 있다가응답을 받으면 다시 그걸 처리해서 좋다.그래서 속도 측면에서는 동기보다 비동기가 처리가 빠르다.<비동기 메서드>위와 같이 비동기메서드로 하면 순서가 1번 데이터, 2번 데이터, 3번 데이터순으로 받지 않고 계속 바뀔 것이다.위와 같.......
Node를 사용하면서함수를 많이 사용한다.그리고 promise를 계속 사용한다고 말할 수 있다.위의 내가 정리된 내용에 이어서작성을 하겠다.promise함수위와 같이 함수다.일단 선언은 간단하게위와 같이 선언을 하는데 resolve와 reject가 있다.물론 다르게 변수를 해도 상관은 없다.대신 resolve는 fulfilled(이행)상태가 되는 것이고rejected(거부)상태가 되는 것이다.즉, 실행을 하고 싶은 것은 resolve로 반환하고에러나 막는 것은 reject로 하라는 것이다.위와 같이 실행을 하면 된다.이번에는 만든 것을 실행해 보자.위와 같이 작성을 하면resolve( )를 하였기에then에 실행이 된다.반면 reject( )를 하면 catch가 실행이 된다.이렇.......
스레드풀이란?fs 모듈 등이 실행되면 백그라운드에서 실행이 되는데 여기서여러번 실행해도 동시에 백그라운드에서 처리되는 곳이스레드풀이다.스레드는 컴퓨터마다 다른데 최대 4개만 돌아간다. 그래서 4개를 먼저작업하고 다른 4개를 작업한다.1~8까지 있으면 1~4까지 그룹으로 작업하고 5!8까지 그룹으로 작업한다.위와 같이 준비해놓고이렇게 백그라운드에 작업할 것을 8개 만들어놓는다.그리고 실행을 하면위와 같이 나오는데 순서는 뒤죽박죽으로 나온다.하지만 1~4까지는 먼저나오고 5~8까지는 뒤에 나온다.작업도 먼저한뒤 5~8이 나중에 작업을 한다.작업공간이 4개만 있다고 보면된다.물론 컴퓨터마다 다르니 설정을 어떻게 하느.......
Node.js도 자바스크립트이다.그래서 Node도 마찬가지로 그대로 사용하면 된다.위와 같이 그냥 js이다. 그냥 js!!위와 같이 console에는 많은 기능들이 있다.table이 되는 것을 보고 놀랬다. 물론 지정해서 정렬로 해줘야한다는번거로움이 있지만!Node에서는 시간함수를 많이쓴다.아래를 한번 보자.setTimeout(콜백, 밀리초)setInterval(콜백, 밀리초)setImmediate(콜백)이 있다. Timeout과 Interval은 정지하기위해서는clearTimeout과clearInterval과clearImmediate를 사용해야한다.위와 같이 3개만 나온다.왜냐하면 정지하는 것도 넣었기에 이렇게만 나오는 것이다.하지만 setImmediate는 바로 실행 되기에어디에 적든 제일 먼저나온다........
프로세스란?process는 객체라고 하며 현재 실행되고 있는 노드 프로세스의정보를 담고 잇다. 안에는 다양한 속성이 있고설치한 노드 버전에 따라 다 다르게 나온다.<process 종류>위와 같이 종류가 많다.한번씩 console.log()로 실행해보는 것을 추천한다.대략적인 정보를 우측에다 결과로 표시해놨다.여기서 눈여겨 볼 것은 nextTick(콜백)이다.setTimeout과 setImmediate보다 먼저 실행된다.
OS 모듈?웹 브라우저에 사용되는 자바스크립트는 운영체제의 정보를가져올 수 가 없지만 노드는 os 모듈에 정보가 담겨 있어정보를 가져올 수 있다.운영체제의 정보가 담긴 것을 말한다.<os 종류>os는 require로 가져와야 한다.그러고 담긴 변수를 사용해 내장함수들을 사용할 수 있다.
path란?폴더와 파일의 경로를 쉽게 우리가 다룰 수 있도록 도와주는 모듈이다.운영체제 별로 경로 구분자가 다르기에 필요한 것이다.솔직히 개인적인 의견으로 앞에 os랑 process보다도 잊으면안된다고 생각한다.경로라는 것이 컴퓨터에서는 정말 중요하기에 하는 소리다.path를 들어가기 전 경로를 다뤄보자!하지만 여기서 제일 중요한 것은절대경로와 상대경로이다.우리는 흔히 상대경로를 많이써서방심을 많이한다.반면에 정말 트러블 슈팅을 많이하거나오류를 싫어하는 사람은 조심성을 위해 절대경로를 사용한다.절대경로 vs 상대경로절대경로는 절대적이라고 생각하면 쉽다.항상 우리는 c드라이브 위에 os(윈도우)가 깔리고윈.......
포트폴리오 메뉴를 제작하기위해 생각을 했다.사람답게만 만들자....ㅋㅋㅋㅋ그래서 색상은 밝고 산뜻한 아쿠아로 선택을 했고이제 시작인 것이다.
트리란?계층적인 관계다.윈도우나 리눅스의디렉토리 관계랑 비슷하다.우선 그림으로 보면 관계가 이해가 될 것이다.위와 같이 트리 구조형태인 것을 알 수 있다.위의 트리구조에 순회방식에는3가지 방법이 있다.진위 순회(preOrder)- 진위 순회는 root - 왼쪽 자식 - 오른쪽 자식 순으로 본다.즉 위 그림에서 보면0 - 1 - 3 -7 - 8 - 4 - 9 - 10 - 2 - 5 - 11 - 6중위 순회(inOrder)- 중위 순회는 왼쪽자식 - root - 오른쪽 자식 순으로 본다.7 - 3 - 8 - 1 - 9 - 4 - 10 - 0 - 11 - 5 - 2 - 6후위 순회(postOrder)- 후위 순회는 왼쪽자식 - 오른쪽자식 - root 순으로 본다.7 - 8 - 3 - 9 -10 - 4 - 1 - 11 - 5 - 6 - 2 - 0위의 세가지.......
우선적으로 고객센터에 내용들을 수정하였다...... 디자인은 도저히 나의 영역이 아닌갑다.......이건 뭐 그냥.... 양식을 만든거다....데이터베이스는 잘 작동하니점수를 매기면 디자인 0 점 기능 100점을 주겠다자유게시판에 검색 기능도 무난하게 되었다 ㅋㅋㅋ 게시판 오른쪽에 작은검색창이 검색기능을 제목, 닉네임, 글번호를 조회할 수 있게 해주었다.이부분은 글의 내용을 보는 것인데 css를 대략 만지면서 틀만건들이고 있다.... 조회수를 보면 새로고침의 흔적이다.ㅋㅋㅋㅋ메인페이지에 글을 가져와서 그 본문내용을 링크거는while문과 경로를 디비로 적용하였다.위는 내용이 안보이는 것은 테스트한다고 막 엔터눌러서급히 만든 게시.......
이제 거의 포트폴리오가 끝나간다.하지만 아직 해야할 일이 많다.메인페이지에 사진게시판을 끌어왔다.하지만 디자인 부분에서 먼가 내용을 작게 쓸수 밖에없는 점을 고려해길게 길게 게시판의 자리를 크게 해주려고 한다.(이부분은 차후 수정예정)사진 게시판을 대략적으로 눈에 보이게 설정을 한뒤문제 없음을 확인하였다.하지만 다른 페이지에서 오류를 확인한 뒤휴.... 깔끔해졌다.아직 css는 건들이지 않았다.페이징 구현을 아직 하지않아서이부분도 페이징을 해야한다.그리고 이제 메인 검색서비스를생각했다.굳이 select 의 option으로 지정보다는다 검색이 좋지 않을까? 라는생각이다.위와 같이 검색을하면오히려 select를 하지 않고정리.......
이제 슬슬 막바지가 다가오고 있다.게시판을 의도한대로 비슷하게80%정도 맞춰서 만들고 있다.제일 중요한 메인 페이지의 검색서비스가솔직히 구현이 어려웠다.select 로 각 명칭들의 옵션을검색해야 되는데전부를 검색을 원했다.그래서 수동으로 일일이 다조회하는명령어를 구축(?)했다ㅋㅋㅋ후우... 데이터가 많이 없다보니 별로 조회가되지가 않는다!이제는 장터게시판인데 위와같이번호, 제목, 글쓴이, 등록일, 사진(미리보기)형태로 구축했다.당연히 게시판도 메인에 나와야지크흠... css는 나는 못만지겠다...팀원 형님 도움이 없엇다면그대로 망한 프로젝트였다.다행히 소생을 해주었고나는 다시 DB를 제작할 수 있게 됬다!위와 같이 먼가.......
1조 조장 찍게팀조장으로써 팀프로젝트는 처음이었다.많이 부족하고 많이 모르지만자기실력을 가지고하면서 스스로가 공부되는 것 같았다.드디어 프로젝트가종료되었다오늘은 공개를 어짜피 프로젝트로보기에 캡처나 이런 것을 하지 않았다.수정사항이라곤 최종점검 오류 및 데이터베이스점검, 오류 해결회원가입 시 중복 방지 및 막기게시판 핵심 기술인 검색 서비스를 구현하였다~휴....2주동안 다사다난했지만무사히 마칠 수 있어서 좋았다.제일 좋은 점은 깃허브에서 소스트리로 병합을하며코드를 서로 충돌나고 경험을 하는 것과비쥬얼 스튜디오 코드로 라이브서버를통해 접근을 해서다같은 비쥬얼 스트디오 코드 상에서작업을 해 같.......
<닷홈 홈페이지>- 무료 3개월 서비스 닫힐 수도 있음<깃허브>프로필 : 백민기 /26세사용기술 : HTML / CSS / Javascript / PHP / DB(MySQL)제작기간 : 기획 1.5일 / 제작 12.5일1월 27일 ~ 2월 9일개발도구 : Microsoft Visual Studio Code / GitHub / Bitnami / MySQL기획의도 : 에브리타임 및 잡플래닛과 같은 직장인들이나 일반인들을 대상으로하는 게시판서비스 홈페이지제작의도 : HTML + CSS + Javascript를 배우고 프로젝트 시작과 동시에PHP와 MySQL을 공부하면서 제작해본 Team Project내가 구현한 기능- 1.회원가입 중복방지 php 확인- 2.로그인 기능 Session저장 및 데이터베이스 확인, 로그아웃 Session.......
이번에는 Node.js를 알아보자.웹에서 동적과 정적에 제한되어있으면서JS의 한계가 있다.그것을 해결하면서 서버와네트워크에 JS로 가능하게 되었다.간단하게 말하면눈에 보이지 않는 것이다.눈에 안보이는 것은 백그라운드에서 작동을 하는 것이다.우리가 흔히 컴퓨터가 느리다 느리다 아 왜느리지 하면컴퓨터에 깔린 것이 많거나흔히 아는 Ctrl + Alt + Del 누르면 작업관리자 창이나온다.이런식으로 백그라운드 프로세스가 많이 돌아간다.이것을 안 쓰는 것을 꺼주는 것이 좋다.물론 컴터 성능이 좋으면 이것들 따위는컴퓨터에 간에 기별도 안간다는 말이 맞다.우선 위 사이트에 current 즉, 우리가 개발공부를위한 current를 받아주면 된.......
노드는 모듈로 만들 수 있는 점에서 브라우저에만사용하는 자바스크립트 와는 다르다.모듈이란?- 특정한 기능을 하는 함수나 변수들의 집합이다.- 하나의 프로그램이자 다른 프로그램의 부품이다.- 재사용을 할 수 있다.모듈을 만들어보자.사용하는 것은 내장객체가 이미 정의 되어있기에require과 module.exports를 사용할 것이다.- 첫번째 js다른 파일에서 module.exports에 대입된 값을사용가능하다.- 두번째 js (첫번째 연결)require 함수의 인수로 제공하는 경로만 잘 지정하면 사용 가능하다.확장자인 js나 json은 생략이 가능하다.- 세번째 js (첫번째, 두번째 연결)위와 같이 불러와서 사용을 하면 된다.하지만 주의할점은 어.......
재귀함수란?재귀란 한 함수가 자기 자신을 호출하는 순간이다.예시를 보면 이해가 될 것 이다.위와 같이 함수안에 자신의 함수를 호출하는 것을 말한다.피보나치 수열이란?임의의 숫자를 매개변수로 받아서 그 숫자만큼 피보나치 수열의 값을 나열하는 로직을 구현하는 것이다.1, 2, 3, 5, 8, 13, 21, 34, 55.....위와 같이 증가가 되는 것이 피보나치 수열이다.큐(Queue)란?데이터를 집어넣을 수 있는 선형 자료형이다.먼저 집어넣은 데이터가 먼저 나온다. 줄여서 FIFO라고 하는데First In First Out라고 한다.예로 우리가 음식점에 줄을 섰을때 먼저 온 사람부터먼저 입장하는 것이다. 그 줄을 서는 것이데이터가 줄을 섰다라.......
스왑(swap)?스왑은 두 개의 데이터를 자리를 바꾸는 것이다.쓰이는 일이 많을 뿐더러 코딩테스트에도 필수적인 요소 중하나라고 장담할 수 있다.물론 모든 문제에 쓰이는 것이 아닌다섯문제가나오면 무조건 1개는 나올 확률이니 모르면안될 문제이다.간단한 원리를 말하자면두 개의 변수가 있으면 가상의 하나의 변수인temp를 만든다. 물론 이름을 정하는건 자유다.보통은 temp를 많이 쓰기에 나역시도 습관화 되어있다.위와 같이 a의 값을 temp에 담아놓고a의 값은 없어져도 temp가 가지고 있기에 상관이 없다.그래서 a의 값에 b를 넣고b의 값은 a가 가지고 있어서b의 값은 없어져도 된다.그래서 b에 temp인 a 값을 넣으면두 개의 자리가.......
SLL 란?싱글 링크드 리스트(Singly Linked Lists)라고 부르며구조체들을 서로 연결하는 것을 말한다.연결 리스트에는단순 연결리스트, 이중 연결리스트, 원형 연결리스트가 있으며이 연결리스트들을 사용하여 스택, 큐, 트리 등 다양한 자료구조를 만들 수 있다.낱개로 보면 여러 개의 노드들로 구성되어 있다.노드는 또한 데이터필드와 링크 필드로 링크는 그 다음 연결된 데이터를나타내서 기차놀이와 같다고 보면 된다.우선 Step by Step으로 세워보자.1)노드선언위와 같이 노드의 데이터 값과 그 다음 링크 값을 적는다.링크 값은 next로 정의했다. 다른 데이터가 없기에일단 기본 값은 null로 준다.2)SLL 선언위와 같이 node를 포.......
제목 그대로다 서로 각 파트를구별짓고 작업을 진행하였는데서로 css를 잘 다루지 못하다보니결합 후에는 크기가 제각각 이었다.그래서 결단을 짓고 새로 짜는 것이었다.그래서 조장인 나는 과감하게 고민하고수정할 시간에 그 코드를 보며수치를 대폭 수정하며처음부터 다 짰다.물론 조원 행님들의 코드를 그대로 보면서 단지css 수치를 조절하는 것이니 한결 간단했다.개발자도구로 이번엔 정교하게....하면서 조원들의 토글 버튼 만드는아이디어를 곧바로 적용!하 이제 먼가 잘된다!역시 브랜치를 실패해도코드를 다시 재배치하는 맛 이맛이구나!그래도 조원 행님들의코드와 미리 짜놓은 것으로 한결 편해졌다.역시 이게 팀플인가 보다.일.......
이번에는 메인페이지는 완성햇지만나머지 부분은 ... DB로 연동을 해서 php로제어를 하면서 정보를 주고 받을 수 있는방법을 찾아야한다.정적 웹페이지가 아닌 DB연동으로동적 웹페이지와 로그인, 게시판 기록,댓글 등 ... 할일이 태산이다.몸은 천근만근이지만할수가 잇다!왜냐면 나는 서울에 자취를하며 친구가 별로 없기에작업할 시간이 많다!(장점이라고 해줘....)연동방법이 없어 2시간이나 애를 먹었다....머리는 한도를 초과하며 다시 공부를....찾아보니 동적페이지를 만드는 방법은 다양하다.방법1) JSP와 DB2) JSON과 DB3) Node.js와 DB4) 대리 호스팅을 통한 DB5) php와 DB등이 있다.난 개인적으로 직접 연동 방법이 없는지찾아보.......
솔직히 말해서 HTML 과 CSS, JS면 홈페이지를만들 수 있다고 생각했다.근데 그것은 정적 페이지 일부에 불과했다.위와 같이 php파일로 만들면서 html에 php구역을 줘서반복으로 작성이 가능한 것을 볼 수 있다.(충격 쇼크)내가 php를 선택한 것은 DB 파일을 위해 연동을 하는것이다. 물론 node.js를 하면 되지만 (아직 배우는 시기가 아니라)현재 할 수 있는 방법이 php밖에 없었던거 같다.솔직히 말해서 주말엔 공부만 했다. 주구장창php를 삽질 한 기억뿐이다.하지만 후회하지않는다.삽질한 것은 오히려 기억에 오래 남는다.나는 트러블 슈팅을 좋아한다.원인이 뭔지 어떻게 하는지왜 안되는지를 좋아한다(싸이코?)그리고 조원 행님의 푸터 만.......
드디어 시간을 투자해 공부한 보람이 있다!물론 Node.js를 나중에 공부를 할 것이지만정적페이지를 만드는 것에 의의를 두었다.그래서 php로 로그인과 DB를 연동해 이용하는것을 간단하지만 나는 찾아보지않고내힘으로 만들었다.(구글하면 정보는 넘쳐나지만난 내 공부를 위해 안보고 만들어서 힘들었지만행복...)우선 정적 페이지는 깃허브 같은 정적페이지는넣을 수 있지만 php와 깃허브에는 넣을 수 없는큰 흠집이 있어위에 닷홈의 데이터베이스를 무료로 이용하기로 했다.(카페24는 돈을 내야되서 굳이?)우선 결과가 되는 html로 만들어서 좀이따 php로 바꿀 것이다.우선 로그인/회원가입 창을 샘플로 만든 것으로 테스트를 해보니대성공이.......
이제부터는 자꾸 응용단계로 들어간다.각 게시판에 디비를 연동해 나오게 하는 것이다.....css가 무척 만지기 어려웠다.디비로 데이터가 나오길 기다리면서그 시간이 길게 느껴지는 것이다(물론 한국인성격)우선 게시판을 만들면서 연동을 시작해보았다.물론 테스트용 게시판으로잘되면 장땡으로 게시판에 쓸 것이다.글을 적는 것과그 글의 댓글을 작성하게 이리저리해보았다.아이디로 물론 로그인해야 된다!그에 맞게 삭제도 안보이는!물론 왼쪽 오른쪽 아이디가 상단에 보면밍키아이디와 테스트 아이디로 되어있다.하지만 문제점을 발견했다.css가 먹통이 된다.즉, 순차적으로 DB 파일을 가져오는데첫 파일은 css가 적용이 되고두번째 파일부.......
드디어 팀원들과 협동을 통해게시판 작업을 시작하였다.물론 각종 트러블 슈팅이나오류가 많았지만 무난하게 작업을7일가량 남겨놓고 시작이 되었다!어제 펼쳐진 css를 덜만진 게시판!하지만 아코디언의 효과를 주어서깔끔하게 정리를 하였다.깔끔하게 정리하면서 이제 공간 활용과 디자인 측면을살릴 수가 있었다!물론 나는 백엔드나 개발쪽에 흥미가 있어css측면에 디자인감각은 똥인 것은위 사진을 보면 알 것이다 ㅋㅋㅋㅋ작업을 다하고 위와 같이내 정보 수정을 할 수 있는틀을 짰다.물론 모든 데이터베이스에 관련된 정보를다 수정하도록 설계를 해놓고데이터베이스 표를 만들때마다 추가만 해주면된다!!하면서 느끼는 것인데 php를 사용하.......
오늘은 페이징과깃허브 소스트리를 이용해 브랜치를하며 팀다운 프로젝트를 해보았다.게시판이 일정글이 되면 다음 페이지가 필요하다....정말 다른 사람이 본 코드를 보면서도 이해가조금 어려웠다.하지만 적용부터 해보고 생각을하며팀 포트폴리오에 응용을 해서 적용을 한 결과오전 시간이 다 갔지만 결국 적용에 성공했다.보니까 제일 중요한 것을 빼먹었다.주소창에 ?page=page1을 주는 것이다.그것을 토대로 그 개수만큼 데이터베이스에 가져오는 것이다!다들 그냥 페이지 수가 몇개냐어떻게 가져오냐 했지만 생각을 했다.이건 개수만큼 돌리면 그렇게 효율성이 없는데?페이지를 어떻게 알려주지 ?라면서!2페이지로 가면 주소창에 2.......
오늘은 나의 담당인 게시판을 깔쌈하게 만들고자 했다.항상 시작은 화이팅 넘치게!view 파일이다 여기서 작성한걸 보거나댓글을 다는 것을 구현하며 글쓰는 곳으로 넘어간다!글쓰기 폼이다.아직 css들은 기능을 구현한뒤 만져야되서기본틀만 해놓았다.css.. 지옥에 갇힐예정휴... 댓글 개수와 이쁘게 정렬과 페이징구현페이징 구현은 앞서 첫인사 게시판을 만들때 해보아서쉽게 만들어진다.회원가입 양식이 아직도검사는 되는데 그냥 들어가버린다....하하하핫이제 메인에 ..... 글들을 가져와야 되는데 산더미다....
jQuery로 간단한 실습을 해보자.문제형식으로 풀면 좋다.1) 상자를 만들어 마우스에 대면 레드, 마우스를 밖으로 빼면 블루로 만들자.2) 버튼을 누르면 리스트를 보이게 제이쿼리로 짜라. 그 리스트는 목록 하나당 마우스 올리면 gray색이 나게 하고 마우스를 빼면 다시 검은색으로 바꿔라3) 버튼을 누르면 상자가 왼쪽에서 오른쪽으로 가게 하라.문제를 풀고 밑에 답과 실습 영상을 보면 좋을 것이다.문제 1~2)문제 3)
문제)1부터 100까지 더하는 for문을 만들어라.답)문제)게임 캐릭터 클래스 만들기답)문제)답)
이번에는 팀프로젝트를 하기 위해서 조를발표해준다고 했다.근데 왠걸...1조부터 조장을 말해주는데 ??백...민??? 잠... 시만?내가 조장?... 이건 실화냐?큭.... 그래도 기대하는 마음으로조원을 알려주는데 다! 행! 히!착한 행님들이 걸려서 다행이당어훅..... 조장이라 .... 학교에서도조장을 많이 걸리는데 .... 여기서도조장이 되다니.... 물론 처음 웹개발기반으로 평가를 해서 구성한 것 같다.그럼 팀을 이끌고 제대로 해야지?우선 집합!부산 성격은 직진남아니겠는가?역시 팀플은 같이 하는 것이 목표지!구글 Docs로 ppt 를 다 공유한 다음 !!! 만들어야지!형들... 어디가.... 같이 기획해....형... 형???신기하다고 돌아댕기는 행.......
오늘은 기분 좋게 컨디션이 최상이다!나중에 상태가 최악이 된건 비밀오늘은 드디어 팀프로젝트를 분업으로 작업을하는 것이다.우선 간략하게 역할분담을 메인페이지를 나눴다.기획처럼 말이다.조장인 나는 섹션부분의 슬라이드나 사진 배치를맡고 조원1 행님은 헤드부분 검색창조원2 행님은 네비게이션 부분 아이콘 배치를맡았다.우선 나의 모델링은잡플래닛의 적당한 배치를 원했다.쉽지는 않지만 도전할 만한 것이었다.(4주공부하고 싱글하자말자 팀플이 시작해서실력은 아직 초보이니 이해바람....저는 딥러닝개발공부인 사람으로디자인 감각 0% 눈갱 조심)우선적으로 div만들 생각에 기부니가...좋닿ㅎㅎ대략적인 내가원하는 틀로만들면서 아.......
위의 사이트가 jQuery UI를 불러오는 것이다.이것 역시 불러오는 걸 한번 해보자.jQuery를 불러오는 거랑 다르지 않다. 하지만이것은 다운을 받아서 직접 적용해야한다.나는 바로옆에 옮겨놓는다.여기까지가 jQuery UI를 불러오는 것이었다.jQuery UI 중에서이번에는 animate 요소의 효과를 보자.글자를 애니메이션 효과로 주는 것이다.물론 animate는 UI가 없어도 작성이 된다.하지만 다용도로 사용하고 싶으면 UI를 쓰는 것이 좋다.한번 보자.1. animateanimate는 사용법이선택자.animate( { 속성 : 값 , 속성 : 값 }, 시간, 이징, 끝나고 할 일)이징은 linear, swing, easeOutBounce, easeInOutElastic .... 등이 있다.주로 jQuery UI로.......
1. JSON- 자바스크립에서 Open API를 주로 사용한다.- 우리가 데이터를 다루거나 만들때 사용하는 것이다.- Object 타입으로 Key와 Value를 갖는다.- 브라우저 뿐만 아니라 모바일 혹은 서버와 연결이 안되어도 데이터만있으면 된다.- 데이터를 주고 받을 수 있는 간단한 포맷이다.- 사람 눈으로 쉽게 볼 수도 있는 것이다.- C, C#, JAVA, Python, PHP, GO등에 쓰인다.JSON은 크게 stringfy와 parse로 나눌 수 있다.이것을 보아하니 만들고 혹은 가져오는 것으로 사용될 것이라는 예측이 된다.(그렇다고 해라)1) Object to JSONstringfy(obj) 를 알아보자.우선 간단하게 만들어보자.<실습><결과>JSON을 잘 만들어 진 것을 볼.......
<문제>위에 나오는 출력 값은??<답>내 생각은 위에 선언하고 밑에 재할당으로 받아들여진다.그럼 아마 90??정답이다.<문제>concat함수로 풀어야한다.출력은2021/01/17 22:10:33<답>
위와 같이 너무 딱딱함을 느꼇다. 그럼 슬라이드 형태로조금 다양하게 줄 수 있다면?버튼을 넣어보자 ㅋㅋ여러개를 끙차 끙차 만들어서!숨기고!ㅋㅋㅋㅋ 완전 실패다!만들면서 했던거는 그냥 일단 처음부터 다시하자 ㅜㅜ후우.... 할게 많네...후욱... 차에 중독되버리겟다.열심히 만들면서 버튼도 넣어주고!다와 간드아 ㅜㅜ마무리까지 완벽하게 됬다.물론 디자인 감각 (-999999999999999999)인 나로써는엄청 흡족한 감각이다. (사실 디자인 없는게 더 잘만든거 같아서 색을 그냥 넣지 않는다)오늘은 이걸로 후욱... 다른 디자인도 한번 다시 봐야지...-------------------------------------수정-----------------------------------------.......
<깃허브 홈페이지><깃허브>프로필 : 백민기 / 26세사용기술 : HTML / CSS / Javascript제작기간 : 기획 1.5일 / 제작 4.5일2020/01/13 ~ 2020/01/18개발도구 : Microsoft Visual Studio Code / Photoshop기획의도 : 전시관과 미술관 홈페이지를 합친 콜라보제작의도 : HTML + CSS + Javascript를 4주동안 배워보고 기초를 다뤄보고자 만든 Single Project
자바스크립트의 확장이라고 생각하거나외부 라이브러리를 사용한다고 보면 된다.즉, 코딩의 한계를 외부에서 가져와서 사용하는 것이다.<제이쿼리 사이트>위의 사이트가 제이쿼리의 라이브러리를 가져오는 것이다.여기로 들어가면 우선 Download가 보일 것이다.클릭을 한다.마우스 커서가 있는 Development를 추천한다.그냥 일단 이걸로 써라.다른 것은 가볍거나 없는 것들이 있다.클릭하면 위와 같이 나온다. 이것을 다른 이름으로 저장해서 js파일로 저장해서링크로 쓰던지 아니면 나와같이 이 방법을 사용해라.위 주소를 복사한다.그러면 이제 작성하는 html 파일로 가서 링크를 걸면 된다.위와 같이 그 주소 그대로 복사하면 된다.그.......
제이쿼리는 일단 $( ) 가 형태이다.$ ( ' ') 에서 안에 요소나 태그 아이디, 클래스를 선택한다.예시를 보면 위와 같다.기본형태에 ' ' 안에 넣는 것이다.예를 들어보자. 즉 호출할때 이렇게 길이가 차이가 난다.엄청 길게 쓰느냐 짧게 쓰느냐이다.물론 간편함은 제이쿼리가 훨씬 좋다.하지만 바보가 될 수 잇는 간편함이 있다.우선 간편하게 css를 제이쿼리로 해보자.위 사진을 보면 우선 클래스 a라는 글이 써져있다.그럼 제이쿼리로 색을 바꿔보자.제이쿼리 호출은$('.a')로 클래스니 . 으로 호출한다 아이디면 #을 붙여야 한다.그리고 .css로 연결시켜 왼쪽은 명령어 오른쪽은 설정이다.물론 css를 안다는.......