에브리 저장소

최근 면접 스터디를 진행하며 받은 질문 중, 클로저를 사용할 때 주의해야 할 점에 대해 질문을 받았으나 선뜻 대답하지 못했습니다. 😢 이에 메모리 누수를 주의해야 한다.라는 피드백을 받고 알아보니 클로저인 내부 함수가 참조하는 외부 함수의 객체들을 더 이상 사용하지 않아도 가비지 콜렉터가 수집하지 못한다는 내용이 있었습니다. 키워드만 정리해놓고 잊고 있었는데, 다른 분께서 자바스크립트의 가비지 콜렉터 동작 방식에 대해 내용이 있으면 좋을 것 같다는 피드백을 주셨고, 이를 계기로 정리해서 공유합니다. 틀린 내용 지적 등의 피드백은 언제나 감사히 받겠습니다. 참고 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management https:/..

반응형 웹 설계 - 미디어 쿼리(Media Queries) 미디어 쿼리란 무엇인가? 미디어 쿼리는 CSS3에서 소개된 CSS 기술입니다. 미디어 쿼리는 특정 조건이 true인 경우에만 CSS 속성 블록을 적용하도록 @media 규칙을 사용합니다. 아래 코드는 브라우저 창의 width가 600px 이하인 경우, body의 배경색을 lightblue로 적용하겠다는 의미를 갖습니다. @media only screen and (max-width: 600px) { body { background-color: lightblue; } } Breakpoint 추가하기 이 전 글에서 Row와 Column을 가진 웹 페이지를 작성했습니다. 브라우저 크기에 따라 화면을 보여주지만, 아주 작은 화면에서는 레이아웃이 보기 좋지..

반응형 웹 설계 - 그리드 뷰(Grid-View) 그리드 뷰 ? 많은 웹 페이지가 그리드 뷰 기반으로 만들어져 있습니다. 그리드 뷰란 column(열)으로 나누어져 있는 웹 페이지 뷰를 의미합니다. 웹 페이지를 설계할 때, 그리드 뷰를 사용하면 HTML 요소를 배치하는 데 매우 도움이 됩니다. 반응형 그리드 뷰는 보통 12개의 column을 가지고 있고, 100%의 width를 가지며, 브라우저 창의 크기가 재조정됨에 따라, 축소되거나 확장됩니다. 반응형 그리드 뷰 만들기 첫 번째로, padding 및 border 속성이 각 요소의 전체 width, height에 포함되도록 모든 HTML 요소의 box-sizing 속성을 border-box로 설정해줍니다. const AppContainer = style..

최근 저의 관심사는 반응형 웹 익히기였습니다. 이는 8월 15일에 코드스쿼드에서 진행한 해커톤에서 시작되었는데, 반응형 웹으로 UI를 구성해볼까? 하는 생각은 했지만 반응형 웹에 필요한 미디어 쿼리 등을 React, styled-components와 함께 사용해본 적이 없었고 이를 팀원들과 진행하는 해커톤에서 하나하나 공부하며 적용하기엔 속도가 매우 더뎌질 것 같았습니다. 언젠간 반응형을 공부해야지, 하고 미뤄왔던 것이 부메랑으로 돌아오자 공부를 시작할 마음이 생겨 나름대로 공부해보았고, 이를 정리해서 남깁니다. 참고 CSS Responsive - W3Schools 반응형 웹 디자인 기본 사항 - Google developers How to create responsive UI with styled-co..

heroku를 사용해 github에 올린 node app을 아주 쉽게 배포하는 방법에 대해 알아보겠습니다. 저는 github-pages, heroku, netlify를 사용해 봤는데 이 세 가지 중 node app 배포는 heroku만 지원해서 heroku로 배포하는 방법에 대해 작성해 보았습니다. heroku에 로그인하면 메인 화면에 배포한 앱 목록을 확인할 수 있습니다. 우측 상단 new 버튼을 누르면 나오는 Create new app을 누릅니다. App name을 설정해주고 지역을 설정해줍니다. 지역은 United States, Europe 두 개뿐입니다. Create app을 눌러줍니다. 다음 화면에서 배포하는 방법을 선택할 수 있습니다. 이미 github에 올라간 프로젝트를 배포할 것이기 때문에..

