TIL

🎉 Developer tools 별도의 web page 상에서 등의 코드를 확인하고 test를 할 수 있는 도구로 에 도움을 준다. .: HTML 가 보이고 각 태그별 할 수 있는 탭이다. 해당 탭에서는 HTML/css 을 할 수 있다. element 탭에

. 템플릿 설정하기: HTML 작성시 매번 공통적으로 작성하는 초기 셋팅 값을 설정 해야한다. VS cdoe 사용자라면 입력할 수 있으니단축기를 기억하자 ! + tab . CSS 기본 설정값 초기화하기: 모든 웹브라우저는 기본적으로 설정된 셋팅값이 있기 때문에 개발자가

Linux는 1991년 Linus Torvals가 개발한 운영체제로 시스템틀 운영하는데 가장 널리 사용되는 운영체제이다. Windows 시스템이나 application이 아닌 이상 일반적으로 시스템 서버는 linux 기반으로 운영되고 있다. 그럼으로 개발자는 Linu

.Git(Version Control System): Git의 공식 명칭은 VCS로 프로젝트 파일의 변경사항을 추적하는 시스템이다. 이를 통해 개발자들은 프로젝트의 변경 사항을 기록하고, 특정 시점의 버전으로 언제든 돌아갈 수 있습니다.①Initializing a re

Application 계층에 속한 Protocol로 컴퓨터들끼리 HTML파일을 주고받을 수 있도록 하는 소통방식 또는 약속이다. ①Requset/Response(요청/응답)으로 구성됨Request : Start Line/Headers/Body로 구성되어 있다.Sta

🌟 React? 는 Facebook에서 만든 이다. 장점 . 복잡한 업데이트를 다루지만 React에서 만들어진 App은 빠르다. . Code를 밀도있게 작성할 수 있으며, 파일을 재사용할 수 있다. . 확장성이 있어 데이터로 얽힌 프로그램을 수행하는데 최적의

🙀 Advanced JSX JSX에서는 attribute 속성인 class 대신에 className을 사용한다. self-closing tag를 사용해야 한다. {} 안에 작성된 코드는 JavaScript 문법으로 해석된다. JSX 표현식에 {}를 사용하면 외부

😏 Component React app은 component로 만들어졌다. component는 재사용이 가능한 코드의 묶음 같은것으로 하나의 일을 수행한다. 그리고 그 일은 HTML을 re-rendering 하는 것을 의미한다. : 이 코드는 React라는 이

🙊 this.props 모든 . component's의 props 객체는 를 가지고 있는데, prop's 하기 위해서는 라는 표현식을 사용해야 한다. props 정보를 React component에 전달하려면 component의 attribute 속성으로

🐱 State 으로 는 props와 다르게 자신만의 고유한 state를 갖는다. ⁎ class 안에 state를 추가할 때는 render()와 구분하기 위한 ,를 사용하면 안된다. class는 객체가 아니기 때문이다. Class component에 stat

🙄 Component lifecycle : component를 초기화하고 DOM에 연결할 때 . lifecycle method: constructor(): mounting 구문에서 첫번째로 호출되는 method render(): moun

fontAwesome은 font 속성의 property를 사용할 수 있는 이미지/text 느낌의 아이콘을 무료로 제공해주는 사이트이다. 1차 prj를 하면서 css styling을 정말 많이 경험하고 있고 styling 지옥에 빠져있다. button tag를 사용할

history: push/replace를 사용하여 다른 경로로 이동 할 수 있다.(ex: 로그인 성공시, 로그인 페이지 › 메인 페이지 이동)location: 현재 경로에 대한 정보(+Url query)를 갖고 있다.(ex: 이전 경로/지금 경로 비교가 필요할 경우,

웹사이트의 리스트 페이지에 흔히 쓰이는 기능으로 해당 페이지 Rendering시, 모든 데이터를 한꺼번에 Backend에 호출해서 가져오는 것이 아니라 limit&offset을 사용하여1) 다음페이지 버튼 클릭시 혹은 2) 스크롤시 일정 위치에 도달시에 추가로 데이터를

Stateless Functional Components . Class형 대신 JavaScript의 Function와 동일한 형태로 Component를 정의하여 사용할 수 있는데 이를 라고 말한다. 하지만 React Hooks이 Class component를 100

Hook's state? . 는 Class형과 다르게 state가 없는 대신 한다. : 와 로 구성되어 있다. react는 이 2개의 변수를 array 형태로 return 하는데 naming convention은 아래와 같다. 그리고 이 . useState를 사용하

Styled Components? . 에 가장 각광받는 이다. 설치 명령어: 사용시 장점 Component가 Unmount 되면 css styling이 memory를 차지하지 않아 성능상의 장점이 있다. 자동으로 생성되는 ClassName으로 다른 compone

