전체 글176

• 

  ReactNative 개발, 어떻게 시작하면 좋을까? 서론 대상독자 React 개발을 경험이 있으나, 처음 React Native(이하 RN)으로 앱 개발을 하려는 프론트엔드 개발자 학습목표 리액트와 RN의 차이점을 알고 그 차이가 어디에서 비롯되는지 이해한다. 네이티브 앱과 RN의 차이점을 알고 RN의 한계점에 대해서 이해한다. RN 개발환경을 이해하고 상황에 맞게 능동적으로 선택할 수 있다. Expo와 React Native Init 간 차이점을 알고 장/단점을 설명할 수 있다. 본론 리액트와의 차이점 RN을 활용하면, 리액트에서 자주 활용했던 jsx 문법, 라이프사이클 함수, react hooks, 함수형/클래스형 컴포넌트 등을 활용할 수 있습니다. 그래서 공통점을 언급하는 것보다는 차이점에 대해서 중점을 두고 설명해보려 합니다. 웹이 아닌 앱 개발에.. Framework/React & RN 2021. 12. 29.

• 

  IOS Chrome, Safari에서 Smooth Scroll이 안될 때 해결법 본론 글이 짧으므로, 본론만 이야기하겠습니다. html { scroll-behavior: smooth; } CSS로 간단하게 smooth-scroll 효과를 위와 같이 줄 수 있습니다. document.getElementById(아이디).scrollIntoView({ behavior: 'smooth', }); 혹은 위의 예제처럼 ScrollIntoView 함수를 사용하여 해당 영역으로 이동시킬 수 있습니다. 그리고 Scroll option으로 smooth를 주면 부드럽게 스크롤링이 되는데요. 문제는 이 옵션이 IOS Chrome, Safari에서는 지원되지 않는다는 점입니다. (아래 참고 링크를 통해 확인할 수 있습니다.) 그래서 a 태그를 누르면 페이지가 깜빡이듯 페이지 깜빡임은 물론, smooth s.. 기타 2021. 12. 27.

• 

  [JavaScript] 자바스크립트에서 2차원 배열을 선언하는 방법 서론 대상독자 자바스크립트로 이차원 배열을 선언하고자 하는 개발자 오늘의 학습목표 자바스크립트에서 2차원 배열을 선언하는 방법을 알고, 이를 활용할 줄 안다. 본론 자바스크립트에서는 다른 언어와는 다르게, 이차원 배열이란 개념이 없습니다. 그러나 이차원 배열 자체를 활용할 수 없는 것은 아닙니다. 오늘은 자바스크립트에서 중첩 배열을 통해, 2차원 배열과 같은 형태를 선언하는 방법에 대해서 알아보도록 하겠습니다. 이차원 배열을 생성하는 방법 자바스크립트에서는 const arr = [][] 혹은 const arr[3][3]와 같은 방법으로 선언해서 사용할 수 없습니다. 따라서 아래와 같은 방법을 따라야 하는데요. 배열에 초깃값을 할당하는 방법 가장 첫번째 방법은 아래와 같이 배열 안에 배열을 넣어 초기화해주.. Language/JS(Node.js) 2021. 12. 25.

• 

  레르나(Lerna)를 활용하여 모노레포를 관리하는 방법 서론 대상독자 규모가 큰 웹 어플리케이션 개발 상황에서 코드 재활용성을 높임으로써 프로젝트를 효과적으로 관리해주고 싶은 프론트엔드 개발자 멀티레포 구조에서 매번 새롭게 코드를 클론하고 prettier나 eslint 등 개발환경을 셋팅하는데 번거로움을 느끼는 프론트엔드 개발자 기존 멀티레포 구조에서의 의존성 관리를 lerna를 통해, 모노레포 구조에서 편한 방식으로 해결하고 싶은 개발자 오늘의 학습 목표 레르나의 역할과 기능에 대하여 이해하고 활용할 줄 안다. 모노레포의 정의와 필요성에 대해서 알고 실제 프로젝트에 적용할 수 있다. 모노레포 환경 아래에서 특정 프로젝트에 필요한 라이브러리를 설치하는 방법에 대해서 안다. 모노레포 환경 아래에서 프로젝트에 필요한 공통 라이브러리를 설치하는 방법에 대해서 안다.. 기타 2021. 12. 23.

