분류 전체보기
-
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 환경변수 이용하기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("첫번째 함수임"..