728x90 전체 글100 시멘틱(Semantic)이란? - 그럼 div는 언제 쓰지? 시멘틱이라는 단어는 프론트엔드 개발자라면 한 번쯤은 들어봤을 단어다의미론적이라는 단어보다는 보통 시멘틱 태그라는 말이 더 익숙하다. 시멘틱이란 the meaning of a piece of code 코드 조각의 의미를 말한다. 즉 시멘틱이란 무엇이 보여지느냐보다는 어떤 목적 혹은 역할을 하는지를 의미한다. 단순 프론트엔드 개발에만 속하는 것이 아닌 컴퓨터 공학 전반에서 쓰이는 개념이다. 함수이름이나 변수이름을 지을 때 다들 고민하는 이유는 "어떻게 하면 더 함수의 기능을 파악하기 쉬울까?" 라는 고민에서 나온다. 이것도 시멘틱 고민의 일종이다 다음 마크업이 시멘틱 마크업의 대표적인 예라고 할 수 있다.다음의 두 태그는 보여지는 것은 동일하다. 하지만 그 의미가 다르다고 할 수 있다. h1태그를 사용하면.. 2025. 5. 2. npm 느린 건 알겠는데, 그럼 뭘 써야 할까? 프론트엔드 개발하면서 패키지 매니저 없이 개발하는 건 거의 불가능하다....가능은 하지만 굳이!Node.js 환경에서는 기본적으로 npm을 지원하고, 대부분의 라이브러리 가이드도 npm install로 시작하니까 나도 자연스럽게 npm만 써왔다. 그런데 어느 날부터인가 주변에서 이런 얘기를 듣기 시작했다.yarn이 더 빨라서 yarn 써요.pnpm도 좋던데요? 나도 yarn이 빠르다는 건 체감했지만, 도대체 왜 빠른 건지그리고 그렇다면 npm은 왜 느린 건지 궁금해졌다. 한 번은 정리하고 넘어가야 할 것 같아서 이번 기회에 npm, yarn, pnpm을 써보며 느낀 점과 각각의 장단점을 정리해봄npm이 느린 이유대표적으로 다음 세 가지가 있다.패키지를 순차적으로 설치함→ 설치할 때 병렬로 하지 않고 하나.. 2025. 4. 30. 코드잇 프론트엔드 단기심화 1주차 회고 사실 목요일에 시작해서 1주 차가 2일밖에 되진 않지만 그래도 써보는 회고록 왜 코드잇 단기심화 시작을 했는지일단 나는 집에서 공부 집중을 전혀 못 한다.그렇기에 무슨 공부를 하던 도서관 혹은 카페에서 공부를 보통 진행하는데 코드잇은 위워크라는 공간을 제공해 주어서나에게 딱 적합했다 심지어 커피도 있고 모니터도!!비록 조금은 멀긴 하지만.. 카드 발급도 좀 이상했지만... 수업은 어떻게강사님은 한분으로 예병수 강사님이 진행해 주신다9시부터 7시까지 계속....계속해서 수업 괜찮은지 물어봐주시고 중간중간 농담도 던지면서 수업해주셔서 재밌게 듣고 있다근데 아직 2일차라 뭐든 재밌음 점심시간 이후 1시간은 팀 미팅시간으로 같이 수업듣는 강의생분들과 소통하는 시간이있다.온라인으로 수업을 하다보니 다양한 지역에서.. 2025. 4. 25. Leetcode 135 - Candy (Javascript) 1-pass 방식으로 풀기 https://leetcode.com/problems/candy/description/ 문제 난이도는 hard지만 기본 풀이법은 그다지 어렵지 않은 문제라고 생각햇다... 초기 풀이법(2-pass)1. 캔디 배열 1로 초기화 -> 무조건 1개는 받아야함2. 오른쪽으로 이동하면서 1차순회3. 다시 왼쪽으로 이동하면서 캔디 개수를 업데이트/** * @param {number[]} ratings * @return {number} */var candy = function(ratings) { let candies = Array(ratings.length).fill(1) for(let i = 0; i 0; i--) { if(ratings[i] a+b, 0)}; 근데 loop를 2번을 한다는.. 2025. 4. 22. Frontend Challenge: February Edition 참가 후기! (javascript, css) + winner 선정!!!😆 dev.to 프론트엔드 챌린지 참가후기! + Winner 선정!메일을 확인하다 눈에 띈 Dev.to의 Frontend Challenge!!항상 글은 자주 읽어왔지만 이렇게 챌린지가 있는 건 또 처음 알았다!게다가 시간도 넉넉하게 남아 참을 수 없었다!!! 챌린지 내용은제공되는 HTML구성은 변경 불가능하고 js, css로만 변경가능한 챌린지였다제법 재밌을 거 같아 바로 시작! 전체적인 틀안에서 구조변경이나 레이아웃 변경은 불가능햇다하지만 자바스크립트로는 가능하기때문에하나의 html이지만 주제별로 분리하는 것이 UI/UX측면에서도 편리할 것 같아 분리하는 것으로 정했다. 분리한 페이지들을 라우터로 연결하는 것이 나을까..싶다가도 그렇게까지는 큰 의미가 없을 것 같아네비게이션 바를 만들고 display n.. 2025. 3. 7. 백준 12015 - 가장 긴 증가하는 부분 수열 2( Node.js ) 백준12015 가장 긴 증가하는 부분 수열 2이진 탐색(Binary Search)를 사용한 LIS( Longest Increasing Subsequence) 풀이 입력값이 1,000,000이 최대이므로 N^2으로는 풀 수 없음 최대 NlogN이진탐색을 써야하는 문제인 건 알고 있는데 도대체 어디에;; LIS 풀이법을 결국 떠올리지 못하고 해답을 찾아보았다.새로운 배열을 만들어서 원본 배열 원소와 비교하며 새로운 배열에 차례대로 넣으면 되는 아주 간단한 풀이 방식이였다.LIS를 저장할 배열(lisArr)을 유지하면서 이진 탐색현재 값이 lisArr의 마지막 값보다 크면 추가그렇지 않다면, lisArr에서 현재 값이 들어갈 위치를 이진 탐색(lower_bound)을 사용해 찾고 교체최종적으로 lisArr 배.. 2025. 2. 27. 이전 1 2 3 4 5 6 ··· 17 다음 728x90 반응형
