하려는 거 마우스 이벤트를 통해 드래그하여 특정 엘레멘트의 사이즈를 조정해 볼 거다. 필요한 거 먼저, 마우스는 아래의 세가지 동작을 한다는 걸 이해하자 마우스를 누른다 (mousedown) 마우스를 움직인다 (mousemove) 마우스에서 손을 뗀다 (mouseup) 작업할 거 내가 마우스를 눌렀다는 사실을 상태로 기억하고 있자. 그리고 누른 그 지점...

다시 알고리즘

고민의 시작 데이터를 보내고 + 뒤로가기 설정 중에 특정 데이터를 쿼리로 보내고 + firebase로 메시지를 보내는 이벤트가 있었다. 원래는 뒤로가기 버튼에 이 이벤트 핸들러를 넣어서 뒤로 가기가 한참 뒤에야 뒤로 가졌다. 그 부분은 해결을 했지만, Swipe로 뒤로 가기를 매우 급하게(?) 할 경우 사용자가 저장한 설정이 제대로 서버로 전달을 주지 못하...

Tailwind? Tailwind는 CSS 프레임워크 중 하나입니다. Atomic CSS 방법론과 함께 Tailwind CSS가 많은 주목을 받고 있습니다. > Atomic CSS란, class 지정과 같은 legacy한 방식이 아닌 inline styling 또는 기능적인 방법론입니다. Legacy한 Styling 방식은 HTML 파일과 CSS 파일을 ...

중요하다 React 생명주기! React를 공부하면서 생명주기가 중요하다는 내용은 모두 안다. 생명주기 메서드 9개가 어떤 단계에서 쓰이고 있는지 정리되어 있는 블로그를 많이 보았다. 대강 이렇다. 왜 중요한거지? React는 컴포넌트로 UI가 구분된다. 각 컴포넌트는 보여지고, 업데이트되고, 없어지는 단계를 거치는데 마치 생명주기를 보는 것 같다. Re...

정의 🙄 > 함수와 함수가 선언된 어휘적 환경의 조합이다(MDN) 그래..그렇구나..그런거구나.. 1. 어휘적 환경 (Lexical Environment) 코드로 보자. 첫번째 어휘적 환경이다. (전역 Lexical Env) > 1. 변수 one 이 선언되었다. (초기화 전이라 사용 못함, 초기화 이후 사용 가능) > 2. 함수 addOne 이 선...

변수 |var|let| |---|---| |같은 이름으로 두 번 선언 가능|같은 이름으로 두 번 선언 불가| 호이스팅이란? 스코프 내부 어디서든 변수 선언이 최상위에서 선언된 것처럼 행동하는 것 1. var는 선언하기 전에 사용할 수 있다. 위 코드는 아래처럼 동작한다. var로 선언한 변수는 선언하기 전에도 사용할 수 있다. 호이스팅 되기 때문이...

Project Gitbook 우리가 어떤 API를 사용할 것인지 정리하는 플랫폼이다. 뿐만 아니라, 블로그 용도로도 쓰일 수 있다고 한다. 이번 프로젝트는 화장실 리뷰 서비스인 만큼, 기본적인 CRUD API를 작성했다. ESLINT, Prittier 설정 협업 과정에서 서로 다른 코드 스타일링의 충돌을 줄여주는 설정이 필요했다. 또한 효율적인 코드 작성...

Project Final Project가 시작되었다. First Project가 극찬을 받았다. 팀 멤버 모두가 고생했다. 뭐하지? 공공 데이터 API를 활용하고 싶었다. 화장실 리뷰 서비스를 제안했다. 팀원 모두 너무 좋다했다. 찾아보니 서울시에서 제공하는 공공 데이터 API가 있었다. 카카오 지도 API를 활용하여 호갱노노 비스무레한 서비스를 만들어 ...

Typescript는 왜 공부해야 할까? Superset of Javascript 동적 언어인 Javascript는 Runtime에서 타입을 결정하지만, 정적 언어인 Typescript는 Complie 과정에서 타입을 결정합니다. 즉, Javascript의 경우 에러를 user가 발견하는 확율이 높고, Typescript는 개발 환경에서 에러를 발견할 ...

