TIL

👉이번 공부를 통해 prototype, proto에 대한 개념이 조금은 잡힌 것 같다. 하지만 아직도 this, datastructure에 개념이 완벽하지 않은 것 같아 좀더 공부하려 한다. 그리고 개념은 이해해도 아직 코드로 작성하는 것에 어려움을 많이 느낀다...

👉처음으로 알고리즘 문제를 접해봤는데, 머리 속에서는 접근방식과 이렇게 하면 될 거 같은데 라는 생각이 많았지만, 정작 코드 구현을 하는데 많이 부족함을 느꼈다.. 레퍼런스를 찾아보고 코드를 한번더 작성해보는 공부해봐야겠다. 👉HTML과 CSS 관련 과제가 있었는데, 제대로 작업하지도 못했다

👉inheritance pattern 에는 >#### functional | functional-shared | prototypal | pseudoclassical >#### 차이점 및 문법 👉ES6 변수 선언 const를 기본으로 사용 변경이 될 수 있는 변수는 let을 사용 var는 사용하지 않는다. let block (function, for, ...

👉Backtracking 모든 경우의 수를 전부 고려하는 알고리즘. 일종의 트리 탐색 알고리즘. 구조적으로 깊이우선탐색(DFS)을 기반으로 한다. 즉, DFS의 구조를 적용할 수 있는 문제에 적용될 수 있다. > #### 어떤 노드의 유망성을 점검하고 유망하지 않으면 그 노드의 부모 노드로 돌아간 후 다른 자손의 노드를 검색하는 것. 즉, 스택에 자식노드...

👉 Browser 대표적인 터미널 ex) 크롬, 웨일 👉 Client >터미널의 역할을 수행하는 컴퓨터, 사용자 입력을 주로 수행, 서버에 대한 응답을 화면에 표시 Messaging patterns Request-Response : 대표적으로 HTTP가 사용하는 메시징 패턴, 보통 동기적으로 작동하며, 연결이 열리면 응답이 전달될때까지 기다리거나, t...

👉HTTP 메소드란? 클라이언트와 서버 사이에 이루어지는 요청(Request)과 응답(Response) 데이터를 전송하는 방식 1) HTTP 요청 헤더 포맷 클라이언트에서 서버로 보내는 메시지이며, 아래와 같은 구조 [Request Line] [ Header ] [(white space)] [ Body ] 2) HTTP 응답 헤더 포맷 서버가...

👉Toy - commonCharacter > Error --> Extra Credit: should return common characters between more than two strings 👉Destructuring assignment 👉spread syntax

👉 Toy - treeDFSelect > Extra Datastructure study 👉 React Eventhandler 👉 lifting state up / Mount > ### componentDidMount >>componentDidMount()는 컴포넌트의 결과물이 DOM에 mount된 직후 실행되는 메소드. 보통 다음과 같은 경우에 사용...

👉 url & API youtube search url 👉 fetch 비동기적 일을 할 경우 componentdidMount에서 실행 > ### ComponentDidMount > 👉 lifeCycle 실행 순서 참고 문서 : React 공식 문서

👉 React의 onChange > input 태그에 onChange를 사용할 경우 키 입력 시마다 발생 해결해야하는 점 : 키 입력 시마다 검색이 되기 때문에 검색어가 완성이 될때 검색이 될 수 있도록 수정 or 버튼 클릭시 검색하도록 수정 필요 ✔ dangerouslySetInnerHTML 문제 ✔ React에서의 이벤트핸들러

👉 Todolist side-project >todolist side project 진행을 하고 있는데, 처음 시작할 때 프로젝트 구조를 생각하는 것이 어렵고, 어떤 component로 구성할지가 어려운 것 같습니다. 🔨 React-Router 여러 화면이 구성된 웹 어플리케이션을 만든다면 필수적인 라이브러리이며, React-native에도 사용 가능...

👉 2일간 처음으로 혼자 진행한 Todolist를 완벽하게 완성하지 못했습니다. 진행하면서 많은 레퍼런스를 찾아보고, 배운 것을 적용해보려고 노력했지만, 생각한대로 되지 않아 답답함을 많이 느꼈다.....Todolist.....

