Front-End
-
[Swift] Swift 문법 - (1) Variables, ConstansFront-End(Mobile)/iOS & Swift 2022. 1. 5. 03:26
Swift 관련된 다양한 좋은 국어 강의들이 존재하였다. (야곰님, 개발하는 정대리님 등등..) 하지만, 깔끔한 커리큘럼과 최신버전(Swift5) 기반의 강의를 찾다 보니 유튜브 iOS Academy의 영문 강의가 최적이라 생각했다. https://www.youtube.com/watch?v=xKf6iNilRYI&list=PL5PR3UyfTWvfacnfUsvNcxIiKIgidNRoW&index=2 해당 강의와 다양한 글들을 기반으로, Swift의 각 문법을 나름대로 정리해서 블로그 포스팅을 진행해보겠다! 📙 변수와 상수 (Variables & Constants) Swift의 첫 문법으로, 프로그래밍 언어의 시작점이라고 할 수 있는 상수와 변수에 대해 알아보겠다. 0. Naming Rules 다른 프로그래밍..
-
[Swift] 나의 3번째 프로그래밍 언어, SwiftFront-End(Mobile)/iOS & Swift 2022. 1. 4. 02:40
🤔 서론 정말 오랜만에 개발 툴이 아닌, 새로운 언어를 공부하게 되었다. (초심으로 돌아간 기분 🤩🤩) 2022년 올해부터 앱 개발을 조금씩 병행하기로 마음을 먹었고, 다양한 선택지를 고민하다가 iOS 네이티브 언어인 Swift를 선택한 것이다. 다른 선택지들을 고민하고 포기했던 이유들은 아래와 같다. React-Native : JS와 React를 다루는 나에게 매력적인 선택지였다. 하지만, Flutter나 Native 언어에 비해 매우 부족한 퍼포먼스와, 크로스 플랫폼 시작에서 Flutter에게 역전되는 트렌드, Facebook의 지원 축소 등이 이유가 되었다. Flutter : 크로스 플랫폼(1개 소스코드로 Android, iOS 2가지 앱을 개발) 시장에서 가장 핫한 언어. Google이 서비스하며..
-
[Recoil] 전역 상태관리 라이브러리 - Recoil 정복기Front-End(Web)/React - 라이브러리들 2021. 12. 30. 01:04
🧐 서론 굉장히 오랜만에 쓰는 서론인 것 같다!! 그만큼 이 글의 길이가 짧진 않을거라는 마음의 준비 차원일지도? 오랜만에 React를 복기하고 Typescript를 숙달할 겸 예전에 면접과제로 받았던 메모장 어플을 다시 만들어보았다. 전역 상태관리 라이브러리 역시 사용하고자 했고, 이전 Redux의 불필요한 구성과 복잡한 원리에 학을 뗀지라.. 페이스북에서 출시한 React 전용 전역 상태관리 라이브러리인 Recoil을 이번 기회에 학습 & 사용해보고자 결심했다! 우선, 두괄식으로 결론을 내리자면, 내가 앞으로 React 프로젝트를 작업한다면 왠만하면 Recoil이다! 그만큼, Redux처럼 다양한 구성(action, reducer 등)을 할 필요가 없으며, 특히 비동기 요청이 매우 심플하다. (Red..
-
[React Router/lib.] React Router v6Front-End(Web)/React - 프레임워크(React, Next) 2021. 12. 14. 22:55
오랜만에 React 학습을 진행하는데, React Router가 6버전이 출시되었다고 한다. 기존에 사용하던 문법들이 일부 수정된 것을 감안하여, 이를 한번 훑고자 짧게나마 포스팅을 적는다. 💙 개요 React Router 6버전은, 기존의 5버전에 비해 React 최신문법에 걸맞도록 업데이트 되었다고 공식문서는 소개한다. 특히, React Hooks가 적용되었기에, 이를 사용하려면 React v16.8 이상을 우선 설치해야하며, 5 -> 6버전으로 마이그레이션을 진행하면 된다. React Router 6버전은 번들 사이즈가 5버전에 비해 약 70%가 감소하였으며, 이는 App 빌드시 큰 이점이 될 것이다. 💙 주요 변경사항 1. ➡️ 로 변경 요소들을 포함하는 로 Wrapper 명칭변경 는 compon..
-
[Nuxt.js] Nuxt 학습기 - (4) Store, asyncData & fetchFront-End(Web)/Vue 2021. 11. 30. 02:28
Nuxt 학습기의 4번째 시리즈는 이전에 정리하지 못한 Nuxt.js의 주요기능들이다. Nuxt.js 역시 Vuex Store를 사용할 수 있으며, SSR의 핵심이라 할 수 있는 서버에서의 최초 비동기 요청 메서드인 asyncData, fetch 등을 학습해보고자 한다. 📗 Store (Vuex) Nuxt.js 역시 Vue와 같이 Vuex Store 전역 저장소를 패키지에서 기본적으로 제공한다. 특정 규모 이상의 프로젝트는 보통 전역상태가 필요하며, 세션 정보나 복수의 페이지에서 필요하는 공통 데이터를 저장하는 용도로 사용된다. Vuex는 기본적으로 비활성화 상태이다. 그렇기에, 프로젝트 구조에는 /store 디렉토리가 존재하나 이는 빈 폴더로 존재하고 있다. 여기에 index.js 파일을 생성하면 Vu..
-
[Nuxt.js] Nuxt 학습기 - (3) Views, Routing, Middleware & ValidateFront-End(Web)/Vue 2021. 11. 29. 02:17
Nuxt 학습기의 3번째 시리즈부터는 Nuxt.js 토이 프로젝트를 진행하면서 사용해본 주요기능들을 정리해보려고 한다! 기능들이 전체적으로 유기적으로 연결되어 있어, 관련성보다는 Nuxt.js 가이드에서 소개하는 내용들 기반으로 진행해보려고 한다. 📗 Views Nuxt.js 어플리케이션의 기본적인 Viewing 구조를 먼저 짚고 넘어가보자. 1. Document Nuxt.js 어플리케이션 전체에 해당하는 HTML 도큐먼트이자 파일이다. 2. Layouts 모든 페이지에 공통으로 사용되는 레이아웃, 혹은 사용자 정의 레이아웃을 만들 수 있다. Header 등 공통요소를 반영하는데 용이하다. /layouts/default.vue 파일이 기본적으로 생성되며, 여기에 사용자가 커스텀도 적용할 수 있다. 또한,..
-
[Nuxt.js] Nuxt 학습기 - (2) LifeCycle & 렌더링 모드Front-End(Web)/Vue 2021. 11. 28. 19:54
🤔 서론 앞서 언급한, Nuxt.js의 SSR모드는 Universal SSR 이라고 지칭하며, 이는 고전적인 정적 SSR 방식과는 조금 다르다. 새로운 SSR 모드가 반영되게 된 배경으로는, 아무래도 기존 SSR의 단점인 데이터 통신 비효율성과 클라이언트 퍼포먼스를 개선하기 위해 CSR의 장점을 일부 차용한 것이다. 이러한 Universal 모드를 비롯해서, Nuxt.js 에서 지원하는 3가지 렌더링 모드(SPA, Universal, Static) 에 대해 자세히 알아보겠다! 📗 Nuxt.jsLifecycle 마지막으로, Nuxt.js의 각 사이드(Server, Client 및 라우팅 Navigation 시) Lifecycle을 좀 더 구체적으로 알아보고 포스팅을 마무리하고자 한다. 1. Server ..
-
[Nuxt.js] Nuxt 학습기 - (1) 개념 및 설치Front-End(Web)/Vue 2021. 11. 16. 01:06
🤔 서론 일전 Next.js를 공부하면서도, 그리고 회사의 이전 포털 사이트에 Nuxt.js를 사용하면서 SSR 프레임워크 환경을 어느정도 경험했었다. SSR(Server Side Rendering) 개념 자체가 이슈인 만큼, 학습뿐만이 아닌 다양한 경로(유튜브 등)를 통해 이를 접해왔었다. 회사의 리뉴얼 버전 코드에선 팀장님께서 Vue를 활용한 임의의 SSR 환경을 구성해주셨고, 여기서 역시 Nuxt와 유사한 개발경험을 해볼 수 있었다. (head 프로퍼티, asyncData 등) 이러한 개념들을 근본적으로 Nuxt.js 환경에서 개발해보고, 또 이외의 다양한 기능들을 학습해보고자 오픈API를 활용한 간단한 Nuxt.js 토이 프로젝트를 진행하였다. 이후 포스팅에선 Nuxt.js에서 활용한 주요 기능들..