개키우는개발자 : )

1. pgAdmin4 실행 2. 비밀번호를 입력후 접속 만약 접속이 안되면 server 클릭 -> PostgreSQL 12 우클릭 -> Connect Server 누른후 설치할 때 설정한 비밀번호 입력 3 . 접속을 하시면 Sever Dashboard와 PostgreSQL 구조가 보입니다. 크게 databases , Roles , Tablespaces 3개의 구조로 되어있으며 Data는 Table에 담기며 Table은 Tablespaces 에 저장됩니다. 접속하면 기본 테이블로는 postgres 테이블이 생성되어 있습니다. 4. postgres 테이블 우클릭 -> Query Tool을 입력하면 Query문을 입력할 수 있는 입력 창이 나옵니다. 5. 잘 작성되는지 테스트 해보기. 현재 시간을 보여주는 S..

PostgreSQL은 오픈 소스 데이터 베이스 입니다. 랭킹보기 : https://db-engines.com/en/ranking 2019년도 랭킹을 보면 매우 높은 점유율을 가지고 있는 RDBM중 하나입니다. 개요 - PostgreSQL은 관계형 데이터베이스 시스템의 일종입니다. - 가장 진보한 오픈소스 데이터베이스 시스템이라고 할 수 있으며 - Unix/Linux, MAC OS, Soraris, Windows 등의 OS를 지원합니다. - PostgreSQL 은 완전 무료 소프트웨어입니다. 특징 - multi-version concurrency control (MVCC) 의 완벽한 지원 - C/C++,Java등의 프로그래밍 언어 연동을 완벽 지원 - 확장성에 매우 좋음(Data Types,Index Ty..

PostgreSQL 설치 하기 링크 : https://www.postgresql.org/download/windows/ PostgreSQL: Windows installers Windows installers Interactive installer by EnterpriseDB Download the installer certified by EnterpriseDB for all supported PostgreSQL versions. This installer includes the PostgreSQL server, pgAdmin; a graphical tool for managing and developing your datab www.postgresql.org 1. 페이지 접속 후 Download the..

5월 20일 날 자바 스프링 기반의 웹 에이전시에 취직 후 7월까지 다니고 몸과 마음이 지쳐 2달 다니고 이직을 했네요 늦게 시작한 만큼 욕심이 많았던지라 자기계발 안하면 망하겠다 생각했는데 정말 망할 것 같아 아는 형의 도움으로 야근이 없고 자사 서비스를 개발하는 PHP 5.3 버전 기반의 백앤드 개발자로 취업을 했고 지금까지 잘 다니고 있습니다. ㅋㅋㅋㅋ 쓰고싶은 말은 많지만 역시 글을 쓴다는건 어렵네요. 좀더 경험이 쌓이고 정신이 맑을때 이런저런 글 쓰러 오겠습니다.ㅋ!

흩어져 있는 state 들을 하나로 모아서 컴포넌트 마다 필요한 state를 던저 주면 프로그램 개발과 관리에 효율이 좋습니다. state 들을 중앙에서 관리해주는 리덕스 라이브러리를 간단하게 소개 합니다.. { isLoggedIn : false, // 로그인 여부 -> A,C user : {}, // 로그인한 사용자 -> b,c mainPosts: [], //메인 게시글들 -> c ... } -> store 하나의 state 를 A에 보낼수도 있고 C 에도 보낼수 있습니다. Redux 는 state 의 역할을 합니다. 그래서 Redux를 쓰면 React의 state를 쓰지 않아도 됩니다. 하지만 대부분 두가지를 같이 씁니다. Redux의 state는 복잡할때 사용을 하고 React의 state는 간단할..

컴포넌트를 분리하면 여러가지 장점이있다. 캡슐화 , 확장성 , 결합성 , 재사용성 , 가독성 등등.. 여러가지 장점이 있기때문에 컴포넌트를 분리를 해줍니다. 반복문 , 조건문 , 폼 안의 엘리먼트 들을 분리해주었습니다. components 폴더 안에 js 파일을 생성합니다. NicknameEditForm.js import React from 'react'; import { Form, Button ,Input} from 'antd'; const NicknameEditForm = () => { return ( 수정 ); } export default NicknameEditForm; PostCard.js import React from 'react'; import {Button, Card , Icon , Av..

프로필 화면을 만들어 보겠습니다. profile.js import React from 'react'; import { Form, Button , List , Input, Card , Icon} from 'antd'; const Profile = () =>{ return ( 수정 ( )} /> ( )} /> ); }; export default Profile; 배열안에 jsx를 쓸땐 key 가 꼭 필요합니다. 파일들 안에 if문 또는 반복문 사이의 코드들은 나중에 최적화를 위해 모두 컴포넌트화 시키겠습니다. 출처 : https://www.youtube.com/channel/UCp-vBtwvBmDiGqjvLjChaJw ZeroCho TV 조현영(zerocho)의 JS 프로그래밍 강좌 시간 나는대로 저녁 10..

