이번 리팩토링을 진행하면서, 꼭 적용해 보고싶었던 것들이 있었는데, 그 중 하나가 성능최적화에 대한 부분이었다.성능최적화란 ? UI를 최적화하여 애플리케이션의 속도를 높이는 것을 의미한다. 사용자의 경험이 웹/앱이 상당히 중요한데, 맨처음 웹페이지 진입했을떄, 다른 페

리팩토링 3일차!! 오늘은 드디어 리덕스를 적용해 보았다. 그리고 lighthouse 라는 크롬웹의 확장자를 활용하여 "성능 최적화" 라는 것을 적용해 보았다. 1️⃣ 리덕스 리덕스는 상태관리툴(State Management Tool)인데, 리액트를 활용하여 프로

요즘 약간 리팩토링하는 재미가 붙었달까? 몇개월 전이나 지금이나 티나게 달라졌다는 느낌은 없었는데, 리팩토링을 하면서 조금 내가 성장하고 있구나 라는걸 느끼고 있다. 그 이유는, 내 코드를 보면서 어떻게 이렇게 했지? 라는 부분도 몇번 느꼈고, 효율성과 가독성을 전혀

오늘은 두번째 리팩토링을 진행하며 겪었던, 문제들과 내가 어떻게 해결해 나갔는지를 설명해보려고 한다.현재 팀프로젝트의 모든 부분을 건드릴려고 하니, 내 부분도 다시 보니 잘 머리가 안들어오는데, 다른 팀원들거까지 보려고 조금 시간이 걸리는 감이 있지만, 그래도 끝까지

Githu에는 잔디심기라는 개발자들 사이의 "난 이렇게 열심히 살았어!" 라는 느낌의 시스템이 있는데, 이 잔디심기는 1년간 자신이 개발하면서 남겼던, 그날의 기록들을 언제, 얼마나 했는지를 확인할 수 있는 하나의 출석부 같은 시스템이다.그렇게 어느날 나는 이렇게 반가

프로젝트를 진행하다 보니, 정해진 기한에 맞춰 결과만 생각하다 보니, 로직이 잘 돌아가는거에만 급급했다. 프로젝트 종료 후 다시 내 코드를 보니 굉장히 엉망진창이라고 느끼게 되었다. 다시 코드를 정독하면서 느낀점은, 함수명이 정확하지 않아, 어떤 기능을 하는 함수 인지

면접에서 리덕스 관련 질문을 받았는데, 부족하다는 것을 느꼇다~ 그래서 공부해본다 리덕스를 사용하는 이유? 만약 리덕스를 사용하지 않으면 , 동작 하나하나에 다른 코드들과의 종속관계 즉, 연결고리가 많을 경우, 하나의 코드가 지워지면 에러를 발생키기게 된다. 리덕

DOM에 관련하여 강의를 보거나, 개발 관련 유튜브를 보면서 얘기를 많이 들어만 봤지 정확한, 정의를 이해하지 못하고 있는 거 같애서, 공부를 할겸, 정리를 해보자~!!먼저 DOM을 설명하지 전에 DOM의 상위 개념인 BOM에 대해서 먼저 알아보자!브라우저와 관련된 객

우선, var 는 변수 선언 방식에 있어서 큰 단점을 가지고 있다.변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다.유연한 변수 선언으로 간단한 테스트에는 편리하나, 코드량이 많아진다면 어디서 어떻게 사용될지도 파악

MVC (Model-View-controller) Pattern 은 One of the most frequently used design patterns 로 사용하는 패턴이다...MVC 는 Model-View-Controller 의 약자입니다. 개발 할 때, 3가지 형

한달전 우연히 공부를 하던중 주변 지인이 흘러가는 말로 했던 것을 들은적이 있다. '요즘은 Resftful API 보다는 GraphQL'이 뜨고 있는 추세..라고 맨처음은 그냥 듣고 흘려보냈었던거같다. 그때는 팀프로젝트하느라 정신이 없었기때문에.. 그때 들었던 말이 R

데이터 흐름에 기반한 절차지향적 프로그래밍 방법은 복잡한 로직을 갖는 큰 규모의 소프르퉤어 개발에는 적합하지 않습니다. 하드웨어 성능이 폭발적으로 성장하면서 요구되어지는 소프트웨어는 점점 복잡해지고 거대해졌는데, 기존의 전통적인 정차지향 개발 방법으로는 소트프웨어를 설

자바스크립트애서 클래스 사용은 ES6에서부터 지원을 하기 시작했다. 최신 브라우저를 이용할 경우 class를 지원한다.class를 사용하는 가장 큰 이유는 재사용성이다.Js 내에서 class를 생성하려면 간단하다. class를 선언만 해준다면 class 객체를 바로 만

React는 페이스북에서 개발한 오픈소스 라이브러리로, '컴포넌트' 를 사용하여 UI(User Interface)를 효율적으로 만들기 위한 프레임워크입니다. 그리고 Next는 React 기반 프레인워크로 개발자에게 뛰어난 생산성과 편의성을 제공합니다.리액으틑 SPA로서

웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리입니다.모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드단위를 의미합니다. 자바스크립트로 치면 아래와 같은 코드가 모듈입니다.이

async 와 await 는 자바스크립테의 비동기 처리 패턴 중 가장 최근에 나온 문법니다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다.async function 선언은 AsyncFunction

REST(REpresentational State Transfer)ful API는 HTTP 통신에서 어떤 자원에 대한 CRUD 요청을 Reasource와 Method로 표현하여 특정한 형태로 전당하는 방식입니다. RESTful API는 아래와 같은 것들로 구성됩니다.R

자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다. 이러한 비동기 처리응 이한 또 다른

크로스 브라우징은 W3C에서 채택된 표쥰 웹 기술을 적용해 모든 브라우저에 다른 기종의 OS나 HTML 렌더링 가술로 비슷하게 만들어 어떤 환경에서도 이상없이 작동되게 하는 웹페이지를 제작하는 방법론이다.예를 들어, 익스플로러에서 이용할 수 있던 사이트가 크롬이나 파이

타입스크립트의 기본 타입에는 크게 12가지가 있다.타입스크립트는 자바스크립트와 다르게 타입이 문자열인 경우 정확하게 타입을 지정해줘야한다위와 같이 : 를 이용하여 자바스크립트 코드에 타입을 정의하는 방식은 타입 표기(Type Annotation)이라고 정의한다.타입이