'분류 전체보기' 카테고리의 글 목록 (2 Page)

2024.06.10· 개발/Next.js

반응형 웹사이트 제작은 이제 그냥 필수이다. 미디어쿼리 작업을 할 때 항상 브레이크 포인트를 잡는 것이 애매하다라고 생각하는데우선은 768px 최소로 했을 경우를 두고 작업에 들어갔다. shadcn/ui 이란?Radix UI 및 Tailwind CSS를 사용하여 구축된 재사용 가능한 컴포넌트. 컴포넌트 라이브러리가 아닌 앱에 copy and paste 하여 재사용 가능한 구성요소 모음이다. npm install 을 하여 종속성 설치를 하지 않는다는 이야기다. tailwind css를 기반으로 하고 있다. 커스텀을 할 땐 tailwind css 법칙을 따르면 된다. 사용하기 위해서는 Nextjs , tailwind css 가 설치되어있어야한다. 다 각설하고 shadcn/ui를 쓰면서 미디어쿼리 작업을 ..

Nextjs14 + nextui를 사용해서 progress bar 만들기

2024.06.05· 개발/Next.js

개인적인 필요로 인해서 만들기 시작했던 타임 트래킹 웹. 독서하는 시간을 만들어보고 측정해보겠다고 시작한 것이였는데 지난 달 기록과 현재의 기록 비교 / 또는 목표 시간을 정해두고 현재 얼마나 이뤘는지 체크하는 부분까지 더 해보고 싶어졌다. 그 표현을 progressbar로 하면 직관적일 것 같다고 생각했고, nextui를 사용해서 간단하게 적용해보기로 했다. 👇🏻 NextUI 공식문서 https://nextui.org/ NextUI - Beautiful, fast and modern React UI LibraryBeautiful, fast and modern React UI Librarynextui.org nextui를 적용하기 위해서는 공식문서를 보면 굉장히 빠르게 해결할 수 있다. 굉장히 ..

forEach vs map() 차이점

2024.05.18· 개발/JavaScript

자바스크립트에서 데이터를 담고 사용하는데 이용되는 배열과 이를 loop으로 처리하기 위해서 forEach()와 map()을 주로 사용한다. forEach()Array 인스턴스 forEach() 메서드는 순회 메서드로 각 배열 요소에 대해 제공된 콜백 함수를 한 번씩 실행한다.반한 값은 사용되지 않는다.호출되는 배열을 변경하지 않지만, 콜백 함수로 제공되는 함수는 변경 할 수 있다.그러나 배열의 length는 콜백함수를 처음 호출하기 전에 저장된다는 점을 유의해야함.그리고 루프를 중지하거나 중단할 수 있는 방법이 없다. const array1 = ['a', 'b', 'c'];array1.forEach((element) => console.log(element));// Expected output: "a"..

오픈소스 라이브러리 읽어보기

2024.05.11· 개발/📝 TIL

naver에서 발행하는 FE News라는 뉴스를 구독 중인데, 최근에 받은 이메일 중에서 흥미로운 라이브러리를 발견해서 한번 읽어보았다. es-hangul 이라는 라이브러리인데, toss에서 공개한 것으로 한글을 쉽게 다룰수 있도록 돕는 Javascript 라이브러리랍니다.초성검색, 조사붙이기 같은 한글작업을 간단하게 할 수 있는 기능을 제공합니다. 매번 오픈소스 기여하기를 해봐야지, 혹은 오픈소스를 읽어봐야지! 생각하며 해볼려고 시도를 하면 쏟아지는 영어와 엄청난 량의 파일수에 압도되어서 늘 back을 눌렀는데 이번에는 왠지 시도해볼만한데? 라는 생각이 들어서 한번 전체적인 프로젝트를 살펴봤습니다. 오픈소스 프로젝트 보는 방법1. README 를 천천히 읽어봐라 2. 첫번째로 봐야 할 파일은 pa..

빅오 표기법 Big-O Notation 이란?

2024.04.25· 개발/💬 코딩테스트

Big O Notation (빅 오 표기법)컴퓨터 과학자는 서로 간에 시간 복잡도를 쉽게 소통할 목적으로 자료구조와 알고리즘의 효율성을 간결하고 일관된 언어로 설명하기 위해 수학적 개념을 차용했다. 이런 개념을 형식화한 것이 빅 오 표기범이며. 이것을 사용해여 주어진 알고리즘의 효율성을 쉽게 분류하고 이해시킬 수 있다. 간단하게 말하자면 알고리즘의 효율성을 분석하기 위해 컴퓨터 공학자들이 쓰는 가장 기본적인 도구 중 하나이다. 빅 오는 특정 방식으로 알고리즘에 필요한 단계 수를 고려함으로써 일관성을 유지한다. 그리고 단순히 알고리즘에 필요한 단계 수만 알려주지 않는다. 데이터가 늘어날 때 단계 수가 어떻게 증가하는지 설명한다. 빅 오 카테고리O(N) : 선형시간을 갖는 알고리즘. 데이터 중가가 성능에 ..

이럴 때 쓰는 말일까? '존버' - 버티면 된다. 버티면 될 거다.

2024.04.10· 개발/Etc...