• 

  [JavaScript 내장함수 다루기 ⑤] Array.Prototype.pop/push/unshift/shift Array.Prototype.pop 배열의 마지막 인덱스에 있는 값을 제거하고 해당 값을 반환합니다. const arr = [1,2,3]; arr.pop(); // 3 Array.Prototype.push 배열의 마지막 인덱스에 값을 추가하고 배열의 새로운 길이를 반환합니다. arr.push(4); // 3 console.log(arr); // [1, 2, 4] Array.Prototype.unshift 배열의 첫번째 인덱스에 값을 추가하고 배열의 새로운 길이를 반환합니다. arr.unshirt(10); // 4 console.log(arr) // [10, 1, 2, 4] Array.Prototype.shift 배열의 첫번째 인덱스에 있는 값을 제거하고, 제거된 값을 반환합니다. arr.unshift().. Language/JS(Node.js) 2021. 12. 23.

• 

  React 환경에서 서버로 올바른 데이터 전송하는 방법 (with Typescript) 서론 대상독자 데이터를 서버로 전송하기 전에 전송하기 위한 데이터 검증 과정을 추가하려는 프론트엔드 개발자 학습목표 dto를 정의하고 dto에 맞게 데이터가 폼에서 전송 수 있도록 역직렬화 할 수 있다. react-hook-form(이하 훅폼)을 통해, 올바른 형식이 아닐 경우 에러를 띄울 수 있다. 역직렬화된 데이터를 서버로 전송하기 위해, 다시 직렬화할 수 있다. 본론 지난 시간에는 [웹 프로그래밍/기타] - Typescript 환경에서 역직렬화하는 방법을 통해, 서버로부터 받아온 json 데이터를 클래스 형태로 변환하는 과정에 대해서 살펴보았습니다. 이번 시간에는 기본 폼에서 직접 서버로 전송되는 과정과 훅폼을 활용한 데이터 검증 과정을 비교하며, 올바른 데이터가 서버로 전송될 수 있도록 데이터 검.. Language/Typescript 2021. 12. 8.

