vue.js에서는 vue를 구성요소를 구축하는 방식이 필요했습니다. 이러한 구성 요소의 구성은 React는 useState를 이용한 상태관리, useEffect를 이용한 컴포넌트의 생명주기를 예를 들 수 있습니다. 이러한 함수형 컴포넌트 구성 이전에는 class기반을
5월 부트캠프 수료이후 약 4개월가량의 취준기간 후 드디어 취업에 성공하였습니다. 그동안 우여곡절 끝에 드디어 돈을 벌 수 있다는 생각에 기뻤습니다. 기념으로 취준기간 동안 있었던 일들과 경험을 공유드리고자 작성하게 되었습니다. 기본적인 html시멘틱태그 사용과, 많
이전글에서 살펴볼 당시 함수형 프로그래밍은 실무적인 내용보다는 학문적인 요소로 다뤄지는 경우가 대부분이였습니다. 그렇기 때문에 이 도서에서는 함수형 프로그래밍을 실무에서도 사용가능하도록 서술한 부분이있습니다. 위키피디아에서는 함수형 프로그래밍을 이렇게 정의하고 있습니
웹 개발을 시작하고 프론트엔드 개발에 뛰어들며, 언어에 대해 선택해야했고 브라우저에 특화된 JS를 사용하게 되었습니다. JS를 배우며 여러 프레임워크를 적용하며 개발을 했지만 근간이 되는 JS에 대해 공부를 할 필요성을 느꼈습니다. 이에 딥다이브 스터디를 진행하여
이전에 컴포넌트 UI구성에 있어서 Atomic Pattern을 도입할 것을 예고 하였습니다. Atomic패턴을 도입함으로써 장단점등 경험했던 것들을 작성하고자 합니다. Atomic패턴에 대해 궁금한 사항이 있으시면 이전 글 Atomic Pattern을 참고해주세요.
지금까지 팀 프로젝트에서 프론트엔드 리드로 작업을 하였고 최근에는 혼자 프론트엔드 쪽 프로젝트를 작업하였습니다. 프로젝트를 진행하기 전에 작업을 효율적으로 가져가기 위해 어떻게 코드를 작성하고 폴더를 구성하는 지는 전적으로 저의 의견을 가지고 디자인 패턴을 구현하였
초창기 프론트엔드라고 하면 단순 뷰 로직 정도만 구현하여 프론트엔드는 큰 역할을 못하는 것처럼 인식이 되었습니다. 하지만 현재 많은 기술스택들이 생겨나고 이로 인해 프론트엔드의 역할은 점점 커지고 있습니다. 기존 mvc아키텍쳐에서 mvp 그리고 mvvp 등 많은
react에서 hook을 도입한 이래로 js라이브러리로는 강력한 1대장 역할을 하고 있습니다. hook을 도입하여 기존에 class형 컴포넌트에서 prototype 언어인 js에 맞게 function 컴포넌트의 시대가 도래하였는데요. 함수형을 강조하는 만큼 js에서
🔴 NextJs로 마이그레이션 하게 된 이유? 5월경 React로 했던 프로젝트에서 Nextjs로 마이그래이션하며 작업을 해왔다. SSR에 대한 개념은 어느 정도 알고 있었지만 NextJs가 13버전으로 바뀌고 나서의 자료 찾기가 쉽지는 않았지만 열심히
그동안 프로젝트를 진행하면서 Github를 사용하여 팀 협업 및 형상관리를 진행하였습니다. 작업 내용을 추가하고 수정하고 삭제하는 과정을 기록하고 그 과정을 commit을 통해 log를 남기고 push를 하였습니다. 하지만 바쁘게 프로젝트를 수행하였기 때문에 comm
정렬 알고리즘은 원소들을 순서대로 sorting하는 알고리즘이다. 이미 어느 정도 알고 있지만 기본적인 정렬 알고리즘인 선택정렬, 삽입 정렬, 버블 정렬 등을 직접구현해보고 더 자세히 알아보았다. 선택정렬 알고리즘은 배열의 첫번째 index의 값을 최소값target으
Curb프로젝트 진행 당시 게시물 사진을 업로드 하는데 문제점이 발생하였다. 클라이언트가 올리는 사진에 대해 특정한 사이즈가 요구 되는데 이 비율에 맞추지 못하면 이미지의 특정 영역을 보일 수가 없었기 때문이다. 이를 위해 다른 sns를 확인하면 이미지를 크롭하거나 잘
DFS와 BFS는 그래프 알고리즘에서 사용되는 주된 탐색 방법이다. 그래프의 모든 노드를 탐색하고 정보를 찾는데 사용된다. 이 알고리즘들의 원리와 장단점들에 대해서 알아보자그림과 같이 DFS는 노드를 선택하고 최대한 깊은 곳까지 탐색한 이후 갈곳이 없다면 되돌아가 그
페이지 교체 알고리즘은 메모리 관리 시스템에서 페이지의 부재(page fault)가 있으면 어떤 페이지를 교체할지 결정하는 알고리즘이다. 페이지 교체를 통해 시스템의 성능과 효율성을 상승시킨다.\-가장 간단하고 직관적인 페이지 교체 알고리즘이다.\-간단하게 가장 먼저
지도개발팀에서 근무하는 제이지는 지도에서 도시 이름을 검색하면 해당 도시와 관련된 맛집 게시물들을 데이터베이스에서 읽어 보여주는 서비스를 개발하고 있다. 이 프로그램의 테스팅 업무를 담당하고 있는 어피치는 서비스를 오픈하기 전 각 로직에 대한 성능 측정을 수행하였는데
nextJS 13버전이후로 font를 가져오는데 최적화 해주는 기능이 추가 되었다. 이를 알아보고 적용해보는 시간을 가졌다.구글 폰트 접속하여 원하는 font를 적용할 수 있다. nextJs 13버전에 추가된 next/font/google은 추가적인 패키지를 설치하지
🔴 컴포넌트 > React에서 컴포넌트는 재사용 가능한 요소이다. 클래스 컴포넌트와 함수 컴포넌트는 둘 다 React 컴포넌트를 생성하는 두 가지 주요 방법이다. react에서 컴포넌트를 구성할 때 초창기에는 클래스형 컴포넌트를 사용하여 개발을 하였다. 그리고 Re
React에서 컴포넌트는 재사용 가능한 요소이다. 클래스 컴포넌트와 함수 컴포넌트는 둘 다 React 컴포넌트를 생성하는 두 가지 주요 방법이다.react에서 컴포넌트를 구성할 때 초창기에는 클래스형 컴포넌트를 사용하여 개발을 하였다. 그리고 React 16.8버전이후
다음과 같이 다크 모드 적용을 위해 localstorage에 theme 저장 후 이 값을 가져와서 새로고침이 되더라도 theme를 유지하려 했다. 그런데 위와 같이 localStorage를 찾지 못하고 있어서 문제 해결에 어려움이 있었다. 왜 localStorage