전체 글

코어 자바스크립트라는 책을 읽다가 자바스크립트의 작동 원리에 대해 정확히 알고 싶어서 정리하게 되었다. 자바스크립트는 단일 스레드 기반의 언어자 동기적인 언어이다. 즉 순차적으로 한번에 하나의 작업만 처리할 수 있다. 자바스크립트가 실행되는 환경을 자바스크립트 런타임이라고 한다. 자바스크립트에도 다양한 런타임이 있고 각각의 런타임은 환경과 규칙을 정의한다. 브라우저 : 웹 브라우저에서 실행되는 자바스크립트 코드를 위한 환경이다. Node.js : 브라우저 외부에서 자바스크립트가 실행 가능하도록 한다 ( ex 서버 작업 ) React Native : 모바일 앱 개발을 위한 환경이다. Electron : 데스크톱 애플리케이션을 위한 환경이다. 웹 개발을 주로 하는 프론트엔드 개발자로서 웹에서의 동작 방식이 ..

CI/CD 말은 많이 들어봤는데, 큰 규모의 프로젝트는 개발해본 적 없는 나로서는 한번 배포하면 다시 배포할 일이 그렇게 많지는 않았기 때문에 접할 기회가 마땅히 없었다. 꼭 써보고 싶었는데 이왕 쓸 거 제대로 알고 쓰자는 의미에서 CICD에 대해 찾아보게 되었다. ➰ 개발부터 배포까지 배포가 되기까지는 어떤 과정을 거칠까? 개발 > 빌드 > 테스트 > 릴리즈 > 배포 개발 개발자가 소스코드를 원격저장소에 push한다. 빌드 소스코드 파일이 실행 가능한 형태로 변환되는 것이다. 작성한 소스 코드 파일을 컴파일하여 바이너리코드로 변환하고, 링크를 거쳐 실행 파일이나 라이브러리 파일 등을 생성하는 과정으로 이루어진다. 테스트 실행가능한 결과물이 의도한대로 동작하는지를 테스트한다. 릴리즈 테스트를 마친 후 결..

