웹팩에 대해 이해하기 위해 CRA를 사용하지 않고 설정을 해보았습니다 https://www.valentinog.com/blog/babel 을 의역한 글입니다. 오류가 있으면 알려주세요 React, webpack 및 Babel 설정 방법 : 목차 다음 내용을 다룹니다webpack 설치 및 구성 방법Babel 설치 및 구성 방법React 설치 방법두 개의 React 구성 요소를 만드는 법 ( Container / Presentational )번들을 HTML 페이지에 포함시키는 방법webpack dev 서버를 설치하고 구성하는 방법React, webpack 및 babel 설정 방법 : webpack 설정npm 설정 초기화 1npm init -ycs webpack / webpack-cli 설치 1234npm i..

비트맵과 벡터 이미지이미지(그래픽)는 크게 비트맵과 벡터로 구분됩니다.비트맵(Bitmap)은 각 픽셀이 모여 만들어진 정보의 집합으로 레스터(Raster) 이미지라고도 부릅니다. 픽셀 단위로 화면에 렌더링합니다.(렌더링: 컴퓨터가 화면에 그림을 그려서 우리가 볼 수 있게 합니다) 우리가 일반적으로 사용하는 대부분의 이미지가 비트맵 형식입니다. 그림판, 포토샵과 같은 툴로 편집할 수 있습니다.벡터(Vector)는 수학적 정보의 형태(Shape)들이 만들어내는 결과물입니다. 이미지가 가지고 있는 점, 선, 면의 위치(좌표), 색상 등의 정보를 온전히 가지고 있으며 그를 화면에 렌더링합니다. 따라서 좀 더 많은 연산을 해야 하지만, 대신 해상도(픽셀)에 영향을 비트맵 이미지와 달리 해상도로부터 자유롭게 렌더링..

