코딩정비소 코딩정비소

오늘 새로 배운 내용 React-icon html 줄 바꿈 button vs Input(type=button) 고민한 내용 어떻게 하면 레이아웃을 시멘틱 하게 꾸며낼 수 있을까? 참고할 만한 내용 CSS속성중 word-break: break-all; - 표나 상자의 크기를 유지하면서 '글자'단위로 끊어준다 word-break: keep-all; - 표나 상자의 크기를 유지하면서 '단어'위로 끊어준다. white-space: nowarp; - 표나 상자의 크기를 유지하지 않음 https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=yhj0781&logNo=50170458458 react-icon을 사용하여 icon을 삽입해 보았다. npm ..

오늘 새로 배운 내용 Firebase Doc읽는 법. 에러 노트 작성하는 법 개발 일지 작성하는 법 고민한 내용 닉네임 변경 시 게시글 닉네임이 변경되지 않는 이슈가 있었다. 접근 방식이 잘못되었어서 많이 헤맸다. 최초 접근 방식은 이러했다. 게시글을 렌더링 하기 전 props로 전달받은 uid 값을 Firebase에 호출해서 UserInfo를 가져온다. UserInfo에 UserNickName을 가져다가 그려주려고 했다. 하지만 Firebase에서 auth에 user 정보를 가져오는 메서드를 제공해 주고 있지 않았다. => 다른 개발자 분의 풀이를 보고 깨달았다. 닉네임을 변경할 때, 유저가 작성한 모든 게시글의 닉네임 값을 경신해주는 방법이 있었다. 데이터 양이 많아지면 이것 또 다른 문제가 발생할 ..

Semantic 프로그래밍에서, 시멘틱(Semantic)은 코드 조각의 의미를 나타낸다. 이 HTML 엘리먼트가 가진 목적이나 역할은 무엇인가? 이 JS 라인을 실행하는 것은 어떤 효과가 있는가? HTML Semantic HTML에는 Semantic 요소와 Non-Semantic 요소로 구분된다. Semantic 요소는 목적이나 역할이 존재한다. ( 내용에 대해 알려준다 ) Non-Semantic 요소는 특별한 목적이나 역할이 존재하지 않는다. ( 내용에 대해 아무것도 알려주지 않는다) Semantic 요소에는 100여개 종류가 있다. https://developer.mozilla.org/en-US/docs/Web/HTML/Element HTML elements reference - HTML: Hyper..

문제 이해하기 당신은 각 학생들이 받은 점수의 평균을 구하여, 기준에 따라 학점을 부여하려고 합니다. 만약, 학생들이 자기 자신을 평가한 점수가 유일한 최고점 또는 유일한 최저점이라면 그 점수는 제외하고 평균을 구합니다. 데이터 추상화 인풋 데이터는 각 학생이 평가한 결과 배열을 받는다. 정리하면 행은 학생이 다른 학생을 평가한 값이며, 열은 다른 학생이 평가한 값이다. 우리는 학생들로 부터 평가받은 값을 사용해야 한다. 즉 열의 값을 순회해야 한다. 열의 값을 순회하여 계산하기란 쉽지 않다. 각 학생들의 받은 값이 행으로 올 수 있도록 행과 열을 바꿔주자. 행 과열을 바꾸는 알고리즘은 ( https://workshop-code.tistory.com/54?category=747867 )에서 확인이 가능하..

배열의 행과 열 바꾸기 배열을 다루는 여러 가지 방식 중 행과 열 바꾸는 방식에 대해 알아보자. 일반적인 방법 원본이 변경되지 않기 위해 임시 배열을 만든다. 배열을 횡으로 순환하면서 값을 넣어준다. let matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; // 첫번째 방법 반복문을 돌면서 바꿔준다 let ansMatrix = []; // 1. 배열의 행 길이만큼 반복한다 for( let i = 0; i tmp.push(row[i])); // 3. 추출한 값을 저장 ansMatrix.push(tm..

HTML Hyper Text Markup language(HTML)은 웹페이지의 구조와 내용을 담당하는 마크업 언어이다. HTML 기본 문법 Hello World HTML은 첫 줄에 문서 형식을 지정해줘야 한다. 브라우저가 받은 파일을 읽을 때 어떤 형식인지 알아야 제대로 읽을 수 있기 때문이다. 중국인한테 프랑스어 읽으라고 주는 거랑 같은 맥락이다. html 요소는 최상위 레벨에 위치하고 있다. doctype은 예외이다. head 요소 안에는 title, meta데이터, 외부파일참조가 있으며, 브라우저에 노출되지 않는다. body 요소는 실질적으로 웹브라우저에 노출된다. html 모든 요소들은 대소문자를 구분하지 않지만, 통상 소문자를 사용한다. 가독성을 위해 소문자를 사용하자 :) HTML 요소 He..

목표 MySql 테이블 타입 생성 시 괄호에 있는 숫자 의미 ZEROFILL 배경 사내에서 MySql을 사용하고 있는데 DB를 생성해야 할 일이 생겼다. 이때 ON/OFF, 0 ~ 100의 범위를 가지는 용도의 칼럼을 선언할 때 `use_animation` tinyint(4) unsigned DEFAULT 0 COMMENT '애니메이션 사용 여부', `sound_volume` tinyint(4) unsigned DEFAULT 0 COMMENT '소리 크기', 위와 같은 방식으로 형태를 사용하는데, 팀원 중 한 명이 `tinyint(4)`의 숫자 4의 의미가 뭔지 물어보셨다. 길이가 4인 데이터라고 말씀은 드렸는데, 돌아오는 질문은 다음과 같았다. 그러면 sound_volume에 길이가 4인 9999 값이..

목표 가우스 덧셈에 대해 알아보자 가우스 덧셈을 이용한 문제 풀이 가우스 덧셈 등장 배경 천재적인 수학자 독일의 가우스는 어려서부터 수학에 재능을 보였다. 가우스가 초등학교 3학년 때 수학 선생님이 1 ~ 100 숫자를 모두 합하면 얼마가 되느냐는 문제를 냈다. 가우스는 시작하지 얼마 되지 않아서 손을 번쩍 들었습니다. 오래 걸릴 줄 알았던 선생님은 가우스에게 정답을 물어봤고, 가우스는 정답을 말씀드렸다. 정답을 맞힌 가우스에게 어떻게 문제를 해결했는지, 풀이해보라고 요청했고, 가우스는 기꺼이 자신이 계산한 방법을 선생님께 말씀드린다. 가우스 덧셈 이란 가우스가 선생님께 가져온 계산법은 이러했다. 첫 숫자 1과 끝 숫자 100을 더하면 101 이 된다 두 번째 숫자 2와 끝 숫자 99를 더하면 101 이..