Redux란? 이다. redux를 사용하면 모든 것은 root, 즉 경로로 data 교환이 일어난다. (자신의 state/props가 변경될 때) Redux의 3가지 사용원칙 전체의 상태값은 1개의 JavaScript 객체로 표현돼야 한다. 상탯값은 읽기 전

\*React native 학습 목적으로 Expo CLI로 개발 초기 Setting을 진행함 1) expo install: 기본적으로 node가 설치된 상태에서 아래의 명령어를 terminal에 실행하여 설치합니다. window의 경우 powershell, gitba

😎 Component *React Native를 사용하면 IOS, Android 개발을 별도로 하지 않고 App 배포가 가능하다. 그게 가능한 이유는 IOS와 Android는 tag를 구분하여 사용하는데 RN에서는 그것을 포괄하는 Component를 제공하고 App이

React Native를 시작하는 분들께 도움이 되면 좋겠습니다.

. react native tab view . FlatList (key는 string)

async/await는 Javascript의 비동기를 처리하는 문법의 최신 버전으로 기존 promise/callback 함수 형태 처리방식의 단점을 보완하고 코드의 가독성을 높힐 수 있도록 도와준다. 1) promise 단독 사용: user의 data가 제대로 들어

REpresentational States Transfer Apllication Programming InterfaceREST는 프론트엔드가 필요한 정보를 서버에게 요청하는 통신 방식을 말한다.해당 통신을 통해 정해진 구조의 정보를 받을 수 있다.정해진 구조의 정보를

CORS(Cross-Origin Resourc Sharing) 교차 출처 자원 공유 SOP(Same-Origin Policy) 동일 출처 정책

개발하기 쉽고 사용하기 편리한 앱을 만들기 위한 방법론 중의 하나로 모바일 웹의 한계를 브라우저의 발전을 통해 끌어올린 것으로 고성능의 앱을 개발하는 것은 한계가 있지만, 굳이 앱 형태로 개발할 필요가 없는 경우에는 브라우저에서 돌리는 것보다 훨씬 편리하게 이용할 수

Web Storage 1)localStorage 단순한 key-value 데이터를 저장할 수 있는 기능만 있고 data type은 string만 가능하며 최대 저장용량(5mb~10mb)의 제한이 있다. 하지만 data를 만료 기간 없이 저장하고 사용할 수 있다는

GUI(Graphical User Interface) GUI를 배워서 사용하는 것은 쉽다. CLI(Command Line Interface) 초창기 컴퓨터가 발명되었을 때는 마우스가 없는 구조여서 CLI 환경을 사용하게 되었다. 새로운 언어를 배우는 것처럼 배워서

async/await는 Javascript의 비동기를 처리하는 문법의 최신 버전으로 기존 promise/callback 함수 형태 처리방식의 단점을 보완하고 코드의 가독성을 높힐 수 있도록 도와준다. 1)async/await: promise 객체(Javascript

React에서 key는 list의 item의 변경, 추가,제거 등을 구분하는 것을 도와준다. 안정적인 list를 구성하기 위해서는 array에 각 항목을 구분하기 위한 요소가 포함되어 있어야 한다.가장 최적의 방법은 item 들을 구분할 수 있는 string 형태의 고

정규 표현식 또는 정규식은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다.\\d : digit을 의미함, 숫자를 포함한다.. \\d+를 사용하면 연결된 숫자를 포함한다. 010-1234-5678 => 010, 1234, 5678\\w : wo

Webpack? >Webpack은 JavaScript Module Bundler의 종류 중의 하나로 .js, .css, .jpg 등 여러개의 확장자로 구성된 여러개의 파일을 하나로 만들어 주는 도구이다. (bundler의 종류에는 Webpack, Broserify, P

Babel은 모든 브라우저에서 최신 JavaScript 문법이 잘 동작하도록 도와주는 JavaScript Compiler이다.Compiler를 사용하는 이유는 최신 Version의 JavaScript 문법을 지원하지 않는 브라우저에서도 개발자가 의도한대로 코드가 동작하

TypeScript는 MS에서 개발한 JavaScript의 superset인 프로그래밍 언어로서 TypeScript는 JavaScript의 모든 기능을 포함하면서 JavaScript에 포함되지 않은 타입 시스템을 지원한다. 타입 시스템을 사용함으로써 보다 안정적인 개발

TypeScript에서는 타입 표기가 없는 경우, 작성된 코드를 읽고 분석하여 타입을 유추하여 지정할 수 있는데 이것을 타입 추론이라고 말한다.a의 type을 명시하지 않았지만 ts는 타입 추론을 통해 변수 a의 type을 number로 하였기 때문에 string 값을

①② 사용자가 웹 브라우저를 통해 찾고 싶은 웹 페이지의 URL 주소를 입력함.→ https://velog.io/write?id=30e과 같은 주소를 입력하는 과정③ 사용자가 입력한 URL 주소 중에서 도메인 네임(domain name) 부분을 DNS 서버에서

연관된 아이템들을 함께 묶어서 표현할 수 있는 수단이다. Complie된 파일을 보면 Enum은 Interface와 다르게 코드가 직접적으로 구현되어 있는데 이는 Enum이 runtime에 존재하는 실제 객체라는 것을 의미한다. Numeric Enum의 각 Item

타입의 종류 any: 어떠한 타입이든 모두 가능한 타입이다. 다만, 좀 더 나은 코드를 작성하고 유지보수를 위해서는 사용을 지양하는 것이 좋다. union: 제한된 타입들을 동시에 지정하고 싶을 때 사용한다. aliases: 2개 이상의 타입 조합이 반복적으로

특정 브랜치의 작업 내용을 분기로 남기면서 master 브랜치에 반영하고 싶은 경우master branch로 이동한 후, git merge 브랜치 이름최근 master 브랜치의 상태를 특정 브랜치의 master로 변경한 뒤 작업을 반영하고 싶은 경우최근 version의

출처: YOUTUBE-땅콩코딩

🌼 변수 선언 : compile시, 값이 할당되어 있어야 한다. : runtime시, 값을 할당해도 된다. 1) 값이 할당되면 바꿀 수 없다는 것은 동일하다. 2) 일반적으로 final을 더 많이 쓴다. 🌼 class 선언 및 사용 class란 비

