전체 글
-
1. arrow function이 가지는 차이점 3가지프로그래밍 언어/JAVASCRIPT 2021. 7. 19. 01:31
오늘 공부를 통해 알게 된 사실 하나. arrow function은 빠른 코드의 작성과 업무 효율을 위해 많이 사용된다고 알고 있었으나 일반적안 function과 차이점이 있었다. 1. arrow function에는 arguments가 존재하지 않는다. (arguments is not defined) arrow function는 컴파일링 시 arguments를 바인딩하지 않는다. arguments가 필요한 경우 가장 근접한 일반 부모 함수를 통해 arguments에 접근한다. 2. arrow function이 나타내는 this 값은 다르다. 이벤트 내에서 일반적으로 this의 값은 해당 이벤트를 실행하는 element를 나타낸다. 이와 다르게 arrow function에서 this를 사용하면 최상단 값인..
-
6. Challenges Review 1-5프로그래밍 언어/JAVASCRIPT 2021. 5. 21. 02:25
자바스크립트 실전편. 배우고 싶은 건 대부분 배웠으니 써먹어봐야 한다. 개인적으로 실제 구현하는 코드 내에서 이루어지는 잦은 관습이나 팁들 역시 굉장히 중요하다고 생각한다. 개발공부에 있어 가장 빠른 지름길은 든든한 선배라고 하지만... 아직 만나지 못한 관계로 일단 홀로 부딪혀 보았다. 1. form-validator 가입 화면 만들기. 각 박스 부분에 해당 내용을 맞게 작성해야 한다. 조건에 부합하지 않으면 빨간줄이 나타나며, 바르게 작성한 경우 박스가 초록색으로 변한다. 이미 이전 노마드 코더에서 카카오톡 클론 코딩을 통해 경험해보기도 한지라, 어려움 없이 무난하게 만들었다. 비밀번호, 이메일 등 다양한 조건을 넣어보려 했으나, 금방 저녁시간이 다가와 그냥 패스. 만들고 난 후 함수를 통해 한번에 ..
-
5. 날씨 확인 웹 구현프로그래밍 언어/JAVASCRIPT 2021. 5. 3. 00:52
제작 기간 : 4월 26일 월요일 - 5월 2일 (약 일주일, 총 10시간 정도) 의도 : async await를 이용한 api 데이터 활용해보기 요약 - 싱글 페이지 제작 - animista / sass - openWeatherAPI 활용 - 원하는 지역의 이름을 입력하면 해당 지역의 날씨 상태와 온도, 최저/최고 온도, 풍속, 습도를 알려줌 제작과정 가장 중요하게 생각한 점은 "가독성"이다 클라이언트가 원하는 정보를 바라 볼 때, 한 눈에 알기 쉽게 표현하고 싶었다. 가져 올 수 있는 날씨 데이터는 많았지만 방대한 정보는 사람의 눈을 피로하게 만든다. 날씨 데이터를 볼 때 많이 보는 최저/최고/체감 온도 와 풍속, 습도만을 표기하도록 제작하였고 가장 중요한 현재 상태 데이터는 svg 화 하여 쉽게 이..
-
4. library 구현 (Understanding JQUERY)프로그래밍 언어/JAVASCRIPT 2021. 4. 23. 09:07
jQuery를 바탕으로 새로운 라이브러리를 구현하자. 해당 코드는 라이브러리의 이해 및 jQuery의 사용법을 알고자 작성하는 것이므로 실제 라이브러리로써의 기능은 없다. 해당 라이브러리 구성방식은 다음과 같다. 1 - IFFE를 사용하여 즉시 호출 (단, 최상단에서 바로 접근이 가능하도록 window에 생성). 2 - 생성자 함수와 인스턴스 데이터를 작성한 후 각 프로토타입에 빈 객체를 생성. 3 - 빈 객체에는 만들고자 하는 method 작성. 4 - 함수식 혹은 작성한 함수식들이 해당 객체에 연결될 수 있도록 this로 리턴. 5 - window에 생성자 함수 데이터 대입.
-
3. prototype을 사용하는 이유프로그래밍 언어/JAVASCRIPT 2021. 4. 20. 12:32
자세한 작성 전 간딘히 요약을 하자면... __proto__는 instance들의 link적 개념이고 prototype은 constructor function을 직접적으로 설정하는 장치이다. 그렇다면 먼저 우리가 prototype을 사용해야 하는 이유는 무엇일까? 코드를 풀이하면 Person 함수를 만든 후 해당 constructor function에 getFullName 함수를 설정하였다. 하지만 굳이 prototype을 사용하지 않아도 아래의 코드와 같이 처음부터 존재하도록 만들면 편하지 않을까? 답은 NO다. JAVASCRIPT에서 모든 객체는 메모리를 차지한다. 위의 경우처럼 1개만 있다면 모를까 실전에서는 100개 1000개를 써야하는 경우도 있다. 만일 contructor function에 1..
-
2. let 과 var프로그래밍 언어/JAVASCRIPT 2021. 4. 15. 05:05
오늘 주제는 Javascript로 먹고 살기 위한 사람들이라면 한번 쯤은 다들 보았을 것이다. 해당 두 코드는 이벤트 루프안에서 i의 선언방식 "let" 이냐 "var"냐의 차이이다. 보시다시피 내부 callback의 console.log(i)의 값이 바뀌었다. 100% 이해한 것은 아니기에 어부렁더부렁 내가 이해한 흐름대로 설명을 가미해보자면... 선언은 총 3단계를 거치는데 1.변수선언 2.초기화 3.할당 단계로 이루어진다 let과 const의 경우 해당 순서가 차례대로 일어나지만 var는 1,2가 동시에 이루어진다. 즉 var 쓴 시점부터 이미 값이 있는 상태이다. 이벤트 루프에 의해 선언된 i의 값이 1씩 커지게 되고 i가 3까지 되었을때 false 상태가 이루어지며 이벤트 루프가 종료되고 내부 ..