jayspod

JavaScript는 단일 스레드(single-threaded) 언어이며, 이는 JavaScript가 한 번에 하나의 작업만 처리할 수 있음을 의미합니다. 그러나, JavaScript 환경에서는 많은 비동기 작업들이 발생합니다. 예를 들어, 사용자의 입력을 기다리거나, 네트워크 요청의 완료를 기다릴 때입니다. 이러한 비동기 작업들을 관리하고 실행 순서를 조정하는 메커니즘을 Event Loop라고 합니다. Event Loop의 동작 Event Loop는 Call Stack, Callback Queue(Task Queue), 그리고 Web APIs 등으로 구성되며, 이들 간의 상호작용을 통해 비동기 작업을 처리합니다. Call Stack: JavaScript는 Call Stack을 사용하여 코드를 실행합니다..

Promise Promise 객체는 JavaScript에서 비동기 연산이 완료될 때까지 기다리지 않고, 그 연산이 완료된 후에 어떤 동작을 실행할지를 정의할 수 있게 해주는 객체입니다. Promise 객체는 비동기 작업의 최종 완료(또는 실패)와 그 결과 값을 나타냅니다. 상태 Promise 객체는 3가지 상태를 가질 수 있습니다. Pending(대기 중): 초기 상태, 이행 또는 거부되지 않음. Fulfilled(이행): 연산이 성공적으로 완료됨. Rejected(거부): 연산이 실패함. 메서드 Promise 객체는 주로 다음과 같은 메서드를 사용합니다. then(): Promise가 이행될 때 호출할 함수를 등록합니다. catch(): Promise가 거부될 때 호출할 함수를 등록합니다. finall..

나는 흔한 비전공자, 광고학과를 나와 광고회사에서 기획, 제작 일을 했었다. 일의 특성상 많은 업무량, 야근에 시달렸고 업계의 비전은 불투명 했으며 인과관계가 분명하지 않은 과정에 항상 회의감을 가지고 있었다. 개발 관련 일이야 워낙 대우, 근무환경도 좋고 프로세스도 명확한 업무인 것을 익히 들어 알고 있었지만 뼛속까지 문과인 내가 개발 공부, 일을 시작할 엄두도 못냈었다. 그러다 한번 웹사이트를 만들어보는 무료 강의를 듣게 되었는데 생각보다 재밌었고 도전해보고싶다는 생각이 들어서 퇴사하고 공부를 시작하게 됐다. 부트캠프 선택 잘 모르는 분야이기도 하고 혼자 공부하기에는 이래저래 어려움이 있을 것 같아 부트캠프를 다니기로 하였다. 선택기준은 딱 두가지 비전공자가 다닐 수 있는곳 / 일 12시간 이상, 주..

프로젝트 강점 정리 Refresh Token 적용 AWS CloudFront 배포 github-action을 활용해 배포 자동화 구축 Cloudinary로 이미지 등의 asset 관리 ReactQuery InvalidateQueries를 활용해 무효화 적용(필요한 곳에 항상 최신 상태 유지) FormData로 서버에 이미지 전송 debounce를 이용한 최적화된 검색기능 구현 infinity-query를 이용한 인피니트 스크롤 react-hook-form으로 효율적으로 form을 관리 react-toastify로 토스트 알람 구현 Styled-components에서 제공하는 Global Style을 활용해 global theme, media query 구현 범용적으로 사용되는 Button, modal 등..

