프론트엔드 27

BOJ - 18353 병사 배치하기

1. 문제 : https://www.acmicpc.net/problem/183532. 문제 유형 : Dynamic Programming3. 문제 티어 : 실버 24. 문제 풀이  - 병사의 최대 수를 물어보기 때문에 LIS 알고리즘을 고려해야 한다. ( 최대 수 , 최장 길이 , 가장 많은 .. 등이 들어갈 때 LIS 알고리즘을 고려해보자) - LIS 알고리즘을 고려하기 위해 DP와 이진탐색 두 가지 방법이 있다. 여기서 나는 이진탐색 방법을 선택했다.(복잡한 대신 더 속도가 빠르고 효율적이기 때문이다.)* LIS 알고리즘이란?최장 증가 부분 수열(LIS)라고 하며 주어진 수열에서 일부 숫자들을 선택하여 만든 증가하는 부분 수열 중 가장 길이가 긴 수열을 찾는 방법이다.ex) 수열 : [10, 20, 1..

BOJ - 2839 설탕 배달

문제 링크 : https://www.acmicpc.net/problem/2839문제 유형 : 그리디 알고리즘문제 티어 : 실버4문제 풀이 : 5키로랑 3키로짜리 봉지가 있고 이 두 개를 통해 최대한 적은 갯수의 봉지를 가져가야 한다.  => 5키로로 담을 수 있는 만큼 담고 그 다음 3키로로 채우면 될 것 같은 문제다. 시간 복잡도 : O(N)const fs = require("fs");let input = fs.readFileSync("/dev/stdin").toString().split("\n");let n = Number(input[0]);let count = 0;while(true) { if(n%5===0){ count -= n/5; break; } n-=..

Front-end 배포 (3) - 개발용과 실제 서비스용 배포 분리하기

회사에서 만든 웹 서비스를 Github Actions와 S3 + Cloudfront 로 배포를 했는데 이 때 새로 오신 사수 개발자분께서 개발용 서버와 실제 서버를 분리해주셨고 그에 맞춰 배포도 다르게 가야 한다고 말씀해주셔서 배포 했던 것을 간단히 수정하고자 했다.  1. 기존 구조gitflow를 사용하고 있었기 때문에 dev를 default로 잡고 이 곳에 push 해주었다. 그리고 main에 PR을 올릴 때 CD actions가 수행되어 배포가 되게 하였다.1) branch 구조feature/#123 -> dev (default branch) -> main 2) CD Scriptname: CDon: push: branches: - main pull request: branch..

FrontEnd Skils 2024.07.01

야놀자X패스트캠퍼스 미니프로젝트 복습

0. 느낀 점 이번 미니프로젝트를 11/20 ~ 12/01일까지 진행 후 1주일의 리팩토링 기간을 가졌는데 정말 많은 것을 배웠고 또 느꼈던 계기가 되었다. 특히 백엔드와 협업하면서 정말 많은 것을 깨달았고 소통의 중요성도 배웠다. 원래는 마지막에 느낀 점을 쓰려고 했는데 생각보다 길어져서 앞에서 작성하고자 한다. 다른 팀보다 한 명이 부족한 상황에서 초반에 사람이 부족해서 못한 기능을 후순위로 뒀는데(장바구니,예약,예약확인) 원래 맡았던 부분들이 지체 됐다 보니 조급한 마음으로 급하게 후순위를 가져갔고 그래서 내 생각보다 완성도 있게 짜진 못했던 것 같다. 나중에 다같이 도와주더라도 초반 역할 분담은 확실하게 해야 함을 느꼈다. 그리고 백엔드와는 많은 일이 있었지만 결론적으로는 많은 소통을 해가면서 데..

야놀자X패스트캠퍼스 토이프로젝트2 복습

이번에 두 번째 토이프로젝트를 11/6~11/16일까지 진행했는데 짧지만 많은 걸 배웠던 시간 같았다. 바로 내일부터 백엔드와 같이 프로젝트를 하기 때문에 오늘 틈틈이 복습 할 것을 적어두려고 한다. 복습 내용은 남들이 보기엔 사소할수도 있지만 내가 이번에 프로젝트 하면서 어려움을 느꼈던 부분 위주로 적으려고 한다. 주제는 채팅 서비스였기 때문에 우리 조는 카카오톡을 비슷하게 따라하고자 했다. 1. 동적 라우팅(Dynamic Routing) 이번 프로젝트에서 NextJs를 사용했는데 사실 아쉬운 점 중 하나였다. SSR과 SSG , CSR의 차이점을 충분히 이해하지 못해 이를 활용하지 못했던 점이 아쉬웠다. 스택 선정이 매우 중요함을 느꼈고 나중에 NextJs 관련해선 길게 포스팅 해볼 예정이다. 일단 ..

[Web] LocalStorage , sessionStorage , Cookie

토이프로젝트를 진행하면서 로그인 정보 등을 저장했을 때의 어려움을 겪었는데 이를 복습하고자 한다. 1. 웹 스토리지 : 웹 브라우저에서 클라이언트 측에서 데이터를 저장하고 관리하기 위한 API이다. 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다. 웹 스토리지를 사용하면 사용자의 로컬 브라우저에 데이터를 저장하고, 필요할 때 이 데이터를 검색하거나 수정할 수 있다. 주로 웹 어플리케이션에서 설정, 세션 상태, 캐싱 ,로컬 저장 등 다양한 용도로 활용 된다. 또한 localStorage와 sessionStorage 이 두 가지 형태로 존재 한다. 웹 스토리지는 주로 다음과 같은 용도로 활용된다. 사용자 설정 및 환경 설정 저장 임시 데이터 저장 (예: 장바구니 데이터) 세션 관리 ..

[Web]프로젝트 셋팅 : ESLint & Prettier

이번 토이프로젝트를 진행하면서 eslint와 prettier를 규칙을 정해서 협업을 했는데 내 개인프로젝트에 적용시켜보려고 천천히 정리해보고자 한다. 1. ESLint & Prettier 보통 하나만 사용하지 않고 두 개를 합쳐서 사용한다고 한다. 이 둘에 대해 그냥 코드를 이쁘게 해주는구나 생각하고 깔아놨는데 생각해보니 정확한 역할을 생각해보진 않았던 것 같다. 그래서 토이프로젝트를 마치고 복기하면서 프로젝트 셋팅 과정에 대해 차근차근 살펴보려고 한다. 이 둘의 역할은 다음과 같이 정리할 수 있다. ESLint : 코드 구현 방식을 일정하게 유지 시켜주는 것 Prettier : 에디터에서 코드를 작성할 때 스타일 등을 일정하게 유지 시켜주는 것 출처 : https://helloinyong.tistory..