본문 바로가기
728x90
반응형

분류 전체보기81

[JS] 정규표현식 (2) 최근에 코딩테스트를 보았는데, 이메일 유효성 검사를 구현해야했었다. 그런데 문제는... 정규표현식을 안써본지 너무 오래되서 도대체 기억이 나지 않는다는 것이었다 ㅠ_ㅠ.... 시간은 흐르지, 기억은 안나지, 게다가 시험 시작하고 15분 이후부터 왜 그렇게 화장실은 가고 싶은지 ㅠ_ㅠ... 총체적 난국에 그냥 코드로 길게 풀어서 구현하고 얼른 submit한 뒤 화장실로 달려갔었다. (코딩테스트 과정을 녹화해야 했는데 나의 시급함이 정말 말그대로 15분부터 영상에 그대로 나왔다...ㅋㅋㅋ....ㅋㅋㅜㅜ...🥲) 그래서 이번 기회에, 다음에 비슷한 문제를 또 겪게 되더라도 화장실 급함의 정도가 얼마나 위대한지에 영향받지 않고 정규표현식을 예쁘게 작성할 수 있게 되기 위해 다시 한번 정규 표현식을 되돌아보려고 .. 2021. 10. 2.
[JS] 제너레이터란(Generator)?! 최근 한 인터뷰에서 자바스크립트의 yield를 알고 있는지 물어보셨다. 그런데 너무 당황스럽게도 6개월이 넘는 자바스크립트 공부 기간 동안 yield라는 키워드는 단 한번도 들어본적이 없었다!!!! (왜냐!! 왜 때문이냐!!?? 나란 개발자는나쁜 개발자더냐??) 🥲 그래서 인터뷰가 끝나자마자 yield를 검색해보았더니... yield 키워드는 제너레이터 함수를 멈추거나 다시 시작하게 하는데 사용되는 키워드라고 한다. 이 한 줄 설명을 보고 내가 yield 키워드를 못들어봤던 이유를 클리어하게 알게 되었다. 왜냐면 난 제너레이터 함수가 뭔지도 모르기 때문이다 🥲. (멈추거나 다시 시작하게 하는 대상이 무엇인지도 모르는데 그 키워드를 어찌 알았겠어...) 그래서 제너레이터 함수가 무엇인지부터 이해하고 그 이.. 2021. 10. 2.
HTTP란? 본 포스팅은 HTTP에 대해 좀 더 자세히 공부하고자 MDN 문서를 기반으로 공부한 내용을 정리한 글입니다. HTTP란? HTTP는 HTML 문서와 같은 리소스를 가져올 수 있게 해주는 프로토콜이다. 웹에서 발생하는 데이터 교환 행위의 근간이라고 할 수 있다. HTTP는 클라이언트-서버 프로토콜이며, 이는 즉 데이터를 받는 측 - 주로 웹 브라우저 - 가 요청을 시작하는 측이라는 것을 뜻한다. 클라이언트로부터 전송된 메시지는 요청(request)라고 부르고, 서버가 그에 대한 답변으로 보낸 메시지는 응답(response)라고 부른다. 클라이언트는 주로 웹 브라우저이지만, 구글 검색 크롤러 같은 로봇일 수도 있다. HTTP는 1990년대 초반에 디자인되었고, 그 이후로 꾸준히 발전해왔다. HTTP는 TCP.. 2021. 10. 1.
[JS] 스코프(Scope)란? 스코프(Scope)란? 스코프란 변수 이름이나 함수 이름과 같은 식별자(identifier)의 수명을 결정하고 확인할 수 있는 범위를 뜻한다. 변수나 함수와 같은 모든 식별자들은 어느 위치에서 선언되었느냐에 따라 다른 코드가 자신을 참조할 수 있는지 여부가 결정되며, 이를 스코프라고 하는 것이다. 즉, 스코프는 변수나 함수가 유효할 수 있는 범위를 뜻하는데, 그렇기 때문에 스코프는 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙으로 작용한다. 이와 같이 특정 시점에서 참조할 변수를 결정하는 것을 식별자 결정(identifier resolution)이라고 한다. 식별자(Intentifier) 어떤 값을 구별해서 식별할 수 있는 고유한 이름 (출처). 스코프의 종류 스코프는 전역(global)과 지역(.. 2021. 9. 30.
[JS] 웹팩(Webpack)과 바벨(Babel): 바닐라 자바스크립트에 처음부터 적용시켜보기 최근 바닐라 자바스크립트로 과제를 만들 기회가 있었다. 요즘 계속 React를 많이 사용했었기 때문에 JSX의 편리함에 익숙해져있던 편이었지만 다행히도 바닐라 자바스크립트를 사용해서 코딩하는 것 자체는 별 어려움이 없었다. 다만, 계속 create-react-app으로 만들어진 프로젝트들을 했었기 때문에 한번도 Webpack이나 Babel을 직접 인스톨해본 적이 없다는 것을 새삼스레 깨달았다. 그래서 이번 기회에, 아주 옛날 HTML, CSS, 그리고 자바스크립트를 혼자 공부했던 시절 진행했던 Front-End Mentor의 챌린지 과제 중 하나에다가 시험삼아 Webpack과 Babel을 인스톨해보고 설정을 직접하는 연습을 해보려고 한다. 오늘의 실험 대상은 무려 작년(!?)에 만들었던, 정말 내 Git.. 2021. 9. 9.
[프로젝트] React component: 마운트(mount)될 때와 언마운트(unmount)될 때 각기 다른 애니메이션 적용하기 (feat. onanimationend 프로퍼티) 멋진 웹사이트들을 보면 메뉴 버튼을 클릭했을 때 촤라락~🌼하면서 나왔다가 촤라락~🌼하면서 사라지는 경우를 자주 볼 수 있다. 내 프로젝트에도 메뉴가 토글될 때 그러한 애니메이션을 적용하고 싶어서, 가장 처음 시도했던 건 아래와 같이 slide-in 애니메이션을 만들어서 토글되는 메뉴에 적용시키는 것이었다. // Styled-Components의 keyframes이다. // 토글되는 메뉴의 width 길이 만큼 오른쪽에 숨겨놨다가 나오도록 했다 const slideIn = keyframes` from { right: -500px; } to { right: 0; } `; 그런데, 이렇게 단순히 slideIn 애니메이션만을 추가하면, 한가지 문제가 발생한다. 바로, 메뉴를 토글해서 메뉴 컴포넌트가 마운트될 때.. 2021. 9. 1.
[프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (2) (feat. getBoundingClientRect()) 본 포스팅은 전편 [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1)에 이어서 작성한 글입니다! 전편: 2021.08.25 - [Learn to Code] - [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1) [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1) 요즘 파이널 프로젝트로 만든 사각사각을 전면 개편하고 있다. 처음 개발 당시 UI와 기능 구현에 급급해 큰 신경을 써주지 못했던 최적화라던가 좀 더 세밀한 기능 구현이라던가와 같은 부분들 seo-tory.tistory.com 지난번 편에선 Drag & Drop API를 사용해서 ⬅️요쪽에서 ➡️요쪽으로 (??) 옮기는 코드를 어떻게 작성하면 되는지 그 단계를 살펴보았다. 이번엔.. 2021. 8. 26.
[프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1) 요즘 파이널 프로젝트로 만든 사각사각을 전면 개편하고 있다. 처음 개발 당시 UI와 기능 구현에 급급해 큰 신경을 써주지 못했던 최적화라던가 좀 더 세밀한 기능 구현이라던가와 같은 부분들을 업데이트하고 있다. Hoxy 프로젝트가 뭐였는지 궁금하시다면... ☺️ >>> 2021.07.21 - [Learn to Code] - [프로젝트] 실시간 화상채팅앱을 개발했어요! (feat. Socket.IO & WebRTC) [프로젝트] 실시간 화상채팅앱을 개발했어요! (feat. Socket.IO & WebRTC) 🎞 YouTube 발표 영상 GitHub: https://github.com/codestates/sagaksagak-client Wiki: https://github.com/codestates/sagak.. 2021. 8. 25.
웹 성능 개선을 위한 브라우저 작동 원리 이해 웹 성능 개선에 관해 공부를 하다가, 성능 개선 방법을 떠올리기 위해선 우선적으로 브라우저의 작동 원리에 대한 이해가 선행되어야 한다는 것을 깨닫게 되었다. 그러다 마주치게 된 것이 MDN의 "Populating the page: how browsers work"인데, 내용이 너무 좋아서 모든 페이지의 내용을 워드바이워드 읽어가며 공부했다. 본 포스팅은 이 글을 메인 레퍼런스로 공부하며 기록한 내용을 각색한 것이며, 글을 읽고 브라우저 작동 순서로부터 얻을 수 있는 성능 개선에 관한 나름의 인사이트를 정리한 글이다. 대기시간 && 싱글 스레드 브라우저 대기시간(latency)와 싱글 스레드(Single-threaded) 브라우저는 웹 성능을 이해하는데 있어서 가장 중요한 두 가지 요소이다. 클라이언트에서.. 2021. 8. 24.
[JS] 즉시실행함수(IIFE)란? 자바스크립트에서 함수는 가장 중요한 핵심 개념이다. 이러한 함수에도 여러 형태가 있는데, 이번에 다시 "초심으로 돌아가 개념들을 살펴보자!!"는 마음가짐으로 찾아보다가 즉시 실행 함수라는 것을 처음으로 알게 되었다. 역시 보면 볼수록 모르는게 계속 툭툭 튀어나오니 공부할 맛이 나는 것 같다. 각설하고, 이렇게 요상하게 생긴 아이를 처음 보았기 때문에 호기심이 생겼다. 아래는 즉시 실행 함수에 대해 찾아본 내용을 정리한 것이다. 그래서, 도대체 즉시 실행 함수는 뭘까?! Immediately (즉시) Invoked (실행되는) Function Expression (함수 표현) 말 그대로, 즉시 실행 함수는 정의됨과 동시에 즉시 호출되는 함수를 뜻한다. 영어로 IIFE라고 표기하며, 발음은 "iffy"로 불.. 2021. 8. 19.
[JS] event loop이란? 자바스크립트의 큰 특징 중 하나는, 바로 싱글 스레드(single-threaded) 방식으로 동작한다는 것이다. 그런데 실제로 브라우저가 동작하는 방식을 보면, 마치 여러 작업이 동시에 진행되는 것 같은 느낌을 받을 때가 있다. 싱글 스래드이기 때문에 한번에 하나의 작업이 진행되어야 할 것 같은데, 어떻게 여러개가 동시에 진행될 수 있을까? 이렇듯 자바스크립트가 마치 동시에 여러가지 일을 하는 것처럼 보이게 해주는데엔, 브라우저 및 런타임 환경에 내장되어 있는 기능 중 하나인 이벤트 루프(event loop)가 큰 기여를 한다. 이벤트 루프(Event loop)란 브라우저/런타임 환경(e.g. Node.js)에 내장되어 있는 기능 중 하나로, (1) 콜 스택(call stack)에 현재 실행 중인 실행 .. 2021. 8. 18.
Intersection Observer API: 스크롤링에 따라 엘리먼트가 짠!하고 나타나게 해주는 애니메이션을 만들고 싶을 때 채용 과제를 만들면서 틈틈이 파이널 프로젝트 개선 작업을 진행하고 있다. 사각사각의 랜딩 페이지를 수정하면서 커스텀 훅을 하나 만들었는데, 이 훅이 하는 일이 바로 마치 스크롤링을 할 때마다 무언가(?!)에 맞추어 페이지 요소들이 짠!하고 나타나는 것처럼 보이는 애니메이션을 추가하는 것이다. 백문이 불여일견! 애니메이션 추가 Before와 After를 살펴보자. 단순한 parallax만 적용되어 있다. Parallax는 그대로, 거기에 스크롤링에 따른 슬라이드인 애니메이션을 더했다 완전 동일한 디자인이지만, 화면에 표시되는 엘리먼트들에 스크롤링에 따른 slide-in 애니메이션을 추가했더니 조금 더 역동적인 모습이 연출되는 것 같다. 물론 메인 랜딩 디자인은 수정할 예정이지만, 그럼에도 불구하고 나의 커.. 2021. 8. 18.
728x90
반응형

티스토리툴바