코딩게임

undefined, empty, null # 시작하며 리액트로 JS를 사용하여 개발을 진행하다 보면, 생각보다 빈 배열이나 빈 공간에 대한 처리를 해 주어야 하는 경우가 많이 발생한다. 개발 중 화면이 다운되는 대부분의 이유는 이러한 빈 공간 처리를 제대로 해 주지 않았거나, 원하는 내용의 데이터를 받아오기 전에 해당하는 배열의 element를 호출했기 때문이었다. 따라서 오늘은 이러한 배열의 빈 공간 처리에 대해 알아볼 것이다. # 빈 공간, 빈 배열 그렇다면 위에서 언급한 빈 배열과 빈 공간에 해당하는 것은 무엇이 있을까? undefined JS에서 기본형 데이터 타입에 속하며, undefined라는 말 그대로 정의되지 않고 비어있다는 의미를 가진다. 사용자가 명시적으로 지정을 하지 않으면, 비어있는..

async, await # 시작하며 오늘은 리액트를 사용하여 웹 개발을 진행할 때, 유용하게 사용되는 async와 await에 대해 알아보자. 해당 기능을 올바르게 알고 제대로 사용할 줄 알면, 코드에 대한 오류를 큰 폭으로 줄일 수 있고 예상치 못한 변화에 대비할 수 있다. # async, await async / await은 *Promise를 더욱 쉽게 사용할 수 있도록 해 주는 문법이다. 이러한 문법을 사용하기 위해서는, 함수의 앞부분에 async 키워드를 추가하고, 함수 내부에서 promise의 앞부분에 await 키워드를 추가해 주어야 한다. *Promise - JS에서 비동기 처리에 활용되는 객체. 주로 웹 서비스 구현 시 데이터 통신을 위해 활용됨. export const editFaq = ..

image 미리 보기 # 시작하며 회사 내에서나, 학교에서 react 프로젝트를 진행하다 보면 빼먹지 않고 등장하는 기능이 사진 첨부 기능이다. 사진 말고도 다양한 데이터들을 DB에 저장하지만, 사진 첨부는 다른 데이터보다 까다롭다. 또한 사진을 첨부하기 위해서는, 첨부 후 완료를 표시하기 위한 사진이나 사진 이름을 미리 보기로 추가해 주어야 하기 때문에 부가적인 요구사항이 많아진다. 오늘은 이러한 사진 첨부를 위한 미리보기 기능에 대해 알아보자. # 사진 미리보기 앞서 말한 사진을 첨부하는 등의 image를 핸들링하면서 미리보기 기능을 구현하고 싶은 경우가 자주 발생한다. 이미지를 업로드하기 전에 어떤 이미지를 선택했는지 미리 보여주고, 대표 이미지를 설정하거나 필요 없는 파일은 삭제하도록 하는 기능을..

SPA # 시작하며 프론트 웹 개발을 한다면, 한번쯤은 SPA에 대해 들어볼 수 있을 것이다. 하지만 SPA가 무엇이냐? 라는 질문에 선뜻 대답을 하지 못한 경험이 있어, 개인적으로 복습하며 정리해 보려고 한다. 이제는 너무나 당연하듯이 사용하고 있어 웹 개발 자체에 녹아들어버린 느낌이 드는 SPA 개발이란 무엇일까? 전통적인 웹 사이트의 경우에는, 문서 하나에 전달되는 데이터의 양이 많지 않았다. 따라서 어떠한 요소를 한번 클릭했을 경우에, 완전히 새로운 페이지를 서버에서 전송해 주는 방식을 자주 사용했다. 이러한 방식이 문제가 되는 경우는, 점차 웹 사이트가 고도화됨에 따라 한 페이지에 할당되는 용량이 커졌을 때 발생하게 된다. # SPA(Single Page Application) 위의 문제를 해결..

Tailwind CSS # 시작하며 오늘은 현재 프론트엔드 인턴으로서 근무하며 사용하고 있는 Tailwind CSS에 대해 정리해보려 한다. 현재 많은 실무에서 Tailwind CSS를 적극적으로 도입하고 있으며, 다양한 장점들로 인해 개발 속도가 확실히 빨라지는 효과를 경험해 볼 수 있었다. 무엇보다 클래스 이름을 직관적으로 각각 설정하고, 스타일 시트를 옮겨가며 *context switching을 할 필요가 없어서 좋았다. 또한 페이지를 생성한 후, 수정 작업을 진행할 때 코드를 한눈에 파악이 가능할 수 있어 스타일 수정에 시간 단축을 할 수 있었다. *context switching - 현재 진행하고 있는 Task(process, thread)의 상태를 저장하고 다음 진행할 Task의 상태 값을 읽..

