전체 글66 [Recoil] 사용법 리코일 이란? React에서 사용하는 Recoil은 상태 관리 라이브러리로, Facebook에서 개발한 오픈 소스 라이브러리이다. Redux나 Context API와 같은 다른 상태 관리 도구와 비교될 수 있지만, Recoil은 특히 복잡한 상태 관리 및 컴포넌트 간의 데이터 공유를 보다 간편하게 만드는 데 중점을 둔다. Redux는 훨씬 오래되었지만 보일러플레이트 코드가 많은 단점이 있다(그럼에도 가장 많이 쓰임). contextAPI는 react 내장 api이지만 비동기 처리가 비교적 어렵고, 렌더링 최적화를 별도로 해주어야 하기 때문에 규모가 커질수록 외부 라이브러리를 사용한다. Redux는 React처럼 페이스북팀에서 만들었기 때문에 신뢰성과 높은 호환성을 기대할 수 있다. 코드량이 적어도 높은 .. 2024. 1. 27. [Project] 배포 완료, 보안 경고 문제 발생(Opensea clone Project) 부트캠프에서 첫번째로 진행했던 팀 프로젝트를 드디어 배포했다 규모는 작지만 NFT와 메타마스크와 관련된 기능이 있기 때문에 배포하기 전에 할 일이 많았다. 1. 스마트 컨트랙트 배포 NFT를 민팅하고 조회하는 기능이 있는 컨트랙트를 배포해야 했는데, 분명 프로젝트 때 제대로 작동하던 코드가 에러가 발생했던 것이다. https://jamesbachini.com/openzeppelin-v5/ 이 사이트에서 원인을 찾을 수 있었는데, OpenZeppelin V5가 나오면서 NFT 코드가 변경된 것이었다! contract MyNFTs is ERC721URIStorage, Ownable { using Counters for Counters.Counter; Counters.Counter private _tokenI.. 2024. 1. 23. 개인 포트폴리오 프로젝트 계획 하, Frontend 개발자형들! 팀 프로젝트를 4번을 경험했음에도 이력서에 올릴만한 프론트엔드 프로젝트가 그동안 없었는데 위의 블로그를 읽고 개인 프로젝트와 이력서에 적은 프로젝트의 배포를 결심했다 윗 블로그의 내용은 이력서를 검토하는 입장에서 Frontend 개발자 분들에게 말해주고 싶은 내용들인데 3가지로 요약할 수 있다 1. 이력서에 있는 프로젝트는 배포를 하자 2.README.md를 잘 꾸며라 3.개인 프로젝트를 해라 Frontend의 가장 큰 장점이 결과물을 보여줄 수 있다는 말이 와닿았는데 그 동안 코드를 보면 되지 굳이 배포 해야하나라는 생각에 빠졌던 것 같다. 생각해보면 나도 AI 프로젝트를 하신 어떤 분의 웹사이트를 접속해 보고 많은 걸 알 수 있었고 코드는 확인조차 하지 않았었다 이력.. 2024. 1. 16. 블록체인 부트캠프 후기 (코드스테이츠) 후기 1차 작성은 작년 4월에, 2차 작성은 11월에 하고 내가 봐도 부족한 글솜씨 때문에 올리지 못했던 후기를 새해를 시작하며 정리를 하게 됐다 2022년 11월 ~ 2023년 4월, 지인의 추천으로 수강을 결심한 이후로 지금까지 많은 걸 배웠고 동료들과 함께 성장하는 기회가 되었다 작년까진 바라기만 했던 나와 잘 맞는 개발자 동료들이 현재에도 서로 좋은 영향을 주고 받고 있기 때문에, 이런 게 부트캠프가 주는 가장 큰 자산이라고 생각한다 수강을 선택한 이유 졸업 후 가족 회사를 다니며 코딩을 틈틈히 공부하며 만드는 재미를 느끼던 시기였다. 이미 개발자를 평생의 직업으로 생각했고 취업을 하기보단 배운 것을 사용하며 재미를 찾는 것에 의미를 뒀다. 혼자 공부하는 게 익숙해 졌지만 점점 혼자서는 모든 걸 .. 2024. 1. 14. 선택정렬 알고리즘 구현 (Python) 선택 정렬 위키에 있는 이미지인데 보면서 뭔가 뿌듯하다 정렬 알고리즘 비교 정렬 알고리즘 평균 시간 복잡도 공간 복잡도 특징 선택 정렬 O(N^2) O(N) 아이디어가 간단함 삽입 정렬 O(N^2) O(N) 데이터가 거의 정렬되어 있을 때 가장 빠름 퀵 정렬 O(NlogN) O(N) 대부분의 경우 가장 적합함 충분히 빠름 계수 정렬 O(N+K) O(N+K) 데이터 크기가 한정된 경우에만 사용 가능 매우 빠름 알고리즘 코딩테스트를 준비하면서 기본이 되는 정렬 알고리즘을 비교해 보았다. 선택 정렬은 O(N^2)의 시간 복잡도이므로 N이 증가할수록 제곱으로 증가한다 장점: 구현이 쉽고, 데이터가 이미 정렬된 경우 빠르게 정렬 단점: 입력 데이터가 역순으로 정렬되어 있을 때, 최악의 경우 O(N^2)의 성능 (.. 2023. 12. 11. Promise.all VS Promise.allSettled (유사 멀티 스레딩) 면접에서 직접 들은 질문인 Promise.all과 Promise.allSettled에 대해 정리를 하려고 한다. 내가 들었던 질문은 “Node.js는 싱글 스레드인가요, 멀티 스레드인가요?”에 대한 꼬리 질문으로 “자바스크립트는 Promise.all, Promise.allSettled로 멀티 스레딩을 흉내 내는데 그 차이를 알고 있습니까?” 였었다. Promise 객체가 3가지 상태가 있고 resolve, reject 정도만 준비 해왔던 나는 간단하게 모른다는 답변을 하고 넘어갔다. 면접은 탈락했지만 이 질문이 얼마나 비중이 있는지는 알 수 없으니, 다른 동기 분들에게 물어봤는데 역시 처음 듣는다고 하였다. 나중에 알았지만 비교적 최근인 ES2020에서 추가된 문법이고, 그 회사의 특성상 비동기 요청을 .. 2023. 11. 28. [mysql] Connetion RefusedError(Sequelize 설정) 상황 MySQL, Node.js, Sequelize 기반 프로젝트를 6개월 만에 리팩토링을 하는데 시작부터 DB에서 오류가 생겼다 Express 서버에서 Sequelize를 통해 DB를 읽어와야 하는데 거부되었다는 오류 메시지가 뜸 원인 분석 및 시도 서버나 sequelize문이 아닌 mysql의 권한 문제로 생각하였다 생각해 보니 초기 설정할 때 mysql에서 권한 설정하는 명령어를 쳤던 것 같다 GRANT ALL PRIVILEGES ON "프로젝트명" TO 'root'@'localhost'; FLUSH privileges; // 권한 적용 해당 프로젝트에 대한 root 사용자의 모든 권한을 주는 명령어이다 하지만 여전히 작동하지 않았다 🔑해결 이틀 동안 헤매다가 에러 메시지에 주목하였다 인터넷에 다른.. 2023. 11. 24. 스타트업 풀스택 개발자 면접 후기 원티드에서 지원한 회사와 면접 미팅이 잡혔다 ( 저번 회사와 다른 회사임 ) 응답률 높은 순서 정렬로 지원을 넣어 봤더니 빠른 피드백이 왔다. 역시 이게 답이었나? 면접에 자신이 없었기 때문에 선택 가능한 날짜 중에 가장 나중 날짜를 선택하고 준비했다 모든 상황을 준비하려고 했지만 역시 예측 불가능한 일은 어쩔 수 없는 듯 분위기 공유 오피스로 보이는 장소의 회의실에서 진행했고 생각보다 가까운 거리여서 작은 목소리로 대 화했다. 오는데 얼마나 걸리는지와 같은 간단한 질문으로 시작했다 면접 형식 CTO님, 인사담당자님과 2대1 미팅으로 진행 두 분 노트북 가져오셔서 질문 체크 리스트, 이력서 보면서 하심 먼저 오신 CTO님이 기술 질문을 하셨고 이어서 인사담당자님이 인성 질문을 하셨다 이력서 기반으로 적혀.. 2023. 11. 16. [TIL] axios 모듈화하기 with Typescript 모듈화 하는 이유? 코드량이 많아질 수록 중복되는 코드가 많아져서 유지보수가 힘들어지고 개발 편의성이 떨어짐 how? 리액트 프로젝트일 경우 src 안에 api폴더를 생성, core.ts 파일을 생성한다 이곳에 인스턴스를 위한 객체를 선언하고 다른 파일에서 import하여 사용한다 src/api/core.ts import axios, { AxiosInstance } from "axios" export const api: AxiosInstance = axios.create({ baseURL: "/api", timeout: 500000, }) 인터셉터라는 것을 사용하면 에러 처리나 res = res.data와 같은 동작을 미리 적용할 수 있다 인터셉터 네트워크 요청, 응답을 가로채어 처리하거나 수정하는데 사.. 2023. 11. 14. 스타트업 신사업팀 과제전형 후기 2023.10.15 - [TIL] - 스타트업 신사업팀 코테 후기 얼마 전 스타트업 코테 후기를 작성하였는데 이 글은 다음 채용 과정인 면접전형에 대한 후기이다. 결과적으로는 탈락했지만 아쉬운 마음은 뒤로하고 정리해 보고자 한다. 😢 코테 합격 후 오랜만에 보는 코테에 합격한 당시의 컨디션은 매우 좋지 않았다. 금요일에 과제전형이 시작됐고 기간은 일주일이었다. 코테에 에너지를 쏟아부어서 통과는 할 수 있었지만, 주말이 되자 컨디션이 무너졌다. 내 성격상 이력서 작성도 매우 힘들어서 코테, 이력서 2연타를 맞은 상태, 주말과 월요일이 통째로 사라진 느낌이었다 평일부터라도 시작하려 했지만 화요일 커리어 코칭님과 상담 이후 잠들어서 하루가 날아갔다. 과제 시작 3일 남은 상황에 과제를 펼쳤다. (속으로는 그동.. 2023. 11. 13. Github에 실수로 이미 올린 파일 삭제(history 삭제) 깃허브로 프로젝트를 진행하다 보면 꼭 한 번쯤은 파일을 잘못 올리게 됩니다. 팀프로젝트 때 팀원 한분이. env를 올린 적도 있었고, 배포 파일, log파일, 빌드파일 등등 같이 올려놓고 몰랐던 적도 있었죠.. git reset, revert 같이 커밋이 하나인 경우가 아닌, 이력에 쌓여있을 경우 해결책으로 repository를 다시 만들 수 없을 때 최후의 수단입니다 1. .gitignore 생성 루트 폴더에 .gitignore 파일을 만든 후, git이 추적에서 제외할 폴더나 파일을 입력합니다 직접 작성한 소스 파일, package.json 등 프로젝트를 나타내는 파일을 제외하고 모든 파일을 적으면 됩니다. 구글에 .gitignore + [사용 스택]으로 검색하면 template도 많습니다. 2. 로.. 2023. 11. 11. 일렉트론 시작하기 일렉트론이란? 일렉트론은 HTML, CSS, javascript를 사용하여 데스크톱 애플리케이션을 빌드하는 프레임워크입니다. 프론트엔드 개발자라면 당연히 잘 다뤄야할 언어로 데스크톱 어플리케이션도 만들 수 있으니 프론트엔드 개발자에겐 매우 유리합니다. Jquery, React, Angular 등 웹 프론트 개발에 씌였던 라이브러리들을 사용할 수 있기 때문입니다. 대표적인 일렉트론으로 개발한 프로그램으로는 Discord, Slack, VSCode 등이 있습니다. 웹 개발용 언어가 데스크탑 애플리케이션에서 작동할 수 있는 이유는 크롬의 오픈소스 버전인 크로미움을 사용했기 때문입니다. 크로미움과 Node.js를 각각 웹에서 프론트엔드와 백엔드의 역할을 해줍니다. 또한 크로스플랫폼이 가능한 이유이기도 합니다. .. 2023. 10. 30. 이전 1 2 3 4 5 6 다음
