코드로 대화하기

안녕하세요 오늘은 Virtual Dom을 알아보겠습니다. DOM ( Document Object Model ) 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. MDN에는 DOM을 위와 같이 정의하고있습니다. 웹 페이지는 일종의 문서(document)입니다. DOM은 프로그래밍 언어가 이 문서에 쉽게 접근할 수 있도록 문서의 구성요소들을 구조화하여 표현한 객체입니다. 즉 웹 페이지의 객체 지향 표현..

안녕하세요 하나의 웹페이지를 보여주기 위해서 브라우저를 우리 생각보다 꽤 많은 일을 하고있습니다. 구성 요소 브라우저의 주요 구성 요소는 아래와 같습니다. 1. 사용자 인터페이스 주소 표시줄, 이전/다음/새로고침 등 웹페이지를 제외한 나머지 모든 부분입니다. 2. 브라우저 엔진 사용자 인터페이스(1번)와 렌더링 엔진(3번)을 연결합니다. 3. 렌더링 엔진 HTML과 CSS를 파싱하여 요청한 웹페이지를 화면에 표시합니다. 4. 통신 HTTP 요청과 같은 네트워크 요청을 수행합니다. 5. UI 백엔드 체크박스나 버튼 같은 기본적인 위젯을 그려줍니다. OS 사용자 인터페이스 체계를 사용합니다. 6. 자바스크립트 해석기 자바스크립트 코드를 실행하는 인터프리터입니다. (ex. chrome - V8) 7. 자료 저..

안녕하세요! 오늘은 제가 가장 좋아하는 threejs를 다뤄보겠습니다. three.js로는 포폴과 가볍게 취미 생활용으로 만들 예정이라 다른 글들에 비해 가볍습니다! 단순히 제가 재밌어서 만드는 용도라.. ㅎㅎ 대학교 때 과제와 졸업작품으로 많이 활용했었는데요. 그때는 Vanila JS로 했다면 이제는 React로 진행하겠습니다. 며칠 해보면서 느낀 것을 react로 할 때가 훨씬 간단하다고 느꼈습니다. 바닐라로 했을때는 모든 세팅을 일일이 다해주어야 하지만 리액트에서는 코드 몇 줄만 치면 해결되었습니다. 하지만 react three 관련 자료가 많이 안 나와있고 예전 버전의 코드들이 구글에 올라와져있어 힘든 점이 있습니다 ㅜㅜ 우선 제 목표는 이렇습니다! 1. 중간에 3D 오브젝트가 있고, wasd로 ..

안녕하세요 오늘은 var, let, const 에 대해 알아보겠습니다. var javascript에서 ES5까지 변수를 선언하는 방법은 var 뿐이었습니다. 이는 몇 가지 심각한 문제가 있습니다. 1. 함수 레벨 스코프 함수의 코드 블록만 스코프로 인정합니다. 전역 함수 외부에서 생성한 변수는 모두 전역 변수입니다. 2. var 키워드 생략 및 중복 선언 허용 암묵적으로 전역 변수를 생성할 가능성과 의도하지 않은 변수값의 변경이 일어날 가능성이 큽니다. 3. 변수 호이스팅 변수를 선언하기 이전에 참조할 수 있습니다. 이는 변수가 어디에서 어떻게 사용하는지 파악하기 힘들며 비순수 함수에 의하여 값이 변경될 때도 있습니다. ES6에서는 이러한 문제점들을 보완하기 위하여 let과 const를 만들었습니다. l..

안녕하세요 오늘은 제 이야기를 해보려 합니다. 졸업 대학교에서 html, css, javascript, unity등을 배웠습니다. 그 당시 저는 js로 인터랙션만 할 줄 아는 개발자였습니다. 그 당시를 "개발자"라고 표현하는게 맞는지도 모르겠네요. 겨울방학 때 퍼블리셔가 아닌 프론트엔드로 취업을 하고 싶어 사람인에 100군데 정도 지원하였지만 모두 탈락하였습니다. 제 무지를 깨닫고 한 달 동안 인터넷으로 react와 api통신하는 방법을 배워 포트폴리오를 만들었습니다. 그리고 다시 사람인에서 100개의 회사에 지원하였습니다. 이때는 몇 군데 합격하였습니다. 그중 강남에 있고 개발자가 많은 SI회사에 취직을 하게 되었습니다. 취업 2021년 2월 대학교 졸업 후 3월에 SI 회사에 취업을 했습니다. 회사에..