메인 화면 에 작성 글 영역 꾸며주기 index.js import React from 'react'; import { Form , Input , Button, Card , Icon , Avatar} from 'antd'; const dummy = { isLoggedIn : true, imagePaths: [], mainPosts : [{ User : { id : 1, nickname : "Dogveloper", }, content : "첫번째 게시글", img : 'https://source.unsplash.com/random', }], } const Home = () =>{ return ( {dummy.isLoggedIn && 이미지 업로드 짹짹 {dummy.imagePaths.map((v,i) =>{..

로그인 폼 만들기 dummy 데이터의 isLoggedIn : true 이면 로그인 상태 false 이면 로그아웃 상태를 삼항 연산자로 비교를 하였습니다. import React from 'react'; import Link from 'next/link'; import {Menu, Input , Button, Row , Col , Card , Avatar , Form} from 'antd'; import PropTypes from 'prop-types'; const dummy = { nickname : 'Dogveloper', Post : [], Followings : [], Followers : [], isLoggedIn : true, }; const AppLayout = ({children}) =>{ ..

antd 를 사용하여 화면의 디자인을 구성합니다. https://ant.design/components/grid/ Ant Design - A UI Design Language Use row-flex define flex layout, its child elements depending on the value of the start,center, end,space-between, space-around, which are defined in its parent node layout mode. ant.design antd는 반응형 을 기본적으로 제공합니다. 가로 너비 기준 xs : 모바일 sm : 태플릿 md : 노트북 lg : 데스크탑 각각 px이 정해져있습니다. 로그인 했을때 어떻게 보여지는지 dummy..

React 에서 제공해주는 기능중 prop 검증 기능이있다 부모에서 자식에게 물려주는 값(prop)을 검증해준다. npm i prop-types https://www.npmjs.com/package/prop-types prop-types Runtime type checking for React props and similar objects. www.npmjs.com prop 이 있는곳에 propTypes 설정 AppLayout.js import React from 'react'; import Link from 'next/link'; import {Menu, Input , Button} from 'antd'; import PropTypes from 'prop-types'; const AppLayout = ..

중복되는 레이아웃 들을 분리하는 작업. index.js , profile.js signup.js 의 모든 파일에 같은 코드가 중복이 되는 영역이 있다. Head영역과 AppLayout 영역이 중복이 된다. 그렇기 때문에 저 부분을 분리 해준다. 레이아웃을 위한 파일을 Next 가 지정해 놓았다 pages 폴더 안에 _app.js 라고 파일을 생성한다. 모든 js 파일이 _app.js를 부모 컴포넌트로 인식한다. _app.js 작성 import React from 'react'; import Head from 'next/head'; import AppLayout from '../components/AppLayout'; const NodeBird = ({ Component }) => { return ( );..

스프링 부트 (https://spring.io/projects/spring-boot) 프로젝트는 스프링 프레임워크를 더 빠르고 쉽게 사용할 수 있게 도와주는 툴입니다. 본 강의는 스프링 부트의 여러 기능을 쉽게 이해하고 적극적으로 사용할 수 있는 방법을 제공합니다. 학습 목표 스프링 부트의 핵심 원리를 이해합니다. 스프링 부트가 제공하는 주요 기능을 사용할 수 있습니다. 스프링 부트를 사용하여 웹 애플리케이션을 개발할 수 있습니다. 스프링 부트를 사용하여 여러 데이터 기술과 연동하는 애플리케이션을 개발할 수 있습니다. 스프링 부트 애플리케이션의 운영 정보를 관리하고 모니터링 할 수 있습니다. 이번 강의를 통해 여러분은 스프링 부트의 다음과 같은 주제에 대해 학습할 수 있습니다. 스프링 부트 원리 의존성 ..

비교(Comparisons) 수학에서 사용하는 많은 연사자 기호들이 있다. 왼쪽이 오른쪽보다 크다 ≤: 왼쪽보다 오른쪽이 크거나 같다. ≥: 왼쪽이 오른쪽보다 크거나 같다. =: 같다. ≠: 등호에 / 를 그은 것으로 식이 성립되지 않을 때 사용한다. 예를 들어 1≠2와 같은 경우 저 기호를 사용할 수 있다. 자바스크립트에서도 비교 연산자 기호가 있다. 왼쪽이 오른쪽보다 크다 =: 왼쪽이 오른쪽보다 크거나 같다. ==: 같다. != : 등호에 / 를 그은 것으로 식이 성립되지 않을 때 사용한다. 예를 들어 1≠2와 같은 경우 저 기호를 사용할 수 있다. = : 대입 연산자. a = b, a에 b의 값이 대입된다. 값의 결과 : Boolean 비..

signup.js 에 회원가입 폼을 만들겠습니다. 회원가입 폼의 기능엔 비밀번호와 비밀번호 체크의 검증 함수 체크박스를 체크 유무 검증 기능, 그리고 일반적으로 함수를 만드는 것과 Coustom Hook, Hook들과 일반 함수, 값을 조합해서 새로운 Hook을 만드는 법을 확인해보겠습니다. 일반 함수 방법 Coustom Hook 방법은 난이도가 있는 방법입니다. 그럴땐 일반적으로 사용하셔도 전혀 상관없습니다. import React, {useState} from 'react'; import Head from 'next/head'; import AppLayout from '../components/AppLayout'; import { Form , Input , Checkbox , Button} from ..

기존에 만들었던 user폴더 , about.js 는 삭제해 줍니다. 그리고 새로 profile.js , signup.js 파일을 만들어 줍니다. AppLayout.js import React from 'react'; import Link from 'next/link'; import {Menu, Input , Button} from 'antd'; const AppLayout = ({children}) =>{ return ( 노드버드 프로필 회원가입 {children} ); }; export default AppLayout; index.js import React from 'react'; import Link from 'next/link'; import Head from 'next/head'; import ..

기본적인 디자인을 적용하기 위해 Ant Design을 사용합니다. https://ant.design/ Ant Design - A UI Design Language ant.design 터미널에서 npm i antd 로 설치합니다. 중복되는 레이아웃을 쉽게 관리하기위해 components 폴더와 그 하위에 AppLayout.js 파일을 만듭니다. pages 는 next 기본 설정이기때문에 꼭 pages라고 만들어야 하지만 components는 자유롭게 원하는 폴더명으로 만들어도 상관없습니다. AppLayout.js 를 작성합니다. key 는 반복문 역할을 하기 때문에 key 값을 꼭 넣어주어야 합니다. {children} 은 props 입니다. children을 사용하기 위해 index.js 에 import..

front 폴더 안에 pages 폴더 생성 pages 폴더 안에 index.js 파일을 생성 합니다. index.js 를 작성합니다. 제로초님 강좌에선 hooks 문법을 주로 사용하십니다. import React from 'react'; const Home = () =>{ return ( Hello, Next! ); }; export default Home; index.js 실행시키기 위해선 pakage.json 의 설정을 변경해 주어야 합니다. next가 자동으로 설정후 서버를 실행합니다. // 수정전 { "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test":..

Project Folder 만들기 React-NordBird 프로젝트 폴더 생성 후 그 하위에 각각의 front 폴더 , back 폴더 각각 생성 에디터에서 터미널을 켭니다. 터미널에서 front 폴더로 이동합니다. 그 이후에 npm init을 선언해줍니다. npm init 은 노드 프로젝트를 만들겠다는 선언 합니다. next나 react는 노드가 필수입니다. 노드는 서버가 아니라 자바스크립트 실행기입니다. 그렇기 때문에 노드도 꼭 같이 배워줘야 합니다. npm init을 이용하여 package.json 정보를 입력합니다. 직접 package.json 파일을 생성해서 만들어도 가능하지만 좀 더 편하게 만들 수 있도록 도와주는 게 npm init입니다. 정보를 입력 후 엔터를 치면 다음으로 넘어갑니다. 3..

- 에디터 Visual Studio Code - 프런트 서버 React, Next Redux Redux-saga Styled Components - 백앤드 서버 Express Database(MySQL) ORM (시퀄라이즈) 패스포트 multer(S3) Socket.IO 이미지 압축(람다) 프런트 서버와 백앤드 서버의 분리 이유 -장점 서로의 역할이 다르기 때문에 내가 사용하는 웹 서비스 요청이 프런트 서버의 요청이 많아질 경우 프런트 서버를 늘리면 되고, 데이터 처리가 많은 서비스 일 경우 백앤드 서버를 늘려주면 된다. 이러한 방법을 스케일링이라고 합니다. -단점 CORS 이슈 복잡도가 증가합니다. 서로 주소가 달라 데이터를 주고받기가 어려우며 보안적인 문제도 있습니다. 그렇기 때문에 이 부분의 처리하..

자바스크립트 코드 작성 시 규칙 만약 Hellow와 world라는 두 개의 단어를 나누어 알람을 울린다면 밑의 형식은 바람직 하지 않습니다. alert('Hello'); alert('World'); 보통 문장은 줄바꿈을 하여 코드를 작성합니다. alert('Hello'); alert('World'); 세미콜론 (;) 줄바꿈을 할 경우 세미콜론을 생략할 수 있습니다. alert('Hello') alert('World') 이렇게 줄 바꿈을 하여 코드를 작성할 경우 "암시적" 세미콜론으로 해석합니다. 자동으로 세미콜론을 작성했다 인식합니다. 성향마다 많이 다르지만 항상 코드가 끝나면 세미콜론을 붙이는 습관을 가졌으면 합니다. 오류의 종류 반복문 forEach를 이용해 세미콜론 없이 실행을 하면 1,2의 알람 ..

switch 문 문법은 하나 이상의 case 블록과 선택적 기본값을 가진다. switch(x) { case 'value1': //if x 가 'value1' 이면 실행 ... [break] case 'value2': //if x 가 'value2' 이면 실행 ... [break] default: ... [break] } switch 문의 패턴은 ('value1') case 'value1'과 같으면 case : 에서 시작하여 가장 가까운 break까지 실행한다. 만약 case에 일치하는 값이 없다면 default 코드가 실행된다. (default 가 존재할 경우) 예제 let a = 2 + 2; switch (a) { case 3: alert( 'Too small' ); break; case 4: aler..

40곳 정도 지원해서 4곳의 면접을 봤다 면접은 항상 적응하기 힘들다 ㅋㅋ 위치,연봉,문화,나이 등등.. 그동안 면접을 보며 피드백 받았던 내용들을 되새기며 되새기며 이력서 수정및 블로그 정리를 해야겠다. 휴 졸려 자야지 ㅋ

랜덤으로 구구단 문제를 반복적으로 출제하며 정답일 경우 새로운 문제를 출제합니다. 오답일 경우 틀린 문제를 반복적으로 출제합니다. num1 : 1~ 9 랜덤한 숫자 num2 : 1~ 9 랜덤한 숫자 result : 정답의 값을 저장하는 변수 check : boolean 변수 answer : 문제의 답을 제출하면 저장해주는 변수 정답일 경우 check 변수를 false 로 변환하여 상위 while 문을 실행합니다.

6가지 형태의 별을 찍어보는 코드입니다. repeat() " ".repeat(star) star : 별의 개수 초기화값 (문자열을 반복할 횟수. 0과 양의 무한대 사이의 정수([0, +∞)) ) 반환값 : 현재 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열. 예외 : RangeError: 반복 횟수는 양의 정수여야 함. RangeError: 반복 횟수는 무한대보다 작아야 하며, 최대 문자열 크기를 넘어선 안됨. 예제 : 'abc'.repeat(-1); // RangeError 'abc'.repeat(0); // '' 'abc'.repeat(1); // 'abc' 'abc'.repeat(2); // 'abcabc' 'abc'.repeat(3.5); // 'abcabcabc' (정수형으로 변환) 'ab..