요즘 들어 가슴 깊이 새기고 있는 말이다. '존버' 1. 아침에 눈을 뜨면 쌓여있는 메일 속에서 서류탈락 메일을 발견한다. 그게 반복이 되면서 하루의 기분을 좌지우지하는 나날들도 생기자 이제는 오전 일찍부터는 이메일을 확인하지 않는다. 일어나서 양치를 하고 하루를 시작하고 나서 메일함을 확인한다. 모든 것에는 타이밍이 있고 나의 부족함이 아닐 것이라며 스스로를 다잡지만 반복되는 탈락 메일은 그 마저도 무너지게 만든다. 오케이. 어쩌면 부족할지도. 세상에 완벽한 사람이 어디있는데? 라는 생각을 하며 버티며 앞으로 나아가자라고 오늘도 생각한다. 2. 알고리즘 공부를 릿코드로 하고 있다. 릿코드로 하는 이유는 깃헙이랑 연동이 가능하다보니 기록하기 편해서인데 얼마나 풀어봤나 라고 봤더니 easy 레벨만 엄청 풀..

[Nextjs] Route segment 'force-dynamic' 가 필요할 때

2024.03.29· 개발/Next.js

프로젝트 구현을 진행하면서 새로운 페이지를 만들었다. 서버에 저장되어있는 데이터를 가져오기 위해서 이미 만들어져있던 데이터 호출 코드들을 그대로 재활용해서 진행을 했는데 개발모드에서는 괜찮았지만 빌드만 하면 계속해서 오류가 났다. 정확히는 정적 렌더링하는 페이지에서 계속 오류가 나는 상황 데이터를 불러올 때 호출한게 서버API를 따로 만든게 아니라 nextjs가 지원하는 api route를 이용해서 severless 한 함수로 구현했다. 참고로 API 라우트를 사용하면 Next.js 어플리케이션에서 외부 데이터를 가져오거나 데이터베이스와 상호작용할 수 있다. 이 부분을 이해하기 위해서는 nextjs의 서버 렌더링에 대해서 알 필요가 있다. nextjs 서버 렌더링에는 총 3가지가 있는데, 첫번째 Stat..

2024년 2월 회고

2024.03.05· 개발/📝 TIL

퇴사한 지 한 달이 지나가는 시점인 2월 나는 무엇을 했는가 서류 탈락과 면접 그리고 코테 이 이야기 말고는 할 게 없는 한 달인 것 같기도. 서류 탈락도 꽤 하고, 면접도 보고 코테도 보며 이력서를 수정하며 지낸 것 같다. 면접을 통해서 부족한 점에 대해서 자괴감에 빠지기도 했고 코테를 보고 후회라는 것도 하고. 한 달 새에 다양한 '희로애락'을 경험했다. 다양한 직군에서 일을 했던 나는 나를 이야기하는데 꽤나 자신이 있다고 생각했는데. 나 자신을 '증명' 해야 하는 일엔 아직 서투른가 보다. 아직은 많이 추운듯한 이직시장. 하루는 주니어로 채운 경력은 도움이 안 되는건가, 아니면 내가 제대로 활용하지 못하는 건가? 하는 딜레마에 빠지기도 했고, 하루는 열심히 살아왔으니 너무 걱정말자 아직 그냥 때가 ..

[leetCode/Javascript] 2363. Merge Similar Items

2024.02.27· 개발/💬 코딩테스트

문제 You are given two 2D integer arrays, items1 and items2, representing two sets of items. Each array items has the following properties: items[i] = [valuei, weighti] where valuei represents the value and weighti represents the weight of the ith item. The value of each item in items is unique. Return a 2D integer array ret where ret[i] = [valuei, weighti], with weighti being the sum of weights o..

[leetCode/Javascript] 1572. Matrix Diagonal Sum

2024.02.13· 개발/💬 코딩테스트

문제 Given a square matrix mat, return the sum of the matrix diagonals. Only include the sum of all the elements on the primary diagonal and all the elements on the secondary diagonal that are not part of the primary diagonal. Example 1: Input: mat = [[1,2,3], [4,5,6], [7,8,9]] Output: 25 Explanation: Diagonals sum: 1 + 5 + 9 + 3 + 7 = 25 Notice that element mat[1][1] = 5 is counted only once. Exa..

[leetCode/Javascript] 2418. Sort the People

2024.02.11· 개발/💬 코딩테스트

문제 You are given an array of strings names, and an array heights that consists of distinct positive integers. Both arrays are of length n. For each index i, names[i] and heights[i] denote the name and height of the ith person. Return names sorted in descending order by the people's heights. Example 1: Input: names = ["Mary","John","Emma"], heights = [180,165,170] Output: ["Mary","Emma","John"] E..

[LeetCode/Javascript] 216. Combination Sum III

2024.02.05· 개발/💬 코딩테스트

문제 Find all valid combinations of k numbers that sum up to n such that the following conditions are true: Only numbers 1 through 9 are used. Each number is used at most once. Return a list of all possible valid combinations. The list must not contain the same combination twice, and the combinations may be returned in any order. Example 1: Input: k = 3, n = 7 Output: [[1,2,4]] Explanation: 1 + 2 ..

티스토리툴바