테오콘 스태프로 참여하다 현재 회사에서 프론트엔드 개발자가 나 혼자라, 혼자서 생각하고 결정해야 할 부분들이 있다 보니 가끔은 고립감도 느끼고 '이렇게 해도 괜찮은 건지' 에 대한 불안감도 있었다. 그러면서 자연스럽게* 다른 개발자들은 어떻게 일하고, 어떤 고민을 하고

이번 포스팅에서는 기술 선택의 기준에 대해 이야기하며, 트렌드에만 의존하지 않고 프로젝트에 정말 필요한 기술을 선택하는 방법에 대해 고민해보려 합니다.

안녕하세요 프론트엔드 개발자 윤서준입니다. 주니어 프론트엔드 개발자의 상반기 경험을 바탕으로 회고를 작성해봤습니다.

전 포스팅에서는 웹소켓의 정의, 등장 배경, 동작방식, 한계점 등을 알아보았고, 이번 포스팅에선 React에서 WebSocket을 어떻게 사용했는지 기록하고자 합니다. 웹소켓 설정 먼저 useRef 훅을 사용하여 컴포넌트 랜더링 시 WebSocket 연결을 감지

이번에 실무를 경험하게 되면서 처음으로 웹소켓을 사용하게 되었습니다. 실시간으로 CCTV 영상을 화면에 구현하기 위해 웹소켓을 사용하였습니다.웹 소켓의 역할만 두루뭉실하게 알고 있었던 상황인지라 근본적으로 깊게 알아볼 필요가 있다 생각해 포스팅하게 되었습니다. 웹 소

오늘은 React+ Vite 환경에서 .env 환경변수 설정중 마주친 오류에 관한 글을 작성해보자 합니다.현재 진행중인 프로젝트에서 특정 정보를 가진 key값들을 비공개로 관리하기 위해 최상위 루트에서 .env 환경변수를 생성하고 각각의 값들을 관리하였다. 하지만 갑자

오늘은 Tailwind CSS를 사용해본 사용 후기에 관한 글을 작성해보고자 한다. 기본 설치과정과 세팅은 따로 다루지 않을 것으며 Tailwind CSS 공식 문서에 친철하게 각 개발 환경에 맞는 설치법을 지원하니 궁금하다면 (링크)를 클릭해 설치하길 권장한다.

24년도 정보처리기사 필기 시험을 준비하면서, 이름만 들었던 SOlID 원칙의 개념에 대해 공부하게 되었다. 공부를 하던 도중 실제로 나의 코드에 적용해보면 좋겠다는 생각이 들어, SOlID 중 하나인 단일책임원칙을 적용해보기로 했다.단일 책임 원칙(SRP)는 객체는

기존 프로젝트에서 리팩토링 요소들을 고려하던 도중 새롭게 알게된 createBrowserRouter 사용에 관한 포스팅을 작성하고자 합니다.

이번 포스팅에서는 Tanstack Query의 useQueries사용법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기 앞서 useQuery의 사용법을 알고 있다는 가정하에 포스팅을 진행합니다. useQuery의가 궁금하신 분들은 해당 포스팅을 먼저 참고해주세요.

프론트엔드 개발과 관련된 질문으로 빠지지 않는 CSR 과 SSR의 차이점, 실제 서비스 또한 CSR 과 SSR의 차이점과 장단점을 알고 목적에 맞는 서비스를 개발해야 되기 때문에 블로그 글로 확실하게 정리해보고자 한다. 1. SSR(Server Side Renderi

코드 스필리팅 전React + TypeScript 방식으로 개발한 프로젝트의 성능개선요소를 고려하던 중 React는 CSR(Client Side Rendering) 방식을 채택하고 있으며 초기 로딩 속도가 느리다는 단점을 개선해보기로 했습니다. Lighthouse 도구

이번 글은 React-Query와 useQuery를 어떻게 사용하는지에 대한 사용법을 정리해봤습니다. React 18버전으로 넘어오면서 @tanstack/react-query를 import 해주어야 된다. 설치 npm i @tanstack/react-q

React를 사용하면서 상태를 업데이트 할 때 쓰게되는 prevState 분명 react 초기에는 사용원리에 대해 알았지만 이제는 사용 의미를 알고 쓰기보단 무의식적으로 쓰게 되어 다시금 prevState를 왜 사용하는지에 대해 글로 정리해보고자 한다. prev sta

프로젝트를 진행하다 보면 아래와 같은 이유로 fecth 보다 axios 라이브러리를 주로 사용하고 있습니다. node에서도 사용할 수 있다 요청을 취소할 수 있다 요청과 응답을 가로챌 수 있다 Promise 기반이고, response.data로 데이터에 접근할 수 있

프로젝트에서의 문제 상황 프로젝트 팀원들과 원데이 클래스를 주제로 한 프로젝트를 진행하던 중, 사용자가 회원 가입 시에 수강생 또는 강사로 나누어 회원 가입을 진행하게 만들고자 하였습니다. - 수강생: 클래스 신청, 창작품 게시물 공유 - 강사: 클래스 개설,

Image Lazy Loading이란? Image lazy loading은 아직 화면에 보여지지 않은 이미지들은 로딩 시점을 뒤로 미루어 초기 로딩시간을 단축할 수 있는 웹 성능 최적화 기법. 언제 사용하면 좋을까? 위 이미지는 팔로우한 사용자들이 작성한 게시글들

기본타입 number 보통 일반적인 프로그래밍 언어에서 정수는 short, int, long, 실수는 float, double을 사용한다. 하지만, TypeScript에서는 number 타입이 정수, 실수 뿐 아니라 2, 8, 16진수까지 표현할 수 있어 하나로 충분

요즘 채용공고를 살펴보면서 일정 규모 이상의 회사들은 TypeScript를 요구하는 것을 자주 볼 수 있었다. 그렇기에 TypeScript에 대한 공부를 본격적으로 하고자 한다. 타입스크립트를 사용하기에 앞서 그렇다면 왜 많은 사람들이 타입스크립트를 사용하고 어떤 장점

이번 Promise 포스팅은 생활코딩님의 강의를 바탕으로 작성했습니다. Synchronus VS Asynchronous Promise를 공부하기에 앞서 이해해야 될 개념인 동기, 비동기의 개념에 대해 먼저 짚고 넘어가겠습니다. 동기 기존의 명령이 끝난 뒤 순차적으로