본문 바로가기

프론트엔드

(20)
[Flutter] Mac + VS Code Flutter 개발 환경 세팅 안녕하세요! 황대성입니다. 이번 포스팅에서는 Mac + Visual Studio Code에서 Flutter 개발환경 세팅 방법을 작성하려 합니다. 포스팅하기 전 준비물이 필요합니다. Android Studio 설치 (https://developer.android.com/studio?hl=ko) XCode 설치 Visual Studio Code 설치 (https://code.visualstudio.com/) 준비물이 모두 준비되었으면 아래의 순서로 진행해주시면 됩니다. Visual Studio Code의 Flutter Extension 설치하기. Flutter SDK 설치 및 환경변수 설정하기. Flutter Doctor 실행하여 미설치되어있는 항목 설치하기. 행복하게 Flutter 코딩하기! 1. Vis..
Visual Studio Code Prettier 간편 설정 안녕하세요! 황대성입니다😀 이번 포스팅에서는 Visual Studio Code에서 Prettier 설정 방법을 다루려고 합니다. 글을 시작하기 이 전 Prettier가 무엇이고? 사용했을 때 장점을 말씀드리려고 합니다. Prettier 란? Prettier란 코드를 정해진 방식대로 자동으로 정렬시켜주는 Code Formatter 입니다. 사용 예시 너무 극단적인 예긴 하지만 가장 명확하게 보여드릴 수 있어서 준비했습니다! 왼쪽의 Tab과 같이 정렬이 되어있지 않은 코드를 Ctrl + S 즉, 저장만 하더라도 오른쪽과 같이 이쁘게 자동으로 코드를 정렬시켜줍니다! Prettier를 써서 얻는 장점은? 코드를 일정한 규칙으로 동일하게 정렬함으로써, 협업할 때 꼭 필요합니다! Prettier 설정 방법 * Wi..
프론트엔드 개발자 면접 질문 #3 * 본 포스팅은 제가 면접을 보면서 사전과제로 받은 사항들을 준비하며 학습한 내용입니다. React란? 페이스북이 만든 사용자 UI 구축을 위한 라이브러리 기본 뷰를 날려버리고 Virtual DOM을 사용하여 처음부터 새로 렌더링 한다. React의 특징 컴포넌트 (Component) 구조 단방향 데이터 흐름 ECMAScript (ES6) JSX 문법 Virtual DOM React의 Life Cycle React Component가 DOM에 마운트되고 해제되는 모든 과정을 React의 Life Cycle이라고 한다. 리액트의 Life Cycle은 다음과 같다. 이 중 Mounting은 다음의 순서를 가진다. 그 다음 순서인 Update는 다음의 순서를 가진다. 마지막으로 Unmounting과 Error..
프론트엔드 개발자 면접 질문 #2 * 본 포스팅은 https://sunnykim91.tistory.com/121 블로그의 정보와 구글링을 통해 작성된 글입니다. 자바스크립트 타입 자바스크립트의 Number Type은 다른 언어들과 차이점이 무엇인가, 왜 하나만 존재하는가? 다른 언어에는 int, double 등 숫자타입의 다양함이 있지만, number는 하나만 있다. 정수만을 위한 타입이 없고, 모든 수를 실수로 처리한다. 자바스크립트의 원시 타입은 몇가지인가? 종류는? boolean, string, number, undefined, null, symbol 이렇게 6가지 종류가 있다. undefined는 선언만 되어있고 값은 없는 상태이며, null은 자료형이 객체이며 빈 값을 의미한다. 실행 컨텍스트 (Execution Context)..
프론트엔드 개발자 면접 질문 #1 * 본 포스팅은 https://sunnykim91.tistory.com/121 블로그의 정보와 구글링을 통해 작성된 글입니다. 브라우저의 렌더링 과정 브라우저 주소창에 주소(ex. www.naver.com)을 입력한다. 해당 주소의 서버를 찾아간다. DNS(실제 서버가 어디에있는지 알고 있는 서버)가 연결해줄 곳을 찾는다. (이 과정에서 주소 앞에 https가 붙어있다면 https 방식으로 통신한다.) 서버의 기본설정이 대부분 index.html로 되어 있어, 서버에서 이 파일을 클라이언트로 보낸다. 브라우저는 텍스트로 이루어진 index.html 파일을 파싱한다. index.html을 읽으면서 DOM트리를 만들어나간다. 중간에 link태그를 만나 css요청이 발생하면, 요청과 응답과정을 거치고 css를..
[React] Map과 Filter를 사용하여 배열 다루기 안녕하세요 황대성입니다😊 이번 글에서는 DeliveryHelper를 개발하면서 공부한 React에서 map과 filter 메서드를 사용하여 배열을 다루는 법을 알아보겠습니다. 일단 먼저 map메서드부터 알아보겠습니다. map() 메서드는 배열 내의 모든 요소 각각에 대하여, 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. 말로는 헷갈릴 수 있지만 예제를 보고 따라 하시면 확실하게 이해하실 수 있습니다. 이제 예시 코드를 봅시다. const array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // expected output: Array [2, 8, 18, ..
[React] Global Style 설정 안녕하세요 황대성입니다😊 이번 글에서는 styled-components와 styled-reset을 사용하여 Global Style 설정 방법을 알아보겠습니다. 사용 방법도 굉장히 쉽고, 한 번 설정해놓으면 효율적인 코드를 작성 할 수 있습니다. 여러분들도 한 번 사용해보셨으면 좋겠습니다. 제일 먼저 초기 세팅을 해줍시다. css 초기화를 위한 styled-reset 설치 createGlobalStyle을 사용하기 위한 styled-components 설치 npm install styled-reset styled-components //or yarn add styled-reset styled-components 이제 실제로 사용해봅시다. styled-components는 local로 동작하기 때문에 Glo..
[React] Redux DevTools 사용하기 안녕하세요, 황대성입니다😁 오늘은 Redux를 조금 더 효율적으로 관리할 수 있는 Chrome 확장 프로그램을 사용해봅시다. 따라하기 굉장히 쉬우니 여러분들도 한 번 사용해보셨으면 좋겠습니다. 제일 처음으로 크롭 앱에서 Redux DevTools를 검색해서 설치합니다. 자신의 프로젝트에서 store를 생성하는 코드에 Redux Devtools Extension을 추가합니다. src/index.js const store = createStore( rootReducer, compose( applyMiddleware(sagaMiddleware), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ) ); 이렇게 하면 Red..