분류 전체보기
-
[2020.08.04] 브라우저 동작원리개발 블로깅/기타 개념 2020. 8. 4. 18:20
현재 정보화 사회에 이제는 없어서는 안 될 프로그램. 프론트엔드 개발자라면 무조건 다룰 수밖에 없는 도구이자, 끝없는 정보 바다에 접속하기 위한 필수 도구. 웹 브라우저. 우리가 평소에 접하는 이 화면은 도대체 어떻게 나타나게 되는 것일까? 우리는 평소처럼 당연하게 인터넷 주소창에 주소를 입력하고 거기에 해당되는 홈페이지 화면을 접하며 사이트를 돌아다니기만 했지, 이렇게 화면이 보여지는 과정이 어떻게 동작하는지는 생각해보지 못했을 것이다. (사실 그렇게까지 생각해 볼 필요도 없겠지만...) 프론트엔드 개발자 역시, HTML과 CSS 문서를 작성하고 Javascript 코드를 짜면서 기대하던 동작을 확인하며 웹 개발을 했을 것이고, 실제로 이 HTML문서가 어떻게 자리를 잡아서 웹 페이지에 각자 자리에 D..
-
[2020.07.17] 트레바리 테크 셀 크루의 활동을 마치다핵인싸 개발자의 길/트레바리 활동(2019.8~2020.07) 2020. 7. 17. 17:32
어쩌면 짧지도, 길지도 않은 11개월 동안 트레바리 테크 셀 크루의 활동을 오늘로써 마무리하고 퇴사를 하게 되었다. 어제 송별회 중반부터 계속해서 문득 나의 트레바리 첫 출근일이 생각난다. 그 당시 트레바리의 전체적인 서비스뿐 아니라 내부 분위기도, 업무도, 크루분들도... 아무것도 모른 상태로 정신이 하나도 없고, 최대한 빨리 적응하려고 안달 내던 때가 아직도 너무 생생하다. 확실히 그때의 트레바리 크루로서의 내 모습과 지금의 내 모습에는 많은 차이가 있는 것 같다. 스타트업에서 일을 한다는 것 자신들의 프로덕트를 더더욱 매력적으로 만들기 위해 어떤 것들을 신경 써야 하며, 어떤 마음가짐으로 어떻게 노력을 해야 하는지. 트레바리 이전의 직장이었던 SI업체 안에서 애정 없이 프로덕트를 급급하게 뚝딱 개발..
-
[2020.07.11] 자바스크립트 - Element.style 속성과 getComputedStyle() 메소드의 차이에 대해 알아보자개발 블로깅/Javascript 개념 2020. 7. 12. 15:20
브라우저에 그려진 엘리먼트의 스타일을 가져오는 방법에는 두 가지가 있다. Element.style 속성 참조 getComputedStyle() 메소드 나는 이 두 가지의 차이에 대해 정확하게 알지 못한 채, 엘리먼트의 스타일에 접근하는 작업을 하다가 내가 예상하던 대로 동작하지 않아 엄청 헤맨 경험을 맛 보았다. 그래서 이번에 닥쳤던 문제를 해결하면서 정확하게 알게 된 엘리먼트의 스타일에 대해 아래 예시를 통해서 정리해보려고 한다. # 각기 다른 방식으로 적용된 엘리먼트 두 개 우선 위와 같이 그려진 브라우저 화면이 있다. 해당 코드는 다음과 같다. 첫 번째 엘리먼트 두 번째 엘리먼트 첫 번째 엘리먼트는 인-라인 방식으로 해당 엘리먼트에 글자색 스타일을 직접 선언하고, 두 번째 엘리먼트는 body태그 바..
-
[2020.06.13] 더 좋은 커밋 메시지를 남기자개발 블로깅/팀 문화 및 시스템 2020. 6. 13. 14:09
오랜만에 내 github에 있는 옛날 프로젝트 코드들을 살펴보았다. 지금처럼 git에 익숙지 않던 때인지라, commit도 그렇겠지만, 무엇보다 커밋 메시지가 매우 엉망이었다. 내가 남긴 과거의 프로젝트 커밋 메시지... 너무 창피한 이력들.. 요즘 드는 생각이 있다면, 영어 메시지로 남긴다면 더 좋기야 하겠지만, 어설픈 영어로 작업한 내용에 대한 설명이 부실해진다면 차라리 한글로 더 명확하게 메시지를 남기는 것이 좋겠다는 생각이다. 트레바리에서 일하면서는 주로 한글로 커밋 메시지를 남기고 있다. 이렇게 메시지 한 줄을 이용해서 과거에 작업했던 내용을 더욱 자세히 알 수 있게 된 것 같다. 그런데 문득, 더 좋은 커밋 메시지를 작성할 수 있지 않을까 라는 생각이 들었다. 그래서 인터넷에 찾아보니 좋은 커..
-
input type="file" 커스터마이징 하는 방법개발 블로깅/기타 개념 2020. 6. 11. 23:44
Input File 태그의 기본적인 사용 File 필드를 사용하기 위해선 일반적으로 input type="file" 태그를 사용하게 된다. #Input File 태그 코드 # 각 브라우저 상에 나타나는 file 필드 해당 필드를 선언하면 각 브라우저마다 위와 같은 UI로 나타나게 되는데, 이는 브라우저 자체에서 적용되어 있는 UI여서 CSS 스타일로 변경이 불가능하다. 해당 필드의 스타일을 변경할 수 없지만, 대안으로 특정 필드의 액션에 inpit file이 동작하도록 하는 방법이 있다. 특정 필드에 File 필드가 동작하도록 하는 방법 기존의 input File 필드를 사용하게 되면 UI를 커스터마이징 할 수 없기 때문에, 대안으로 다른 태그와 연동하여 input file 태그의 기능을 대신하도록 할 ..
-
[2020.06.01] 야간비행 - 삶의 의미경험치 쌓기/독서여행 2020. 6. 1. 20:32
이 책에서는 그들의 임무를 덤덤히, 그리고 묵묵히 수행하며 살아가는 장면을 생생하게 보여주고 있다. 과연 그들은 행복할까? 겉으로 보면, 현재의 우리처럼 살아가는 반복된 일상이고 따분해 보인다. 심지어 그들은 사고로 목숨을 잃을 수 있을 정도의 위험성도 가지고 있다. 죽으면 그 모든 것들이 덧 없이 의미 없는 행동일 수도 있음에도 불구하고, 리비에르는 묵묵히 자신의 임수를 수행한다. 파비엥이 실종된 이후에도 리비에르는 바로 다음 유럽행 비행기를 출항시킨다. 인간의 두려움이라는 결함을 없애기 위해. 임수 완수를 위해. 더불어 유럽행 조종사 또한 한 치의 망설임 없이 자신의 임무를 위해 떠나는 장면도 보인다. 그들이 이렇게 행동할 수 있는 이유는 절대 기계와 같은 사고방식을 가졌기 때문이 아니다. 그들은 행..
-
[2020.05.24] Infrastructure as Code란?개발 블로깅/Server&DataBase 개념 2020. 5. 24. 17:37
Infrastructure as Code 인프라 구성을 소프트웨어 코딩을 하는 것처럼 처리하는 방식을 말한다. 애플리케이션을 작업하는 방식과, 애플리케이션을 실행하는 환경을 구현하는 작업이 유사한 것. Infrastructure as Code의 장점 가상 시스템에 대한 프로그래밍 방식의 관리를 지원하기 때문에, 개별 하드웨어를 수동으로 구성하고 업데이트할 필요가 없음. 즉, 인프라의 '유연성', '반복성','확장성'을 부여 예시 AWS의 EC2 instance의 성능을 높이기 위해, type을 small에서 large로 업그레이드를 하려고 할 때, AWS 콘솔 웹에서 일일이 변경하지 않고 code로 간단히 변경할 수 있다. 번외 # IaaS (Infrastructure as a Service) 인프라를 ..
-
[2020.05.24] Docker 기초 - React을 Docker로 배포하기개발 블로깅/Server&DataBase 개념 2020. 5. 24. 15:35
작년 쯤 도커 개념과 컨테이너 실행 정도만 공부하고 블로깅 했었는데, 이번에 컨테이너 기반으로 다루는 기술의 중요성을 많이 깨닫고 Docker부터 다시 공부해보려고 한다. #도커라이징 현재 프로젝트 및 개발환경을 도커 이미지로 생성하는 작업이다. 우선 이와 같이 가볍게 express 서버를 하나 생성한다. 해당 서버 및 환경을 도커 이미지로 변경하기 위해서는 도커 파일을 생성하여 실행시켜야 한다. # 리액트 프로젝트 생성 리액트를 써본 개발자들에게 매우 익숙한 create-react-app을 이용해서 리액트 프로젝트를 하나 생성한다. $ create-reate-app react-docker // 도커 컨테이너로 올릴 리액트 프로젝트 생성 # Docker파일 생성 리액트 프로젝트 환경을 구성했으면, 해당 ..