Getter: class 내부의 값을 가져올 때 사용한다.Setter: class 내부의 값을 변경할 때 사용한다.Q 함수를 사용해도 값을 읽거나 변경할 수 있는데 getter와 setter를 사용하는 이유는 무엇일까? . 함수를 사용하면 사용시 () barcket이

🌼Inheritance 🌼Override

🌼 this and super : this는 class 내의 변수에 접근할 때 사용하는 keyword이다. : 부모 class의 변수를 자식에게 상속하고 싶을 때 사용하는 keyword이다.

Interface : class에서 꼭 선언해야하는 변수/함수 등을 정의할 때 interface 개념을 사용한다. . 별도의 선언 방법은 없으며 class를 생성하듯 Interface class를 만들면 된다.. Interface class를 implements 하는

처음으로 스토어 심사 제출을 해보게되어 단순 기록의 목적으로 작성한 글이며 자세한 배포 방법은 이미 잘 쓰여진 글들이 많아 생략하였다.프로젝트의 버전 명명 규칙에 따라 pubspec.yaml에 앱 버전(버전이름+코드)을 업데이트 한다. 내가 속한 회사에서는 코드를 bu

OAuto 2.0은 Facebook, Google과 같은 애플리케이션이 HTTP 서비스에서 사용자 계정에 대한 제한된 액세스 권한을 얻을 수 있도록 하는 인증 프레임워크이다. 사용자 인증을 사용자 계정을 호스팅하는 서비스(Resource)에 위임하고 타사 응용 프로

🌼 Big O 표기법 Big O 표기법은 알고리즘의 성능을 수학적으로 표현해주는 표현법이다. 해당 표기법을 사용하면 알고리즘의 시간, 공간 복잡도를 표현할 수 있다. 다만 은 알고리즘의 실제 Running time을 재기 위한 목적이 아니므로 🌻 Constan

🌼인터넷 상의 수많은 컴퓨터를 식별할 수 있는 방법? 인터넷상에 있는 장치들은 IP(Internet Protocol Address)를 할당받는다. IP 주소는 인터넷에 연결된 장치들을 식별할 수 있도록 해주고, 인터넷상의 다른 장치들이 특정 장치를 찾을 수 있도록

🌼 SOLID 원칙 로버트 마틴이 2000년대 초반에 명명한 객체 지향 프로그래밍 및 설계의 다섯 가지 기본 원칙을 마이클 페더스가 두문자어 기억술로 소개한 것이다. 프로그래머가 시간이 지나도 유지 보수와 확장이 쉬운 시스템을 만들고자 할 때 이 원칙들을 함께 적용

프로그램이 메모리에 올라와 실행중인 상태를 프로세스라고 한다. 여러 프로세스를 돌리는 작업은 동시적, 병렬적 혹은 이 둘의 혼합으로 이루어 진다.동시성(Concurrency): 프로세스 하나가 여러개의 작업을 돌아가면서(Context switching) 작업을 조금씩

Medium의 Learning Flutter’s new navigation and routing system이라는 글을 일부 번역하여 정리한 글입니다. 상세한 구현 로직 및 사용방법은 원문 글에 자세히 나와있습니다. Navigator 2.0은 플러터 서비스가 브라우저

. function: 조건문/반복문 등의 형태로 작성된 코드를 함수화하면 몇 가지의 수정만으로 전체 코드를 손쉽게 바꿀 수 있고, 손쉽게 유지/보수할 수 있다. . argument/parameter: 함수의 입력값과 매개변수를 의미한다. 아래 코드에서 argument는