본문 바로가기

전체 글

(73)
2020.07.24. * 아래의 글은 Do Your Best 프롤로그를 먼저 읽으신 후 읽으시기를 권장합니다. 2020.07.24 오늘의 목표 Delivery Helper 개발하기 동기 JS와 Redux에 대한 깊은 지식을 위해 오늘 Delivery Helper를 개발하면서 얻은 지식입니다. [React] Global Style 설정 [React] Map과 Filter를 사용하여 배열 다루기 Api에서 호출한 값들을 다루는 방법을 알려드리고 싶어서 글을 작성했습니다. Container + Presenter 패턴을 사용하시는 분에게 추천드립니다. styled-components를 사용하는 분들이 사용할 수 있는 Global Style을 설정해보셨으면 좋겠어서 글을 작성했습니다. 2020.07.24. 회고 오늘의 목표를 이루었는..
[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..
[React] Redux + Saga, API호출 해보기 * 본 글은 Redux와 React에 대한 기본 지식이 필요합니다 사이드 프로젝트로 택배 조회 서비스를 개발하고 있습니다. 이번 프로젝트에 처음으로 Redux Saga를 도입했습니다. Redux Saga를 사용한 Api 호출을 알려드리고 싶어서 글을 작성합니다. 저는 Delivery Tracker Open Api를 사용했습니다. 목차 기본 세팅 action 작성 reducer 작성 saga 작성 store, middleware 세팅 실제 코드에서 사용해보기 기본 세팅을 해줍시다. Redux와 Redux Saga를 설치합니다. npm install redux redux-saga // or yarn add redux redux-saga 설치를 한 후 action, reducer, saga파일을 작성할 mod..
2020.07.23. * 아래의 글은 Do Your Best 프롤로그를 먼저 읽으신 후 읽으시기를 권장합니다. 2020.07.23 오늘의 목표 Delivery Helper 개발하기 동기 JS와 Redux에 대한 깊은 지식을 위해 오늘 Delivery Helper를 개발하면서 얻은 지식입니다. [React] Redux + Saga, API호출 해보기 [React] Redux DevTools 사용하기 이번 프로젝트에서 Redux Saga를 도입했습니다. Redux Saga를 공부하면서 여러분에게 지식을 나누고 싶어, Api 호출 관련 글을 작성했습니다. 이제 Redux Saga에 입문하시는분들이 읽으셨으면 좋겠습니다😊 2020.07.23. 회고 오늘의 목표를 이루었는가? Delivery Helper 개발하기 2020.07.23...
글로벌 현장학습. 시작부터 취소까지 * 이 글은 미국 실리콘밸리로 3개월 간 진행하는 글로벌현장학습에 관한 글입니다. 안녕하세요, 대구소프트웨어고등학교 황대성입니다😉 이번 글에서는 제가 고등학교 3학년 글로벌 현장학습을 가기위해 준비했던 과정과 이 후 얘기들을 하려고 합니다. 3학년 겨울방학 코로나로 인해 개학이 늦어지고 그래서 집에서 글로벌 현장학습 설명회를 온라인으로 들었습니다. 저는 원래 글로벌 현장학습을 가고싶어했고, 코로나가 심해져도 무조건 간다는 생각을 가지고 있었습니다. 그래서 글로벌 현장학습 1차 신청을 했고, 최종선발 인원 10명의 약 2배인 19명이 지원했습니다. 그 이후부터 온라인으로 영문 이력서, 포트폴리오, 커버레터 작성 강의를 듣고, 작성했어야 했습니다. Job Discription을 보고 제가 원하는 1, 2, ..
스폰지밥(상추) 분양 받았어요🌿 안녕하세요, 황대성입니다😊 어제 7월 22일에 저랑 짱친인 친구가 취업을 해서 현장실습을 하러 나갔습니다. 그래서 친구가 키우던 상추를 저에게 분양해주었습니다. 그래서 스폰지밥 2대 주주가 되었습니다🥰 원래 이 친구의 상추 키우기 블로그 글을 보셔서 상추가 얼만큼 컸는지 궁금하셨던분들은 이제부터 제 블로그에 오셔서 보시면 됩니다! 성실하게 상추가 무럭무럭 자라는 모습들을 올려보도록하겠습니다😁 오늘 아침에 물을 주고 촬영한 스폰지밥의 모습입니다. 진짜 정말 많이 자란 것 같습니다. 스폰지밥이 무럭무럭 자라서 정말 큰 상추가 된다면 어떻게 해야할까요...? 고기랑 같이 맛있게 먹는게 스폰지밥의 대한 예의일까요... 아니면 시들때까지 같이 보살펴주는게 예의일까요... 그 때 맛있는 고기가 있다면 같이 먹도록 ..