코딩정비소 코딩정비소

sticky vs fixed는 무엇인가? 스크롤할 때 웹 내부 요소를 유지하도록 도와주는 CSS 속성이다. position: sticky position: fixed 그렇다면 이 두 개의 차이는 무엇일까? position: fixed position: fixed는 viewport에 고정된 고정 위치에 위치하게 된다. 쉽게 말해 개발자가 지정한 위치에 있다. 개발자는 위쪽, 아래쪽, 왼쪽, 오른쪽을 지정할 수 있다. .test { position:fixed; top : 0; } position: stickey position: stickey는 오프셋 (top:10px)을 정의하기 전까지, 저 고정된 위치가 아닌 부모의 위치에 고정되어 동작한다. 부모의 위치가 스크롤에서 떠나가 되면 부모 안에서 유지하게 된..

이번 포스팅에서는 HTML에서 많이 사용되는 셀렉트 박스를 구현해보는 시간을 가져보겠다. Select box(셀렉트 박스)? 셀렉트 박스는 콤보 박스라고도 하며, Pull-Down Menus라고도 한다. 주로 회원가입시에 많이 볼 수 있다. Select box 구현 하기 네이버 회원 가입시 성별 셀렉트 박스를 만들어보자. 성별 성별 남자 여자 선택 안함 ​ https://codesandbox.io/s/festive-tesla-f6jq3?file=/index.html 에서 확인 가능하다 festive-tesla-f6jq3 - CodeSandbox festive-tesla-f6jq3 codesandbox.io 정리 및 느낀 점 Select box를 구현하기 위해서는 Select 안에 option tag들을 ..

문제 이해하기 Ax + By + C = 0으로 표현할 수 있는 n개의 직선이 주어질 때, 이 직선의 교점 중 정수 좌표에 별을 그리려 합니다. 예를 들어, 다음과 같은 직선 5개를 2x - y + 4 = 0 -2x - y + 4 = 0 -y + 1 = 0 5x - 8y - 12 = 0 5x + 8y + 12 = 0 좌표 평면 위에 그리면, 교점이 생기는데 정수로 표현되는 교점에 별을 그리면 아래 그림과 같다. 위 그림을 문자열로 나타낼 때. 별이 그려진 부분은 `*`, 빈공간은 `.`으로 표현하면 다음과 같다. 데이터 추상화 주어진 데이터 선분들의 교점을 구한다음 교점은 * 로 빈공간은 . 으로 그려야 한다. 교점을 그리기 위해서 좌표 평면을 추상화해야 한다. 좌표 평면에는 x축, y축 모두 음수의 값이..

React 프로젝트에서 Firebase를 사용하여 로그인 기능을 구현해 볼 것이다. 생각보다 간단하다. 로그인 기능은 민감한 기술이지만, Firebase를 이용하여 인증을 추가하는 것이 매우 간단하다. 이번 포스팅에서는 React, React-hook Typescript 에 대해 알고 있다고 생각하여 자세한 내용은 생략하여 진행할 예정이니 참고바란다. 프로젝트 생성하기 프로젝트를 생성할 원하는 위치에 폴더를 생성하자. 필자는 react-typescript-login으로 진행하겠다. 폴더가 생성되었으면 프로젝트를 생성하자. 앞서 말씀드렸다 시피 react와 typescript로 프로젝트를 생성할 예정이므로 create-react-app을 활용하여 빠르게 프로젝트를 생성해보자. 더보기 npx create-r..

문제 이해하기 n개의 음이 아닌 정수를 적절히 더하거나 빼서 타겟 넘버를 만들어야 한다. 예를 들어 [1,1,1,1,1]로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 있다. 데이터 추상화 nunber 값이 배열로 들어온다. 배열들을 조합하여 원하는 결과를 낼 수 있기에 따로 추상화할 영역은 보이지 않는다. 알고리즘 적절히 더하거나 빼서 타겟 넘버를 만들어야 한다. 즉 더하기 빼기만 할 수 있다, 모든 경우의 수를 다 해보자. 즉 재귀 함수를 호출하여 타깃 넘버를 만들어 보자 const cal = (value, depth) => { // 기저 사례 - 재귀함수는 배열의 길이가 되면 나온다 if(depth === numbers.length){ if( target === value){ answer++; } ..

문제 이해하기 n개의 송전탑이 전선을 통해 하나의 트리 형태로 연결되어 있다. 전선들 중 하나를 끊어서 네트워크를 2개로 분할하려고 한다. 분할된 두 전력망이 갖게 되는 송전탑의 개수를 구해야 한다. 데이터 추상화 n개의 송전 탑이 전선을 통해 하나의 트리 형태로 연결되어 있다고 알려주고있다. 전선 정보가 2차원 배열로 [ 송전탑, 송전탑] 형식으로 전달된다. 예를 들어 [[1,2], [2,3], [3,4]]인 전선 정보가 들어온다면 다음과 같은 모양을 가질 것이다. 위 그림과 같은 그래프를 추상화해보자. 2차원 배열의 행을 송전탑 1, 열을 송전탑 2로 생각해보자. 그리고 연결되어 있다면 1이라는 값을 할당하자. 0 1 2 3 4 0 0 0 0 0 0 1 0 0 1 0 0 2 0 1 0 1 0 3 0 ..

오늘 새로 배운 내용 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 정보를 가져오는 메서드를 제공해 주고 있지 않았다. => 다른 개발자 분의 풀이를 보고 깨달았다. 닉네임을 변경할 때, 유저가 작성한 모든 게시글의 닉네임 값을 경신해주는 방법이 있었다. 데이터 양이 많아지면 이것 또 다른 문제가 발생할 ..