Front-End Dev.
-
[React.js] React 소개(wecode)Front-End(Web)/React - 프레임워크(React, Next) 2020. 12. 28. 16:29
3주차 foundation 주차이다. 드디어, React 라이브러리 세션이 시작되었고, 첫 개념에 대한 정립을 해주는 유용한 시간을 마련해주셨다. 🧑💻Session : React 1. Why React? - Web Application의 발전 HTML/CSS/Javascript(DOM, Event) -> jQuery(Method 모음) -> React/Vue/Angular(Framework & Libarary) - Angular, Vue (Framework) Angular : 2010년 Google이 개발한 Framework. Typescript 기반으로 안정적이고 기능이 많으나, 러닝커브가 높다. Vue : 2014년 중국 Evan You 개인이 개발한 Framework. 코드가 깔끔해고 배우기가 쉬..
-
[CodeKata] wecode 3주차 코드카타Algorithm 2020. 12. 28. 14:55
🤔 서론 레플릿으로, 알고리즘을 1일 1문제를 푸는 세션이다. 시작하기에 앞서, 뜬금없지만 코드카타 'Kata' 의 어원이 궁금해졌다. 먼저, Codekata의 뜻은 프로그래머가 연습과 반복을 통해 기술을 연마하도록 돕는 프로그래밍 연습을 의미한다. 여기서 Kata는, 1999년 The Pragmatic Programmer 의 공동저자인 Dave Thomas 가 무술의 일어개념인 Kata로 칭하면서 통용되었다고 👊 12.28(월) / 이중회문 첫 문제라서 간단한 사칙연산을 예상했는데, 생각보다 어려운 문제가 튀어나왔다!! 🤯🤯🤯 📜 문제 twoSum함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요. nums: 숫자 배열 target..
-
[React.js] Hooks - useCallback, useMemoFront-End(Web)/React - 프레임워크(React, Next) 2020. 12. 27. 17:37
기본 프로젝트의 마지막으로, useCallback 훅에 대한 사용이 주어져서 이 글의 포스팅을 시작하게 되었다. 간단히 검색해보니, 이 훅들은 공통적으로 '최적화'의 역할을 담당한다고 한다. 반대로 말하면 필수적이지는 않다는? 최적화의 원리가 되는 'Memoization' 과 여기에 해당되는 위 훅들에 대해 간단하게 정리한 뒤 프로젝트에 돌입하겠다. 📒 useCallback - Memoization 이 필요한 이유? React 컴포넌트가 렌더링(부모 렌더링, state 변경 등) 될 때마다, 내부의 함수들도 새로 선언한다는 단점이 있다. 여기서 state와 무관한 함수들의 재선언을 최소화하여 메모리 낭비를 줄이는 최적화의 목적으로 이 Hooks 들이 사용되는 것이다. - 문법 useCallback 은 컴..
-
[React.js] Hooks - useReducerFront-End(Web)/React - 프레임워크(React, Next) 2020. 12. 26. 04:16
React 미니 프로젝트들을 수행하다보니, useContext, useReducer 사용을 하라는 미션이 주어졌다. 이 개념에 대한 선행학습을 해봤다. 📒 useReducer useContext와 마찬가지로 통합적인 state 관리를 위한 Hooks다. useReducer는 useState의 대체함수로 생각할 수 있다. Redux의 Reducer, Action 과 그 동작성격이 매우 유사하다고 느껴졌다. - 문법 React 공식 사이트의 useReducer 로 카운터를 구현한 예제를 인용했다. const initialState = {count: 0}; function reducer(state, action) { switch (action.type) { case 'increment': return {cou..
-
[React.js] Hooks - useContext (Context API)Front-End(Web)/React - 프레임워크(React, Next) 2020. 12. 25. 20:33
React 미니 프로젝트들을 수행하다보니, useContext, useReducer 사용을 하라는 미션이 주어졌다. 이 개념에 대한 선행학습을 해봤다. 📒 React Context useContext 훅을 공부하기 전에, React의 Context 개념에 대해 우선 이해를 할 필요가 있다. 1. Context 개념 React App은 많은 컴포넌트들로 구성되어있고, 어떤 정보(props 값이나 함수)는 여러 컴포넌트를 거쳐 전달되는 경우가 존재한다. 이러한 정보들을 전역적으로 사용하기 위해 Context에서 이를 관리 및 공유해주며, 이를 사용하기 위한 기능을 Context API라 한다. - 언제 Context를 써야 할까? 전역적(global) 데이터 공유에 특화된 방법으로, 로그인 유저 데이터, 설..
-
[Web] Web 동작원리Environment(개발환경)/Web 2020. 12. 25. 18:12
Web 개발 엔지니어가 된다고 마음먹었지만, 정작 프론트 / 백의 존재여부만 알지 이들이 어떻게 작동하는지는 (req, res) 가 지식의 전부다. 멘토님의 지도가 없는 세션이다보니, 영상과 PPT를 더 몰입해서 공부하고 블로그 포스팅하면서 이번 기회에 확실히 짚고 넘어가야겠다. 🧑💻 Session : How the Web Works 📍About 웹은 어떻게 동작할까? 프론트? 백앤드? 서버? 배포? 어떻게 내가 만든 코드가 서버에 올라가서 남들도 볼 수 있는 것일까? 🚀 What You Will Learn 웹이 어떻게 동작하는지 기본적으로 설명할 수 있다. 배포, 호스팅, ip주소, 서버, url, 프론트, 백앤드 등의 용어를 명확히 이해한다. ✍️ Note 요청 (HTTP 통신요청) - 응답 (we..
-
[HTTP] HTTP 정의, 메소드, 메세지Environment(개발환경)/Web 2020. 12. 24. 15:53
Wecode 세션이었지만, 중요한 개념이기도 하고 강의 중간중간 검색을 통해 내용을 보완해가면서 별도 포스팅을 하였다. 🧐 HTTP란? 웹 상에서 커뮤니케이션을 하는 통신규약. (개발자 도구 Network 탭에 표시됨) HyperText : 문서와 문서가 링크로 연결되어 있음을 뜻함 Transfer : 전송하다(HTML 웹페이지 문서) Protocol : 컴퓨터끼리 어떻게 주고받는지 대한 소통방식 또는 약속 - HTTPS : SSL/TLS 의해 암호화된 데이터를 트랙스액션 (주민번호, 비밀번호 등 민감한 정보 교류에 유리함) SSL(Secure Socket Layer, 보안 소켓 계층) : 웹페이지와 서버(혹은 서버간) 전송되는 데이터를 암호화하여 보안유지하는 표준기술 TLS(Transfer Layer ..
-
[Terminal] iTerm2 설치 및 zsh 개발환경 설정Environment(개발환경)/Linux & Terminal 2020. 12. 22. 21:58
🤔 서론 터미널의 강력한 버전인 iTerm2, 각종 기능확장을 위한 zsh 설정에 대해 배웠다. 단순한 커스터마이징뿐 아니라 자동완성 등 많은 기능 지원 ⚙️ 개발환경 세팅 1. iTerm2 : 터미널 상향버전 2. homebrew : macOS 패키지 관리 프로그램 - brew --version : 버전, 설치 확인 - brew list : 설치된 패키지 리스트 확인 - brew install [프로그램명] : 프로그램 설치 2.1 zsh(지쉘) 설치 - brew install zsh - brew list -> nccurses, pcre, zsh 세 개의 패키지 확인 가능 2.2 ohmyzsh 설치 : zsh 기능 확장, 여러가지 테마 및 플러그인 지원 - ohmyzsh install script 구글..