전체 글(32)
-
[Revisit Project] Vite과 코드 분할로 성능 최적화
1. 고민의 시작 나는 이 프로젝트를 시작 전 성능 최적화가 목표였다. 이 전까지는 그냥 리액트 문법에 익숙해지자는 목표가 있었다면 한 단계 더 나아가 리액트를 잘 사용해보자라는 의미였다. 잘 사용하는 데에는 많은 방법이 존재하겠지만 그 중 성능 최적화가 눈에 들어와 이 것을 목표로 하였다. 이 전 프로젝트에서 Vite을 알게된 점이 가장 큰 이유였다. 프로젝트 시작 전에 Vite을 사용을 할 것을 제안했고 vite이 왜 cra보다 빠른지 팀원들에게 소개했다. 단순 vite 사용만으로도 성능 개선이 이루어지지만 이 외 방법들도 많기에 어떤 방법들이 존재하는지 알아보고 적용하고 싶었다. 2. 고민 해결의 과정 2-1 먼저 성능 최적화란 > 일단 웹 성능을 결정하는 요소로로는 크게 로딩 성능과 렌더링 성능으..
2023.10.02 -
[JS Log] 자바스크립트 모듈 시스템을 알아보자
1. 왜 공부하는가? > 사실 나같이 최근에 코딩을 배운 사람들은 자연스럽게 import, export를 하면서 다른 파일을 불러온다. 모듈 시스템이 뭔지 알기 전까지는 사실 이 단순한 import, export 문법이 얼마나 획기적인 변화인지 알지 못했다. 지금에서야 변수를 var로 선언하는 일은 없다. 하지만, ES6 도입 전 var 밖에 없던 시절 전역 변수 오염을 해결하기 위해 모듈의 필요성을 느꼈고 점차적으로 모듈 시스템이 발전해왔다. 나는 오늘 vite과 cra에 차이를 이해하기 위해서 부차적으로 알아야하기에 공부를 해보았다. 간단하게 2가지 포인트를 알면될 것 같다. 2. 모듈 사용의 이유와 종류 2 - 1. module의 사용의 이유 > 모듈의 근본은 각 파일마다 스코프를 만들어주는 것이다..
2023.10.02 -
[Revisit Project] Firebase 코드 분리로 레이어
1. 고민의 시작 Plantopia 프로젝트는 불가피하게 backend가 없이 진행 되었다. 우리에겐 2가지 선택권이 있었는데 node.js에서 express로 하느냐 아니면 파이어 베이스를 하느냐였다. 나를 비롯해 다른 팀원 한 명이 1차 프로젝트에서 백엔드를 하였지만 사실 쉽지 않은 결정이었다. 프론트 코스에서 와서 프론트 프로젝트에서 프론트 코드를 하나도 안 친다는 것은 조금 어려웠고 만약 시간이라도 넉넉했다면 둘 다 치는 것이 가능했지만 우리에게 주어진 시간은 얼마 남지 않았다. 일련의 소동으로 이미 3일을 소모한 상태에서 백엔드 코드가 스키마 이 외에는 아무 것도 작성되지 않았기 때문이다. 그렇게 부랴부랴 파이어 베이스를 학습해 프로젝트에 도입하였고 작성하고 나니 데이터를 처리하는 코드를 분리하..
2023.10.01 -
백트래킹이 이해가 잘 안되었다.
알고리즘 강의를 통해서 백트래킹에 대한 대략적인 이해가 되었으나 코드로서 이해는 정말 어려웠다. 일단 글로서 적어가면서 이해를 돕기로한다. 백트래킹의 기본 문제로서 백준 10974 모든 순열이라는 문제가 있다. const input = require("fs").readFileSync("example.txt").toString().trim(); const n = Number(input); let arr = []; for (let i = 1; i { if (depth == n) { let result = []; for (let i of selected) { result.push(arr[i]); } for (let x of result) answer += x + " "; answer += "\n"; retur..
2023.10.01 -
[Revisit Project] React에서 form을 다루는 Best Case는 무엇일까?
1. 고민의 시작 Plantopia라는 식물 관리 어플리케이션을 만들면서 식물 등록을 위한 form을 다루게 되었다. 처음 코드를 작성할 때는 여러 개 state를 두고 각각에 onChange 함수를 두는 방식으로 작성했다. 또한, 에러 역시 하나하나 조건을 걸며 작성해야하는 것 또한 반복되었다. 프로젝트 당시 작성을 하면서도 여러번 반복을 하는 코드를 적는 것에 심적으로 불편했다. 하지만, 프로젝트를 할 때는 3주 밖에 안되는 시간에 기획부터 시작하려니 이런 고민을 더 이어나가지 못했는데 프로젝트가 끝난 후 form을 다루는 좋은 방법을 찾아나서게 되었다. 2. 고민 해결의 과정 처음 코드는 아래와 같았다. 고민 - 1 . 중복된 코드로 코드 길이가 길어지고 가독성이 떨어지는 문제 const [sear..
2023.09.29 -
[Resume Guide] 인프콘 2023 2곳 중 1곳은 무조건 합격하는 개발자 이력서 만들기 후기
이력서 작성 중 다양한 분들에게 피드백을 받다가 그 중 한 분이 인프콘 자료를 추천해주셨다. 인프런이 아무래도 개발자에 집중된 학습 플랫폼인데 여기서 자료를 못찾아봤구나하고 아차했다. 그리고 인프콘 23에 가고 싶었지만 안타깝게 추첨에서 탈락하였는데 진짜 개발에 관심이 있었다면 어차피 올라오는 영상이라도 확인했어야하는게 아닌가 반성했다. 영상은 아래 주소에서 볼 수 있고 가입이 필요하다. https://www.inflearn.com/course/lecture?courseSlug=%EC%9D%B8%ED%94%84%EC%BD%982023-%EB%8B%A4%EC%8B%9C%EB%B3%B4%EA%B8%B0&unitId=177922 1. 연설자 > 연설자는 인포그랩의 백엔드 개발자 지소라님이 해주셨다. 인포그랩이..
2023.09.27