꾸준한프로그래밍

먼저, 전체 코드를 보여드리면 App.js와 AutoHeight.js 는 이렇다. App.js import { useRef } from "react"; import AutoHeight from "./AutoHeight"; function App() { return ( ); } export default App; AutoHeight.js import React, { useState, useRef } from "react"; function AutoHeight(props) { const inputTag = useRef(null); const longerTextArea = (event, tag) => { if (event.keyCode === 13 || 8) { tag.current.style.height =..

아래 사진과 같이 해시태그를 구현할때 overflow가 났을때 옆으로 스크롤 할 수 있게끔 구현하였지만, 텍스트가 block을 넘어가버리는 오류가 있었다. 이를 해결하는 방법은 white-space : nowrap; 속성을 주면 된다. className = "test-code" 라고 할때 .test-code{ white-space : nowrap; } 라는 속성을 주면 줄바꿈이 더이상 되지 않는다. 이렇게 줄바꿈을 방지할 수 있다.

간혹 mongoose에서 검색을 할때 파라미터로 받은 objectId가 type이 string이여서 제대로 조회가 안될때가 있다. 이럴때 string인 objectId의 type을 objectId의 type으로 변환해주는 작업이 필요하다. 그렇게 바꿔주기 위해선 mongoose.Types.ObjectId() 함수를 쓰면 된다. const mongoose = require("mongoose"); let strObjectId = `61de84a38f86be68734b9cb7`; // 16진수짜리 objectId(여기선 String) let objectId = mongoose.Types.ObjectId(strObjectId); // 16진수짜리 String을 ObjectId 타입으로 변환 console.log..

react에서 map함수로 렌더링을 할때 간혹 리스트 내에 undefined가 있어서 에러가 뜨는 경우가 있다. 이때, undefined를 제거하는 방법은 filter를 이용해주면 된다. let example = [30, 21, undefined, 15, undefined]; let result = example.filter(item => item); // let result = example.filter((item) => { return item !== undefined ;}); 를 축약해서 // 위와 같이 한줄로 쓸 수 있다. // item 에는 각각 30, 21, undefined, 15, undefined라는 정보가 차례로 담기며, 그 item이 undefined가 // 아닐때만 return해달라..

let variable = 3; let object = { [variable]: "b", }; // 결과 // { '3': 'b' } 이처럼 선언한 변수(variable)을 object 선언할때 key값으로 넣고 싶다면 [ ] 안에 감싸면 가능하다. let variable = 3; variable = "테스트1"; let object = { [variable]: "b", }; console.log(object); // 결과 // { '테스트1': 'b' } 그리고 위 코드와 같이 variable = "테스트1"을 하여 변수의 값이 바뀌었다면 object를 출력했을때의 키 값 또한 바뀌게 된다. 여기서 value에도 변수를 지정하고 싶다면 let key = "키 변수"; let value = "값 변수" ..

0. 패스트캠퍼스 챌린지 마지막이자 최종 후기. 시작할 때는 뭐 쉽겠지라고 생각했는데, 매일 최소 강의를 하나 이상 듣고 블로그에 글을 작성하는게 여간 쉬운 일이 아니었다. 회사에서 야근을 하거나 혹은 과제까지 폭탄인 날에는 정말 패스트캠퍼스 챌린지를 포기해야하나를 고민했던 것은 사실이다... 심지어 마지막주에는 시험기간이 다가오면서, (아 지금은 시험기간이다ㅠㅠㅠ) 미친듯이 살았던 것 같다. 눈뜨면 출근하고, 퇴근하면 과제하고, 중간에 패스트캠퍼스 챌린지 글 작성하고... 그래도 이왕 시작한 거 끝을 보자 라는 생각으로 공부하여, 드디어 마지막 최종 후기를 작성하게 되었다.😄 그래서 내가 이 챌린지를 통해서 무엇을 얻었냐면,,,, 1. 혼자서 30일 계획을 하라고 했으면 절대 못했을 것을 패캠 챌린지를..

0. 공부 인증 공부 시작 19 : 12 공부 종료 20 : 28 드디어 마지막 날이다~~!!! 마지막 강의인 만큼, 그래도 시작한 프로젝트는 끝내야할 것 같아서, 학교 과제보다 먼저 시작했다.... 여튼 패캠챌린지 기간에 작은 리액트 플젝까지 끝낼 수 있어서 기쁘다. 제발 30일의 노력이 문제없이 통과되어 환불까지 이어졌으면 좋겠다. 1. 퀴즈 컴포넌트 만들기 리액트 라우터의 기능을 사용하지 않고, 단순히 리덕스의 값을 불러와서 분기 처리를 해주는 것임. 그래서 조건부 렌더링을 해주어야 함. {page === 0 && ~~ } {page > 0 && ~~ } components/Quiz.js import React from "react" import { useSelecter, useDispatch } ..

0. 공부 인증 공부 시작 22 : 29 공부 종료 23 : 04 강의를 하나만 듣는다고 하더라도, 실습이 많아서 항상 시간이 좀 오래걸린다....살려줘 1. CSS 가상 선택자 ::before ::after -> 엘레멘트 전에 가상 엘레멘트 생성 const Header = styled.h1` &::before{ content : "앞" }, &::after{ content : "뒤" } ` 결과 페이지 보통 after 와 before의 특징 사용의 목적 :: div처럼 보통 사용하고, 스타일을 다듬기 위해서 사용함. content의 값이 있어야 함. -> content 값이 비어 있으면 가상 선택자도 의미가 없어짐. & -> 현재 요소를 가르킴. position : absolute를 통해서 다른 div..

0. 공부 인증 공부 시작 23: 21 공부 종료 23 : 45 악 누가 컴퓨터 구조 같은 과목을 들으라고 했을까... 너무 빡세다, 여전히 알고 있는 것이 없다. 1. 버튼 컴포넌트 만들기 -> 리액트 생성하고, 필요없는 파일 전부 삭제하기(테스트 파일 등) -> 리액트 디벨로퍼 툴을 활용하자! - 구글 크롬 확장 프로그램 (https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) -> 컴포넌트를 확인할 수 있음. components > PinkButton.js 파일을 생성 import React from 'react' import styled from 'styled-components..

0. 공부 인증 공부 시작 21 : 37 공부 종료 22 :37 주말이다! 근데 과제는 쌓여있다! 아오!ㅋㅋㅋ 1. 사이트 UI 디자인 및 상태 생각해보기 -> 인트로 페이지 -> 퀴즈 페이지 -> 결과 페이지 + 기타 컴포넌트 2. 필수 모듈 설치하기 npm install redux react-redux node-sass styled-components -> 디렉토리 구조 만들기 (components, store 폴더 만들기) 3. 리덕스를 사용해 상태 설계하기, 설계한 코드로 구현하기 store -> index.js import {combineReducers} from "redux" export default combineReducers({ // 서브 리듀서 ... }) store -> module ..