위코드 수강을 마치고 동기분들과 함께 면접준비도 할겸 부족한 개념도 채울겸 스터디를 진행하기로 하였다. 스터디를 준비하며 정리한 내용을 기록 해보자HTML은 Hypertext Markup Language 의 약자이다. HTML이란 웹 페이지를 만들기 위한 언어 이며 웹

2019년 10월 개발이 무엇인지도 모른채 막연히 재밌을것 같다는 생각을 가지고 위코드에 상담을 하러갔었다. 상담을 마치고 설렘과 걱정을 가지고 위코드에 등록을 하였고, 지난 3개월 그 시간을 되돌아보며 글을 쓴다.개발을 알기 전까지 무언가에 흥미를 느끼지 않았다 하고

왓치맨은 특정 디렉토리나 파일을 감시하다가, 변경이; 발생하면, 특정 동작을 실행(trigger)하도록 역할을 한다. 리액트 네이티브는 소스코드의 변경이 발생하면 자동적으로 빌드하고 디바이스 또는 시뮬레이터에 업로드하기 위해 왓치맨을 사용한다리액트 네이티브를 시작하는

redux-saga redux-saga는 thunk 다음으로 많이 사용하는 비동기 작업 관련 미들웨어이다. thunk는 함수 형태의 액션을 디스패치하여 미들웨어에서 해당 함수에 스토어의 dispatch와 getState를 파라미터로 넣어서 사용하는 원리 saga는 조금

미들웨어 리덕스 미들웨어는 액션을 디스패치했을때 리듀서에서 이를 처리하기 전에 지정된 작업들을 실행한다. 미들웨어는 액션과 리듀서 사이의 중간자라고 볼 수 있다. 리듀서가 액션을 처리하기 전에 미들웨어가 액션을 단순히 콘솔에 기록하거나, 전달받은 액션 정보를 기반으로 액션을 취소하거나, 다른 종류의 액션을 추가로 디스패치할 수 있다. 미들웨어 기본구조 ...

암호화 개념정리 암호화에 있어서 가장 먼저 분류되는 방식은 양방향,단방향 알고리즘이다. 양방향 알고리즘은 암호화된 암호문을 복호화 할 수 있는 알고리즘을 의미하며 단방향 알고리즘은 복호화가 불가능한 알고리즘이다. 양방향 알고리즘은 대표적으로 대칭키(비공개키)와 비대칭키(공개키) 방식으로 나누어지며, 단방향은 Hash방식이 대표적이다 대칭키 비대칭키 방식 대...

웹팩 개념잡기 모듈 번들러 모듈 번들러란 여러개의 나누어져 있는 파일들을 하나의 파일로 만들어주는 라이브러리를 말한다. 모듈 번들러 라이브러리는 웹팩(webpack), Parcel 등이 있다. 실습하기 프로젝트 설정하기 디렉터리 만든 후 초기화 필요한 라이브러리 설치 webpack.config.js 파일 작성 entry는 웹팩이 빌드할 파일을 알려주...

WegoPlate Project 1. 프로젝트 소개 mangoplate 클론 (2주) 2. 사용한 기술 HTML/SCSS/JavaSciript/React/ReactHooks/styled-compomnent/redux 3. 나의 역할 레스토랑 상세페이지 탑리스트 페이지 맛집리스트 페이지 4. 프로젝트를 진행하며 잘했다고 느껴지는 부분 라이브러리에 의존하지 ...

Vue.js Vue는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 이다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계되었다. 선언적 렌더링 Vue.js의 핵심에는 간단한 템플릿 구문을 사용하여 DOM에 데이터를 선언적으로 렌더링 할 수 있는 시스템이 있다. 텍스트 보간 이외에도 다음과 같은 엘리먼트 속성을 바인딩할...

리덕스 준비하기 리덕스를 사용할 때 가장 많이 사용하는 패턴은 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하는 것이다. 여기서 프레젠테이셔널 컴포넌트란 주로 상태 관리가 이루어지지 않고, 그저 props를 받아와서 화면에 보여주기만 하는 컴포넌트를 말한다. 컨테이너 컴포넌트는 리덕스와 연동도어 있는 컴포넌트로, 리덕스로부터 상태를 받아 오기도 하고 리...

redux 리덕스는 가장 많이 사용하는 리액트 상태관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 리덕스는 전역 상태를 관리할 때 굉장히 효과적인데 단순히 전역 상태 관리만 한다면 Context API를 사용하는 것만으로도 충분하지만 리덕스를 사용하면 더욱 체계적으로 관리...

StyledComponent 스타일드 컴포넌트는 자바스크립트 파일 안에 스타일을 선언하는 방식이다. 이 방식을 'CSS-in-JS'라고 부르며 스타일드컴포넌트 이모션등이 대표적이다. Tagged 템플릿 리터럴 스타일을 작성할 때 (백틱)을 사용하여 만든 문자열에 스타일 정보를 넣어준다. 여기서 사용한 문법을 Tagged 템플릿 리터럴이라고 부른다. 일반 ...

useReducer 는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook이다. 리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션값을 전달받아 새로운 상태를 반환하는 함수이다. 리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜주어야 한다. 액션값 카운터...

리액트 훅스 Hook는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. useState useState는 가장 기본적인 Hook이며 함수형 컴포넌트에서도 가...

WeSpace Project 1. 프로젝트 소개 spacecloud 클론 (2주) 2. 사용한 기술 HTML/SCSS/JavaSciript/React 3. 나의 역할 로그인 페이지 회원가입 페이지 공간정보 상세페이지 4. 프로젝트를 진행하며 잘했다고 느껴지는 부분 작은 기능들도 놓치고 싶지 않아서 끝까지 파고 들었다. (물론 놓친 기능들이 많다) 백엔드와...

일반 HTML에서 DOM 요소에 이름을 달 때는 ID를 사용한다 리액트 프로제그 내부에서 DOM에 이름을 다는 방법이 바로 ref(reference)개념이다. ref를 사용해야 할 상황은 DOM을 꼭 직접적으로 건드려야 할 때(state만으로 해결할 수 없는 기능들)이다. 특정 input에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 ...

이벤트 핸들링 리액트의 이벤트 시스템은 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷하다. 사용법은 일반 HTML에서 이벤트를작성하는 것과 비슷함 주의사항 이벤트 이름은 camelCase로 작성한다. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. DOM 요소에만 이벤트를 설정할 수 있다. 이벤트의...

인증(Authentication) & 인가(Authorization) 인증과 인가는 API에서 가장 자주 구현되는 기능중 하나이다. Private한 API는 물론이고 Public한 API도 기본적인 인증과 인가를 요구한다. 인증.. 인증은 유저의 아이디와 비밀번호를 확인하는 절차. 인증을 하기 위해선 유저의 아이디와 비밀번호를 생성할 수 있는 기능도 필요...

라이프 사이클은 총 세가지 로 나뉜다. 마운트 업데이트 언마운트 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트 라고 한다. constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드. getDerviedStateFromProps: props에 있는 값을 state에 동기화하는 메서드. render: 준비한 UI를 렌...

HTTP란 HyperText Transfer Protocol 웹상에서 네트워크로 서버끼리 통신을 할때 규정해놓은 통신형식 또는 통신 구조이다 프론트앤드 서버와 클라이언트간의 통신에도 사용되며 백앤드서버와 프론트앤드서버 통신에도 사용된다. 통신방식 HTTP는 기본적으로 요청/응답 (request/response) 구조이다. 클라이언트가 HTTP request...