• 

  Typescript 환경에서 역직렬화하는 방법 서론 대상독자 TypeScript를 활용하여, 서버로부터 전달 받은 json 데이터를 object(class) 형태로 변환하고 싶은 개발자. 학습목표 직렬화와 역직렬화의 필요성에 대해 이해하고 실제 프로덕트에 적용할 수 있다. 데이터 검증 과정을 통해, 웹/앱 어플리케이션에서 네트워크를 통해 전송되는 데이터가 바르게 전달되었는지 확인할 수 있다. 본론 직렬화와 역직렬화의 필요성 오늘은 데이터 전송과 데이터 수신 과정에서 빠질 수 없는 두 요소가 있습니다. 바로 직렬화와 역직렬화입니다. 첫째, 직렬화란 서버로 전송될 데이터를 json 형태로 변환하는 과정입니다. 이는 HTTP 네트워크 상에서 데이터를 전송하기 위해 필요합니다. 둘째, 역직렬화란 서버에서 전달 받은 josn 데이터를 객체 형태(여기선 obj.. Language/Typescript 2021. 11. 30.

• 

  [FE] 프론트엔드에서의 상태관리란 무엇인가? (1) 등장배경과 정의 서론 대상독자 프론트엔드(이하 FE) 상태관리를 처음 접하는 웹 프로그래밍 입문자. 큰 맥락에서 FE 상태관리를 이해하고 싶은 웹 프로그래밍 초급자. 오늘의 학습 목표 웹의 역사와 FE 상태관리의 등장배경에 대해서 이해한다. 상태관리의 정의를 이해하고 활용 방법에 대해서 학습한다. 다양한 상태관리 라이브러리들의 장/단점을 비교할 수 있다. 개발 상황에 알맞게, 상태관리 라이브러리를 선택할 수 있다. 실제 웹 어플리케이션에 필요한 기능을 상태관리를 활용하여 구현할 수 있다. 프론트엔드 상태관리란 무엇이며, 왜 필요한가? FE 개발을 할 때, 가장 중요하게 여겨지는 두 가지가 있습니다. 바로 스타일링과 상태관리인데요, 그래서인지 프론트엔드 개발을 할 때 어떤 상태관리 라이브러리를 사용할 것인지가 화두로 떠오.. Framework/React & RN 2021. 11. 6.

• 

  [Web] Mac에서의 웹 프로그래밍 개발환경 구성과 이해 서론 대상독자 큰 맥락에서 개발 환경을 이해하고 싶은 웹 프로그래밍 초급/입문자. 웹 개발에 익숙하지만 각각 수행하는 역할을 자세히 알고 싶은 중급자. 오늘의 학습 목표 서버와 클라이언트 구조를 파악한다. 기본적인 HTML 구조를 이해한다. HTML 파일과 CSS, Javascript 파일을 연동한다. 웹 서버와 WAS의 차이점을 이해한다. 본론 개발환경 구축하기 (For Mac) Web Browser 웹 프로그래밍 개발환경을 구축하기 위해, 가장 먼저 필요한 소프트웨어는 바로 웹 브라우저입니다. 저희에게 익숙한 크롬, 인터넷 익스플로러 등입니다. 바로 이 웹 브라우저들이 웹 페이지의 문서 파일들을 읽어 사용자가 확인할 수 있도록 화면에 띄워주는 역할을 합니다. 현재 세계에서 가장 많은 점유율을 차지하고.. Language 2021. 10. 17.

• 

  [TypeScript] 타입스크립트 환경 설정하기 학습 목표 오늘은 배워두면 프론트엔드 개발에서 유용하게 활용할 수 있는 타입스크립트 환경설정 하는 방법에 대해서 알아보겠습니다. 타입스크립트에 대해서 구구절절 설명을 늘어놓기보다는 실제 코드로 돌려보며, 어떤 성격을 가진 언어인지에 관해 차차 알아가봅시다. 타입스크립트 설치하고 설정하기 자, 먼저 디렉토리부터 만들어줍시다. 그런 후, 해당 디렉토리에서 npm init 명령어를 통해, package.json 파일을 만들어 줄 것입니다. mkdir testTsc cd testTsc npm init -y 설정이 완료되면 다음으로 넘어갑니다. 타입스크립트를 설치하는 방법에는 두 가지가 있습니다. 로컬 설치, 글로벌 설치. 특별한 경우가 아니라면, 모든 패키지는 되도록이면 로컬로 설치되는 편이 버젼 관리함에 좋기.. Language/Typescript 2021. 8. 5.

• 

  [Storybook] 스토리북 환경 설정하기 (with Styled-component) 서론 웹 UI 개발에 빠질 수 없는 라이브러리가 있다면 바로, 스토리북일 것입니다. 오늘은 스토리북 환경설하는 방법에 대해서 간단히 알아보겠습니다. 대상독자 스토리북을 처음 접하는 프론트엔드 개발 입문자. 오늘의 학습 목표 storybook cli를 통해 리액트에서 스토리북 환경 설정을 하는 방법, 그리고 기본적으로 제공되는 파일들의 기능을 아는 것이 목표입니다. storybook 설정에 대해서 집중해서 알아보기 위해, 자동으로 많은 설정을 해주는 create-react-app 혹은 create-next-app을 사용하지 않았습니다. create-next-app을 사용한 후, storybook cli로 환경설정을 해줘도 같은 결과가 나타납니다. create-react-app와 같이, 이미 부트스트래핑된 .. 기타 2021. 8. 2.

• 

  [웹/앱 아키텍처] 클린 아키텍처란 무엇인가? 서론 아마 프로그래머 분들이라면 한번 쯤 클린코드라는 책을 들어보셨을 것 같은데요, 클린 아키텍처 역시 마찬가지입니다. 오랜 기간 동안, 프로그래머로 일해오신 로버트 C. 마틴 작가님께서 쓰신 책입니다. 제가 알기론 반 세기(!?) 동안 프로그래머로 일하셨다고 해요. 정말 대단하지 않나요? 오늘 다뤄 볼 클린 아키텍처는 소프트웨어 설계 방법론으로 주로 웹이나 모바일 앱의 아키텍처로 자주 활용된다고 합니다. 단순히 프레임워크를 사용할 줄 아는 수준을 넘어, 저를 포함하여 조금 더 체계적이고 소프트웨어를 만들고 싶은 분들이라면 오늘 내용에 주의를 기울여보면 좋은 통찰을 얻어갈 수 있으시리라 생각합니다. 아키텍처? 왜 알아야할까. 소프트웨어 개발자로 일하다보면, 소프트웨어 아키텍처에 관한 이야기와 글들은 평소.. 기타 2021. 6. 24.