Devengers의 탄생 36주간 교육 세션을 무사히 마치고 꿈에 그렸던 프로젝트를 시작하게 되었다. 과연 내가 3번의 HA를 무사히 통과할 수 있을까 고민하며 열심히 공부해온 결과라 생각이 든다. 팀 선정 기간을 거쳐 나를 포함한 4명의 멤버가 한 팀이 되었다.

가비지 컬렉션 더 이상 사용하지 않는 메모리를 자동으로 삭제 (자바, C#, 자바스크립트 등에서 쓰인다) C++, C에는 가비지 컬렉터가 내장되어있지 않다. 대표적인 가비지 컬렉션 종류 트레이싱: 객채에 in-use flag를 마크하고 가비지 컬렉션 사이클마다 마크되지 않은 객체를 삭제 레퍼런스 카운팅: 변수가 참조될 때 마다 카운트가 올라가고, 참조하고...

인코딩과 유니코드 유니코드란? 전 세계 다양한 문자와 기호를 컴퓨터에서 일관되게 표기하기 위한 산업 표준이다. 문자나 기호를 컴퓨터에 보내려면 인코딩(부조화)하여 보내고, 해독할 때는 디코딩하여 처리한다. 인코딩과 디코딩의 기준을 charset이라고 부른다. charset의 국제 표준이 유니코드이다. ASCII (American Standard Code f...

프로세스 실행 파일, 애플리케이션을 실행하는 상태를 프로세스라고 한다. 운영체제가 여러 프로세스를 함께 진행하기 때문에 멀티 태스킹이 가능하게 되었다. 프로세스는 각각 독립된 메모리 영역(Code, Data, Stack, Heap의 구조)을 할당받는다. 스레드는 프로세스 내에서 각각 Stack만 따로 할당받고 Code, Data, Heap 영역은 공유한다....

- 문제: 정수를 요소로 갖는 배열을 입력받아 이진 힙(binary heap)*을 리턴해야 합니다. - 참고: > * 이진 힙(binary heap)은 노드의 값이 특정한 순서를 가지고 있는 완전 이진 트리(Complete Binary Tree)입니다. 완전 이진 트

Github를 활용하여 OAuth 인증 1) Github > Settings > Developer Settings에서 Client Id와 Client secret key를 생성한다. Authorization callback URL은 나의 웹 앱 URL을 적으면 된다.

Client App.js 1) App 컴포넌트의 isLogin 상태에 따라 Mypage 혹은 Login 컴포넌트를 렌더링합니다. 적절한 props를 Mypage/Login 컴포넌트에 전달합니다. 2) Login 컴포넌트의 loginRequestHandler메소드를 사용하여 상위 컴포넌트인 App 컴포넌트의 state를 적절히 변경시킵니다. Login.js...

- 문제: 정수를 요소로 갖는 배열을 입력받아 다음의 조건을 만족하는 LSCS*를 리턴해야 합니다. LSCS: 주어진 배열의 연속된 부분 배열*의 합을 구한다고 할 때, 이 중 가장 큰 값(Largest Sum of Contiguous Subarray) 연속된 부분 배열들: 배열 [1,2,3]의 연속 부분 배열은 [1], [1, 2], [1, 2, 3], ...

ORM이란 무엇인가? Object Relational Mapping의 약자이다. Model을 기술하는 도구이다. 개발 환경에서 데이터베이스에 접근할 수 있도록 하는 중간자 역할이라고 생각하자. Sequelize ORM 비동기 기반의 Node.js ORM이다. 실제로 async, await 비동기가 기본으로 쓰인다. 나는 이번 Sprint를 통해서...

SQL Structured Query Language: 구조화된 쿼리 언어 대표적인 관계형 데이터베이스(RDBMS), MySQL로 Schema를 설계하고, SQL을 사용하여 데이터를 persistently하게 저장하는 방법을 학습하자 3 Tire Architecture: 클라이언트 - 서버 - 데이터베이스 persistently(영속성) 개념 데이터베...