본문 바로가기

분류 전체보기

 (65)
[ReactJS] CSS module 사용할 때, className 여러 개 지정 및 className에 변수 넣는 방법 내가 구현하고 싶었던 것 나는 Button 컴포넌트를 따로 만들었고, Button의 background와 border의 색을 전역 변수로 지정해둔 상태였다. 그런데 '구글로 시작하기'와 '카카오로 시작하기' 버튼을 만들 때, Button 컴포넌트를 사용하되, background와 border의 색을 다르게 만들고 싶었다. 처음에 짠 코드(잘못된 코드) Button.module.css /* color */ .basicColor { background: rgba(var(--btn-rgb), 0.5); border: 1px solid rgba(var(--btn-border-rgb), 0.5); } /* google color */ .google { background: rgba(256, 256, 256, 0...
[ReactJS] .eslintcache는 그냥 gitignore에 넣자 react로 과제를 했을 때였다. master 브랜치에 과제를 한 브랜치를 merge하려고 보니 .eslintcache에 관한 에러가 떴다. 결국엔 머지하다가 .eslintcache에서 충돌이 일어났다. 그래서 나는 앞으로 .eslintcache를 .gitignore파일에 넣기로 했다. 그런데 그전에 앞서 나는 .eslintcache 파일이 정확히 뭔지 몰랐다. 그래서 이참에 알아봤다. .eslintcache란? CRA를 설치하면 생기는, CRA 번들의 일부이다. 여기서 잠깐! CRA란? 더보기 Create React App (CRA) 손쉽게 최신 리액트 앱을 설정할 수 있도록 하는 명령이다. npx create-react-app '프로젝트명' 출처: https://velog.io/@gkj8963/cra..
[JavaScript] setTimeout은 현재 실행 중인 스크립트의 처리가 종료된 이후에 실행된다! 문제: setTimeout 은 무엇을 보여줄까요? 아래 코드에선 setTimeout을 이용해 호출을 스케줄링하고 있습니다. 그런데 그 아래 코드에선 실행 시간이 100ms 이상 걸리는 무거운 작업을 하고 있네요. 이런 경우 setTimeout에 넘겨준 함수는 언제 실행될까요? 반복문 실행 후 반복문 실행 전 반복문이 실행되는 시점 얼럿창엔 어떤 값이 출력될까요? let i = 0; setTimeout(() => alert(i), 100); // ? // 아래 반복문을 다 도는 데 100ms 이상의 시간이 걸린다고 가정합시다. for(let j = 0; j < 100000000; j++) { i++; } 내가 쓴 답안(틀림) 답: 1번 반복문 실행 전. 그래서 0이 출력된다. 이유: delay가 0일 때만..
[ReactJS] SKIP_PREFLIGHT_CHECK=true 하는 법 리액트 강의를 듣고 있는데, 첨부된 프로젝트 파일을 다운로드 받고 npm install 후 npm start를 하니 이런 것이 떴다. 나는 이 check를 무시하고 싶어서 SKIP_PREFLIGHT_CHECK=true를 추가하기로 했다. 방법은 아주 간단하다. 1. 루트 디렉토리에 .env 파일을 생성한다. 2. .env 파일 안에 SKIP_PREFLIGHT_CHECK=true를 추가하고 저장해주자. 이렇게만 하면 끝이다! 그후에 npm start를 하면 잘 구동된다.
[월간 회고] 2022년 11월 회고 개발자 취준생 인생을 살면서 처음으로 회고를 써본다. 사실 '주간 회고를 올리자!'라는 당돌한 야망이 있어서, 매주 주말은 회고 쓰는 날로 잡긴 했다. 그러나 주말마다 약속이 있다 보니, 회고를 잘 안 쓰게 되었다(어느 정도 변명임을 인정한다). 그래서 주간 회고는 아니더라도 '월간 회고'는 꼭 쓰기로 나 자신과 약속했다. 그렇게 해서 나온 게 바로 이 포스팅이다. 내 인생의 파편을 여러분 그리고 미래의 나에게 전한다. 목차 CSS 공부 다시 시작 UX/UI 및 웹 디자인 공부 시작 팀 프로젝트를 하게 되었다! 기타 11월 이벤트 및 느낀 점 2022 한국군사과학기술학회 추계학술대회 50일 챌린지(사실상 49일 챌린지) 시작 11월을 보내며... 1. CSS 공부 다시 시작 React와 JavaScrip..
[JavaScript] Object.entries(obj)가 반환하는 건 맵이 아닌 '배열'이다! 나는 문제를 풀다가 크나큰 착각을 하고야 말았다!! 내가 무슨 착각을 했는지는 거두절미하고 바로 문제를 풀며 알아보자. 문제: 프로퍼티 개수 세기 객체 프로퍼티 개수를 반환하는 함수 count(obj)를 만들어보세요. let user = { name: 'John', age: 30 }; alert( count(user) ); // 2 가능한 짧게 코드를 작성해 보세요. 주의: 심볼형 프로퍼티는 무시하고 ‘일반’ 프로퍼티 개수만 세주세요. 정말 쉬워보이는 문제라 금방 코드를 쓰고 실행을 했다. 그런데 어라..? 출력 결과가 이상하게 나왔다. 내가 쓴 코드(틀림) let user = { name: 'John', age: 30 }; console.log( count(user) ); function count(o..
[공지] 블로그 공사 (2022.11.19 ~) 대대적으로 블로그를 공사할 예정입니다. (2022.11.19 ~ 미정) 공사 내용은 다음과 같습니다. 1. 카테고리 개선 및 변경. 2. 블로그 스킨 자체 제작. 3. 게시물 썸네일 변경. 공사중이더라도 게시물은 꾸준히 올라옵니다. 감사합니다.
[Javascript] 반복문 STOP! split과 join, 그리고 Map 자료구조 적절한 메서드가 있음에도 나는 또 반복문을 남발해버렸다. 그리고 Map 자료구조에 익숙치 않아 결국 문제를 틀려버렸다. 내가 풀었던 문제는 다음과 같다. 문제: 애너그램 걸러내기 애너그램(어구전철)은 단어나 문장을 구성하고 있는 문자의 순서를 바꾸어 다른 단어나 문장을 만드는 놀이입니다. 예시: nap - pan ear - are - era cheaters - hectares - teachers 애너그램으로 만든 단어를 걸러내는 함수 aclean(arr)을 만들어보세요. 예시: let arr = ["nap", "teachers", "cheaters", "PAN", "ear", "era", "hectares"]; alert( aclean(arr) ); // "nap,teachers,ear"나 "PAN,ch..
[Javascript] 반복문 lover인 나에게 map과 reduce를 건네본다..❤️ 배열과 메서드 파트의 과제를 풀면서 나의 안 좋은 습관을 발견해버렸다. 바로 모든 문제를 반복문을 써서 풀려고 하는 것이다! 물론 결과는 잘 도출된다. 문제는 코드가 복잡해지고 깔끔하지 않다는 것이다! 그래서 나는 이번 포스팅을 통해 배열에서 쓰이는 반복문(forEach, for, for..or) 대신 쓸 수 있는 map과 reduce 메서드 활용법을 숙지하려한다. 어떤 경우에 map을 쓸까? map은 각 요소를 돌면서 반복 작업을 수행하고, 작업 결과물을 새로운 배열 형태로 얻을 때 사용하면 된다. 내가 풀었던 문제와 내가 쓴 답안은 다음과 같다. 문제: border-left-width를 borderLeftWidth로 변경하기 "my-short-string"같이 여러 단어를 대시(-)로 구분한 문자열을..
[Javascript] 대괄호 표기법으로 프로퍼티 값 읽을 때 주의하자! 자바스크립트 개념을 공부하면서 문제를 푸는데 계속 오류가 발생했다. 문제는 다음과 같다. 문제: 객체 매핑하기 세 개의 프로퍼티 name과 surname, id를 가진 객체 user가 담긴 배열이 있습니다. name과 surname을 조합해 fullName을 만들고, 이를 이용해 두 개의 프로퍼티 id와 fullName을 가진 객체를 담은 새로운 배열을 반환해주는 코드를 작성해보세요. 예시: let john = { name: "John", surname: "Smith", id: 1 }; let pete = { name: "Pete", surname: "Hunt", id: 2 }; let mary = { name: "Mary", surname: "Key", id: 3 }; let users = [ john..

티스토리툴바