👉 NodeJS : Javascript를 기계어로 컴파일 해주고, NonBlocking으로 속도가 빠르다 Non-Blocking : Input/Output 작업이 진행되는 동안 유저 프로세스의 작업을 중단시키지 않는 방식 Node core modules : 따로 설치하지 않아도 node 내에 존재하는, 번들링되어 있는 모듈 fs / http / u...

👉 RESTful API 분산 시스템 설계를 위한 아키텍처 스타일 ( 아키텍처 스타일이라는 건 제약 조건의 집합) 따라서 RESTful API는 REST 아키텍처 원칙을 모두 만족하는 API > REST와 RESTful은 엄격하게 다른 의미 👉 필요한 이유 R

👉 Package.json key | value 형태 --save 명령어 : package.json 에 저장 --> dependencies에 저장 자동으로 파일변화 감지해서 node를 다시 재시작해주는 방식 : nodemon nodemon 설치 : npm install nodemon --g ( - g : global 설치 ) 👉 URL �...

👉 서버사이드 렌더링 & 클라이언트 사이드 렌더링 > 모바일의 시대에 등장한 클라이언트사이드렌더링 Single Page Application(SPA) > SPA는 최초 한번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 애플리케이션 > 전통적인 웹 방식(SSR)은 서버사이드 렌더링 방식이다. 즉, 브라우저에 나타나는 형태 그대로를 HTML로 ...

👉 CallBack 비동기 처리 방식 중 하나이다. > 문제점 : Callback hell 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제이다. 콜백안에 콜백을 계속 무는 형식으로 이러한 코드 구조는 가독성이 떨어지고 로직을 변경하기 어렵다. > > 해결방법 : Promise나 Async를 사용하는 방법 Callback exam...

👉 webpack & bundler(Client-side Dependenies) > #### webpack : bundling tool로서, create-react-app의 표준 번들러이며, 가장 대표적인 번들러 > #### bundler : 지정한 단위로 파일들을 하나로 만들어서 요청에 대한 응답으로 전달할 수 있은 환경을 만들어주는 역할 👉 Par...

👉 Databases > #### Goal ✔ > 1. database 의 이해 > 2. database management system(DBMS)가 무엇인지 이해 > 3. SQL 기본 query문 사용 > 4. Schema의 설계 방법과 나은 방향성을 고안 > 5. 서버와 클라이언트 사이에서 데이터를 주고 받은 데이터를 database에 저장 🔨 ...

👉 SQL 생성시 사용되는 문법(CRUD) SHOW DATABASES : 데이터베이스 정보 보기 CREATE DATABASE testDB : 데이터베이스 testDB 데이터 생성 DROP DATABASE testDB : 데이터베이스 testDB 데이터 삭제 CREATE TABLE Customers : 데이터 안 테이블 생성 DROP TABLE Cust...

👉 MVC pattern : 비지니스 처리 로직과 사용자 인터페이스 요소를 분리시켜 서로 영향없이 개발 하기 수월하다는 장점 Model : 애플리케이션이 '무엇'을 할 것인지를 정의, 처리되는 알고리즘, DB, 데이터 등 View : 화면에 무엇인가를 보여주기 위한 역할을 한다. Controller 하위에 종속되어, Model이나 Cont...

👉 Cookie와 Session을 사용하는 이유 ? > Http의 기능적 특성 때문이다. Connectionless와 Stateless > - Connectionless : 클라이언트가 서버에게 요청(Request)을 보내면, 서버는 클라이언트에게 응담(Response)를 한 후 바로 접속(연결)을 끊어 버리는 특성 > - Stateless : 서...

👉 Crypto hash 란 ? ​ : 해시(hash)란 단방향 암호화 기법으로 해시함수(해시 알고리즘)를 이용하여 고정된 길이의 암호화된 문자열로 바꿔버리는 것을 의미 해시함수(hash function)는 임의의 길이의 데이터를 고정된 길이의 데이터로 매핑하는 함수이다. 이때, 매핑 전 원래 데이터의 값을 키(key), 매핑 후 데이터의 값을 해시...

