본문 바로가기

전체 글166

CSS는 왜 이름이 CSS일까? 기술 면접 공부를 하던 중, 어떤 개발자 분이 남기신 글이 인상 깊었습니다. CSS를 활용하는 법에 대해 알고 있는 것도 중요하지만, CSS가 왜 CSS인지도 알고 있는 개발자였으면 좋겠다는 글이었습니다. 프론트엔드 개발을 하면서 필수적으로 사용하는 기술이 CSS이고, CSS를 정말 많이 다루고 있지만 정작 CSS의 이름이 왜 CSS인지에 대해서는 한 번도 생각해 본 적이 없었기에 찾아서 공부해보았습니다. CSS는 뭘까? CSS는 웹 페이지를 꾸미려고 작성하는 코드이며, 프로그래밍 언어나 마크업 언어가 아닌 Style sheet 언어입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 것인데, 예를 들면 HTML 페이지에서 모든 문단 요소들을 선택하고 그 문단 요소들 안에 있는 텍.. 2024. 1. 2.

프로젝트 초기에 Cloud Firestore가 적합한 이유 주요 기능 유연성 표현형 쿼리 실시간 업데이트 오프라인 지원 확장형 설계 기본 원리 https://firebase.google.com/docs/firestore?hl=ko&authuser=0 Firestore | Firebase Google Cloud 인프라를 기반으로 하는 유연하고 확장 가능한 NoSQL 클라우드 데이터베이스를 사용해 클라이언트 측 개발 및 서버 측 개발에 사용되는 데이터를 저장하고 동기화하세요. firebase.google.com 2023. 12. 29.

산책 개발일지 0 : 1인 개발 계획 세우기 학교 선배의 창업 아이템의 서비스 개발에 참여하게 되었다. 목적 기반으로 등산지를 추천해주는 플랫폼인데, 정말 수차례의 피봇 끝에 제법 그럴싸한 아이템이 나왔다. 팀원은 선배와 나 2명으로, 내가 서비스 개발을 오롯이 도맡아 하게 되었다. 백지 상태에서 어떤 것이 가장 중요할까? 내가 건네 받은 건 피그마 파일 하나 뿐이다. 무엇을 가장 먼저 세팅해야 할까? 1. 기술 스택 정하기 React : 극 초기의 창업 아이템이기 때문에 아직 프로토타입도 없는 상태라, 일단 빨리 만들어보는 것이 중요하다고 생각하여 나에게 가장 익숙한 라이브러리인 React를 사용하기로 하였다. Recoil : 클라이언트 데이터의 상태 관리를 위해 사용하였다. 프로젝트의 규모가 크지 않고, 특히 React를 사용하고 있기 때문에 .. 2023. 12. 29.

GitHub readme.md 기술 스택 뱃지 만들기 https://simpleicons.org Simple Icons 2926 Free SVG icons for popular brands simpleicons.org 2023. 12. 29.

🌟 외부 라이브러리 없이 별점 평점 기능 만들기 별점 평점 은 리뷰 기능을 만들 때 빠질 수 없는 요소이다. 현재 진행 중인 프로젝트의 리뷰 작성 페이지를 만들면서 별점 평점 기능을 만들게 되었다. 요새 Chakra UI 처럼, 외부 UI 라이브러리가 매우 잘 되어있기 때문에 자주 쓰이는 UI 컴포넌트들은 대부분 라이브러리를 사용해 만들고 나는 로직에 더 집중하는 방식으로 개발을 진행했었다. 하지만 아쉽게도 (?) 자주 쓰는 라이브러리에서는 별점 컴포넌트가 제공되지 않았고 로직을 생각해보니 그리 어렵지 않은 것 같아서 직접 만들어보았다. (찾아보니 있긴 했다.) https://www.npmjs.com/package/rc-rate rc-rate React Star Rate Component. Latest version: 2.12.0, last publi.. 2023. 12. 29.

디자인 시스템 구축기 최근에 지인의 창업 프로젝트에 개발 팀원으로써 함께 하게 되었다. 12월까지 MVP 제작을 완료하겠다는 목표를 잡았기에, 디자인은 외주를 맡겨 진행했다. 받은 디자인은 색상과 컴포넌트들이 여기저기 흩어져 있는 상태였다. 사실 MVP 제작 단계에서 디자인 시스템은 사치일 수도 있겠다는 생각이 들었지만, 이번 기회를 통해서 디자인 시스템에 대한 이해도 높일 겸 직접 구축해보아도 좋은 경험이 될 것 같았다. 디자인 시스템이란? 서비스의 목적에 맞게끔 일관되게 구성된 일련의 패턴과 공유된 규칙 언어로서, components, ux writing, docs, branding 등이 포함된 최상위 레벨을 뜻한다. 디자인 시스템의 필요성은 다음과 같다. 디자인 및 개발 작업을 대규모로 신속하게 만들고 복제 가능 더 크.. 2023. 12. 18.

구름톤 8기 후기 (프론트엔드) 0. 지원하기 대부분의 지원자들이 그렇듯 인스타그램 광고를 보고 구름톤을 알게 되었다. 작년에 학회 내 해커톤을 두 차례 해보며 나름대로 느꼈던 해커톤의 장단점이 있었다. - 장점 : 빠른 시간 내에 익숙하지 않은 기술을 사용해볼 수 있고, 깃 협업을 연습해 볼 수 있다. - 단점 : 밤을 새다 보니 체력적으로 힘들고, 빠른 시간 내에 구현해야 하다 보니 이 후 팀원들과 리팩터링을 진행하지 않는 이상 코드 퀄리티가 맘에 들지 않는다. 올 해 다시 해커톤에 참여해봐야겠다고 생각한 이유는, 작년엔 기술적으로 미성숙한 부분이 많았지만 1년이 지난 지금은 내 나름대로 원하는 기능을 어느정도 바로 구현할 수 있는 상태라고 생각되어 해커톤을 통해 실력을 점검하고, 처음 보는 팀원들과 함께 재밌고 새로운 협업을 하고.. 2023. 12. 10.

[LeetCode] 2622. Cache With Time Limit Promise and Time 문제 Write a class that allows getting and setting key-value pairs, however a time until expiration is associated with each key. The class has three public methods: set(key, value, duration): accepts an integer key, an integer value, and a duration in milliseconds. Once the duration has elapsed, the key should be inaccessible. The method should return true if the same un-expired k.. 2023. 11. 13.

setTimeout(), setInterval() setTimeout() 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정함 var timeoutID = setTimeout(function[, delay, arg1, arg2, ...]); function : 타이머가 만료된 뒤 실행할 함수 delay : 주어진 함수를 실행하기 전에 기다릴 밀리초 단위 시간 arg1, ..., argN : 함수에 전달할 추가 매개변수 비동기 함수로서, 함수 스택의 다른 함수 호출을 막지 않는다. setTimeout(() => { console.log("첫 번째 메시지"); }, 5000); setTimeout(() => { console.log("두 번째 메시지"); }, 3000); setTimeout(() => { console.log("세 번째 메시지").. 2023. 11. 11.

이전 1 2 3 4 5 ··· 19 다음

티스토리툴바