코드로 대화하기

안녕하세요 하나의 웹페이지를 보여주기 위해서 브라우저를 우리 생각보다 꽤 많은 일을 하고있습니다. 구성 요소 브라우저의 주요 구성 요소는 아래와 같습니다. 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..

이전 글에서 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를 사용할 때마다 매번..

타입크스립트를 공부하면서 "지금 작성하고 있는 코드가 깨끗한가? 올바른 길로 가고있나?" 생각이 들었습니다. 그렇게 클린코드에 관해 찾아보았고, 토스에서 진행한 [실무에서 바로 쓰는 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..

Enumerated Type 타입스크립트에서 enum이란 특정 값들의 집합을 의미하는 자료형 (열거형)입니다. C, C#, Java 등 많은 프로그래밍 언어들이 enum을 데이터 타입에 포함하고 있지만 자바스크립트는 포함하고 있지 않습니다. 타입스크립트로 넘어오게 되면서 enum을 사용할 수 있게 되었습니다. 코드를 통해 어떤 것들이 있는지 살펴보겠습니다. Numeric enums (숫자 열거형) enum Alphabet{ A, B, C, D, E, F } console.log(Alphabet); /* { '0': 'A', '1': 'B', '2': 'C', '3': 'D', '4': 'E', '5': 'F', A: 0, B: 1, C: 2, D: 3, E: 4, F: 5 } */ console.log(..

오늘은 typescript의 union type과 intersection type을 알아보겠습니다. 일반적으로 타입을 선언하기 하기 위해서는 아래와 같습니다. function logString(item: string){ console.log(item); }; logString("hello"); 똑같은 로직을 처리하지만 타입만 다른 경우는 어떨까요? function logString(item: string){ console.log(item); }; function logNumber(item: number){ console.log(item); }; logString("hello"); logNumber(1); 타입만 다르게 하여 함수를 두 번 선언하여야 합니다. 이렇게 되면 불필요한 중복이 생깁니다. Unio..

지금까지 변수와 함수에서의 타입 선언을 알아보았습니다. 직접적으로 타입을 넣는 경우도 있지만 type과 interface로 따로 뺄 수 있습니다. 타입을 따로 빼면 불필요한 반복이 줄어들어 확장성이 좋아집니다. Type Aliases 기본 구조 type UserData = { name: string; age:number; } function logUserData(user: UserData){ console.log(user.name); console.log(user.age); } logUserData({name:"song", age:0}); // 성공 logUserData({name:"song", address:"pangyo"}); // 오류 address는 type에서 선언되지 않았다. logUserDa..

오늘은 typescript에서 함수를 선언하는 방법에 대하여 알아보겠습니다. javascript function sum(a, b){ return a + b; }; sum(1, 2); js에서 일반적으로 함수를 선언하는 방법입니다. 타입이 선언되어있지 않기 때문에 숫자, 문자열, 오브젝트 등 모든 타입을 넣을 수 있습니다. 이렇게 되면 원하는 기존의 의도와는 다르게 함수가 작동할 가능성이 있습니다. typescript function function sum(a: number, b: number):number { return a + b; } sum(1, 2); // 성공 sum(1); // 오류 . 두번째 매개변수가 없습니다. sum("hello", 100); // 오류 ts에서는 매개변수와 리턴하는 타입 ..