전체 글
-
CSS) 네비게이션 한번에 열기css 2023. 12. 23. 14:47
element.style 속성과 getComputedStyle() 메소드의 차이** html, css로 네비게이션을 만들던 도중, 네비게이션이 한번에 동작하지않고 처음 동작할때는 2번을 클릭해야만 동작했다 이 문제를 해결하기위해서는 element.style와 getComputedStyle의 차이를 알아야했다 getComputedStyle() 메소드는 읽기전용* 인 반면, element.style 속성은 새로운 스타일 설정* 하는데에 사용한다 그래서 데이터의 속성을 읽어 확인할때 element.style로 확인을 할경우 문제가 발생했다 잘못된 방법) function menuBarEvent(){ if(nav.style.right == "-300px"){ // element.style 속성은 읽기용이아닌, 새..
-
express) 세션 secret옵션, dotenv 환경변수 이용하기framework/express 2023. 12. 18. 23:44
dotenv) 환경변수를 .env 파일에 저장하고 process.env로 로드하는 모듈이다 process.env는 환경변수를 불러오는 객체 .env 파일은 루트경로에 배치한다 dotenv를 쓰는이유) 포트번호와 session의 secret 비밀키는 외부에 노출되면 보안적으로 위험하다 클라이언트가 볼 수 없다고해도 github와 같은 오픈소스에 공개될 수 있다 그래서 별도의 .env 외부파일에 정보를 환경변수로 다룰 수 있게 하기 위해서 사용하였다. 그리고 .gitignore에 .env파일을 추가해서 git에 올라가지 않게 해야한다 .env파일) ㄴ 키=밸류 형식으로 나열 ㄴ.env에서는 문장끝에 ";"를 쓰지않는다 secretCode = "secret" port = 8000 .gitignore) # en..
-
자바스크립트) JS object와 JSON 차이점javascript 2023. 12. 18. 21:42
JS object와 JSON 차이점) 기본적으로 JS object와 JSON은 형태가 유사하다 **서버와 클라이언트가 데이터를 주고받을때는 JSON을 이용한다 JS object : 데이터 구조 JSON : 객체의 내용을 기술하기위한 텍스트 "파일". 그래서 .JSON이라는 확장자가 존재. const str=`{"data":[{"name":"yongseong","info":["student","27"]}]}`; const object = {data:[{name:'yongseong',info:['student','27']}]}; 차이점) JSON에서는 키값을 모두 큰따옴표""로 묶어줘야한다 JS object에서는 키값을 큰따옴표로 묶을 필요가 없다 JSON의 타입은 string JS object의 타입은 o..
-
[web] 쿼리스트링, 패스파라미터(시멘틱 URL)TIL 2023. 12. 13. 15:40
쿼리스트링) url 끝에 데이터 값을 전달. 쓰는이유 : 같은 path에 다른 데이터값을 줘서 페이지가 동적으로 작동할 수 있게, 상황에따라 다른 정보를 보여줄수 있게 하기 위함이다 사용방법) path뒤에 ?data1="값1"&data2="값2" 와 같은 방 식으로 전해준다 http://index.html/idx=9 밑줄친 부분이 쿼리스트링 api 에서 그 전달 받은 값을 받아서 쓰는법) http://index.html/article?articleIdx=10 를 전달받았다면) app.get("/article", (req, res) => { const articleIdx = req.query.articleIdx; // 변수에 10 할당 }) ㄴ쿼리스트링(articleIdx=10)을 프로퍼티로 갖는다. 그래..
-
javascript) 자바스크립트 고급문법 8가지javascript 2023. 12. 10. 00:34
1 .template Literals 2. default Parameter 3. spread 4. destructuring 5. list Helper 6. map 7. filter 8.reduce 1.template Literals ㄴ 백틱``과 ${} 를 이용하여 문자열안에 변수명과 함수명을 적을 수 있다 // template Literals const name = "stageus" console.log("내이름은" +name+ "입니다") // 기존방식 따옴표""" console.log(`내이름은 ${name} 입니다`) // 백틱 `` const power = (number) => number * number const num = 10 console.log(`${num}의 제곱은 ${power(nu..
-
javascript) 호이스팅, var, let, const, 람다식javascript 2023. 12. 9. 23:36
자바스크립트 버전 ES5의 문제들 1.중복 선언 허용 2. 호이스팅 문제 var num1 = 10 console.log(num1) var num2 = 20 console.log(num2) // 10,20출력 function func(){ console.log("첫번째 함수임") } func() function func(){ console.log("두번째 함수임") } func() // 두번째함수임 2번출력 호이스팅 ㄴjavascript에 있는 독특한 기능. ㄴ변수와 함수의 선언문 (var num1, function( ) { }) 를 파일의 상단으로 끌고올라와서 실행하는 기능 위 코드의 호이스팅 실행순서) var num1 var num2 function func(){ console.log("첫번째 함수임"..
-
javascript) null과 undefined와 빈문자열"" 체크하기javascript 2023. 11. 30. 15:38
null과 undefined와 빈문자열"" 체크하기 null은 "의도적으로" 값이 할당되지않은 상태 undefined는 값이 아직 할당 되지않은상태 null, undefined를 체크하기) ㄴnull과 undefined과 빈문자열""는 모두 false로 간주된다 (false그 자체는 아니다!)(" "(공백은) true로 간주) 그래서 null == false; //false null === false; //false undefined == false; //false undefined ===false; //false 위는 모두 false 반환이 되지만(false 자체가 아니니까),null과 undefined앞에 !!를 붙이면 boolean값으로 변환되므로 !!null == false; // true !!n..