본문 바로가기

분류 전체보기

 (40)
[Dart] 클래스 / 인스턴스 1. 클래스 (Class) 💡 오브젝트를 가상세계 용으로 구체화 한 것 (설계도, 템플릿, 붕어빵 틀) Person이라는 클래스(붕어빵 틀)를 만들어보자. 필드: 클래스 안의 변수를 필드라고 한다. 필드는 String, int, bool 등 다양한 데이터 유형일 수 있으며 보통 camelCase로 작성한다. 메서드: 클래스 안에서 정의된 함수를 메서드라 한다. 보통 camelCase로 작성한다. class Person { // 필드 String name = '치즈'; int age = 4; // 메서드 void sayHi() { print('안녕하세요 제 이름은 $name이고 나이는 $age살 입니다.'); } } 2. 인스턴스 (Instance) 💡 클래스를 활용해 메모리 상에 만들어 낸 것 (실제 제..
[Dart] 변수 / 조건문 / 반복문 / final, const / null safety Dart는 타입 유추가 가능한 언어이므로 타입 표기는 선택 사항이다. Dart에서 변수는 데이터의 종류를 정의하는 몇 가지 유형이 있다. ✔️ 변수 - int: 정수 타입 int i = 1; - double: 실수 타입 double d = 1.1; - num: int와 double을 모두 쓸 수 있는 타입 num a = 10; num b = 10.0; - String: 문자열 타입 String name = '이름'; - bool: 참 또는 거짓 타입 bool b = true; ✔️ if ~ else if ~ else, for: 조건문, 반복문 - if ~ else if ~ else : 만약 조건이 a 라면 A를 하라. 만약 조건이 b라면 B를 하라. 아니면 C를 하라와 같은 조건을 처리할 때 사용한다. ..
React 프로젝트에 Firebase를 추가한 경험기 🔥 Firebase를 공부하게 된 계기 많은 프로젝트를 진행해보진 않았지만, 부트캠프를 수강하며 "프로젝트를 한다"라는 것은 프론트엔드 수강생과 백엔드 수강생이 서로 함께 하는 걸로 알고 있었다. 따라서 부트캠프 수료 이후 혼자서 프로젝트를 진행하고 싶었지만 아무래도 한계가 있다는 것을 알고 있었는데, 유튜브 알고리즘에 의해 백엔드 개발자 없이 웹 사이트를 만들 수 있는 "파이어베이스" 에 대해 알게 됐고 파이어베이스가 어떤 것인지에 대해 공부하게 됐다. 강의를 찾아보니 노마드코더의 파이어베이스로 트위터 클론코딩 강의가 있었고, 내가 구현해보고 싶었던 회원 가입, 소셜 로그인 기능을 알려주는 강의라 일단 들어보기로 했다. 2년 전 강의라 버전 8로 강의가 진행되는데, 나는 현재 버전인 버전 9로 진행하..
브라우저 주소창에 google.com을 입력했을 때 어떤 일이 일어날까? 📚 공부하게 된 계기 어느 날 브라우저 주소창에 google.com을 입력했을 때 어떤 일이 일어나는지에 대해 설명할 수 있냐는 질문을 받았고 나는 이 질문에 대해 명확하게 대답하기 위해 어떤 일이 일어나는지 찾아보게 되었다. 🐌 브라우저의 렌더링 동작 과정 위 그림은 브라우저의 렌더링 과정을 간단하게 나타낸 그림이다. 간단하게 설명해 보자면, 우리가 google.com이라고 검색했을 때 해당주소로 리소스 요청이 전송된다. 그러고 나서 서버는 루트 폴더에 존재하는 정적 파일인 index.html 파일로 응답을 한다. 응답받은 HTML 파일은 각 단계(Parsing -> Style -> Layout -> Paint -> Composite)를 거치며 우리가 알고 있는 모습으로 웹 브라우저에 거치게 되는데 단..
REST API 과 GraphQL API 어떤 차이가 있을까? 📚 공부하게 된 계기 이번에 프로젝트를 하다가 GraphQL을 처음 접했는데 처음엔 이게 뭔가 싶어서 공식문서와 강의들을 찾아보며 익히다가 내가 지금까지 써왔던 REST API와 비교해 보게 되었다. 먼저, 두 개를 비교하기 전에 API의 정확한 의미를 짚고 넘어가자! 🎮 API (Application Programming Interface) API는 약자인데 이 세단어가 무슨 조합이지? 싶었다.. 한국어로 풀이된 말을 보니 두 소프트웨어 구성 요소가 서로 통신할 수 있게 만드는 메커니즘이다. 라고 되어있다. 🖥️ REST API REST API에 대해 간단하게 알아보자! REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처이다. 따라서 REST API는 REST를 ..
[JavaScript] 제너레이터와 async/await 제너레이터와 async / await ES2015(ES6)에 도입된 제너레이터와 ES2017(ES8)에 도입된 async await에 대해 공부한 것을 정리해 보고자 한다. Generator(제너레이터) 제너레이터란? ES6에 도입되었으며 함수의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수. 제너레이터와 일반 함수의 차이 1. 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다. 일반 함수를 호출하면 제어권이 함수에게 넘어가고 함수 코드를 일괄 실행한다. 즉, 함수 호출자는 함수를 호출한 이후 함수 실행을 제어할 수 없다. 제너레이터 함수는 함수 실행을 함수 호출자가 제어할 수 있다. 다시 말해, 함수 호출자가 함수 실행을 일시 중지시키거나 재개시킬 수 있다. ..
[TypeScript] 컴파일시 세부설정 (tsconfig.json) 프로젝트 생성시 tsconfig.json 파일에 컴파일 세부설정 옵션을 적어줘야 하는데 보일러플레이트를 작성해두면 좋을것 같아 작성해본다. { "compilerOptions": { "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능 "module": "esnext", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext' "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 "checkJs": true, // 일반 js 파일에서도 에러체크 여부 "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인..
[JavaScript] Event Flow ooO 이번주 탐구할 주제는 Event Flow 🏊‍♀️ 이벤트 플로우가 뭔지 알아보고, 이벤트 버블링과 캡쳐링에 대해 알아보자! 간단한 HTML코드이다. html안에 body가 있고 그 안에 div가 있다. 왼쪽 코드를 간단하게 그림으로 나타내 보았고, 사용자가 div를 클릭하면 어떻게 될까? 당연히 div를 클릭했으니 div에서는 이벤트가 실행이 될 것이다. 근데 div뿐만 아니라 div의 부모태그인 body, html 태그들도 이벤트가 실행된다. 하지만 이벤트 실행 시에 각 요소에서 이벤트가 한 번에 빡! 하고 실행되는 게 아니라 나름의 순서가 있는데 이것을 Event Flow라고 한다. 이벤트 플로우에 대해 설명하기 전 하나 알고 가자! currentTarget vs target currentTarget..

티스토리툴바