👉 Token 기반 인증 왜 토큰을 사용하는가? > 서버 기반 인증의 문제점 > 1. 세션 : 유저가 인증을 할 때, 서버는 이 기록을 서버에 저장을 해야한다. 이를 세션이라고 부른다. 대부분의 경우엔 메모리에 이를 저장하는데, 로그인 중인 유저의 수가 늘어난다면? 서버 렘이 과부화 가능성, 그를 위해 세션을 데이터 베이스에 저장한다면? 이 또한 유저의 ...

👉 React-router 👉 react 절대 경로 설정

👉 CORS > 도메인 또는 포트가 다른 서버의 자원을 요청하는 매커니즘. > 이때 요청을 할때는 cross-origin HTTP에 의해 요청. > 하지만 CORS 같은 상황이 발생 하면 외부서버에 요청한 데이터를 브라우저에서 보안목적으로 차단하기 때문에, 정상적으로 데이터를 받을 수 없다. > ex) localhost:3000에서 react를 실행하였...

👉 백엔드 개발 - users, cafes, comments db schema - express 기본 서버 구축(MVC pattern) - 서울 지도 api 👉 Express-generator - 👉 Sequelize CLI : Sequelize는 Node.js에서 사용할 수 있는 ORM : Sequelize CLI는 명령...

👉 Git workflow : 2주동안 진행되는 프로젝트가 개인 솔로 프로젝트가 아니고, 단체 프로젝트이기에 git을 통한 프로젝트 관리의 방법 또한 배우게 되었다. 처음엔 많이 복잡해보이지만, commit하기전에 git 위치를 확인하고 해야할 것 같다. image.png - 👉 2weeks project 포지션 변경 ...

👉 Git GUI Kraken 사용 GUI 기반으로 Git을 다룰 수 있는 툴 중에서 Kraken을 이용

👉 Typescript 함수 > 매개변수(parameter)의 타입 > : 매개변수의 경우, 변수의 타입을 표기할 때와 마찬가지로 매개변수 뒤에 콜론(:)을 붙이고 타입을 적는다. (param1: number) > 반환값(return value)의 타입 > : 반환 타입은 매개변수 목록을 닫는 괄호())와 함수 본문을 여는 여...

👉 Redux A predictable state container for Javascript apps 상태관리 라이브러리. 리덕스를 사용하면, 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있다. 또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달...

🧨 Apollo Apollo는 Client, Sever 라이브러리, 캐싱 및 쿼리 분석도구를 제공 REST API는 Redux를 대체하는 GraphQL / Apollo graphql을 기반으로 한 상태관리 플랫폼. 클라이언트에서 graphql을 사용하여 데이터를 가져오는 UI를 만들 때 사용하기 좋다. > - apollo-boost : Apollo...

👉 코드스플리팅 > ​ 개발을 하게 되면, 하나의 파일에 모든 로직들이 작성되게 된다. 그렇게 되면, 프로젝트의 규모가 커질수록 파일 용량도 커지기 때문에, 인터넷이 느린 환경에서는 페이지 로딩속도도 느려질 수 있다. > > ​ 코드 스플리팅을 하게 되면, 지금 당장 필요한 코드가 아니라면 따로 분리시켜서, 나중에 필요할 때 불러와서 사용 할수 있다. ...

👉 Higher - order Component (HOC) : 하나의 함수인데, 함수를 통하여 컴포넌트에 우리가 준비한 특정 기능을 부여한다. > 반복되는 코드를 없애기 위해서 하나의 함수를 작성한다. HOC의 이름을 만들땐 with__ 형식으로 이름을 짓는다. HO

스크롤 위치 값 가져오기window.scrollYdocument.scrollingElement.scrollTopdocument.documentElement.scrollTopdocument.querySelector('html').scrollTop: 현재 스크롤바의 위치

: 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고, 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법장점1\. 코드 재사용이 용이하다2\. 유지 보수가 쉽다3\. 대형 프로젝트에 적합 : 클래스단위로 모듈화시켜서 개발

: 파일 시스템 기반의 라우팅 기능을 제공

Redux Aciton type 정의 Ducks 구조 : Redux 공식 문서에서는, ActionType, Action, Reducer이 3가지를 따로 다룬다. 하나의 액션을 추가하려면 3개의 다른 파일들을 수정해야한다. 이에 따라 Ducks 구조에는 Reducer파

CDN / Polyfill

Container Presenter Pattern

Why Docker ?

Redux-thunk

