개키우는개발자 : )

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..

랜덤으로 단어를 제시하면 제시한 단어의 끝 글자로 시작하는 단어를 답변합니다. 게임은 무한으로 진행이 되며 정답일 경우 맞춘 단어가 제시어로 바뀌고 '딩동댕' 알람을 띄웁니다. 오답일 경우 '땡' 알람을 띄웁니다. randomWord : 배열에 랜덤한 단어를 저장해주는 변수 randomSize : 배열의 길이 저장 (5) Math.random() : 0을 포함하면서 1보다 작은 랜덤한 값을 반환(소수점) Math.floor() : 소수점 버림 size : 랜덤한 0.xxxxx * 5 값의 소수점을 버린 나머지 값을 저장 word : 랜덤한 배열의 단어를 저장하는 변수 wordSzie : 제시한 단어의 글자 길이의 -1 값을 저장 ( 예) 제시어 : 자바(2) -1 = 1 ) answer : 대답한 단어

+ , - , * , / 일반적인 수학과 조금 다른 연산자에 대해서 다룹니다. 용어 : "unary","binary",operand" 피연산자(operand) - 연산자가 적용되는 것. 5 * 2 에는 두 개의 피연산자가 있습니다. 왼쪽 피연산자는 5 , 오른쪽 피연산자는 2 입니다. "인수" 라고도 부릅니다. 단항 연산자(Unary operator) - 단항 연산자일 경우 값에 - 를 넣으면 숫자의 부호가 -로 변경됩니다. let x = 1; x = -x; alert( x ); // -1, unary negation was applied //결과 -1 이진 연산자(Binary operator) - 같은 마이너스는 바이너리 형식으로 존재합니다. let x = 1, y = 3; alert( y - x );..

예전에 지인의 과제를 도와드렸던 문제입니다. html , css를 너무 대충한 느낌이..ㅋㅋ 양해 좀요 ^^ 사칙 연산 퀴즈 자신의 이름과 제시된 연산의 답을 입력 한 후 완료 버튼을 눌러주세요. 이름 : 5 + 6 = 8 - 3 = 7 x 6 = 15 ÷ 3 = 8 + 6 - 3 x 2 ÷ 2 = 그때 당시 제가 풀었던 방식입니다. window.addEventListener("click", init, false); function init () { document.forms[0].elements[7].addEventListener("click", quizCheck, false); } function quizCheck(){ var examineeName = document.forms[0].name.val..

마크업 태그 방식 script 태그 사이에서 자바스크립트 코드가 바로 실행이 됩니다. 삽입 위치는 어디든 상관없이 실행은 됩니다. 하지만 스크립트는 load 진행 순서? 가 있기 때문에 그 부분은 나중에 ^^~ 작성하고 일단 ...After the script. 외부 스크립트 방식 ( External scripts ) JavaScript 코드 량이 많으면 별도의 파일에 넣을 수 있습니다. Before the script... ...After the script. 또는 URL을 넣을 수 있습니다. 여러 개의 스크립트를 첨부하여 사용할 수 있습니다. … 이와같은 경우에는 사용할 수 없습니다. 참고 : https://javascript.info/hello-world Hello, world! javascript..

자바스크립트란 무엇일까? "동적인 화면을 구성"하는데 사용하는 언어 라고 생각합니다. 더 자세한 내용들 자바스크립트의 역사 등등..이러한 내용은 위키백과를 찾아보시면 됩니다!ㅋ 자바스크립트는 언어가 발전하면서 Web , App , Back - End, Front - End ...어디서든 사용 할 수 있는 라이브러리,프레임워크 들이 등장하면서 정말 자바스크립트는 사용할 곳이 많구나 라고 생각듭니다. 왜 자바 스크립트인가? 자바스크립트가 처음에는 "LiveScript" 라는 이름으로 사용되다 "넷스케이프 2.0B3에서부터 공개, 채택되었다. 자바스크립트라는 이름은 상당한 혼란을 가져왔다." 하지만 자바스크립트가 진화하며 ECMAScript 라는 자체 사양을 가진 완전히 독립적인 언어가 되었으며 Java와는 ..

자바 스프링프레임워크를 활용하여 포트폴리오 + 프로젝트 완성후 현자타임이 왔다.. 이력서 넣으면 당연히 연락은 많이 안올것을 예상했지만 ㅠㅠ너무 연락안오니 자존감 떡락 ㅋ 요즘 웹 퍼블리셔 + 프론트엔드 기술을 이론적으로 공부하고있다 아 다시 열심히 블로그 작성해서 공부 기록을 남겨놔야지.. 너무 잘까먹음 ㅋㅋ 아 취업하고싶어요~!ㅋㅋ

광고 클릭은 개발자(저) 에게 큰힘이 됩니다!!'ㅁ'삼륙구~ 삼륙구~ 123456789101112131415161718192021222324252627282930313233343536373839404142package test.game; public class Sam69 { public static void main(String[] args) { /* * 3,6,9의 숫자일 때 박수를 치는 게임 * 100 이상의 값일 경우에도 박수를 쳐보자 * * */ //실행 횟수 int count = 333; //chkNum 실행 값의 시작 for(int chkNum = 1 ;chkNum

구구단을 외자~ 구구단을 외자~ 123456789101112131415161718192021222324252627282930313233343536373839404142434445package test.game; import java.util.Scanner; public class Gugudan { public static void main(String[] args) { /* * 2단부터 시작하는 구구단 게임 랜덤으로 구구단이 나오면 그 결과를 맞추는 게임 * */ Scanner sc = new Scanner(System.in); int success = 0; // 2~9까지 랜덤 숫자(x,y) System.out.println("구구단을 외자~ 구구단을 외자~"); while (true) { int x ..

광고 클릭은 개발자(저) 에게 큰힘이 됩니다!!'ㅁ'가위 바위 보!! 최대 10번까지 가능한 가위바위보 게임 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394package test.game; import java.util.Random;import java.util.Scanner; public class Ggb { public static void main(String[] args) { /* * 컴퓨터와 가위,바위,보 게임을 해서 몇번을 ..

테이블 조작 1. 테이블 삭제 1DROP TABLE [스키마.]테이블명 [CASCADE CONSTRAINTS]cs - 삭제 1DROP TABLE ex2_9;cs 테이블과 테이블의 모든 데이터가 삭제되었다. CASCADE CONSTRAINTS를 붙이면 삭제할 테이블의 기본키와 UNIQUE 키를 참조하는 참조 무결성 제약조건도 자동 삭제된다. 테이블을 삭제하면 다시 복구할 수 없으므로 테이블을 삭제할 때는 항상 여러번 확인하는 습관을 들이도록 하자. 추후에 실습해보겠다. 2. 테이블 변경 2-1 실습) 컬럼명 변경 1ALTER TABLE [스키마.]테이블명 RENAME COLUMN 변경전컬럼명 TO 변경후컬럼명;cs - 입력 1ALTER TABLE ex2_8 RENAME COLUMN NUM1 TO NUMBE..