5F 기준 7월 총합 회고fact(사실: 무슨 일이 있었나?)아 요즘 너무너무 바빠서 회고쓰는 것을 까먹었다. 그래도 8월 초에 쓰는거니까 괜찮다고 자기합리화 해야 함. 사실 7월 달이 너무 후다닥 지나가서 어떻게 살았는 지 기억이 안남.. 요즘들어 한 달 한 달이 너무 빨리 지나가는 것 같다. 의문의 coding-god-life를 살고 있다. 의도하지는 않았는데,. 어쨌든! 아무튼, 7월 달에는 어떤 일이 있었냐면, 일단 이력서를 좀 많이많이 보완하고 서류를 넣어보았다. 결과는,.. 음.. 면접 보러 다녔다.! 사실 솔직하게 지금에서야 말 할 수 있는데, 나는 기술 면접 준비를 1도 하지 않았다. 얼만큼 심각했냐면, 딥다이브를 하지를 않아서 제대로 된 개념을 모르는 상태에서 그냥 만들다보니 터득한? 그..
![]()
지난번에는, ci / cd를 하기 위해 docker를 github action에 연결하는 작업을 하였다.이번에는 aws ec2에 우리 프로젝트의 정보를 담아주어야 한다.1. EC2 연결을 위해 github action 파일 작성하기 - name: Deploy to server uses: fifsky/ssh-action@master id: deploy with: command: | sudo docker login -u ${{ secrets.DOCKERHUB_USERNAME }} -p ${{ secrets.DOCKERHUB_PASSWORD }} sudo docker pull ${{secrets.DOCKER_REPO}}/front..
![]()
프로젝트를 하면서 정말 계속 수동으로 배포를 하는것에 번거로움을 느꼈다. CI / CD 를 미루고 미루다가 이번에 한 번 제대로 알아보고 적용해보기로 했다. - 프론트 Next.js 사용- 백엔드는 Spring, Nginx 사용- Docker와 AWS EC2 사용 이미 프론트 배포는 한 번 해 놓은 상태라서, 배포 진행 과정은 나중에 정리하고 우선 CI / CD 하는 작업을 정리해보려 한다.1. 프로젝트에 Dockerfile 만들기FROM node:21-alpine AS builderWORKDIR /appCOPY package*.json ./# npm 설치RUN npm installCOPY . .# Next.js를 빌드한다.RUN npm run build#RUN npm run export# 이미지 생성F..
이번에 회사 면접을 보기 전에, 이 회사가 react-query를 사용한다고 하여서, 나에게는 살짝 생소한 상태관리 라이브러리여서 이번 기회에 react-query에 대해 알아보려고 한다. React-Query리액트 애플리케이션에서 서버 상태를 관리하고, 비동기 데이터를 쉽게 처리할 수 있는 라이브러리이다.API로부터 데이터를 가져오고, 이를 캐싱하고, 리프레시하며 로딩 상태 및 에러 상태를 관리하는 등의 작업을 포함한다.복잡한 서버 상태관리를 단순화한다. 설치모든 상태관리 라이브러리가 그렇듯, 터미널로 먼저 가서 패키지를 먼저 설치해줘야 한다. npmnpm install react-query yarnyarn add react-query 전체 설정import React from "react";impor..
리액트 네이티브 브릿지웹 브라우저에서 사용되는 자바스크립트 엔진의 핵심 부분을 이용하여, 자바스크립트로 작성된 컴포넌트가 네이티브 환경의 뷰 클래스를 호출할 수 있도록 연결합니다. 즉, 개발자가 자바스크립트로 작성한 코드는 브릿지를 통해 실제 네이티브 코드의 실행을 유발하며, 이는 안드로이드 또는 ios의 네이티브 뷰를 생성하고 조작합니다.브릿지 원리자바스크립트 측에서의 호출 : 개발자가 리액트 네이티브를 사용하여 앱의 ui를 자바스크립트로 구현할 때, 이 코드는 먼저 자바스크립트 엔진에 의해 처리됩니다.브릿지를 통한 통신 : 자바스크립트 엔진은 개발자의 코드에서 요청한 네이티브 뷰 생성 및 조작에 대한 명령을 브릿지를 통해 네이티브 코드에 전달합니다.네이티브 측의 실행 : 네이티브 코드는 이 명령을 받..
Position 속성CSS 에서는 position 프로퍼티를 사용하면, HTML로 작성한 컨텐츠를 원하는 위치에 둘 수 있다. position: static - 기본 값이며 이동이 불가능.position: relative - 자기 자신을 기준으로 이동하며, 대개는 absolute에 관하여 부모 역할을 한다.position: absolute - 부모를 기준으로 이동한다. 부모중에 position이 relative, fixed, absolute 이 하나라도 있으면, 그 부모를 기준으로 절대적으로 움직이게 된다. 일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position: relative; 를 부여하고 원하는 위치를 지정하면 된다.position: sticky - 스크롤 영역 기준으로 배치한..