APM이란 ? : APM(Application Performance Management)은 웹 어플리케이션, 서버 시스템 등의 성능을 관리하는 솔루션

CSS : CSS를 작성하게 될 때 가장 중요한 점은 중복되는 클래스명 생성하지 않기

React Ref : React Ref는 특정한 DOM 노드, 혹은 컴포넌트 인스턴스에 reference를 걸어주는 것이다. Ref를 통해서 render 메서드에서 만든 DOM 노드나 React 요소에 접근해서, 값을 얻거나 수정할 수 있다.

render 함수가 반드시 존재해야 한다.state 의 사용이 가능하다.lifecycle API의 사용이 가능하다.클래스형 컴포넌트에 비해 선언하기가 편하다.메모리 자원을 클래스형 컴포넌트에 비해서 덜 차지한다.빌드 후 배포시에 결과물의 크기가 작다.코드가 길고 복잡하

: img 태그에 background-image 삽입시 outline이 삭제되지 않아서 해결방법

: React Native에서 많은 양의 데이터를 출력할 때 사용하는 컴포넌트로서 모두 데이터가 화면을 벗어났을 때에 Scroll이 생성된다는 공통점이 있지만, 사용 용도에 차이가 있다.: 데이터가 화면을 벗어났을 때 단순히 Scroll을 생성하여 사용자와의 상호작용(

RN 0.63.0Xcode에서 빌드시 다음과 같은 에러가 발생한다.'folly/gen/String.h' file not found다음 명령어를 이용해서 Xcode에 남아있는 cahce를 삭제해주고 나니 빌드가 성공했다.참고 : https://github.com

: 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다. : flexbox는 복수의 자식 요소인 flex item과 그 상위 부모 요소인 flex container

: 기존 <Route>로 사용되지 않은 컴포넌트에서 match, location, history 객체에 접근하려면 withRouter HOC로 컴포너트를 감싸줘야 했다. v5.1 부터 useParams hook이 추가되면서 match.params 객체에 접근할 수

오류 검사해야 하는 장소외부의 입력값이 들어 올때 매개 변수 값으로 받은 값 검사함수에서 리턴값을 검사: 아직 개발 경험이 부족하여 백엔드와 통신에서 항상 데이터가 온다고 가정을 하고, 코드를 작성했던 습관이 있었다. 하지만, 그러한 습관으로 인해 데이터 연결이 잠시

[ Document ]

| 또는 () 그룹 \[] 문자셋, 괄호안의 어떤 문자든\[^] 부정 문자셋, 괄호안의 어떤 문자가 아닐때(?:) 찾지만 기억하지는 않음? 없거나 있거나\* 없거나 있거나 많거나\+ 하나 또는 많이{n} n번 반복{min, } 최소{min, max} 최소 그리고 최대\

Animated.ImageAnimated.ScrollViewAnimated.TextAnimated.ViewTiming : 시간이 지남에 따른 값을 애니메이션한다.Spring : 간단한 스프링 물리 모델을 제공한다.Decay : 초기 속도(initial velocity)

Recoil을 사용하면 atoms (공유상태)에서 selectors(순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다. Atoms는 컴포넌트가 구독할 수 있는 상태의 단위. Selectors는 atoms 상태값을 동기 또는

: Selector는 atoms나 다른 selectors를 입력으로 받아들이는 순수 함수다. 상위의 atoms 또는 selectors가 업데이트되면 하위의 selector 함수도 다시 실행된다. 컴포넌트들은 selectors를 atoms처럼 구독할 수 있으며, sele

react native ios는 기본적으로 http통신이 되지 않는 이슈가 있다.하지만, info.plist에 추가해주면 http통신이 가능하다.

CodePush는 마이크로소프트의 Visual Studio App Center에서 제공하는 서비스 중 하나로, 클라우드 기반의 앱 원격 업데이트 서비스이다.원리는 git과 유사하다. git은 코드를 수정하고 우리가 터미널을 통해 수정한 코드를 커밋하고 우리의 git 서

m2 pro 에서 Ignite로 시작한 React-native프로젝트에서 채널톡 설정시 xcode 에서 rosetta를 사용해서 하라는 팝업 노출 현재는 rosetta를 이용해서 빌드할 수 밖에 없는 구조android 설정시