티스토리

mingule

검색하기

블로그 홈

mingule

mingule.tistory.com/m

mingule 님의 블로그입니다.

구독자: 41

방명록 방문하기

주요 글 목록

컴퓨터 밑바닥의 비밀 - 1장 책을 읽으면서 간단하게 정리해본다.중간중간 내 생각과 느낀점이 들어가 있을 수 있고, 잘못된 내용을 적어뒀을 수도 있다. ^^;; 혹시 보이면 댓글 부탁드립니다,, 호홋,, 내가 작성한 코드를 컴퓨터가 어떻게 인식하지?CPU (Central Processing Unit)책에 따르면 인간은 스위치 on/off 를 조합해 boolean logic을 표현할 수 있다는 것을 발견하고 이를 기반으로 CPU를 만들었다고 한다. 흠.. 뭔가 엄청난 비약이 있어보여서 뭐지? 했는데,인간이 예전에는 봉화(불 → on/off)로 서로 통신했고, 그게 모스부호가 되고, 문자가 되어 이를 통해 CPU를 만들어냈다.. 라는 설명을 듣고는 박박대박 이해가 됐다. 이렇게 만들어진 CPU는 이 두가지 작업만 할 수 있는 똑똑한 바.. 공감수 10 댓글수 0 2024. 6. 24.
숨돌리기 상반기에 틈날때마다 2022년 회고를 쬐끔씩 작성하고 있었는데 오랜만에 로그인하니 다 날아갔다. 조금씩 작성해뒀던 기술 글들도 다 날아갔다. 임시저장이 0이라니!!!!!! 말도안돼 다시 돌려내~~~!!!!!! 다시 써야지 뭐 어쩌겄수. 엉엉. 상반기에 너무 정신이 없어서 블로그에 1도 신경을 못썼다. 사실 1도 못쓴건 아니고 그래도 계속 기웃거리긴 했다. 맨날 써야지 하고 들어와서 괜히 한번 임시저장도 해두고 가고 댓글도 확인하고 가고 했었는데 으앙. 벌써 6월이라니 시간 참 빠르다. 나이먹으면 시간이 점점 빨라진다는게 이런건가! 악! 올초에 뜻맞는 친구들과 작년에 함께 열심히 만들던 프로덕트를 내려놓게 됐다. 할말은 많지만 여기에 쓰긴 어려울 것 같다. 처음에는 동료로 시작해서 마지막에는 거짓으로 점.. 공감수 5 댓글수 1 2023. 6. 10.
React에서 Modal을 만드는 다양한 방법(feat. Promise) 서비스를 만들다보면 다양한 상황에서 모달(Modal/Dialog)을 활용하게 된다. 단순한 UI이지만, 구현 방법은 꽤나 다양하다. 나는 원래 provider를 이용해 open/close만을 담당하는 모달을 많이 만들고 사용해왔다. (사실 대부분의 경우, 이런 단순한 모달이 가장 많이 사용되는 것 같다. 아마두?!) 그런데 최근, 모달이 열릴 때 작업을 잠시 stop했다가 모달이 닫히면 이후의 작업을 이어서 진행해야 하는 flow가 생겼다. (우리 서비스의 경우는 아니지만 모달에서 Form을 사용해서 API를 통해 검증하고, 검증이 안되면 모달이 닫히지 않도록 해야하는 등의 작업이 예시가 될 수 있을 것 같다!) 물론 다른 방법으로도 이런 flow를 구현할 수 있기는 했지만, 어차피 모달이 열리면 사용.. 공감수 19 댓글수 10 2022. 8. 16.
[ReactJS] Google Translate 서비스 사용 불가 오류 해결하기 이번에 실리콘밸리에서 우리 서비스를 이야기 할 수 있는 자리가 생겼따. 너무나도 갑작스럽게 생긴 자리여서 영어 버전을 개발해서 대응하기는 어려웠고, 따라서 (구리긴하지만) Chrome에 내재된 Google Translate를 사용해서 서비스를 소개하기로 했다. (흑흑) 그런데 잘 동작할 것만 같던 이 Google Translate가 제대로 동작하지 않았다. 🥲 이상하게 저 번역 버튼을 누르고 나면 몇 초 뒤 혹은 다른 페이지로 이동했을 때 DOM Exception이 뜨면서 페이지가 마비됐다. 콘솔에 찍힌 오류는 아래와 같았다. (2번은 다른 사람들이 요 오류도 많이 난다길래 ^^.. 가져와봤읍니다.. 저는 1번 오류만 났어요..) // 1. removeChild() 문제 DOMException: Fa.. 공감수 4 댓글수 2 2022. 7. 25.
AWS Lambda@edge 사용해서 ".html" 지워버리기 (feat. NextJS) NextJS를 사용해서 배포하면, 뒤에 www.test-url.com/home.html (가칭) 이런 형태로 뒤에 html이 붙는 걸 확인할 수 있다. 그냥 React.js를 활용할 때와는 달리, NextJS는 SSR을 활용하기 때문에, 이런 현상이 있는 것 같다. 이런 형태의 URL은 도저히 용납할 수 없는(?) 형태였기 때문에, 최우선순위를 두고 찾아봤다. 어떻게 검색해야 할 지도 약간 가늠이 안가서, 초반엔 좀 고생을 했다. dynamic routes 하면 /post/[id] 형태로 나오는 친구들을 라우팅해주는 이야기만 나오고.. 흑흑.. 하지만 해결했다. 기분니가 좋다. 후후 해결한 방법에 대해 간략하게 정리해보겠다. 아래 해결방법은 Next.js + S3 + Cloudfront로 이미 프로젝트가.. 공감수 4 댓글수 4 2022. 4. 30.
Monaco Editor를 활용해서 React 기반 프로젝트에 코드 에디터 적용하기! 최근 개발하면서 웹상에 SQL 쿼리를 작성하는 에디터를 넣어야하는 일이 생겼다! 빠르게 만들어야하는 MVP개발이었기때문에, 에디터를 직접 만들기보다는 이미 잘 만들어져있는 에디터들을 골라 그 중 하나를 사용하기로 했다.(뭔가 아쉽.. 호호) 그래서 아래의 내용을 포함한 에디터를 찾아 비교해보고, 가장 나은 에디터가 아니라 내 입맛에 맞추어 쉽고 빠르게 개발할 수 있는 에디터를 찾아 사용하기로 했다! 하핬핬! 1. 라이선스가 무료 2. 키워드 하이라이터 기능 3. 들여쓰기 지원 4. 라인넘버 지원 5. SQL 언어 지원 (+ 자동완성 기능 등) 다양한 에디터들을 찾을 수 있었는데, 아무래도 많은 사람들이 사용하고 있어 활발하게 커뮤니티가 유지되면서, 쉽고 빠르게 개발할 수 있는 라이브러리들에 우선순위를 두.. 공감수 8 댓글수 8 2022. 3. 18.
React에서 상태관리하기 (feat. Context API, Redux, React Query) 최근에 프론트엔드 상태관리에 대해 같이 일하는 인턴분들과 잠깐 이야기 할 일이 생겼다! 요즘 정말 많은 상태관리 도구들이 있는데, 이 중에서 무얼 어떻게 선택해야할 지 잘 모르겠다는 말에 정말 공감하기도 했고, 또 막연하게 알고있던 내용들이 말하면서 제대로 정리가 되지 않는다는 느낌을 받아서 한번 조금 정리해보면 좋을 것 같다는 생각에 글을 쓰게 되었다. 그리고 요즘 본딩 개발을 하면서 빠른 개발을 위해 내가 가장 잘 사용하는 Context API를 택해서 개발을 하고 있는데, 추후에 Recoil이나 Redux 등의 상태관리 툴을 도입해보려고 한다.(언제가 될지는 모름^^...) 뭐.. 그래도 미리 한 번 정리해 둘 겸 해서 오랜만에 글 남겨본당. 호홋 맨날 글써야지 써야지 하고 끄적끄적 제목만 적어두고.. 공감수 16 댓글수 3 2022. 2. 27.
.env를 사용하기 위한 webpack 설정 내가 까먹지 않기 위한 webpack 파일 설정 CRA 없이 Webpack 설정하다보면 process.env가 마음대로 안불러와지는데, dotenv, webpack에서 제공하는 defineplugin 사용하면 쉽게 해결된다. $ npm install -D dotenv // webpack.config.ts import dotenv from 'dotenv' // 안되면 const dotenv = require('dotenv') ... plugins: [ ... new DefinePlugin({ 'process.env': JSON.stringify(dotenv.config().parsed), }), ], ... 공감수 0 댓글수 0 2022. 1. 14.
React 앱에 Next.js 끼얹기 + EC2 배포하기 들어가기 전에.. 이번 접근성 미션을 하면서 React로 구현해놓은 페이지를 Next.js를 이용해 Migrate하고, EC2로 배포하라는 미션을 받았다! 본격적으로 들어가기 전에, Next.js와 우리가 배포할 AWS EC2가 도데체 뭔지 한 번 짚고 넘어가보자. ✔️ Next.js가 뭘까? The React Framework for Production Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No .. 공감수 13 댓글수 2 2021. 10. 6.
정적인 페이지를 AWS S3 + Cloudfront로 배포하기 들어가기 전에.. ✔️ 정적인 웹 페이지(Static Web Page)가 뭘까? 언제 접속해도 같은 응답을 보내주는 페이지라고 생각하면 쉽다. 말 그대로 정적! 움직이지 않는! 클라이언트가 요청을 보내면, 웹 서버에 업로드된 파일이 추가적인 처리과정 없이 그대로 전달(응답)되는 페이지를 정적인 웹 페이지라고 한다. 예를 들면, 개인이나 회사의 소개 페이지 정도가 있겠다. 앞으로 진행될 내용은 이런 정적인 웹 페이지를 배포할 때 사용할 수 있다. 우리는 제목에 나와있듯이 AWS S3을 통해 배포할 것이다. 사실 정적인 웹 페이지를 배포하는 방법은 굉장히 다양하다. Github 유저라면 한번 쯤 시도해봤을 Github pages, 혁신적인 Netlify와 Vercel, 지금 소개할 AWS S3 .. 등등 ... 공감수 8 댓글수 0 2021. 10. 5.
사이드 프로젝트 톺아보기[1] - 나만의 만다라트 만들기 들어가기 오랜만에 예전에 했던 사이드 프로젝트들을 살펴보기로 했다. 리액트로 만든 나의 첫 사이드 프로젝트! 만다라트부터 이야기를 해보려고 한다. tmi가 정말 많을 예정이다. 그냥 tmi 그자체 . 케케케 대학시절 친구의 추천으로 알게 된 만다라트 기법! 하나의 큰 목표를 가지고 그를 실행하기 위한 목표를 9x9 Table에 차근차근 세워나가는 기법이다. 일본의 야구선수 오타니 쇼헤이가 작성했다고 해 한 때 인기를 끌었다고 한다. 나도 한 때 열심히 만들긴 했었지 ^^;;; 당시에 반짝 재밌게 목표를 세웠었지만 세월이 지남에 따라 기억 속에서 잊혀져 있었는데, 우아한 테크코스를 하면서 한 코치분께서 만다라트를 소개해주시면서 다시 생각이 났다. 추억,,,,, (포코 감사해요 푸힝) 웹 개발자라는 새로운 .. 공감수 1 댓글수 0 2021. 9. 18.
React에서 Browser Notification (푸시 알림) 구현하기 들어가기 Babble 프로젝트에서 WebSocket을 활용해 채팅 기능을 구현한 바 있다. 그런데, 유저 입장에서는 내가 들어간 방에 채팅이 새로 올라온지, 올라오지 않은지 확인할 길이 없었다. 무조건 다시 채팅이 있는 Tab으로 들어가 확인하는 수밖에 없었는데.. 그래서 이런 불편함을 해결하기 위해 브라우저 푸시 알림 기능을 활용하기로 했다. 그런데 사실 나는 이런 브라우저 푸시 알림 기능을 귀찮아한다. 쓸데없는 알림인 경우가 대다수고, 너무 알림이 자주 오면 브라우저를 이용하는 데 방해되기 때문이다. 게다가 우리가 구현하는 기능은 채팅 알림인만큼 어떤 누군가가 채팅을 많이 치게되면 알림이 끊임없이 올 것이고, 이는 사용자 경험을 매우 떨어뜨릴 것이 분명했다. 팀원의 대다수가 이런 알림에 대해 부정적인.. 공감수 13 댓글수 1 2021. 9. 10.
프론트엔드 성능 최적화 ❐ 들어가기 이번 우아한 테크코스 4단계 첫 번째 미션은 주어진 웹사이트의 성능을 최적화하는 것이다. 사실 이번 미션을 처음 받았을 때 되게 감이 잡히지 않았다. 😞따흐흑! 뭔가 눈에 보이는 것을 구현하라는 미션이 아니어서 어떻게 해야지! 라는 생각이 바로 떠오르지 않아서였을까? 성능 최적화라니, 데모데이 준비하면서 휘몰아치듯 알아보긴 했지만 아직 잘.. 모르는 영역같다. 헤헿 불행(?) 중 다행인건, 성능 최적화 작업에 대해 구체적으로 요구사항을 주셔서 이 내용을 발판삼아 성능 최적화를 진행할 수 있다는 것이다. 이 사이트가 유저에게 제공하려는 인사이트를 바탕으로 요구사항을 하나씩 만족해나가려고 한다. 이번 미션을 통해 성능 최적화에 대한 감을 익히고, 나중에 성능 최적화 작업이 필요할 때 쉽게 접근할.. 공감수 11 댓글수 2 2021. 9. 2.
React에서 setInterval 현명하게 사용하기(feat. useInterval) 들어가기 Babble의 방 목록 페이지에 들어가면 유저가 생성한 방들이 쭉 나열되어 있는 것을 볼 수 있다. (안타깝게도 유저가 없으면 방도 없다ㅜㅜ) 그리고 이 방들은 5초마다 서버에 요청을 보내 새로이 갱신되는데, 어떤 유저가 새로 방을 만들면 다른 유저들에게도 그 방이 생겼다는 것을 보여줘야 하기 때문이다. 현재는 유저가 많이 없기도 하고 또 실시간성을 보여주기 위해 이 방법을 사용하고는 있지만, 서버에 많은 요청이 가는 방법이기 때문에 추후에 새로고침 버튼 등을 이용해 개선하려고 생각중이다. 처음에는 개인적으로 '그래도 유저의 편리함이 우선시 되어야하지 않을까?' 라고 잠깐 생각하기도 했지만 유저가 많아지면 부하가 정말 심해질 것 같아서 이렇게 서버에 짧은 간격으로 요청을 계속 보내는 것은 좋지 .. 공감수 25 댓글수 7 2021. 8. 26.
React에서의 setState React에서 Functional Component를 사용하면 useState hook을 정~말 많이 사용하게 된다. 그 중, 프로젝트를 하면서 setState를 사용하면서 들었던 두 가지 의문점과, 이를 해결해나가는 과정 그리고 그에 관한 생각들을 기술해보려고 한다. 🌱 첫 번째 의문 - setState는 어떻게 동작할까? 사실 지금까지 이미 만들어져있는 hook들을 사용하면서, 이 hook들의 세부 동작에 대해서는 크게 고민하지 않고 사용했다. 몇 번 궁금해서 찾아보기는 했으나, 항상 적당한 수준의 이해만 하고 넘어가기를 반복해서 잘 이해했다고 보기는 어려웠다. setState는 비동기로 동작한다. 왜냐하면 React에서 state가 변경될 때마다 매번 바로바로 DOM을 리렌더링하게되면 퍼포먼스 효율.. 공감수 5 댓글수 4 2021. 8. 26.
npm에 babble만의 라이브러리 올리기 Babble 페이지는 초기 유저들의 접근성을 높이기 위해 로그인 없이도 Babble의 모든 기능을 사용할 수 있게 만들어 놓았다. 하지만 Babble의 메인 기능인 채팅을 서비스하려면, 이 유저가 어떤 유저인지 식별할 수 있는 최소한의 장치를 만들어놓아야 했다. 적어도 지금 내가 대화하는 상대방이 '익명의 유저 1'인지, '익명의 유저2'인지 나는 다른 사람들에게 어떤 유저로 보여지는지 알아야 대화를 이어나갈 수 있으니까 말이다. 먼저 우리가 생각해 낸 아이디어는 아래와 같다. 1. 사용자가 채팅 방에 들어가기 전에 직접 닉네임을 설정하고 들어가기 (닉네임 설정을 하지 않으면 채팅방 입장이 불가) 2. 익명#{랜덤한 8자리 숫자} 3. 직접 랜덤 한글 닉네임 생성기 만들기 ... 만약 이렇게 생성한 닉네.. 공감수 1 댓글수 0 2021. 8. 26.
브라우저 렌더링 과정을 알아보자! 들어가기 Babble 페이지를 제작하면서, 프론트엔드 팀은 페이지 곳곳에 여러가지 애니메이션을 넣어 유저에게 재미를 주고자 했다. 우리 사이트에서 제공하는 페이지나 기능이 여타의 사이트들에 비해 많은 편이 아니었기에, 제공하는 디테일에 신경쓰고 싶었다. 어떻게 보면 정신없어 보이기도 하지만, 유저가 페이지를 단순히 이용한다기보다는 페이지와 티키타카 한다는 느낌을 받을 수 있으면 좋겠다는 생각이었다. 트위치와 같은 게임 관련 사이트들에서도 둘러보다보면 유저에게 재미를 주는 애니메이션을 곳곳에서 발견할 수 있었다. 그렇게 여러 사이트들을 둘러보다보니, 궁금한 점이 생겼다. 트위치만 해도 영상을 메인으로 하는 사이트이기 때문에 일단 사이트의 로딩에 대한 최적화가 필요할텐데, 어떻게 애니메이션과 자동재생 영상들.. 공감수 2 댓글수 0 2021. 8. 26.
React에서의 querySelector, 잘 쓰고 있는 걸까?(feat. Ref) 들어가기 Vanilla JS를 사용하면서, DOM을 조작하기 위해 정말 많은 DOM Selector들을 쓰곤 했다(querySelector, getElementById, getElementByClassName 등). 하지만 React를 사용하게 되면서 querySelector를 쓰는 일은 거의 사라졌다. React에서 제공하는 Virtual DOM을 사용하게되면서 굳이 Real DOM에 직접 접근할 상황이 필요하지 않았기 때문이다. 하지만 이런 상황이 아예 오지 않는 것은 아니다. 리액트를 사용하는 프로젝트에서도 Real DOM을 직접 선택해야하는 상황이 종종 발생하곤 한다. input에 focus를 주거나, 특정 DOM의 크기, 스크롤 위치 등을 설정해야 할 때 등이 있다. React에서는 Real D.. 공감수 19 댓글수 9 2021. 8. 26.
Frontend를 위한, Socket과 WebSocket 들어가기 Web Socket.. 많이 들어봤지만, 들을 때마다 친구들의 곡소리가 끊이지 않던 친구였다. 그래서인지 괜히 '웹소켓'이라는 말을 들으면 지레 겁부터 먹었었다. 한 번 공부해보고 싶은 주제였지만, 지금껏 딱히 사용할 기회가 없었기도 해서(변명변명).. 웹소켓은 점점 더 멀어져갔다. 그런데! 이번에 레벨3 팀 프로젝트 중, 피터가 제안한 '태그 기반의 게임 팀 매칭 서비스'에서 채팅을 메인으로 다룬다고 했다. 서비스 자체도 재미있을 것 같았고, 웹소켓에 대한 알 수 없는 도전정신이 나를 지배해 이 팀에 지원하게 되었다. 지원한 결과, 감사하게도 뽑기 신께서 도움을 주셔서 Babble 팀에 합류할 수 있게 되었다. 후헹헹ㅎㅎ 이제 Babble 프론트엔드 팀이 채팅을 구현하면서 WebSocket에 .. 공감수 18 댓글수 6 2021. 8. 26.
Input을 구현하는 다양한 방법(Input, Textarea, ContentEditable) (프로젝트 앞광고) https://mandalart.ddongule.com/ 이번에 만다라트라는 작은 프로젝트를 사브작 사브작 만들면서 사용자 입력을 받는 Input에 대한 고민을 하게 되었다. 내가 원래 만들고자 한 내용은 아래와 같은 모양이었다. 1. 정사각형 모양 (contentEditable, Textarea, Input) 2. 글씨가 vertically, horizontally centered (contentEditable, Input) / Textarea도 가능하긴 한 것 같은데 아직 답을 찾지 못했다ㅠ 3. multi line이 가능 (contentEditable, Textarea) 처음에는 단순히 Input으로 구현했지만, 내가 원하는 multi line을 만드려면 textarea로 바꾸어.. 공감수 11 댓글수 2 2021. 5. 10.
Javascript This This란 무엇일까!? 1. This가 나온 이유 객체는 State를 나타내는 property와 behavior를 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다. 그니까 현재 나의 '상태'와 그 '상태'를 바꿔줄 수 있는 '행동'을 함께 가지고 있다고 이해하면 된다. 동작, 즉 behavior를 나타내는 메서드는 자신이 속한 객체의 Status, 즉 property를 참조하고 변경해줄 수 있어야 한다. '행동'이 '상태'를 변경할 수 있어야 한다는 거다! 보통 객체 리터럴 방식으로 생성한 객체의 경우, 내부 메서드에서 자신이 속한 객체를 가리키는 변수를 재귀적으로 사용할 수 있다. 아래와 같이 circle을 circle 내부에서 사용할 수 있다는 것이다. const circle = {.. 공감수 2 댓글수 1 2021. 4. 27.
Create React App(CRA) 없이 React 시작하기 보통 처음 React App을 시작하려고 하면, Create React App(CRA)을 많이 사용한다. 귀찮은 설정들 없이도 CRA를 사용하면 React에만 집중해 개발할 수 있기 때문이다. 하지만 CRA 없이도 React를 사용해 Application을 충분히 잘 만들 수 있다. 약간의 노력이 더 들어가면 ^^.. 되니깐.. 어차피 사용할 꺼 내부가 어떻게 돌아가고 있는지 한번 확인하고싶을 때 이렇게 만들어 보는 것도 좋은 것 같다. 그리고 CRA는 우리가 사용하지 않는 모듈들도 많이 담고 있기 때문에, 앱 자체가 무거워진다는 단점이 있다. 그래서 Snowpack 같은 가벼운 빌드 도구가 나오기도 했지만.. 어쨌든! 우리는 이런 도구들 없이 밑바닥부터 React를 시작해보자! 서론은 여기까지! 아래부.. 공감수 2 댓글수 7 2021. 4. 16.
Javascript 콜백 함수(Callback Function) [ 용어 정리 ] 동기(Synchronous) - real-time communication where each party receives messages instantly. - 요청과 그 응답이 즉시 이루어지는 것 - 뭔가 헷갈리는 말인 것 같은데, 어떤 A(요청) - A(응답) - B(요청) - B(응답) - C(요청) - C(응답) 이렇게 요청과 응답이 일렬로 이루어지고 이루어짐과 동시에 즉시 다음 요청이 실행되고 .. 이렇게 이해하면 조금 덜 헷갈리는 것 같다. 비동기(Asynchronous) - two or more objects or events not existing or happening at the same time. - 2개 이상의 요청과 그 응답이 같은 시간에 이루어질 수 있는 것 -.. 공감수 2 댓글수 1 2021. 4. 12.
CSS Animation - Rotate(빙글빙글 돌기) 한 자리에서 infinite하게 도는 animation을 만들고 싶어서 찾아봤다. 애니메이션은 아래와 같이 사용할 수 있는데, 보통 두번째나 세번째처럼 많이 사용하는 것 같다. 일단 keyframes에 대해 알아보자면, 어떤 모양에서 어떤 모양으로, 혹은 어디에서 어디로 이동할 지에 대해 정해줄 수 있는 메소드(?)다. 나는 360도 도는 동작을 원해서 아래와 같이 적어주었다. from-to 말고도 0% - 100% 이렇게 작성할 수 있다. @keyframes rotate { from { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360.. 공감수 4 댓글수 0 2021. 4. 6.
Throttle, Debounce Event Handler가 많은 연산을 수행할 때, 제약을 걸어 제어할 수 있는 수준으로 Event를 발생시킬 수 있다. DOM API 중, onmousemove, onmouseover, onscroll 등 혹은 input event의 change, keyup 등을 사용할 때에 자칫하면 정말 많은 이벤트가 호출이 될 수 있다. 이런 이벤트들을 많이 사용하다보면 웹 사이트의 성능이 떨어질 수밖에 없다. 그렇기 때문에 우리는 Throttle과 Debounce를 사용한다. Throttle은 언제 쓸까? When we want to limit the amount a function is invoked. 로또라면, 공이 매 5초마다 나와야 할 때, 술집에 가서 술을 마시는데 45분마다 1잔씩 시켜야 하는 룰이 있.. 공감수 3 댓글수 1 2021. 4. 1.
[GIT] 자주쓰는 GIT 명령어 정리 내가 자주 쓰는 GIT 명령어들을 소소하게 정리해놓는 공간! 누적해서 적어놓으려고 한다. 후후 Commit 순서 변경, 합치기 등 commit의 순서가 잘못되었거나, 잘못된 커밋을 했을 때, 수작업으로 변경할 수 있다. git rebase -i HEAD~개수 rebase를 잘못했을 때 stop할 수 있다. git rebase --abort rebase가 잘 되고 있다면 continue 해준다. git rebase --continue cherry-pick 다른 브랜치에 있는 커밋을 선택적으로 내 브랜치에 적용시킬 때 사용하는 명령어 git cherry-pick 처럼 사용한다. cherry-pick하려는 commit과 내 branch 사이에 conflict가 났을 때 -continue 나 -abort 를 사.. 공감수 1 댓글수 2 2021. 3. 24.
Javascript 네임스페이스 패턴(Namespace Pattern) 네임 스페이스 패턴이란? "전역을 피하는 코딩 기법!" 어플리케이션이나 라이브러리를 위해 전역 유효 범위에 많은 변수, 함수, 객체 등으로 어지럽히지 않도록 하기 위해 전역 객체를 하나만 만들고, 모든 기능을 이 객체에 추가하는 패턴을 네임스페이스 패턴이라고 한다. 스크립트가 실행되는 환경을 항상 일정하게 만들어 관리하기 쉽게 만드는 일이다. 단순히 기능을 한데 묶기 위해 사용하는 객체를 네임스페이스라고 한다. // 생성자 함수 2개 function a() {} function b() {} // 변수 1개 var variable = 0; // 객체 1개 var module_object = {}; 이렇게 엄청 많은 함수와 변수등을 전역으로 만들면 안티패턴이 된다. 그렇기 때문에 아래와 같이 바꿔주는 것이 .. 공감수 2 댓글수 0 2021. 3. 10.
Javascript 모듈(Module) 모듈이란? 개발하는 웹의 크기가 커지면 언젠가 파일을 여러개로 분리해야하는데, 이때 분리된 파일 각각을 "Module"이라고 부른다. 모듈에 export, import를 적용하면 다른 모듈을 불러와 함수를 호출할 수 있게 해준다. // hi.js export function sayHi(user) { alert(`hello, ${user}!`) } // main.js import { sayHi } from "./hi.js" alert(sayHi('John')) //alert가 뜸 이렇게 모듈을 사용하려면, HTML에서 Script를 불러올 때에 type="module"와 일반 스크립트의 다른 점 항상 지연 실행된다. 모듈 스크립트는 HTML 문서가 완전히 준비될 때까지 대기 상태에 있다가 HTML이 다 만.. 공감수 1 댓글수 0 2021. 3. 10.
Javascript IIFE(Immediately Invoked Function Expression) 함수 선언식과 표현식 (맛보기) 즉시 실행 함수 표현에 대해 알아보려면 먼저 함수 선언식과 표현식에 대해 알아야한다. 아래와 같이 쓰는 것을 함수 선언식이라고 한다. 함수 선언식은 호이스팅에 영향을 받는다. function 함수이름() { ...statements } 아래와 같이 표현한 것을 함수 표현식이라고 한다. 함수 표현식은 호이스팅에 영향을 받지 않는다. var 함수이름 = function() { ...statements } IIFE(Immediately Invoked Function Expression) : 즉시 실행 함수 표현 iffy는 말 그대로 정의되자마자 즉시 실행되는 함수를 말한다. 이러한 즉시 실행 함수는 global Scope 를 오염시키지 않기 위해 사용한다. 다양한 라이브러리들도.. 공감수 0 댓글수 0 2021. 3. 10.
Javascript 호출 스택(Call Stack) 호출 스택(Call Stack)이란, 함수의 호출을 기록하는 자료구조이다. 말 그대로 어떤 함수를 호출하는지 스택(Stack)에 쌓아두고, 가장 위에 놓여진 함수를 처리하는 것이다. 스택(Stack)은 한쪽 끝에서만 자료를 넣고 뺄 수 있는 Last In First Out (LIFO) 형식의 자료구조인데, 그냥 쉽게 하나의 입구만 있는 상자를 생각하면 된다. 상자에 물건을 1, 2, 3, 4.. 순서대로 넣으면 상자의 가장 상위에는 4가 있어서 만약 상자 안에 있는 물건을 빼고 싶으면 4, 3, 2, 1 의 순서로 빼야한다. Stack은 이렇게 가장 최근에 추가한 내용을 가장 먼저 뺄 수 있는 형식의 자료구조이다. 만약 A함수, B함수, C함수 순서대로 호출이 된다면 C함수, B함수, A함수 순서대로 실.. 공감수 0 댓글수 0 2021. 3. 4.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.