짝수 행에만 배경 색상 적용해보자엑셀과 같은 여러가지 문서를 활용하다 보면 표를 삽입하였을때 자연스럽게 짝수 행에 색칠이 되어있는 것을 볼 수 있다.이렇게 데이터 테이블에서 행의 배경색을 교차로 설정하면 가독성이 좋아진다. 이를 구현하기 위한 핵심은 nth-child(even)이다. CSS의 nth-child(even) 선택자를 활용하면 짝수 행에만 배경색을 입힐 수 있다.만약 홀수 행에만 배경색을 입히고 싶다면 nth-child(odd)를 사용하면 된다.    코드 예제datatable이라는 클래스를 가진 테이블의 짝수 행에만 색을 적용해보자. HTML //데이터테이블 생성 이름 나이 직업 주지훈 25 판교 개발자 ..

안녕하세요! 데보션 영 활동을 하다보면 데보션에서 주최하는 세미나에 관한 소식을 자주 접할 수 있습니다.데보션 내 사람들 뿐만 아니라 외부인에게도 열려있는 테크세미나니, 관심 있는 분들은 다음 세미나를 노려보세요! 지난번 있던 세미나는 어느덧 데보션 37차 세미나로, 주제는 ‘Docker를 활용한 효율적 개발 및 보안전략’ 이었습니다.Docker는 현대 개발 환경에서 필수적인 도구로 자리잡았습니다.세미나에서는 흔히 사용되는 Docker의 핵심 기능을 보다 효율적으로 사용하는 방법을 소개해주셨습니다.또한 개발자들이 속도와 보안을 개선할 수 있는 구체적인 기법들을 배워보았고, Docker Scout와 Build Cloud 같은 최신 기능들을 탐구해 보는 시간을 가져보았습니다. 발표자님 소개염근철 전문가님- ..

노션 캠퍼스 리더로서 노션 행사에 초대를 받아 다녀오게 되었다 행사 이름은 Cafe Notion Seoul 이었고, 장소는 성수동 할아버지 공장(카페)이었다. 공장 컨셉의 크고 예쁜 카페였는데 노션에서 카페를 대관해 행사를 진행하였다 등록부터 세션, 네트워킹까지 총 5시간 정도 진행되었다 행사를 시작하기 앞서 다양한 굿즈를 나눠주셨다 사진에 보이는 명함은 커피 쿠폰이었는데, 카페를 대관한 만큼 6000원 음료 쿠폰을 모든 참가자들한테 나눠주셨다 컵홀더도 노션 로고가 적혀있어서 노션 행사에 온 것이 실감났다 그리고 정말 신기했던게 있다. 지금 데보션 영 이라는 개발 대외활동도 하고 있는데, 거기서 같이 스터디를 하고 있는 언니를 만났다! 이 언니는 캠퍼스 리더는 아니었고 일반인으로 행사에 참여했는데 서로 ..

로컬에서 작업하던 코드를 빗버킷 레포지토리에 올려보자.중간에 빗버킷 토큰(비밀번호)도 발급 해보자. Bitbucket이란? 쉽게 말해 Github 같은 코드 저장소이다. Atlassian에서 제공하는 Git 기반의 소스 코드 관리 플랫폼이며Atlassian의 협업툴인 지라(Jira), Confluence와 쉽게 통합되어 있어 많이 사용된다특히 비공개 레포지토리 지원이 Github, Gitlab 보다 많아서 보안이 중요한 기업에서 자주 사용된다. 오늘은 기존 로컬에서 작업하던 코드를 Bitbucket에 올려보자.   1. 우선 Create 를 눌러 레포지토리를 생성해준다. 나는 로컬에 있는 코드를 그대로 올릴거라서 이름은 기존 코드와 동일하게, 그리고 README와 .gitignore은 생성하지 않았다체크..

※ 제가 고수라는 뜻은 아닙니다 위 코드의 출력 값은 어떻게 될까? 첫줄에서 선언한 그대로 [9,8,7,6][1,2]이렇게 출력될까?결과를 마음 속으로 생각해보고, 아래 더보기를 눌러 답을 확인해보자.더보기놀랍게도 답은 7이 나온다.자바스크립트 배열의 접근 방식 이해하기자바스크립트에서 배열은 매우 자주 사용 되는 자료형이다.배열은 값들의 집합을 담고 있으며, 각 값은 인덱스를 통해 접근할 수 있다.이번 글에서는 배열에 접근하는 방법과, 자바스크립트의 특이한 배열 접근 방식에 대해 알아보자! 자바스크립트 배열 기초자바스크립트 배열은 값을 여러 개 저장할 수 있는 리스트 형태의 자료 구조이다. 배열에 저장된 각 값은 인덱스를 통해 접근할 수 있다.배열의 인덱스는 0부터 시작하며, 배열[인덱스] 형식으로 배열..

아래 문제를 풀다가 처음으로 프로그래머스 효율성 테스트에서 실패를 받았다. 문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/12906 문제 설명배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면,arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다.arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다.배열 arr에서 연속적으로 나타나는 ..