개발을 수차례 해봤지만 대용량 트래픽을 마주할 일이 없다는 이유로 배포는 항상 netlify나 github pages를 통하여 간단하게 해결했다.. 과거 딱 한번 AWS를 사용해본 적이 있으나 개발도 제대로 할 줄 모르던 시절에 겪어본 경험이라서 이번 기회에 AWS로 배포를 해보고자 마음 먹었다. + 자동화! 🧐 고민 : AWS의 어떤 방법을 통해 배포해야 하나 aws에서 제공하는 서비스가 너무 많아 어떤 방식으로 배포를 해야 할 지 선택해야 했다. EC2를 사용하는 방법과 CloudFront + S3를 사용하는 방법 중에서 고민을 했다. 일단 각 용어의 개념을 정리해보았다. ✨ AWS? 아마존닷컴에서 운영하는 클라우드 컴퓨팅 플랫폼이다. 퍼블릭 클라우드 컴퓨팅 서비스를 제공한다. IaaS ( Infra..

다양한 상태를 관리하며 더 효율적인 상태관리에 대하여 고민하게 되었다. 📌 상태(state)는 무엇인가? 상태는 변하는 데이터이다. 더 정확히 말하자면 리렌더링에 영향을 미치는 변하는 값이다. 리액트에서 페이지는 주로 props나 상태에 영향을 받아 컴포넌트가 변화할 때 리렌더링이 된다. 리렌더링이 유발되면 가상 dom에서 변경된 부분만 캐치하여 실제 dom에 반영되고 우리가 의도한대로 값을 변경하여 보여준다. 📌 상태 관리의 종류 상태는 지역상태와 전역상태로 나뉘고 그에 따른 관리 방법이 다르다. 지역 상태 ( local state ) 관리 한 컴포넌트 안에서 useState를 통하여 상태를 선언하고ㅁ 상위 컴포넌트에서 하위 컴포넌트로 props를 넘겨 전달하는 props drilling 방식의 상태관..

리액트와 파이어베이스 DB를 사용하여 테니스 커뮤니티 프로젝트를 진행하였다. 기능 구현을 마치고 최적화 단계에 들어섰고, 처음으로 경험해보았던 최적화 과정이었기 때문에 나름 고군분투를 겪어 이와 관련된 내용을 정리해보고자 글을 작성하게 되었다. 😥 처참한 초기 성능 Lighthouse를 사용하여 성능 평가를 하였다. 결과는 처참.. 기능 구현에 초점을 맞춰 프로젝트를 진행하다보니 이런 처참한 결과가 나온 것 같다. (ㅠㅠ..) 여러 페이지가 있지만 일단 가장 맨 처음 보이는 메인 페이지를 기준으로 성능 최적화를 진행하였다. 이 게시물에서는 Lighthouse의 performance만 살펴볼 예정이다. accessibility는 다음 게시물에..! 👁‍🗨 현상 파악 성능 최적화 = 로딩 최적화 + 렌더링 ..

📌 구현화면 버튼을 누르면 새로운 input이 생기고, UX를 위하여 새로 생긴 input 창에 바로 focus 되는 방식으로 동작하기를 원했다. 📌 구현내용 1. input Ref 만들기 questions은 나열하는 질문들의 값을 담는 state이고, lastInputRef는 가장 마지막의 input 값을 담기 위한 ref이다. map 함수를 사용하여 questions를 컴포넌트의 인자에 담아 렌더링 시킨다. 이때 lastInputRef도 인자로 담아 보낸다. 이렇게 하면 모든 질문의 input의 값을 거쳐서 결국 마지막에 렌더링 되는 마지막 input의 값이 lastInputRef에 담기게 된다. const [questions, setQuestions] = useState(); const lastIn..

😚 프로젝트 소개! 테니스 커뮤니티 "Tenning" 테니스가 취미인 내가 직접 만들어본 테니스 커뮤니티 다양한 게시판으로 테니스인들이 소통할 수 있는 공간을 만들었다! 로그인 후 글쓰기, 댓글, 북마크 기능을 사용할 수 있으며 마이페이지를 통해 정보수정과 활동 내역 모아보기가 가능하다 ✨ 개발 계기 프로젝트를 만들게 된 계기는 내 진짜 실력에 대한 불안감이 들었기 때문이다. 누군가의 도움없이 혼자서 고민하고 배우는 과정이었기에 잘 하고 있는 건지에 대한 의구심이 들었다. 기여도 100%의 서비스를 만들 수 있게 된다면 서비스 개발과정 전체의 흐름을 알면서 얻는 것이 많지 않을까? 그래서 불안을 좀 잠재울 수 있지 않을까? 싶은 마음에 시작하게 되었다. 🙄 기술 선택에 대한 고민 우선 CSR을 선택할 지..

구현 화면 태그를 입력한 뒤 엔터를 누르면 등록되는 방식으로 구현하였다. 태그의 X표시를 누르면 태그가 삭제된다. 구현과정 1. 기본 구조 생성 우선 기본적인 디자인을 잡아보자. 입력한 태그를 담을 tags state를 만들어 map 함수를 활용해 뿌린다. const [tags, setTags] = useState([]); {tags.map((tag, idx) => ( {tag} × ))} ; 사용한 스타일 컴포넌트의 css는 다음과 같다. const TagInputContainer = styled.div` ${flexICenter} flex-wrap: wrap; gap: 0.5em; background-color: ${(props) => props.theme.colors.gray.xxs}; paddin..

Next를 접하면서 생긴 궁금증이 있다. Next는 서버 사이드 렌더링 기법을 사용하고 서버 사이드 렌더링은 서버에서 컴포넌트를 해석하여 사용자에게 보여줄 페이지를 구성한다. 별도로 구현한 백엔드 서버가 있는 것도 아닌데 여기서 서버는 어떤 서버를 말하는 것일까..? 궁금해서 찾아보게 되었다. 📌 서버란? 클라이언트의 요청에 응답하여 서비스를 제공하는 프로그램이다. 이때 제공하는 서비스에 따라 종류가 여러개로 나뉘게 된다. ex ) 웹 서버, db 서버, 캐시 서버 등 📌 웹 서버와 웹 애플리케이션 서버 서버의 다양한 종류가 있지만 관련 핵심인 웹 서버와 웹 애플리케이션 서버에 대해 얘기해보고자 한다. 🎇 웹 서버 ( Web Server ) 클라이언트로부터 http 요청을 받아 정적인 컨텐츠( html,..

개요 Tailwind를 사용하던 중 아래와 같이 여러개의 카드 컴포넌트에 각각 다른 flex-basis를 줘야하는 일이 생겼다. 결론 : 객체 만들어 활용하기 나는 많은 속성을 주는 것이 아니였기 때문에 className 전체를 객체화 시켜서 활용하였다. const flexRow: IFlexRow = { 0: "h-auto w-auto", 0.2: "h-auto w-auto basis-1/5 ", 0.5: "h-auto w-auto basis-1/2 ", 0.8: "h-auto w-auto basis-4/5 ", }; 후에 props로 객체의 key 값을 받아 객체를 할당하였다. export default function Card({ title, children, basis }: ICard) { retu..