JavaScript48 A Line Translate : 한줄 번역기를 만들었어요. (크롬 확장 프로그램 개발 과정, Chrome extensions) #1 학기가 시작하고 과제와 자료 조사 및 필기를 하며 영어로 된 자료들을 볼 때가 많은데, 한 두 단어를 몰라서 구글 번역기를 켜고 작은 화면에서 옮겨적는 과정이 상당히 번거로웠습니다. 물론 모니터 하나를 더 쓰면 될 일이지만 들고 다니기엔 여분의 모니터를 휴대하고 다니기에는 부담스러워서... 영단어나 문장을 바로 번역해서 보게 해주는 서비스가 있다면 어떨까 생각해봤습니다. 영어를 보고 이게 무슨 뜻일까? 라고 생각했을때 바로 번역이 된다면 좋겠지만 그런 하이테크까지는 모르고... 그 과정을 최대한 줄일 수만 있다면 그걸로 충분할 것 같았습니다. 어떤 방법으로 번역을 할 수 있을까 고민해보니, 드래그를 했을때 자동으로 컨텍스트가 번역된다면 꽤 멋진 기능이 될 것 같았습니다. 그런데 이런 기능이 작동하려면 프.. 2020. 11. 17. 동기와 비동기 (Synchronous & Asynchronous) 대학교 1학년 때의 일입니다. 가끔씩 졸업하신 선배님들이 학교에 방문하시는 일이 몇 번 있었는데, 오실때마다 동아리 부원들에게 밥과 간식거리를 사주시곤 하셨었습니다. 같이 이야기도 하고 함께 스터디를 진행할 사람을 찾기도 하시고 공부중 모르는 내용이 있으면 알려주시기도 하셨는데 그 날은 발표 자료를 꺼내시며 다른 쪽 스터디를 위해 준비했었던 자료지만 학부생들도 들으면 도움이 될 내용이니 한 번 구경이라도 해보길 권하셨습니다. 한창 전공 내용에 대해 호기심이 있었던터라 감사한 마음으로 수강신청(?)을 했고, 그 자리에서 비어있던 강의실 하나를 빌려 즉석에서 발표회가 열리게 되었습니다. 그 때 발표하셨던 내용이 바로 비동기에 대한 간단한 소개였는데, 사실 작동만 하는 프로그램 하나마저 제대로 짤 줄 몰랐던 .. 2020. 9. 18. 자바스크립트의 이벤트 버블링 (JS eventBubbling) 자바스크립트에 대해서 아무것도 모르고 코딩을 할때 (물론 지금도 전혀 모르지만), 한 요소에 이벤트를 주기만 하면 원인 모를 오작동이 있었습니다. 분명히 특정한 요소 하나에 클릭 이벤트를 주었는데 그 요소를 누르면 요소를 감싸고 있던 상위 요소의 이벤트까지 같이 발생해버리는 현상이었습니다. 그땐 보면서도 이게 왜 이러나... 싶었지만 이제서야 그 이유를 알게되어서 정리해봅니다. 먼저 상황을 되짚어 보기 위해 문제가 되었던 구조를 간단히 재현해보겠습니다. 이벤트 작동 test라는 id를 가진 div 아래에 btn 이라는 id를 가진 버튼이 있는 구조입니다. 요소를 클릭하게 되면 그 요소의 id값을 콘솔로 출력해주어 어떤 이벤트가 실행되었는지 확인할 수 있습니다. 버튼을 클릭해보니 btn의 이벤트가 먼저 실.. 2020. 9. 17. 호이스팅 (Hoisting) 알아보기 얼마 전 프론트엔드 개발자분들이 모여 계신 커뮤니티에 호이스팅(Hoisting)에 관한 이야기가 나온 적이 있었습니다. 선언과 할당에 관련된 용어인것은 알았지만, 정확한 의미에 대해서는 몰랐기 때문에 이번 기회에 찾아보게 되었습니다. 이번 포스팅에서는 검색을 통해 알게 된 내용을 정리하고, 간단하게나마 확인해보겠습니다. 호이스팅이란? 호이스팅의 정의는 자바스크립트에서 함수나 변수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상을 말합니다. 다만 실제로 끌어 올려지는 것은 아니고, 마치 그런 것처럼 보이는 현상인데요. 이게 어떤 의미인지 코드를 통해서 확인해보겠습니다. var fruit = "apple"; function change() { console.log("fruit is : " + fruit);.. 2020. 9. 9. 싱글 쓰레드 Javascript의 비동기적 동작 이 글은 JSConf EU 2014에서 발표 된 Philip Roberts의 What the heck is the event loop anyway? 의 내용을 듣고 정리한 글입니다. 동기와 비동기는 프로그래밍을 하는 사람이라면 한 번쯤은 들어봤을법한 단어들입니다. 간단히 말하면 동기는 태스크(task)를 순차적으로 실행하는 것 이고, 비동기는 병렬적으로 처리하는 것 입니다. 이러한 동기의 가장 큰 문제점이 바로 하나의 태스크가 완료되기 전까진 다른 일을 수행할 수 없고, 끝날때까지 기다려야 한다는 점입니다. 우리가 사용하는 모든 프로그램이 동기적인 동작밖에 취할 수 없다면 큰 문제가 발생하겠죠. 이는 웹에서도 마찬가지입니다. 우리는 웹에서 수 많은 동작들을 실행합니다. 이곳저곳에서 데이터들을 받아오고, .. 2020. 9. 7. 기본적인 jQuery 내용 정리. 이 글은 본 강의 (http://osam.kr/learn/lecture/14812/%EC%BA%A0%ED%94%84%EC%97%B0%EA%B3%84%EA%B3%BC%EC%A0%95-web-%EB%B6%84%EC%95%BC) 를 참고하여 작성하였습니다. jQuery: The Write Less, Do More, JavaScript Library. 1) jQuery 란? jQuery는 자바스크립트 DOM을 더 간단하게 다루도록 도와주는 라이브러리의 일종이다. 자바스크립트 DOM(Document Object Model)이란 노드 추가, 삭제, 이동, 스타일 변경, 속성 변경, 이벤트 처리 등의 기능을 하는 코어 라이브러리인데, 쉽게 말해 문서 내의 모든 요소들을 정의하고, 각각의 요소에 접근하는 방법을 제공한.. 2019. 10. 14. 이전 1 ··· 5 6 7 8 다음
