Front-End
-
[Javascript] ES6 이후 - (1) ES2016, ES2017, ES2018Front-End(Web)/Javascript 2022. 2. 8. 19:37
이전 포스팅에서, 최근 Javascript의 문법이 격변했던 ES6(ES2015)에 대해 정리한 적이 있다. (포스팅 링크 : https://abangpa1ace.tistory.com/146?category=910462) [Javascript] ES6(ES2015) 🧐 서론 드디어, 내가 이전부터 포스팅하고 싶었던 Javascript의 ES6 문법이다! 나는 2020년에 Javascript를 처음 공부했고, 오히려 ES6 문법을 당연하다는 듯이 사용하게 된 뉴비 중 한명이다. 😚😚😚 abangpa1ace.tistory.com 이 당시에, Javascript 문법에 많은 수정과 추가가 진행되었으며, 이는 컴파일링이 필요할 정도로 호환성 문제가 계속해서 대두되었다. (통상 IE) 이 포스팅은, 2015년 E..
-
[React] Portal (포탈), Modal 구현하기Front-End(Web)/React - 프레임워크(React, Next) 2022. 2. 6. 16:08
회사에서 선배와 React로 모달 구현에 대해 고민하다가 알게된 내용이었다. 우리 회사 프로젝트는 Vue를 사용하기 때문에, 플러그인(this.$modal) 메서드를 통해 루트에 모달 컴포넌트를 주입, 삭제해서 표현한다. 하지만 React의 경우엔 어떻게 구현되는지 몰랐으며, 전역모달이 구현되는 영역에 Context API를 적용하면 되나 이 영역들이 리렌더링된다는 단점이 있었다. 그렇기에 전역상태를 통해 모달을 on/off 하는 방법을 찾아봤으며, 이 때 React의 Portal 기능을 통해 좀 더 효율적인 구현이 가능했다. 💙 Portal 이란? React 공식문서에 따르면, Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법이라고 소개하고 있다...
-
[Swift] Swift 문법 (6) - 조건문(if, switch)Front-End(Mobile)/iOS & Swift 2022. 1. 29. 00:15
이번 포스팅은 Swift의 조건문(Conditionals) 에 대해 알아보려고 한다. 조건문은 더욱이 여타 프로그래밍 언어와 많이 다르지 않다. 상대적으로 난이도도 어렵지 않은 내용이라, 간단한 포스팅으로 정리해보겠다! 📙 if 문 if문은 조건문에서 가장 흔하게 볼 수 있는 형태이다. 특정 조건에서 발생하는 로직을 작성하며, 이외 케이스를 위한 else, 추가조건 분기를 위한 else if 등이 있다. let a: Int = 2 if a < 0 { print("음수!") } else if a = 0 { print("0!") } else { print("양수!") } // 양수! 기본적인 문법은아래와 같으며, else는 이외의 케이스기 때문에 별도의 조건을 설정하지 않는다. if [조건] { // 내부..
-
[CSS/Side Lib.] Tailwind CSSFront-End(Web)/HTML, CSS 2022. 1. 23. 20:20
오랜만에 React에서 사용할 수 있는 Style 라이브러리를 토이 프로젝트와 함께 공부해보고 사용한 경험을 정리하고자 글을 쓴다. 바로, Tailwind CSS(이하 테일윈드) 이다! 많은 사람들이 어느 정도 알고 있는 라이브러리일 것이라 생각한다. 테일윈드는 React뿐만 아니라, Vue, Svelte 등 다양한 프레임워크에서 활용할 수 있으며, 또한 요즘 각광받고 있는 CSS 라이브러리 중 하나이다. npm trends 그래프를 가져와봤는데, 확실히 최근에 출시했음에도 불구하고 많은 Stars와 신속한 업데이트 속도를 보여주고 있다. 이렇듯, 테일윈드가 각광받고 있는 차별점은 아무래도 간단한 싱글라인 스타일이라고 생각한다. className 안에 테일윈드가 제공하는 속성 클래스들, 혹은 본인이 co..
-
[Craco] Craco로 설정하기 (절대경로, Less)Front-End(Web)/React - 프레임워크(React, Next) 2022. 1. 23. 18:45
이전 포스팅에선 Craco가 무엇인지, 그리고 기본적으로 설치하는 방법에 대해 알아보았다. 이번 포스팅은, Craco 익스텐션을 통해 내가 보일러 플레이트에 적용했던 설정들을 기록하는 시간을 갖도록 하겠다. 💙 Craco-alias : 절대경로 설정하기 절대경로는, 모듈들을 참조(import)할 때 경로를 루트(root) 혹은 src로부터 작성하기 위해 설정하곤 한다. 상대경로로 작성된 경로는, 아무래도 가독성도 떨어질뿐더러 파일이 추가되거나 수정될 때 경로추적이 매우 번거롭다는 단점이 있다. tsconfig.json으로 설정하면 경로추적은 가능하나, 컴파일 시 해당경로의 모듈을 찾지 못한다는 에러가 발생한다. 그렇기에, Webpack을 eject해서 경로에 대한 정보를 추가해주어야 하며, 이 번거로움을..
-
[Craco] Craco 란?Front-End(Web)/React - 프레임워크(React, Next) 2022. 1. 18. 03:21
이전에 CRA(Create-React-App)로 React 프로젝트를 생성할 땐 Webpack의 커스텀 필요성을 잘 느끼지 못했다. 하지만, 이번에 Boiler Plate를 제작하면서 추가적으로 설정할 부분들이 생겼다. (절대경로 alias 컴파일, Less Loader) CRA에서는 설정파일이 숨겨져 있고, 이를 추출해서 각 config, babel 등 설정을 적용해야 하는 번거로움이 있기 때문이다. 그렇기에, React에서는 이러한 번거로움과 위험성을 없앨 수 있는 다양한 커스터마이징 패키지들이 존재한다. 오늘은 그 중 하나인 Craco(Create-React-App Configuration Override)에 대해 알아보고, 이후 포스팅에선 실제 적용사례로 이어가겠다. 💙 CRA Webpack 설정..
-
[Swift] Swift 문법 - (3) Class(클래스) & Struct(구조체)Front-End(Mobile)/iOS & Swift 2022. 1. 13. 03:32
이번 포스팅은 이전 Swift의 데이터 타입을 통해 알아본 자료형들(컬렉션, 튜플 등)보다 좀 더 복잡한 자료형이다. 바로, Class(클래스)와 Struct(구조체) 이다. 사실 Javascript를 사용하면서 Class(완벽히 일치하지 않음) 문법을 체험해 볼 수 있었다. 하지만, Struct(구조체)라는 개념은 생소하며, 정적언어인 Swift에선 이 둘이 왜 존재하고 어떻게 쓰이는지 이번 포스팅에서 학습해보겠다. 📙 들어가면서.. Struct(구조체)와 Class(클래스)는 프로그래머가 데이터를 용도에 맞게 묶어 사용할 때 용이한 기능이다. 변수(프로퍼티)와 함수(메서드)를 하나의 패키지에 구조화시켜 사용할 수 있으며, 이를 새로운 사용자 정의 타입으로 추상화하는 개념이다. 특히, 클래스는 객체지..
-
[Swift] Swift 문법 - (2) TypesFront-End(Mobile)/iOS & Swift 2022. 1. 11. 02:36
이번 포스팅은 Swift 언어의 다양한 타입 및 자료형들에 대해 알아보려고 한다. Swift는 기본적으로 정적 타입(변수에 타입을 선언) 방식을 채택하기 때문에, 데이터 타입에 대해 짚고 넘어가는 것이 중요하다. 📙 Data Types (데이터 타입) Swift에서도 다른 프로그래밍 언어들과 유사하게 데이터 타입들을 적용하고 있다. 배열과 객체 같은 것들은 문법은 비슷하나, 명칭과 사용하는 방식들이 언어에 따라 조금씩 달라지곤 한다. 아래 Swift 자료형들을 하나씩 확인해보자! Boolean(불리언) Int(정수), UInt(0, 양의 정수) Float, Double(부동소수) Character(문자), String(문자열) Array(배열 혹은 리스트) Dictionary(객체 혹은 사전형) Rang..