컴파운드 컴포넌트 패턴 간단하게 말하면 내부 상태를 공유하는 컴포넌트 코드 import { useState, useContext, createContext } from 'react'; const ToggleContext = createContext(); const Toggle = ({ children }) => { const [on, setOn] = useState(false); const toggle = () => setOn(!on); return {children}; }; const On = ({ children }) => { const { on } = useContext(ToggleContext); return on ? children : null; }; const Off = ({ children ..

이번 주 한 일 게시글 작성, 수정 페이지 리팩토링 리코일을 사용한 상태관리 부모 컴포넌트로 props를 끌어올릴 필요 있는 곳에 리코일 적용 3개의 사진중 특정 사진 재 선택시 값이 유지되지 않는 문제 spread 연산자를 이용, 기존 이미지 파일 유지 프론트 배포 개선 (CloudFront) 코드 수정 후 배포 시 웹 페이지에 바로 적용이 되지 않는 문제 CloudFront 캐시 설정, 무효화 설정 유저 피드백 받기 위한 세팅 에러 핸들링 웹사이트 Example 데이터 세팅 구글폼 설문지 작성 상품 설정 다음 주 할 일 유저 피드백을 반영한 에러 핸들링, 리팩토링 필요한 기능 추가

중간 점검 서비스 아키텍쳐 기술적 의사결정 Github Actions Github를 사용하기 때문에 효율적으로 관리할 수 있다. 초기 비용이 없다. CodeDeploy codedeploy는 AWS의 다양한 서비스와 연동되어 신속한 자동배포가 가능하다. 개발과 배포 속도가 높아져 안정적인 개발 환경을 유지할 수 있게한다. MySQL 사용하기 쉽고 오래되어서 버그가 적다. 안전하고 안정적인 트랜잭션 처리와 데이터 저장이 보장된다. S3 데이터 양에 따라 자동으로 확장되고 용량이 무제한이다. 데이터를 객체 형태로 저장하고 관리하기 때문에 서버의 부하를 줄이고 내구성이 좋다. recoil 전역상태관리할 복잡한 데이터가 많지 않아 리덕스보다 상대적으로 가벼운 recoil 선택 보일러 플레이트 코드를 줄일수 있음 ..

기술적 의사결정 Recoil 전역상태관리할 복잡한 데이터가 많지 않아 리덕스보다 상대적으로 가벼운 recoil 선택 보일러 플레이트 코드를 줄일수 있음 사용법이 직관적이고 쉬워 협업에 유리 최신 라이브러리를 도입해 봄으로써 최신 기술 도입에 익숙해지기 위함 TS 버그를 사전에 발견하고 코드의 안전성을 높임 런타임 에러를 줄임 TypeScript의 정적 타이핑이 코드 작성 시점에 오류를 캐치 ReactQuery v4 서버쪽의 데이터를 좀더 쉽게 관리쉬워 데이터 패칭, 캐싱, 동기적 서버의 상태의 업데이트에 용이 별도의 옵션을 지원하여 복잡한 코드를 reactQuery 로직을 통해 짧은 코드로 대체 프로젝트 구조가 기존보다 단순해져 유지보수하기 쉽고 새로운 기능을 쉽게 구축 최신 라이브러리를 도입해 봄으로써..

사용하는 이유 정적 웹 호스팅: S3는 정적 웹사이트를 간단하게 호스팅할 수 있는 기능을 제공합니다 이는 프론트엔드 코드를 빠르고 안정적으로 배포할 수 있는 좋은 방법입니다 CDN 연동: S3는 AWS의 CloudFront와 같은 CDN 서비스와 쉽게 연동할 수 있어 전세계 어디서나 빠른 로딩 시간을 제공할 수 있습니다 저렴한 스토리지 비용: 사용자가 업로드한 이미지나 동영상과 같은 미디어 파일을 저장하기에 적합한 비용 구조를 가지고 있습니다 버전 관리: S3는 객체의 버전 관리를 지원합니다 이를 통해 파일이 변경되거나 삭제될 경우 이전 버전으로 쉽게 복구할 수 있습니다 보안: S3는 다양한 보안 옵션 (IAM, ACL, 서버 측 암호화 등)을 제공하여 데이터의 무단 접근을 방지할 수 있습니다 사용 경험..

아이디어 제안 및 선정 내가 낸 아이디어로 프로젝트 주제가 선정되어 조금 더 책임감을 가지고 임했다. 아래는 주제 선정당시 아이데이션 노트. 동네 사건 및 민원을 공유하고 개선해주는 웹사이트 동네 민원을 공유하고 개선 동네 민원이란 시설, 구조 문제 (ex) 놀이터에 발생한 크랙, 보도 깨짐, 장마 전 하수구 막힘 등)에 국한 메인 페이지는 동네 지도, 사진 및 게시글 바탕을로 보여짐 랭킹 시스템 > 작은 범위의 동네인원만 투표할 수 있게 지정(like 당근마켓) 선정 이유 공인인증서로 접근하기도 힘들고 웹사이트 내 다른 카테고리가 많아 번잡한 국민신고의 불편함을 해소 민원사항을 텍스트 보단 지도와 이미지 형식으로 한눈에 볼 수 있어 접근성과 사용성을 높임 시의성: 초등생 놀이터 사고, 장마철 하수구 막..