일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Framework
- @Spring-Test
- POJO
- unix
- STS
- spring framework
- spring aop
- 컨테이너
- Ubunt
- SpringJDBC
- 리눅스
- XML
- JdbcTemplate
- @test
- 마이바티스
- Dependency Injection
- Spring JDBC
- @JUnit
- Linux
- java spring
- spring
- @AspectJ
- Spring Boot
- myBatis
- AOP
- java
- 프로퍼티
- JDBC TEMPLATE
- pointcut
- Di
- Today
- Total
목록전체 글 (238)
개키우는개발자 : )
흩어져 있는 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..
랜덤으로 단어를 제시하면 제시한 단어의 끝 글자로 시작하는 단어를 답변합니다. 게임은 무한으로 진행이 되며 정답일 경우 맞춘 단어가 제시어로 바뀌고 '딩동댕' 알람을 띄웁니다. 오답일 경우 '땡' 알람을 띄웁니다. 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..