이전 글에서 Recoil의 기초와 atom, selector에 대해 살펴보았습니다. https://talkwithcode.tistory.com/75 Recoil 정리 1편 - Recoil시작하기 (atom, selector) 안녕하세요 오늘은 상태 관리툴인 Recoil에 대해 알아보겠습니다. 상태 관리 상태 관리 툴을 사용하면 state값들을 props로 계속 타고들어가지 않아 코드가 깔끔해집니다. 프로젝트의 규모가 커질수 talkwithcode.tistory.com 이번 시간에는 선언한 atom과 selector를 어떤 식으로 활용할 수 있는지 알아보겠습니다. 아래 hook들을 설명하고 있습니다. useRecoilState useRecoilValue useSetRecoilState useResetRec..

안녕하세요 오늘은 상태 관리툴인 Recoil에 대해 알아보겠습니다. 상태 관리 상태 관리 툴을 사용하면 state값들을 props로 계속 타고들어가지 않아 코드가 깔끔해집니다. 프로젝트의 규모가 커질수록 상태 관리 또한 필요성이 커지게 됩니다. 많은 프론트엔드 개발자들이 Redux, MobX, Recoil 등 여러가지 기술로 상태 관리를 하고 있는데요. Redux의 경우 전 세계적으로 많이 사용되지만 만족도는 현저히 떨어집니다. action, reducer, selector 등 사용하기 까다롭습니다. 실제로 redux는 사용률은 1위이지만 만족도는 5위에 위치하고 있습니다. 어떤 조사 결과에 따르면 3년 안에 없어질 1순위가 redux였습니다. 저 또한 프로젝트를 진행하며 Redux를 사용할 때마다 매번..

최근 뜨고 있는 상태 관리 툴인 Recoil을 공부하다가 공식문서에서 번역이 안된 페이지가 있었습니다. 오픈소스에 관심이 많은 저는 페이스북에서 만든 Recoil에 한번 기여하고 싶은 욕심이 생겼습니다. 기여한 순서는 이렇습니다. 1. 파파고와 구글 번역기, 해당 훅을 직접 사용하며 번역하였습니다. 2. recoil 레파지토리를 fork를 받았습니다. 3. 번역한 내용을 md 파일을 제작한 후 Pull requests를 보냈습니다. 4. 페이스북 깃허브 봇이 아래와 같이 코멘트를 달았습니다. 요약하면 이렇습니다. "pull request를 하기 위해서는 CLA(Contributor License Agreement) 권한이 필요하니 링크에 접속하여 서명을 해라" 서명을 하게 되면 초록색으로 CLA Sign..

타입크스립트를 공부하면서 "지금 작성하고 있는 코드가 깨끗한가? 올바른 길로 가고있나?" 생각이 들었습니다. 그렇게 클린코드에 관해 찾아보았고, 토스에서 진행한 [실무에서 바로 쓰는 Frontend Clean Code]와 삼성 SDS의[ 클린코드란 무엇인가?]의 내용을 토대로 정리하려합니다. https://toss.im/slash-21/sessions/3-3 실무에서 바로 쓰는 Frontend Clean Code 실무에서 클린 코드의 의의는 유지보수 시간의 단축입니다. 동료 혹은 과거의 스스로 짠 코드를 빠르게 이해할 수 있다면 유지보수할 때 드는 개발 시간이 짧아집니다. 실제 예시와 함께 1. 응집 toss.im https://www.samsungsds.com/kr/story/cleancode-0823..

안녕하세요 오늘은 Git 커밋 메시지에 대하여 적어보려고 합니다. 프로젝트를 진행하다 보면 여러 사람들과 협업해야 할 때가 있는데요. 커밋 메시지를 보며 버전 관리와 동료들이 무엇을 했는지 등 한눈에 알 수 있습니다. 추가로 다음과 같은 효과들이 있습니다. * 더 좋은 커밋 로그 가독성 * 더 나은 협업과 리뷰 프로세스 * 더 쉬운 코드 유지보수 회사마다 커밋 메시지의 규칙은 다르겠지만, 이번에 소개해드릴 내용은 보편적으로 사용하는 규칙입니다. 커밋 규칙 (): // 제목 // 본문 // 푸터 커밋 메시지의 기본적인 구조입니다. 제목은 필수이고, 본문과 푸터는 선택사항입니다. 제목과 본문은 아래와 같은 규칙이 있습니다. 제목과 본문을 한 줄 띄워 분리 제목은 영문 기준 50글자로 제한 제목 첫 글자는 대..