win 단축키 설명 ctrl + F 문자 찾기 ctrl + H 선택한 문자를 다른 문자로 변경 tap 들여쓰기 shift + tab 내여쓰기 ctrl + \ 화면 분할 ctrl + W 분할 된 창 닫기 ctrl + alt + ➡ or ⬅ 분할 된 창으로 이동 shift + alt + down 위에 행 복사 추가 shift + alt + up 아래에 행 복사 추가 약어로 랩핑(Wrap)랩핑할 코드 선택모든 명령 표시 실행 / “Ctrl + Shift + P”(Windows), “Cmd + Shift + P”(macOs)Emmet: Wrap with Abbreviation(Emmet: 약어로 랩핑)를 입력하거나 목록에서 선택(“Enter”)div, span 등의 Emmet 문법(ex: .wrapper, sp..

VS Code 확장 기능(Extensions) 2탄 : https://jcon.tistory.com/180 Korean Language Pack for Visual Studio Code한글화 확장 기능 Prettier가장 대중적으로 쓰이는 코드 포멧터기본 설정 방법 : 컨트롤 + , 를 누른 후 formatOnSave검색 후 체크설정이 완료 되면 저장 시 마다 자동으로 인덴트 등을 잡아준다. 상세한 설정은 다른 포스팅에서 다룰 예정beautify와 같이 쓸 경우 충돌이 나니 둘 중 하나만 사용할 것Beautifybeautify는 코드의 들여쓰기를 정리해주는 확장기능 입니다 설치 후에 키 지정이 필요합니다 기여 탭에 명령 탭을 보면 두가지 메뉴가 보입니다 selection은 선택된 부분의 코드를 정리해주고..

Sublime Texthttps://www.sublimetext.com/상대적으로 가볍고 성능 저하가 적은 편이라고 합니다.무료 Atomhttps://atom.io/깃헙(GitHub)에서 만든 텍스트 에디터입니다. 확장 기능도 충분하고 외국에선 인기가 많다고 합니다. (2018년 깃헙이 MS에 인수되었는데 Atom의 미래는?) Windows에서의 사용은 아쉬운 부분이 많네요. macOS에서는 문서 작업 시 자주 사용합니다. 무료 bracketshttp://brackets.io/어도비(Adobe)에서 만든 텍스트 에디터입니다.Creative Cloud 제품군이 아니고 오픈소스로 풀려 있습니다. Live Preview 기능이 기본으로 제공되는 등 시각적인 결과물을 확인하는데 특화되어 있으나 확장 기능이나 특..

웹 표준이란?웹에서 사용되는 표준 기술이나 규칙을 의미하며, W3C의 권고안 에서 나온 기술들이 여기에 해당합니다이 표준 기술들을 기준으로 웹 브라우저들(크롬, IE, 사파리 등)이 만들어지는데, 브라우저를 만드는 업체(구글, MS, 애플 등)에서 표준 기술을 해석하는 차이, 새로운 기술 삽입 등으로 조금은 다르게 구동되는 브라우저가 생깁니다. 표준화 제정 단계대부분의 경우 표준화 제정 단계의 '권고안'에 해당하는 기술을 표준이라고 생각하시면 쉽습니다 크로스 브라우징이란?조금은 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법 등을 말합니다대부분으 브라우저는 최대한 웹 표준을 준수해서 제작되기 때문에 문제 되는 경우가 적지만 IE(익스..

REST 정리 : REST란? 저번 글에서는 REST에 대해 정리를 해보았습니다 그럼 REST API는 무엇일까요?REST API는 REST 아키텍쳐 스타일을 따르는 API 하지만 오늘날 REST API라고 하는 API들의 대부분이 REST 아키텍쳐 스타일을 모두 따르지는 않습니다(2017년 기준)그럼 REST API는 제약조건들을 다 지켜야하는 것이 아니라 몇개 빠뜨려도 되는 걸까요?그에 대한 답은 모두 지켜한다고 Roy T.Fielding이 말을 했습니다하이퍼텍스트를 포함한 self-descriptive한 메시지의 uniform interface를 통해 리소스에 접근하는 API -Roy T.Fielding 그렇다면 원격 API가 꼭 REST API여야 하는가?시스템 전체를 통제할 수 있다고 생각하거나..

3개월 간의 이머시브 코스를 마치고 나서 코드스테이츠에서 무엇을 배웠는지 정리하기 위해 블로깅을 하려고 한다.우선 코드스테이츠에서 강조하는 것은 자기주도적 학습과 커뮤니케이션 스킬이다. 어떤 개념을 학습 할 때 키워드정도의 도움을 주고 해당 키워드를 통해서 스스로 찾아서 학습하는 방법을 사용 한다. 수강료를 내고 배우러온 입장에서 굉장히 불친절한 방법이라고 생각할 수 있다. 하지만 문제를 만났을 때 스스로 고민해보고 문제를 해결하는 능력을 키워주는 것이 코드스테이츠가 추구하는 방향이다. 만약 고민해보고 안되었을 때에는 어떤 방식으로 문제를 해결하려고 했고 어떤 방법을 썼는지 함께 질문을 하면서 논리적으로 질문하는 방법과 빠르게 문제의 답을 얻을 수 있는 능력을 길러야 한다. 고민하는 시간은 안배를 잘 해..

많이 듣고 많이 사용하는 개념이지만 알 것 같으면서도 모르겠는 REST에 대해 찾아 보던 중 정말 잘 설명한 영상이 있어 정리를 했습니다REST란 REpresentational State Transfer의 약자인데 해석해 보면 대표적인 상태 전송 방법인데... 약자를 보아도 무슨 의미인지 유추하기가 매우 힘듭니다 위키백과에서도 컴퓨터 간에 상호 운용성을 제공하는 것중에 하나라는 설명이 있지만 아직 이해하기에는 부족합니다그래서 접근 방법을 바꾸어 REST가 어디서 부터 나왔는지 알아보도록 하겠습니다. REST의 시작WEB(1991)Q : 어떻게 인터넷에서 정보를 공유할 것인가?A : 정보들을 하이퍼텍스트로 연결한다.표현 형식 : HTML식별자 : URI전송 방법 : HTTP HTTP/1.0 (1994-19..