리액트 스터디에 참석하며 간단하게 타자연습 앱을 개발했다. https://fed-gren.github.io/Typing-app/ 아직 완전하게 끝낸 건 아니지만 1차 목표까지 기능 구현을 한 시점에서 후기를 작성해본다. 내가 만든 타자연습의 (나름의) 특징이라면 사용자가 직접 연습할 텍스트를 입력한다는 점인데, 평소 다른 타자연습 사이트에서 내가 연습하고자 하는 글을 연습할 수 없는 점이 약간 아쉬웠기 때문에 이 같은 기능을 넣었다. 리액트 공부를 하며 중간중간 무언가를 만들어보고 싶었고 JavaScript30에서 실습한 내용 또한 활용하고 싶었는데 짧은 기간이지만 내가 원하는 걸 만들어보며 복습도 하고 재밌었다. 아직 문제점 및 구현이 안된 기능은 많다. (한글 미지원, 타자 속도 미측정, 탭 불가 등..

[React] create-react-app github pages를 통해 배포하는 방법 오늘 포스팅 내용은 Create-React-App으로 개발한 앱을 github pages를 활용해 배포하는 방법입니다. 프로젝트 개발을 완료한 상태라는 가정 하에 터미널에서 React앱 root폴더로 이동해 yarn build를 입력합니다. 프로젝트 폴더 내부에 build 폴더가 생성됩니다. 완료 후 메시지를 보면 package.json에 아래와 같이 작성하라고 되어있습니다. "homepage" : "http://myname.github.io/myapp", 여기서 myname은 github 닉네임을 작성하면 되고, myapp에는 저장소명을 입력하시면 됩니다.저는 테스트를 위해 아래와 같이 github 저장소를 생성했..

[JavaScript] 정규표현식 - 문자열에 한글 있는지 검사하기 타자연습 앱 구현을 연습하다가 현재 방식에서 한글을 지원하지 못해서 문자열에 한글이 있는 경우를 검사해야했습니다. 정규표현식을 사용하면 간단하므로 정규표현식을 사용하여 문자열 내부에 한글이 있는지 검사하는 방법을 알아보았습니다. RegExp Object자바스크립트의 RegExp라는 생성자는 특정 패턴에 맞는 텍스트를 위한 표현식을 만들어냅니다.생성자를 사용해도 되지만, 리터럴을 사용해도 무방합니다. 1234const re1 = new RegExp('\\w+');const re2 = /\w+/; //re1과 re2는 같습니다.cs test() 메서드RegExp 객체에 test() 내장 메서드가 있습니다. 사용법은 아래와 같습니다. 123c..

[JavaScript] ES6 Arrow function(화살표 함수)에 대해 알아보자!! 안녕하세요. 이번 포스팅은 ES6에서 새롭게 등장한 함수 작성 방식인 Arrow function. 화살표 함수에 대해 알아봅니다. Arrow function (화살표 함수) ES6에서 => 연산자를 사용하여 함수를 생성하는 Arrow function(화살표 함수)가 생겼습니다. Arrow function은 보다 간결하게 구문을 작성할 수 있는 익명 함수입니다. 사용법 //ES6 이전. setTimeout(function() { console.log("1"); }, 1000); //ES6 이후. setTimeout(() => { console.log("2"); }, 2000); 콜백함수의 단점 중 하나로 인자로 들어..

[JavaScript] ES6 템플릿 리터럴에 대해 알아보자!! 안녕하세요. 이번 포스팅은 ES6의 템플릿 리터럴과 활용법에 대해 알아봅니다. Template literals템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 템플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공합니다. ES2015 사양명세서에선 template strings라고 불렸습니다. 템플릿 리터럴은 런타임 시점에 일반 자바스크립트 문자열로 처리/변환됩니다.프론트엔드에서는 HTML을 데이터와 결합해서 DOM을 다시 그려야 하는 일이 빈번하기 때문에, 템플릿을 좀 더 쉽게 편집하고 작성해야 할 필요가 있어서, 이러한 기능이 추가되었습니다.(자바스크립트 자체적으로 지원하기..