한 줄 설명vite로 배포중인 리액트 프로젝트 모바일로 localhost 접속해서 확인하기문제 상황웹앱을 개발하면서 모바일 환경에 맞춰 화면을 구성하다 보니, 계속해서 개발자 도구를 이용해 모바일 화면을 확인해야 했다. 이 과정이 상당히 번거로웠고, 특히 아이폰의 노치 때문에 실제 배포된 화면을 직접 핸드폰으로 확인하고 수정해야 했다. 그래서 개발 중인 localhost를 내 핸드폰에서 바로 확인할 수 있으면 좋겠다고 생각하게 되었다.  시도했던 첫번째 방법일단 검색해서 나온 첫번째 방법으로 시도했다기존에는 npm run dev로 했다면, 뒤에 --host를 붙인다(-가 두개다)npm run dev -- --host또는vite --host로 개발 서버 실행해준다그러나.. 트러블 슈팅근데 나는 안 됐다. ..

들어가기 앞서...실행 컨텍스트는 자바스크립트의 동작원리를 담고 있는 핵심 개념이다실행 컨텍스트를 바르게 이해해야, 스코트를 기반으로 바이딩을 관리하는 방법과, 호이스팅이 발생하는 이유, 클로저의 동작 방식, 이벤트 핸들러와 비동기 처리 방식을 이해할 수 있다  소스코드의 타입코드 종류설명전역 코드전역에 존재하는 소스코드를 말한다. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함하지 않는다함수 코드함수 내부에 존재하는 소스코드를 말한다. 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않는다eval 코드빌트인 전역함수인 eval 함수에 인수로 전달되는 소스코드 그 자체를 말한다모듈 코드모듈 내부에 존재하는 소스 코드를 말한다.모듈 내부의 함수, 클래스 등의 내부 코드는 '포함되지 않는다!..

개발자라면 vim이지!커스터마이징의 끝판왕 vim을 쓰고 싶었다,이건 두번째이유이고주변에 개발 잘 하는 사람들이 다 vim을 써서 따라해보고 싶었던게 첫번째 이유였다실제로 10~20년차 개발자를 만나봤는데, 터미널에서 코드를 편집하면서”하하 저는 옛날 사람이라 vim 써요“ 라고 말하는게 너무 간지나보였다그러나 비주얼 스튜디오 코드의 확장성 때문에 번번이 실패했고, 나중에라도 다시 도전해보기 위해 시도해봤던 링크를 모아보려고 한다 시작하기https://velog.io/@banjjoknim/Vi-Vim-%ED%8E%B8%EC%A7%91%EA%B8%B0-%EC%82%AC%EC%9A%A9%EB%B2%95 Vi / Vim 편집기 사용법리눅스 환경에서 사용할 수 있는 Vi(Vim) 편집기의 기본적인 사용법에 대해..

안녕하세요! 오늘은 T타워에서 열린 티움체험 후기를 작성해보려고 합니다. T.um 티움 체험은 두달 전에 예약해도 자리가 거의 없을 정도로 인기가 많은 체험인데, 저는 SKT에서 데보션 영이라는 '테크 인플루언서'로 활동하고 있기 때문에 예약 없이 바로 체험을 해볼 수 있었습니다.이런 소중한 기회 주신 SKT 회사에게 감사의 말씀 전해 드립니다!  https://g.co/kgs/GWJ3itM 미래기술 체험관 T.um(티움) · 서울특별시 중구 을지로 654.4 ★ · 기술 박물관www.google.com   총 10개의 코스로 이루어져있습니다.   시간에 맞추어 1층에 도착하니 안내해주시는 분들이 대기하고 계셨어요.저희는 데보션 영 4명이서 함께 체험을 했습니다. 웅장한 스크린이 움직이며 저희를 환영해주..

문제 상황분명 yarn 을 설치 했는데 에러 메세지가 났다설치는 되었는데, 동작하지 않는다니 이게 무슨 소리일까 보통 이 문제는 프로젝트 세팅 초기에 발생한다  실패한 시도전역으로 재설치를 하려고 했다근데 에러가 났다에러 메세지를 보니 권한이 없어서 폴더를 만들지 못했고, 설치할 폴더를 못 만들어서 설치 안 되는것 같았다  해결방법 1. .npm-global 파일을 만든다그리고 아래 코드를 순서대로 입력한다mkdir ~/.npm-globalnpm config set prefix '~/.npm-global'export PATH=~/.npm-global/bin:$PATH  2. 재설치 해준다npm --global install yarn  3. 설치가 잘 되었는지 확인해준다yarn -v 버전이 나오면 설치가 ..

모던 자바스크립트 딥다이브에서 타입 변환(형변환)파트를 읽던 중 발생한 일이다.아래와 같은 구절이 눈에 띄었다     명시적 형변환과 암묵적 형변환에 대해 간단히 짚고 넘어가자.명시적 형변환 (Explicit Type Conversion):    * 프로그래머가 코드에서 명확하게 타입 변환을 지정한다    * 예시: Number("123"), String(123), (10).toString()    * 코드 가독성이 높고, 코드 리뷰 시 의도를 명확히 알 수 있다암묵적 형변환, 자동 형변환 (Implicit Type Conversion)    * 자바스크립트 엔진이 자동으로 타입을 변환해준다    * 예를 들어 10 + ''처럼 숫자 10 뒤에 빈 문자열('')을 합하면숫자 10을 문자열 "10"으로 변..