React # 시작하며 현재 자바스크립트는 많은 개발자들에게 사용되고 있으며, 웹 애플리케이션에서 핵심적인 역할을 차지하고 있다. 또한 서버사이드와 모바일, 데스크톱 애플리케이션(Slack, Atom, VS Code)에서도 활약하고 있다. 이렇게 확장되는 범위 속에서, 규모가 큰 애플리케이션을 프론트엔드 사이드에서 관리하려면, 다양한 프레임워크(Vue.js, Angular, Backbone.js 등)의 사용이 필요하다. 프레임워크들은 주로 MVC, MVVM 아키텍처를 주로 사용한다. 이와 같은 프레임워크는 공통적으로 애플리케이션에서 사용하는 데이터를 관리하는 영역인 Model과 사용자에게 보이는 부분인 View를 가진다. 프로그램이 사용자에게 어떠한 작업을 입력받으면, 컨트롤러는 해당 모델의 데이터를..

Liftcycle # 시작하며 모든 사람이 그러하듯이, 지금까지 공부한 Component에는 Lifecycle, 즉 수명이 존재한다. Component의 수명은 페이지에 렌더링되기 전, 준비 과정에서부터, 페이지에서 사라질 때까지이다. React 프로젝트를 설계함에 있어, 첫 렌더링을 실시할 때 어떠한 작업을 수행하거나, Component 업데이트 전 후로 작업을 수행해야 하는 경우가 발생한다. 이러한 경우에 바로 Lifecycle method를 사용하여 해결할 수 있다(Class Component에서만 가능). # Lifecycle method의 이해 Lifecycle method의 종류는 모두 9가지이다. Will이 붙은 method는 의미와 동일하게 어떤 작업을 작동하기 전에 실행 Did 역시 의미..

ForEach, Map # 시작하며 오늘은 React에서 사용하는 반복문인 ForEach와 Map에 대해 알아볼 것이다. 물론 React 내부에서 For 반복문을 사용할 수도 있지만, ForEach와 Map이 사용되는 이유와, 두 가지 반복문의 차이점에 대해서도 공부해볼 것이다. # ForEach and Map ForEach와 Map에 대해 알아보기 전에, For문에 대해 살펴보면, 기존에 알던 것과 동일하다. for(initialization ; condition ; final-expression) statement 이에 추가로 break와 continue를 사용하여 상태변화를 조정할 수 있다. 다음으로 forEach와 map에 대해 알아보자. 두 가지 모두 반복을 사용한다는 공통점이 있기 때문에 자칫..

Component # 개요 React를 사용하여 애플리케이션, 웹 페이지 인터페이스를 설계할 때, 사용자가 볼 수 있는 요소는 여러 가지 Component로 구성되어 있다. Component는 데이터가 주어지면, 해당 데이터를 통해 UI를 구성하고 api를 이용하여 component가 화면에 나타나고 사라지는 변화를 처리할 수 있다. 또한 임의의 method를 만들어 특별한 기능을 추가하는 것도 가능하다. # 종류 Function Component Class Component # Function Component component를 선언하는 방식은 크게 두 가지로 나뉜다. 하나는 Function Component이고, 다른 하나는 Class Component이다. import React from 'rea..

Checkbox 오늘은 React로 checkbox를 구현하여 상태관리 하는 방법에 대해 공부해 볼 것이다. # 목표 전체 선택이 가능한 Checkbox와 각 리스트를 구성하는 element Checkbox를 만들어 컴포넌트 상태관리가 가능해야 한다. # 구성 및 설계 - Total Component와 각 List Component를 생성한다. 이때 List는 map 함수를 사용한다. - 반복문 사용시, 일반 배열이 아닌 Set을 사용하여 중복 없이 저장한다. - 배열을 생성하고, useState를 통해 불변성 유지하며 상태를 관리한다. - 각 Component에 Checked와 onChange props를 선언하여 on/off 기능을 구현한다. - 전체 선택과 하나 선택 연동 # 전체적인 UI 틀 구성..