본문 바로가기

분류 전체보기179

github Sync 에러 해결된 명령어 git pull --rebase git config --unset pull.ff 공부는 나중에 할것임. 참고사이트 : https://backlog.com/git-tutorial/kr/reference/ 2023. 2. 2.
confirm 사용방법 const onLogoutClick = async () => { if (window.confirm('로그아웃 하시겠습니까?')) { await signOut(); } }; 2023. 1. 30.
nginx사용하기 1. nginx다운로드 brew install nginx 2. 이렇게 nginx.conf가 어디 있는지 알수있음. The default port has been set in /opt/homebrew/etc/nginx/nginx.conf to 8080 so that nginx can run without sudo. 3. sudo nginx localhost:8080 포트를 열수있음. 4. brew info nginx nginx.conf가 어디 있는지 알수있음. 5. nginx 종료하기 sudo nginx -s quit 6. nginx.conf 에서 port를 8080 -> 80으로 변경해주었음. 7. pm2 설치 : sudo npm i -g pm2 8. pm2 start index.js 했더니 되었음.. .. 2023. 1. 28.
javascript 뒤로가게 하는 것 router.back(); const readNotices = useReadNotices(); if (typeof page === 'object') { alert('잘못된 접근입니다'); router.back(); } 2023. 1. 27.
SW 엔지니어 트랙 3기 후기 9월에 시작한 엘리스 SW 엔지니어 트랙 3기가 끝이 났다. 엘리스 트랙을 시작하기 전에는 Fastcampus에 50만원어치의 강의를 끈어놓고는 난이도가 너무 어려워서 1/3정도 듣다가 시간만 낭비하는것 같아서 듣지 않고 유튜브에서 John Ahn님의 리액트 강의를 듣고 존재하기는 하나 작동은 90%만이 되는 프론트, 백엔드가 완성된 포트폴리오를 만들고 AWS배포까지는 끝냈다. 하지만 너무나 원시적인 코드였고 컴포넌트와 기능 부분은 다른 파일에 들어가야 하는것도 몰랐고 Redux와 Javascript 이론을 50%만 아는 채로 만들었기때문에 자신감이 없는 상태였다. 현재 포트폴리오를 들고 아무 기업에나 들어가서 일을하면서 배우려고 했으나 그런 회사에서는 그누보드, 워드프레스, php를 주로 썼기 때문에 .. 2022. 12. 30.
typescript nextjs에서 table을 썼더니 에러가 났다 에러난 코드 : table을 썼더니 에러가 남.. import InnerPageMenuBar from '../../components/inner-page-menu-bar'; import Layout from '../../components/layout'; import useLogic from './use-logic'; import styles from './index.module.scss'; const MyPage = () => { // const logic = useLogic(); return ( 기본정보 아이디 비밀번호 ); }; export default MyPage; 이유는 바로바로!!! 안에 넣지 않아서 에러가 나는 것이다 ~~ 2022. 12. 29.
'SetStateAction<never[]>' 형식의 매개 변수에 할당될 수 없습니다.ts(2345) 1. 'Item' 형식의 인수는 'SetStateAction' 형식의 매개 변수에 할당될 수 없습니다.ts(2345) 질문 : never[]이 무엇이고 왜 SetStateAction에 멀쩔항 배열을 넣을 수 없는 것인가? 에러가 나버린 이유는!! useState오른쪽에 타입을 지정하지 않아서 그렇다. 이런 식으로 지정해야 한다. export interface Item { id: string; name: string; path: string; children?: Item[] | undefined; } const [subMenus, setSubMenus] = useState(); 2022. 12. 29.
'string | undefined' 형식은 'Url' 형식에 할당할 수 없습니다. 'undefined' 형식은 'Url' 형식에 할당할 수 없습니다.ts(2322) 에러 상황 : href에 undefined가 들어오면 안된다고 에러가 났다. import { useRouter } from 'next/router'; import Link from 'next/link'; import usePages from '../../services/pages'; import styles from './index.module.scss'; const SideMenuApp: React.FC = () => { const router = useRouter(); const pages = usePages(); const currentPage = pages.find(page => page.path === router.pathname); console.log(currentPage?.children).. 2022. 12. 28.
Link to, history를 사용하기 1) Link to 쓰기 Back to Home 2) history를 쓰기 const submitForm = e => { e.preventDefault(); const email = emailRef.current.value; const password = passwordRef.current.value; // DetailPage로 이동하는 코드를 작성하세요. history.push(`/detail?email=${email}&password=${password}`); }; 그러면은 url에 쿼리로 내가 입력한 값이 들어간다. https://ezpxu7uua99m6xckveo8fc4ymi4uyzib.runner-forwarder-a-02.elice.io/detail?email=dd&password=dddd R.. 2022. 12. 4.
메타테그란? 메타 테그는 해당 문서에 대한 정보인 메타데이터를 정의할 때 사용한다. 1. 키워드 2. 페이지에 대한 설명 3. 문서의 저자 4. 5초 뒤에 다른 페이지로 리다이렉트(redirect)시키는 예제 5. 모든 장치에서 웹 사이트가 잘 보이도록 뷰포트(viewport)를 설정하는 예제 6. 페이지의 타이틀. HTML meta tag 7. 모든 검색엔진을 허용하겠다 8. 오픈그래프 메타테그 오픈 그래프 태그는 사이트가 소셜 미디어로 공유될 때 우선적으로 활용되는 정보입니다. 메타 테그나 title테그는 head테그 안에 넣는다. 이외 참고할 사이트 : https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko 2022. 11. 15.
토큰이 있어야 하는 라우터의 경우 postman에서 테스트하는 방법 토큰이 있어야 하는 라우터의 경우 테스트하는 방법이 있나? 있다! 방법 : 여기 직접 추가할수도 있어 2022. 10. 31.
npm에 대한 개념, 특정버전 설치하기 NPM : Node Package Manage 1. package.json파일의 생성 방법 : npm init 프로젝트 관련 정보들이 저장되는 파일이다. npm을 사용하면 의존성을 쉽게 관리할 수 있다. 2. 의존성 추가, 내려받기 방법 : npm install 2.1 개발용 dependency로 내려받는 방법 : npm install [package이름] --save-dev 3. 특정버전 설치하는 방법 npm install [package-name] @ [version] 으로 설치한다 ~1.13.0 - 1.13.x 버전 설치 ^1.13.0 - 1.x.x버전 설치. 가장 왼쪽의 0이 아닌 버전을 고정한다 0.13.0 - 0.13.0버전만 설치한다 4. 패캐지를 전역패키지 디렉터리에 내려받는 방법 npm .. 2022. 10. 28.
dotenv 설치 및 사용하기 설치하는 방법 npm install dotenv --save .env파일을 만든다. .env파일 내용 DB_HOST = localhost; DB_USER = root; DB_PASS = thisispassword; main.js에서 require하는 방법 const dotenv = require('dotenv') dotenv.config(); console.log('DB_HOST : ', process.env.DB_HOST); console.log('DB_USER : ', process.env.DB_USER); console.log('DB_PASS : ', process.env.DB_PASS); 2022. 10. 27.
OSI 7계층의 Application Layer HTTP / HTTPS(암호화) SSH : 원격 머신에 접속하고 제어하는 프로토콜. 까만 컴퓨터 창에서 제어하는 것. FTP : 파일전송에 쓰임. WebSocket : 전이통신. 어디서 얘기해도 통신이되는 것. 실시간 대화 할 때 잘 사용이됨. 실시간으로 데이터가 왔다갔다함. DNS : 영어로 된 url을 숫자로 바꿔주는 프로토콜. SMTP & IMAP/ POP3 : 메일전송, 메일 서버 복사, 메일 서버 동기화. DHCP : 네트워크에 연결된 머신들에게 IP를 할당. MQTT : machine to machine 통신에 쓰임. 가벼워서 잘 쓰인다. 메시지큐에서 쓰인다. 2022. 10. 27.
타입스크립트 오류) error TS2584: Cannot find name 'console'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'. 해결방법 : npm install --dev @types/node 이후 다시 Run Code하니 정상적으로 console이 찍혔다!! 2022. 10. 24.
http모듈 개념 & 3000서버 만들어보기 노드는 내장서버가 있기때문에 서버프로그램이 따로 필요하지 않는데, http모듈이 바로 그 역할이다. http모듈 : http웹 서버를 생성하는 것과 관련된 모든 기능을 담당한다. 4가지 기능을 알아보자. 1. createServer() : server객체를 생성 2. writeHead() : 응답 header를 구성(어떤식으로 응답을 할것인지 정하는 역할) ex) resp.writeHead(200,{'content-type' : 'text/html'})의미 : 응답에 대한 헤드를 써줌. 200번일때 응답을 {'content-type' : 'text/html'}이걸로 할꺼야. 성공했을 때의 헤드는 200이야. 형태는 html이야. 그때 바디는 아래 html내용을 써서 응답할꺼야.라는 의미임. 3. end(.. 2022. 10. 22.
함수 내보내기, 가져오기 관련 함수 내보내기, 가져오기 관련 어떤 경우에 export default function으로 내보내고 import ~ from ‘./~’;로 가져오고 어떤 경우에 exports.함수명 , var http = require(“http”);로 가져오는 것일까? commonJS 방식 : (exports / require ) ESM 방식 : ( import from / export / export default ) 2022. 10. 19.
closure 클로저 자바스크립트에서 함수는 객체이다. 클로저는 자바스크립트가 일급객체의 성질을 갖는다는 것(함수를 변수처럼 다룰 수 있다는 것)을 이용해서 만들수 있는 공간임. 내부에 변수가 있을 때 자바스크립트는 그 변수를 클로저 공간에 저장을 한다음 리턴된 함수와 그 변수가 생명을 같이하도록 만든다. 함수를 생성해서 리턴하는 함수를 팩토리함수라고도 부른다. 팩토리 함수 내부에서 생성된 변수들이 있는데 함수가 끝나도 변수들이 살아있게 된다. 그 변수들이 어딨을까? 하는게 클로저의 의미임. 클로저의 예 1 function createCard(){ let title=""; let content=""; function changeTitle(text){ title = text; } function changeContent(tex.. 2022. 10. 18.
this, 기본적으로 전역컨텍스트에서 this는 window를 가리킨다. const name = "elice"; console.log(this); //window {...} 일반함수 안에서 name을 정의해놓고 this.name으로 접근하려고 한다면 불가능하다. this는 window를 가리키기 때문이다. function myFunc() { const name = "elice"; console.log(this); } myFunc(); // 일반 함수 호출시 window {...} 1. 객체의 메서드 호출 시 this값은 객체를 가리키게 된다. const person2 = { name: 'min', study : function() { console.log(`${this.name}이는 js를 공부하고 있습니다.`) .. 2022. 10. 18.
HTTP request, response, CSR, SSR, FETCH API 1. 의미 : Hypertext Transfer Protocol Web에서 서버와 클라이언트 간의 통신하는 방법을 정한 것. 클라이언트는 웹 브라우저 등 서버로 요청을 보내는 대상이다. 2. naver.com으로 요청이 보내지는 과정 요청은 먼저 가장 가까운 cdn서버로 요청이 되고 cdn서버는 네이버가 어디 위치에있는지 알아내서 아이피주소로 요청을 리다이렉트 하고 요청은 코어네트워크를 타고 쭉쭉 네이버 서버로 가서 네이버 서버에 도달을 한다. 그 서버도 게이트웨이 서버 프록시 서버 여러가지가 있고 이 모든것을 거친 후에야 네이버 비즈니스 서버로 도달한다. HTTP는 이런 존재들 사이의 통신 방법을 규정한 것이다. HTTP는 OSI 7계층이 속하는 통신방법중의 하나이다. 클라이언트와 server가 HTT.. 2022. 10. 11.
Map에 대하여 키와 값의 쌍으로 이루어진 컬렉션 객체 - Key - value값의 한쌍으로 이루어진 데이터 집합이다. const map = new Map([ ['cat', '나비'], ['dog', '바둑이'], ]); console.log(map); //Map(2) { 'cat' => '나비', 'dog' => '바둑이' } 값을 추가하기, 해당 값이 포함되어있는지 확인하기 const map = new Map([ ['cat', '나비'], ['dog', '바둑이'], ]); console.log(map); //Map(2) { 'cat' => '나비', 'dog' => '바둑이' } // 추가 map.set('rabbit', '토순이'); console.log(map); //Map(3) { 'cat' => '나비', .. 2022. 10. 7.
set에 대하여 set 1. 모든 값이 고유하다.(데이터가 중복될 수 없다) 2. 인덱스를 사용하지 않는다. 3. undefined와 NaN도 저장할 수 있다. 생성하는 방법 : new Set 예제 ) let set1 = new Set([1, 2, 2, 3]); console.log(set1); // Set(3) { 1, 2, 3 } 이미 값이 있는 경우 추가도 되지 않는다. let set1 = new Set([1, 2, 2, 3]); console.log(set1); // Set(3) { 1, 2, 3 } set1.add(1); console.log(set1); 없는 값인 경우 삭제되지 않는다. let set1 = new Set([1, 2, 2, 3]); console.log(set1); // Set(3) { 1, 2.. 2022. 10. 7.
널병합연산자 ?? 표기법 : ?? 오직 null과 undefiend값만 false한 값으로 인식한다. 기존에는 0, -0 이 false로 인식되었으나 ??에서는 true한 값으로 인식된다. // 널병합 연산자 console.log('=============='); let num = 0; console.log(num || '-1'); // -1 console.log(num ?? '-1'); // 0 console.log(num ?? '1'); //0 console.log(num ?? '2'); //0 console.log(null || '3'); // 3 console.log('' || '4'); // 4 console.log(null ?? '5'); //5 console.log('' ?? '6'); // '' 빈문자열이 .. 2022. 10. 7.
옵셔널체이닝 연산자 ?. 표기법 : ?. 객체를 가리키기를 기대는 변수가 null또는 undefined가 아닌지 확인하고 프로퍼티를 안전하게 참조할 때 유용. null또는 undefined만 false로 인식한다. 즉, 빈문자열을 true로 인식한다. 옵셔널 체이닝 도입 이전에는 논리곱(&&)을 사용한 단축 평가를 통해 변수가 null 또는 undefined인지 확인했음. 첫번째 예로, &&를 쓰는 경우 str = ''; lengthone = str && str.length; console.log(lengthone) ==> 결과는 빈칸이 나온다. // 옵셔널 체이닝 연산자 str = ''; length = str?.length; console.log(length); // 0 ==> 0이 나온다. 예전 방식과 현재 방식 let d.. 2022. 10. 7.
논리 연산자 단축평가 || 와 && || : 왼쪽부터 오른쪽으로 진행하면서 하나라도 참이면 return && : 왼쪽부터 오른쪽으로 진행하면서 하나라도 거짓이면 return "Cat" || "Dog" //"Cat" false || "Dog" //"Dog" "Cat" || false //"Cat" "Cat" && "Dog" //"Dog" false && "Dog" //false "Cat" && false //false 2022. 10. 7.
형변환 1. 문자형으로 변환 String(value) let string = true; console.log(typeof(string)) //boolean string = String(string) console.log(typeof string) //string 2. 숫자형으로 변환 2.1 / 나누기가 있는 경우 alert( "6" / "2" ); // 3, 문자열이 숫자형으로 자동변환된 후 연산이 수행됩니다. 2.2 Number(value) let str = "123"; alert(typeof str); // string let num = Number(str); // 문자열 "123"이 숫자 123으로 변환됩니다. alert(typeof num); // number 3. 불린형으로 변환(Boolean(valu.. 2022. 10. 7.
자바스크립트 기본 QUIZ 1.실행 환경에 독립적이라면? 코어자바스크립트 2. HTML테그 안에 자바스크립트를 사용하려면? 3. Javascript를 외부에서 가져오려면? 4. Javascript외부 태그 안에 자바스크립트 내용을 쓴다면? 에러가 난다. 6. 세미콜론을 생략해도 되는지? 가능 7. 자바스크립트의 여러줄 주석은? /**/ 8. 여러줄 주석을 중첩해서 쓴다면? /*...*/안에 또 다른 /*...*/이 있을 수 없습니다. 9. 자바스크립트를 엄격모드로 바꾸는 방법은? "use strict"를 맨앞에 쓴다. 10. 변수를 생성하는 방법은? let message; 11. 변수 안에 데이터를 저장하는 방법은? message = "hi" 12. 변수명에 $나 _를 사용한다면 특이점은? 없다. 문자와 같음. 13. 변.. 2022. 10. 7.
JSON데이터와 객체의 차이(javascript) *차이점 일반 객체 : key에 쌍따옴표가 안붙음 JSON 객체 : key에 쌍따옴표가 붙음 *바꾸기 일반객체를 JSON객체로 바꾸기 : JSON.stringify(객체) JSON 객체를 JavaScript 객체로 변환 : JSON.parse(JSON문자열) 예제) const cat = { name: '나비', //String타입 age: 4, //숫자타입 play: () => { console.log('낚시줄놀이'); //function타입 }, owner: { name: '박연미', age: 30 }, //객체타입 favorite: ['캣잎', '잠자기', '츄르'], //배열타입 }; // 객체 -> json파일(문자열)로 변환 const json = JSON.stringify(cat); conso.. 2022. 10. 7.
이터러블과 이터레이터(Iterable, Iterator protocol) 이터레이션 for-of loop나 spread 연산자를 쓸 수 있는 것을 이터레이션이라고 한다. 해당하는 것은 Array, String, Map, Set, NodeList에 해당한다. 이것들 안에 [Symbol.iterator]가 들어가 있어서 for-of loop나 spread 연산자를 쓸 수 있다. 1. 이터러블 이터러블 프로토콜 : 이터러블 프로토콜을 준수한 객체를 이터러블이라고 한다. for .. of문으로 순회할 수 있으며 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있다. 이터레이터 프로토콜 : 이터레이터 프로토콜은 준수한 객체를 이터레이터라고 한다. const isIterable = v => v !== null && typeof v[Symbol.iterator] === 'fu.. 2022. 10. 6.
Symbol,Map, 1. Symbol : 변경 불가능한 원시 타입의 값. - 다른 값과 중복되지 않는 유일무이한 값. => 이름 충돌 위험이 없는 프로퍼티 키 값을 만들기 위해 주로 사용한다. - 리터럴 표기법이 없다 - 심벌은 외부로 노출되지 않는다. - 무조건 Symbol() 를 호출해서 생성한다. const symbol = Symbol('jenny'); console.log(typeof symbol); //타입은 심볼 console.log(symbol); //Symbol객체인데 디스크립터는 제니야! 결과 symbol Symbol(jenny) 2. 안의 description이 같아도 다른 객체로 인식된다. const key1 = 'key'; const key2 = 'key'; const key3 = Symbol('key.. 2022. 10. 6.