반응형 develop52 [SQL] SQL로 프로그래밍 IF문 1. 기본구조 DELIMITER $$ CREATE PROCEDURE BEGIN END$$ DELIMITER ; CALL 2. 예시 DELIMITER $$ CREATE PROCEDURE if_exercise BEGIN DECLARE myNum INT; SET myNum = 200; IF myNum = 100 THEN SELECT '100입니다.'; ELSE SELECT '100이 아닙니다.'; END IF; END $$ DELIMITER ; CALL if_exercise 2023. 2. 21. [SQL] 테이블 결합하기 JOIN 1. 내부 조인. 가장 많이 사용되는 JOIN 기본 키 = Primary Key, 한 개만 존재할 수 있음 외래 키 = Foreign Key, 여러개 존재 할 수 있음 일대다 관계는 주로 기본 키와 외래 키 관계로 맺어져 있다. 그래서 PK-FK 관계라고 하기도 한다. 2. SELECT 열 목록 FROM 첫 번째 테이블 INNER JOIN 두 번째 테이블 ON 조인될 조건 (WHERE 검색 조건); 3. 외부조인. 한쪽에만 있는 데이터를 출력하고 싶을 때 사용. SELECT 열 목록 FROM 첫 번째 테이블 (LEFT 테이블) (LEFT; RIGHT; FULL) OUTER JOIN 두 번째 테이블 (RIGHT 테이블) ON 조인될 조건 (WHERE 검색 조건); 4. 자체조인. 하나의 테이블 내용으로 데.. 2023. 2. 20. [SQL] 데이터 형식과 형 변환 1. 정수형에는 TINYINT, SMALLINT, INT, BIGINT 4가지로 구성된다. TINYINT UNSIGNED으로 입력하게 되면 음수 범위가 사라지고 0에서 255로 사용될 수 있다. 무조건적으로 INT를 사용하기보단 가능한 숫자 범위에 맞춰 사용하자. 2. 문자형에는 CHAR(255), VARCHAR(16383)가 있다. 데이터 측면에서는 VARCHAR를 사용하는것이 유리하며, 속도면에서는 CHAR가 유리하다. 고정된 자리값이 존재한다면 CHAR, 가변적이라면 VARCHAR를 사용하는 것이 좋다. 0으로 시작되는 숫자의 경우에도 문자형으로 입력해야 한다. 연락처 같은 경우에도 숫자형으로 할 이유가 꼭 없다면 문자형으로 많이 사용한다. 3. 대량의 데이터를 저장할때 LONGTEXT, LONGB.. 2023. 2. 14. [SQL] 데이터 변경하기 (INSERT, UPDATE, DELETE) 1. INSERT INTO 테이블이름 VALUES (입력할 값, 입력할 값2); 위와 같이 테이블에 데이터를 입력할때 사용되는 가장 기본적인 INSERT 구문. INSERT INTO 테이블이름(열이름1, 열이름2) VALUES (열1 입력값, 열2 입력값); 지정된 열에 따로 값을 입력할 수 있다. 2. 값을 자동으로 만들때 INT AUTO_INCREMENT PRIMARY KEY로 생성할 수 있다. 만약 값을 1번부터가 아닌 다른 숫자로 하고 싶다면 ALTER TABLE 테이블이름 AUTO_INCREMENT=원하는 숫자;로 바꿀 수 있다. SET @@auto_increment_increment=3; 를 입력하면 상승되는 숫자를 조절할 수 있다. 3을 입력했으니 1,4,7 3씩 증가 3. 대량을 값을 복사.. 2023. 2. 14. [SQL] SELECT절 기본 정리, 예시 및 정의 1. SELECT 절의 기본형식은 아래와 같다. 모든 약속어를 사용할 필요는 없지만 사용한다면 꼭 순서에 맞게 사용해야한다. SELECT: 열 이름 FROM: 테이블 이름 WHERE: 조건식 GROUP BY: 열 이름 HAVING: 조건식 ORDER BY: 열 이름 LIMIT: 숫자 2. ORDER BY는 기본적으로 오름차순으로 정리된다. SELECT * FROM 테이블이름 ORDER BY 열 이름; 으로 하면 정한 열의 오름차순으로 나열된다. 만약 내림차순으로 정려하고 싶다면 ORDER BY 열 이름 DESC; 을 추가 하면된다. (기본적으로 ORDER BY 열이름 ASC가 적용되어 오름차순으로 진행됨) 만약 2가지 조건을 걸고 싶다면 ORDER BY 열 이름(1), 열 이름(2); 으로 나열하면 순서.. 2023. 2. 14. [WORD] 한글 -> 영어 자동 변환 취소하기 (자동 고침 다른 방법) WORD가 영어를 전문적으로 사용하는 프로그램이기 때문에 한글을 사용할 때 번거로운 점이 몇 가지 있다. 그 중 하나가 한글이 영어로 자동변환 되는점. 해결 방법을 찾아 기록겸 정리해 본다. 1) 파일을 눌러 옵션을 들어간다. 2)언어 교정에서 자동 고침 옵션을 누른다. 3) 한/영 자동 고침 체크해제까지는 쉽게 검색해서 찾을 수 있다. 그래도 자꾸 변환되어 찾은 방법이 Caps Lock해제. 이유까지는 파악하지 못했지만 Caps Lock을 누를때 변환 되던게 되지 않는 것을 확인하여 실행해보니 이상없이 작동한다. 2021. 10. 27. [JS] append() & appendChild() 비교 append와 appendChild의 차이를 알고 싶어 정리한 글. append() appendChild() 타입 자바 스크립트 함수 DOM 함수 추가 노드 갯수 여러개의 자식요소 설정 가능 한 개만 가능 문자열 노드 추가 지원 가능 DOM 문자열, 또는, 태그와 조합해 여러개의 텍스트 노드, 또는 엘리먼트 노드를 여러개 만들 수 있음 Node object ('p') // p tag DOM String('한글) Node object만 가능 인터넷 익스플로어 미지원 지원 prepend 지원 prepend() 지원 prependChild() 미지원 반환 값 undefined 추가된 노드 참조 인터넷 익스플로어를 지원하지 않아도 된다면 append()를 사용하는 것이 다방면으로 좋다! 2021. 10. 2. [JS] insertadjacentelement & insertadjacenthtml insertadjacentelement insertAdjacentElement ()는 이미 Dom에있는 요소를 삽입하는 데 사용됩니다. 예를 들어 getElementById ()를 사용하여이 요소를 가져올 수 있다. 이미 만들어진 어떤 Element 형태를 가져오는 역할을 한다. 그래서 createElement로 가져온 것의 적용한다. https://www.w3schools.com/jsref/met_node_insertadjacentelement.asp HTML DOM insertAdjacentElement() Method HTML DOM insertAdjacentElement() Method Element Object Example Move a span element to after the header.. 2021. 9. 28. [JS] innerHTML & innerText innerHTML와 innerText의 정확한 구분을 하기위해 정리한다. innerText는 문자 그대로 TEXT로만 받아 들인다. innerHTML은 문자 그대로 HTML로 받아 들인다. 그렇기 때문에 서식이 적용된 것을 알 수 있다. 2021. 9. 27. [TS] Property 'src' does not exist on type 'HTMLElement' 이미지 요소에 src와 alt를 동적으로 입력해주려 작성하다 에러가 생겼다. 해결법은 간단했다. src, alt는 이미지에서만 사용가능한 요소로 HTMLImageElement 로 선언해주면 된다. 2021. 9. 26. [NPM] install시 --save 뜻 npm를 통해 패키지를 인스톨 할 때 옵션으로 --save를 붙일 때 가 있어, 궁금해서 찾아봤다. npm install package npm install --save package --save가 없으면 node_modules에 설치를 하고 --save가 있으면 package.json의 dependecies에 추가가 된다. 이에 따라 다음에 프로젝트를 다운받은 후 npm install을 하게 되면 함께 설치가 된다. 협업을 할 때 새롭게 설치한 필요한 필수 모듈의 경우 --save를 붙여 진행하는 것이 좋다고 한다. https://stackoverflow.com/questions/35513712/is-npm-install-the-same-as-npm-install-save 2021. 9. 15. [JS] 프로그래머스 오픈채팅방 https://programmers.co.kr/learn/courses/30/lessons/42888 코딩테스트 연습 - 오픈채팅방 오픈채팅방 카카오톡 오픈채팅방에서는 친구가 아닌 사람들과 대화를 할 수 있는데, 본래 닉네임이 아닌 가상의 닉네임을 사용하여 채팅방에 들어갈 수 있다. 신입사원인 김크루는 카카오톡 오 programmers.co.kr 해결 방안 구상 1. Enter와 Leave 구별 / id & nickname 구별하기 2. Enter와 Leave에 따라서 알람문구 설정해서 출력하기 오답 내가 생각한 해결방안대로 진행하기 위해 우선 "enter id nickname"을 나누기위해 split(' ')을 사용했다. 그 다음 id와 nickname도 받아왔다. a = ['b', 'c'] {b: c.. 2021. 9. 14. [NPM] permission denied error 공부를 하기위해 사전 프로그램을 설치하는 것도 정말 큰 일이다 :) typescript를 설치하기 위해 고생했는데, 끝이 아니었다. typescript를 편하게 사용하기 위해 필수 프로그램인 ts-node설치도 안돼 해결방법을 열심히 찾은 후 정리한다. 에러내용을 살펴보니 설치 경로에 대한 권한이 없다고 한다. 원인은 여러가지가 있겠지만 npm, brew, node 같은 경우 'sudo'로 설치하면 발생한다고 한다. 해결 방법은 2가지가 있다고 한다. root 되어있는 디렉토리 권한을 모든 User 그룹의 권한으로 변경. npm install -g 로 설치되는 디렉토리 경로를 자신의 home directory로 변경. 그 중에 실행한 방법은 2번 첫 번째, mkdir ~/.npm-global (설치되어 .. 2021. 9. 12. [TS] zsh: command not found: tsc TypeScript 공부를 위해 설치를 진행했다. npm install -g typescirpt 를 입력해 설치한 후 확인하기 위해 tsc -v 를 입력하였지만 나오는 것은 ...? 왜 안돼요...? 안 될때는 삭제 후 재설치지. uninstall하고 다시 설치했지만 역시나 안된다. 시작이 반이라는 말은 시작이 어려워서 그렇구나 ^^.. 라고 깨닫게 되는 순간. npm으로 안되면 yarn으로 해야지! 라고 생각하고 yarn global add typescript를 했지만.... but no dice. 🧚🏻♀️ yarn은 global 설정을 yarn 바로 뒤에 해줘야 한다! 결국 찾은 해결 방법은 brew install typescript npm i typescript -g yarn global add .. 2021. 9. 12. [GIT] git-pages 404 error gh-pages를 사용하였는데 갑자기 404에러가 발생해 고생했다. 분명히 몇 일 전까지만 해도 잘 사용했는데 갑자기 에러가 발생하니 당황 스러울 밖에. 해결법을 찾았는 너무 간단한다. git commit --allow-empty -m "Trigger rebuild" git push git push 빈 커밋을 통해 rebuild하는 것 같은데 왜 이걸로 문제가 해결되는는 까지는 확인하지 못했다. 심오한 git 세계,,,,😇 https://stackoverflow.com/questions/11577147/how-to-fix-http-404-on-github-pages/45907768#45907768 How to fix HTTP 404 on Github Pages? Here is my GitHub repos.. 2021. 9. 11. [JS] 배열을 객체로 배열을 객체로 변환시켜야 하는 방법 const array = [ 'apple', 'banana', 'lemon' ] 1. Object.assign( { } , array ); 객체를 복사하거나, 객체끼리 합하는데 사용 되기도 한다. 배열을 객체로 변환시킨 원리도 { } 빈 객체에, array를 객체로 변환시켜 더했다 생각하면 된다. 객체에서 중복된 값이 있다면 덮어 씌운다. a : 1이 a : 6으로 변경된 것을 알 수 있다. 2. array.reduce( (target, key, index) => { target[index] = key ; return target }, { } ) reduce( ) 메서드는 워낙 중요한 메서드 이기 때문에 추후 따로 정리해야겠다. 3. { ...array } 스프레드 연.. 2021. 9. 10. [REACT] TypeError: Cannot read property 'map' of undefined 해결하기 React에서 리스트를 받아올 때 자주쓰는 구조로 state.map()을 사용하다 발생한 오류를 해결하지 못해 직접 찾아보고 찾은 답을 정리한다. 왜....도대체 왜..안되는걸까?? 한참 고민하다 발견한 답 React 는 렌더링이 화면에 커밋 된 후에야 모든 효과를 실행하기 때문이다. 즉 React는 return에서 state.map(...)을 반복실행할 때 첫 턴에 데이터가 아직 안들어와도 렌더링이 실행되며 당연히 그 데이터는 undefined로 정의되어 오류가 나는 것 즉 첫번째 값이 없기 때문에 생기는 오류이다. 해결방법은 2가지이다. 1. && state && state.map()구조로 사용하기. JavaScript에서 true && expression은 항상 expression으로 실행되고 fa.. 2021. 9. 9. [JS] 프로그래머스 프린터 문제 https://programmers.co.kr/learn/courses/30/lessons/42587 코딩테스트 연습 - 프린터 일반적인 프린터는 인쇄 요청이 들어온 순서대로 인쇄합니다. 그렇기 때문에 중요한 문서가 나중에 인쇄될 수 있습니다. 이런 문제를 보완하기 위해 중요도가 높은 문서를 먼저 인쇄하는 프린 programmers.co.kr 해결 방안 구상 priorities의 첫 번째 인자를 추출해 나머지 인자들과 비교한다 큰 숫자가 있다면 뒤로 보낸다, 큰 숫자가 없다면 제거한 후 answer에다 +1을 더한다. 지정한 차례가 온다면 answer를 return 한다. 해결 답안 🧚🏻♀️ while 반복문이 익숙하지 않아서 for를 이용해 해결하려해서 시간을 많이 소비했다. 반복문을 for만 .. 2021. 9. 9. [JS] map()에 관하여 map()에 대해 더 자세히 알아야 겠다는 생각이 들어 정리하기! array.map(callbackFunction(currenValue, index, array), thisArg) callbackFunction , thisArg 두 개의 매개 변수, callbackFunction은 currenValue, index, array 세 개의 매개 변수. currentValue : 처리할 현재 요소 index Optional : 처리할 현재 요소의 인덱스 array Optional : map()을 호출한 배열 thisArg Optional : callback을 실행할 때 this로 사용되는 값. 제곱근 구하기 let nums = [4, 9, 16, 25]; let result = nums.map(Math.sqr.. 2021. 9. 6. [JS] 프로그래머스 기능 개발, 그리고 map() https://programmers.co.kr/learn/courses/30/lessons/42586 코딩테스트 연습 - 기능개발 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 programmers.co.kr 해결 방안 구상 1. 완결 되는 100을 선언한 다음 progresse를 각각 빼서 speed로 나눠 올림한다 (Math.ceil) 2. 구한 소요일을 비교하여 답을 구한다. 1번을 구하기위해 for 반복문을 2번 돌렸다. 첫 번째는 100 - progresses[i]를 구하기 위해. 두 번째로는 첫 번째 구한 값을 speeds[i]로 나누기 위해. 2번.. 2021. 9. 6. [REACT] Font 적용하기 🧚♀️ 터미널에 해당 경로를 열어 npm install --save styled-components 를 입력해 설치해놓을 것 REACT에 FONT 적용하기 FONT를 적용하는 방법으로 두 가지 방법이 있다. CDN (Content delivery network 콘텐츠 전송 네트워크) LOCAL 1. CDN Index.html 사이에 link를 삽입하여 사용하면 된다. 사용하기 편하다는 장점이 있지만, 개인 프로젝트나 소규모에서는 상관 없지만 프로젝트 규모가 커질 수록 속도를 저하시키는 단점이 있다. 2. LOCAL FONT파일을 다운받아 사용하는 방법으로, CDN에 이용하여 사용하는 것보다 번거롭지만, 속도면에서 장점이 있다. 우선 src/styles/fonts 폴더를 생성한다. font를 다운바다 f.. 2021. 9. 5. [REACT] React Router를 이용하여 페이지 전환 하기 페이지에서 페이지로 이동하기 위해서는 React Router를 사용하면 된다. 터미널에서 프로젝트 폴더에 들어가 yarn add react-router-dom react-router-dom을 설치한 후 컴포넌트가 모여있는 app으로 이동하여 화면전환 경로를 만들어 주면 된다. BrowserRouter -> Switch -> Route순으로 경로를 작성해 준다. Route에 path를 입력하여 주소를 생성한다. (exact를 넣어주어여 정확한 값에 주소가 이동된다) 이동시킬 컴포넌트를 Route안에 묶어 페이지를 구현한다. 이 후 useHistory Hook을 이용하여 사이트 이동 주소 함수를 구현한다. goToNote라는 함수안에 history.push로 이동할 주소값 및 데이터를 입력하였다. 2021. 8. 31. [JS] 숫자 야구 게임 [2] 숫자 야구 게임 [1]에 정답이 되는 4개의 임의 숫자를 만들었다. 이 후 각 4개의 숫자를 입력하여 같은 자리에 같은 숫자가 오면 STRIKE, 정답에 들어있는 숫자는 같지만 위치가 다르면 BALL을 반환하는 함수를 구현해봤다. 정답을 question / 시도한 답을 test로 받고, 각 숫자의 위치를 비교하기 위해 문자와 숫자를 배열로 변환시켜 진행했다. test의 경우 숫자로 진행하면 0이 처음왔을때 생략되는 경우를 막기위해 문자로 변환시켰다. String으로 문자로 변환 후 spilt('')를 사용하여 각 숫자별로 문자열로 반환 이 후 반목문을 돌려 각 자리수끼리 비교하여 같은면 strike의 위치로 넣어주고 ballFiter에 strike된 숫자를 test에서 제외 시켜줄 수 있도록 filter.. 2021. 8. 31. [JS] 숫자 야구 게임 [1] 코딩 테스트 문제로 야구 숫자 게임 맞추기의 난이도가 나왔다는 얘기를 듣고 해 봐야겠다는 생각이 문득 들었다. 이렇게 하면 되겠다는 생각을 가지고 실행했지만 생각보다 난이도가 있어 정리하는 시간을 갖게 됐다. 처리하는 과정은 다음과 같이 생각했다. 정답으로 임의의 숫자를 생성한다 -> 정답과 추측 값의 각 자릿수를 비교하여 STRIKE의 개수를 구한다 -> STRIKE 된 숫자를 제외하고 남은 숫자들을 위치와 상관없이 비교하여 BALL의 개수를 구한다 -> 반복 후 4 STRIKE이면 게임 종료 임의의 4자리 숫자 정답을 만들어보자. console.log를 통해 임의의 값을 나오는 것을 확인했다. Number는 랜덤의 숫자가 정답으로 들어갈 때 중복되지 않게 하기 위해 마련한 장치이다. 입력되는 값이 0.. 2021. 8. 30. [JS] 임의의 숫자 생성하기 Math.random() 0 ~ 1 사이의 무작위 수를 생성해준다. ex) 0.XXXXXXXXXXXXXXXXXX Math.floor() 숫자를 정수로 변환시켜 준다. 이 두개를 사용하여 Math.floor(Math.random()*10) 을 하게되면 0~9 까지의 임의의 정수를 얻을 수 있다. ( parseInt(Math.random()*10)와 같다 ) [JS] parseFloat() & parseInt() parseFloat(value) : 문자열을 실수로 변경 매개 변수 value : 변환할 값 반환 값 주어진 값에서 부석한 부동소수점 수. 분석할 수 없으면 NaN 숫자로 변경될 수 없는 문자가 들어가있으면 NaN을 반환한다. hyoe-it.tistory.com 0 이상 N 이하인 값을 뽑아내고 싶.. 2021. 8. 30. [JS] parseFloat() & parseInt() parseFloat(value) : 문자열을 실수로 변경 매개 변수 value : 변환할 값 반환 값 주어진 값에서 부석한 부동소수점 수. 분석할 수 없으면 NaN 숫자로 변경될 수 없는 문자가 들어가있으면 NaN을 반환한다. parseInt(string, radix): 문자열을 정수로 변경 매개 변수 string : 분석할 값. 문자열이 아니면 문자열로 변환(ToString 사용). radix : (선택) 2 ~ 36 진수 2021. 8. 30. [REACT] Firebase 연동 및 사용하기 [1] Firebase란? 서버를 개발하기 위해서는 인증, 데이터베이스, 푸시 알람, 스토리지, API등 여러 백엔드 요소적을 개발해야 한다. 하지만 앱 개발마다 매번 이런 과정을 진행하기에는 많은 시간이 소요된다. Firsebase는 이런 플랫폼을 프로젝트 구축 시 자동적으로 만들어주는 BaaS(Backend as a Service). 즉 Firsebase로 쉽게 백엔드를 구현하여 프로젝트를 작동할 수 있게된다. 다음은 Firebase에서 제공하는 주요서비스이다. - Firebase React에 설치하기 사용할 react폴더를 경로로 설정한 다음 yarn add firebase로 추가해주면 간단히 설치된다. 2021. 8. 29. [REACT] REACT-Icons 사용하기 Javascript에서 Icon을 사용 하는 것 보다 React에서는 훨씬 쉽게 Icon을 사용할 수 있다. yarn add react-icons 터미널에서 지정경로에 리액트 아이콘을 설치해준다. 다음 아래 사이트에 접속한다 https://react-icons.netlify.com/#/ React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm.. 2021. 8. 26. [GIT] ! [rejected] main -> main (fetch first) Git Repository에 새로 commit후 push를 하려하니 오류가 발생했다. 왜 또 reject됐을까... 열심히 찾아보다가 방법을 발견했다. 찾아보니 push를 진행하게 되면 기존 데이터에 문제가 발생할 수 있어 보호 차원에서 막는 것이라고 한다. 따라서 인위적으로 push를 진행해주면 된다. git push origin +branch(branch 이름을 기입해주면 된다) 2021. 8. 25. [REACT] Uncaught Error: Objects are not --- valid as a React child (found: object with keys {current}). If you meant to render a collection of children, use an array instead. React 오류 따라잡기 사건의 발달 To do list 를 React로 만드는 중, 할 일을 입력한 후 버튼을 누르면 useState를 사용하여 내용을 업데이트 하려 했다. addRef는 input의 현재 상태 값을 확인하기위해 useRef Hook을 사용하여 입력한 상황. 예상대로라면 addRef의 값이 업로드 되어야 하는데, 버튼을 누르면 홈페이지에는 경고창이 없이 하얀 페이지만 나오는 상황. console창에 들어가 경고를 확인 해보니 Uncaught Error: Objects are not --- valid as a React child (found: object with keys {current}). If you meant to render a collection of children, use.. 2021. 8. 25. 이전 1 2 다음 반응형
