본문 바로가기

분류 전체보기215

자바스크립트의 이벤트 버블링 (JS eventBubbling) 자바스크립트에 대해서 아무것도 모르고 코딩을 할때 (물론 지금도 전혀 모르지만), 한 요소에 이벤트를 주기만 하면 원인 모를 오작동이 있었습니다. 분명히 특정한 요소 하나에 클릭 이벤트를 주었는데 그 요소를 누르면 요소를 감싸고 있던 상위 요소의 이벤트까지 같이 발생해버리는 현상이었습니다. 그땐 보면서도 이게 왜 이러나... 싶었지만 이제서야 그 이유를 알게되어서 정리해봅니다. 먼저 상황을 되짚어 보기 위해 문제가 되었던 구조를 간단히 재현해보겠습니다. 이벤트 작동 test라는 id를 가진 div 아래에 btn 이라는 id를 가진 버튼이 있는 구조입니다. 요소를 클릭하게 되면 그 요소의 id값을 콘솔로 출력해주어 어떤 이벤트가 실행되었는지 확인할 수 있습니다. 버튼을 클릭해보니 btn의 이벤트가 먼저 실.. 2020. 9. 17.
react 프로젝트에 redux 적용하기 #1 이번에 진행중인 토이 프로젝트에서 상태관리 라이브러리인 redux를 적용하게 되었습니다. 문제는 아직 한 번도 사용해본적이 없는 라이브러리이기에 실전에 앞서 redux가 어떤 방식으로 동작하는지, 어떻게 적용시키야 하는지 알아보기 위해 기존에 있던 react 프로젝트를 redux를 이용한 구조로 바꾸는 튜토리얼을 진행해보려고 합니다. 리팩토링 할 대상은 지난번 리액트 튜토리얼을 진행했던 무비앱. 이 리액트 프로젝트를 redux를 이용한 프로젝트로 탈바꿈 시켜보는게 오늘의 목표입니다. 막상 진행하려고 하니 정말 아무것도 모르는 제로 베이스 상태였기 때문에 유튜브에 올려져있는 벨로퍼트(김민준)님의 강좌를 참고하였습니다. 우선 기존 레파지토리를 남기고 새 프로젝트에서 작업을 시작하기 위해 새 저장소를 생성하겠.. 2020. 9. 16.
리팩토링 스터디 #1 - 첫 번째 예시 리팩토링 스터디의 첫 번째 시간이 다가왔습니다. 주말 오전부터 시작해서 모두 피곤한 기색이 있었지만 다르게 생각하면 늦잠 자던 시간에 이렇게 개발 이야기를(?) 할 수 있다는게 좋기도 하네요. 잠도 깰 겸 꽤 시원해진 아침 공기를 한 번 마시고 아아메 한 잔과 함께 시작하였습니다. 포스팅에는 책 내용을 요약해서 정리하는 것도 좋지만, 스터디 중간중간 나왔던 알고 가면 좋을 것 같은 이야기들도 함께 적어보도록 할게요. 재미있는 이야기들이 많이 나와서 잊어버리기 전에 얼른 적어야겠어요. 스터디 1주차에는 간단하게 Chapter 1까지 읽어보고 중요하다 싶은 부분들을 하나하나 짚어가며 다시 보는 방식으로 진행했습니다. 그 날의 발표자 1명이 주가 되어 스터디를 이끌고, 나머지 참여원들은 발표를 들으며 의견을 .. 2020. 9. 15.
리팩토링 스터디 #0 - 스터디에 들어가며 꿈에 그리던 복학(비록 등교는 못하고 있지만!) 후 본격적으로 학기에 들어가게 되면서 동아리 선배님들과 스터디를 시작하게 되었습니다. 이제 학교에서 첫 1년을 보내는 20학번 새내기와 이제 막 군휴학을 마치고 복학한 학부생부터, 졸업을 앞두고 있거나 이미 회사에 취업하여 개발자로서의 커리어를 시작하신 선배까지 개개인의 지식 수준의 편차가 큰 편이라 모두가 만족할 수 있는 스터디 주제를 정하는게 쉽지 않아 보였습니다. 특정한 언어에 대해 탐구하거나 공동으로 프로젝트를 진행하기에는 누군가에겐 너무 쉽거나, 너무 어렵게 느껴질 수 있어 적당한 타협점이 뭘까 생각해보았는데 선배님의 추천으로 리팩토링에 대한 내용을 공부해보기로 하였습니다. 스터디에서 사용할 교재는 마틴 파울러의 《리팩터링 2판》 이었습니다. 리팩.. 2020. 9. 14.
CR / LF / CRLF - 줄바꿈 문자열 구글 클라우드 플랫폼을 이용하여 리액트 프로젝트 호스팅하기 (nginX)를 진행하며 새롭게 알게 된 사실이라 나중을 위해 정리해두는 포스팅입니다. 컴퓨터에서 줄바꿈 문자열 (개행문자) 를 나타내는 방법은 운영체제에 따라서 다릅니다. 흔히 \n 정도로 알고만 있었는데 유닉스와 리눅스 계열 운영체제에서 이렇게 사용하고, 윈도우 운영체제의 경우 \r\n 을 사용합니다. \n은 New line, Line feed 라고 부르고 줄여서 LF 라고 표기합니다. \r은 carrige Return 이라고 부르며 줄여서 CR 이라고 표기합니다. 오래 전에 사용된 현재 운영체제들의 조상격인 멀틱스와 CP/M은 각각 줄바꿈 문자열을 LF, CR/LF 으로 통일하였습니다. 멀틱스는 디스크와 메모리의 가격이 높아 조금이라도 많은.. 2020. 9. 13.
구글 클라우드 플랫폼을 이용하여 리액트 프로젝트 호스팅하기 (nginX) #3 이전 포스팅에 이어지는 내용입니다. 구글 클라우드 플랫폼을 이용하여 리액트 프로젝트 호스팅하기 (nginX) #1 구글 클라우드 플랫폼을 이용하여 리액트 프로젝트 호스팅하기 (nginX) #2 위 포스팅을 먼저 보고 와주세요! 지난 포스팅에서 ssh 인증을 통해 외부에서 인스턴스로 접근하는 과정까지 진행했습니다. 이제 빌드 파일을 업로드 하고, nginx 설정에서 이 빌드 파일을 띄워주도록 변경해보겠습니다. 인스턴스에 처음 접속하면 홈 디렉토리로 연결됩니다. (~) 빌드 파일을 이곳에 먼저 올려보겠습니다. scp -i ~/.ssh/id_rsa -r ./build/ 유저이름@인스턴스주소:./ 여기에선 파일 전송 명령어인 scp를 사용합니다. -i 옵션은 인증서의 위치, -r 옵션은 하위 파일들을 포함하는 .. 2020. 9. 12.

티스토리툴바