분류 전체보기
-
프로토타입 발표 (1차) 회고끄적끄적 2022. 9. 11. 00:39
무엇을 만들었는가? 이번에 만들게 된 기능은 단순히 어드민 페이지에 들어가는 조그마한 기능이 아닌, 유저를 대상으로 하는 웹 페이지에 탑재될 서비스였다. 아직까지는 실제 웹 페이지에 탑재 이전이기 때문에 자세히 얘기할 수는 없지만, ‘아고라(Agora)’라는 회사의 SDK를 사용하여 만드는 실시간 오디오/ 비디오 채팅 기능이라고 말할 수 있다. 이전에 클럽 하우스(Club house) 라는 서비스가 각광받던 시기가 있었다. 나는 사용해보지 않았지만, 프라이빗 하게 초대를 받은 유저들끼리 자유롭게 오디오를 녹음하여 소통하는 서비스라고 전해 들었다. 위 서비스 또한 ‘아고라’의 SDK를 사용했는데 우리는 이 서비스에 영감을 받아 우리가 만들어가고 있는 전시 서비스에도 실시간으로 큐레이터가 전시를 소개하거나,..
-
취직 회고끄적끄적 2022. 9. 11. 00:37
들어가며 '안녕하세요. 저는 프론트엔드 개발자를 꿈꾸고 있으며, 현재 4학년 2학기에 재학 중인 25살 대학생입니다.' > 현재는 2022년 1월 이젤(eazel)이라는 '아트 테크' 도메인을 가지고 있는 스타트업에서 front-end developer로 기여하고 있습니다 안녕하세요, 이전 글을 쓸 때만 하더라도 영영 취직을 못할 줄 알았던 다행히 취뽀에 성공한 25살 FE 신입 개발자입니다. 쉽지 않은 2021년이었지만, 노력 끝에 취직에 성공하여 그동안 제가 FE 취준생으로 겪었던 경험을 담아볼까 합니다. 저는 학과에서는 JSP, 모바일 프로그래밍, DB 를 다룸과 동시에 경영, 경영과 사물인터넷, 인터넷 마케팅 등을 배우는 힘 법사였습니다. 컴공이라고 하기에는 부족한 알고리즘과 자료구조에 대한 지식..
-
모던 자바스크립트 Deep Dive - 제너레이터와 async - awaitBook Study 2022. 9. 3. 17:02
제너레이터와 async/await 왜 배워야 하는지 ? 사실 async await가 제너레이터에서 비롯되었다는 것 조차 몰랐다. 기존 한 장 요약 (프로미스) 에서도 말했지만, async await에 대해 조금 더 아는 이유는 단지 Promise 문법이 어려워서였다 .then() .catch() .finally() 와 같은 프로미스의 프로토타입 메서드 들을 '어디서는 쓸 수 있고, 어디서는 쓸 수 있는지' 도 몰랐고, 뒤에 다루는 내용이지만 에러처리를 위해 try로 catch 비동기 함수를 감싸더라도 제대로 된 에러 캐치가 되지 않는 다는 것 또한 이번에 처음 알았다. 따라서 이번 장을 통해 프로미스를 기반으로 동작하는 async/await의 다양한 활용 방법에 대해서 배운다면, 비동기적인 처리와 비동기..
-
스타일드 컴포넌트 조건부 렌더링 활용하기React.js & Next.js 2022. 8. 26. 22:51
스타일드 컴포넌트 조건부 렌더링 활용하기 프론트엔드 개발 환경에서 CSS-in-JS 를 사용하는 가장 큰 이점 중에 하나는 property를 css 에도 적용할 수 있다는 것일 것이다. 리액트에서 className 을 통해 조건부 렌더링 하는 것보다 state 를 전달하는 것이기 때문에 맥락을 파악하기 쉽고 이해하기도 쉽다. 이렇게 CSS-in-JS 중 스타일드 컴포넌트(styled-component) 를 잘 활용하는 방법을 소개해볼까 한다. CSS-in-JS의 장점은 재사용 가능한 컴포넌트로써 스타일링 코드의 양을 줄일 수 있고, 타입스크립트의 경우 props에 대한interface를 적극적으로 활용하여 더욱 가독성이 높은 코드를 만들 수 있다. 코드 상에서는 다음과 같이 사용된다 setIsHandsU..
-
모바일 기기를 체크하여 크로스 브라우징 지원하기 (navigator.userAgent 사용하기)JS & TS 2022. 8. 25. 21:52
들어가며 실무를 하면서 느끼는 취준생 때와의 가장 큰 차이점은, 실제 서비스를 제공하는 입장에서 다양한 환경과 브라우저, 기기에 대응하는 크로스 브라우징이 필요하다는 것이다. 이전에 개인 프로젝트, 팀 프로젝트를 진행할 때는 사실 비용(시간과 노력)이 너무 많이 들기 때문에 모바일 화면처럼 만들어 놓은 웹앱 형식의 프로젝트를 많이 구성하였다. 이전 프로젝트 예시 1) 스터디 모집을 위한 팀 프로젝트 2) 우리 동네 가게는 코카콜라, 펩시 중 무엇을 주는지 제공하는 서비스 물론 현재도 웹 보다 모바일이 주력 서비스라면 이런 형식을 가지는 서비스도 많이 있지만, 우리 서비스는 데스크 탑 웹을 기반으로 서비스를 제공하기 때문에 다양한 브라우저와 기기에 맞게 화면을 보여줘야 한다. 이렇게 실무에 와서 써보게 된..
-
자바스크립트 프로젝트에 타입스크립트 도입하기React.js & Next.js 2022. 8. 24. 22:14
타입스크립트 설정하기 현재 우리 리액트 버전에 맞춘 17로 타입스크립트 설치를 가정하겠습니다. 프로젝트 내의 현재 버전에 맞춰 진행해주세요. 1. 타입스크립트 전역 설치 $ yarn global add typescript / npm install -g typescript 2. 타입스크립트 설정파일 생성하기 먼저 config 파일을 왜 설정해야 하는지에 대한 의문점이 있을 수 있기 때문에 이에대한 레퍼런스 블로그를 링크로 달아놓겠습니다. config 파일이란 무엇인가요? (jsconfig.json / tsconfig.json) 1) tsc 사용하기 $ npx tsc --init $ npx tsc --init 를 명령어를 실행하면서 tsconfig.json 설정을 추가할 수 있습니다. 로컬에서 tsc 를 실..
-
리액트 18 > 17 마이그레이션하기React.js & Next.js 2022. 8. 23. 22:42
목차 마이그레이션 이유 기본 패키지 구조 패키지 제거하기 패키지 설치하기 index.js 코드 변경하기 결과 레퍼런스 마이그레이션 이유 CRA(Create React App)로 패키지를 초기화하는 경우, 가장 최신 버전인 18 버전을 설치하게 된다. 현재 우리 서비스의 리액트 버전은 17이고, 사용하고 있는 라이브러리들이 18 버전에 맞춘 마이그레이션이 진행되지 않았다.. lock 파일의 라이브러리 별 의존성 문제가 있기 때문에 쉽게 버전업을 못하고 있는 상황이기 때문에, 사용하고자 하는 라이브러리가 리액트 17 버전에서도 문제가 없는지 확인하기 위해 18 버전의 리액트를 17 버전으로 마이그레이션 한다. 따라서 CRA로 빠르게 패키지를 초기화한 이유 17 버전으로 마이그레이션 한 후 사용하는 방법을 적..
-
안녕하세요! FE 개발자 이준희입니다.About me 2022. 8. 23. 21:55
안녕하세요, FE 개발자 이준희입니다. 기존에 velog, 깃허브 레포지토리를 통해서 경험한 내용을 정리해봤는데 레포지토리에 한정되거나 한 번에 모아 보는 부분에 있어서 노션만큼 편하지는 않다고 생각해서 개인 노션에만 작성하고 게시글 공유를 중단한 상태였습니다. 하지만, 현업에서 매일 배우는 새로운 내용들을 노션에만 방치하는 게 아닌 구글링을 통해 다른 개발자 분들께도 도움이 되면 좋을 것 같아서 기술 블로그를 시작해볼까 합니다. 아직은 카테고리도 제대로 정하지 못했지만, 양질의 글을 공유할 수 있도록 노력해보겠습니다. 잘 부탁드립니다!