최신글
-
React와 NEXT.js & Firebase를 활용한 CRUD 만들기
서론 해당 지식에대한 소개 React와 Next.js 그리고 Firebase를 활용하여 간단한 CRUD를 만들어보았다. *해당 프로젝트에 사용된 version firebase: v9.9.2, next: v12.2.4, react: v18.2.0 본론 1. CRUD란? 우리가 어떤 소프트웨어를 만들 때 기본적인 데이터 처리 기능인 생성(Create), 읽기(Read), 수정(Update), 삭제(Delete)의 앞글자를 따서 약어로 지칭하는 말이다. 사용자 인터페이스는 해당 기본요소의 기능으로부터 시작된다. 2. Firebase 설정하기 Next에서 Firebase를 만들기 위해서는 먼저 Firebase상에서 프로젝트를 만들어주고 React의 터미널에서 npm install firebase을 입력하여 SD..
2022.08.10
-
useCallback, useReducer, React.memo, React.Fragment의 개념 정리
서론 React Hooks의 개념들중 useCallback, useReducer, React.memo와 React.Fragment의 개념에 대해 공부한 내용을 정리해보았다. 본론 1. useCallback Memoization 기법으로 컴포넌트의 성능을 최적화 하기위해 사용한다. 반복적으로 계산해야되는 값이 있다면 이전의 값을 캐싱해둠으로 해당 값이 또 필요할 때 메모리에서 꺼내서 사용하는 형태이다. useMemo의 경우 인자로 콜백함수를 넣어주면 함수가 리턴하는 값 즉 아래의 thisValue를 Memoization 해준다 useMemo(() => { return thisValue }, [item]) useCallback의 경우 콜백함수 그 자체를 () => { return thisValue } Mem..
2022.07.29
-
2. React, 리스트와 키, 폼
서론 React상에서의 리스트와 Key, 그리고 폼에 관련된 내용을 공부하고 정리하였다. 본론 리스트 목록 표현시 자주 사용하는 List에서 우리는 map과 foreach의 사용을 선택을 하는 경우가 있다. 다음의 예시는 각각 map과 foreach를 사용하는 함수형 컴포넌트이다. #map function ExampleMap() { let numberArray = [1, 2, 3, 4, 5]; let returnValue = numberArray.map((num) => {num} ) return ( {numberArray} {returnValue} ); } #foreach function ExampleForeach() { let numberArray = [1, 2, 3, 4, 5]; let returnV..
2022.07.11
-
1. React 기본
서론 React를 왜 배워야하며, 기본적인 React의 기초 개념에 대해 알아본다. 본론 1. Frontend 개발자는 React를 왜 배워야할까? 웹 프론트엔드 프레임워크로 다양한 기술들이 있는데 Vue, Angular React중 필자가 React로 개발을 배워야 하는 궁극적인 이유를 뽑자면 대한민국 IT 기업들의 프론트엔드 개발자 수요적인 측면을 확인하면 된다. 기업의 수요를 확인해보면 React가 절대 다수이며 이는 2022년기준으로 어떤 채용사이트를 들어가더라도 쉽게 확인할 수 있다. 그리고 대부분의 기업들은 한가지 기술을 선택하면 쉽게 다른 기술로 변할 수 없는 측면이 있다. 따라서 향후 10년간은 게임체인저가 등장하지 않는 이상 React 시장은 견고할 것이라 판단되며 더 많은 기회를 얻..
2022.06.29
-
자주 사용하는 InteliJ 단축키
서론 자주 사용하는 InteliJ 단축키(Mac 기준)를 정리하였습니다. 본론 단축키 리스트 1. 테스트 코드 클래스 빠르게 만드는 단축키 : 클래스 네임 지정후 Option + Enter 2. System.out.prinln 단축키 : sout + Enter 3. public static void manin() 단축키 : psvm + Enter 4. Command + O or Shfit(두번) : 전체 빨리찾기 5. Command + Shift + Enter : 세미콜론 붙이고 아래로 내려감 or 코드 중간에서 다음 행으로 이동 6. Option + Command + V : 자동 인스턴스 네임생성 7. Option + Command + M : 메서드가 없다면 새로운 네임의 메서드 생성 (Extract ..
2021.11.18
-
03. Swift와 데이터 타입
서론 Swift의 타입별칭, 튜플, 컬렉션형, 열거형 타입에 대한 내용을 정리하였다. 본론 3.1 Swift는 왜 safe한 언어일까? 애플은 스위프트를 소개할 때 Safe (안전하고), Fast(빠르며), Expressive(표현하기 좋은) 언어라고 하였다. 그렇다면 무엇을 근거로 Safe하다고 하는것일까? 스위프트는 타입에 굉장히 민감하고 엄격하다. 스위프트에서는 서로 다른 타입의 값을 할당시 컴파일 오류로 알려주기때문에 타입이 다른 값을 할당하는 실수를 줄일 수 있다. 이것을 타입확인이라고 하며 타입확인을 통해 서로다른 타입을 섞어 사용할 때 발생할 수 있는 런타임 오류를 피하는것이 가능해진다. 만약 서로 다른 타입끼리 데이터를 교환하고 싶다면 반드시 타입캐스팅을 거쳐야 하며 값타입의 데이터 교환은..
2021.03.10
