본문 바로가기

반응형

분류 전체보기

(501)
[react]Modal Portal(feat. typescript) 모달이 뜨면 background가 짙어지는 backdrop 효과가 모든 컴포넌트에 적용되지 않던 문제를 해결했다! 멘토님께 여쭤보니, 역시나 모달의 레벨이 적용되지 않던 컴포넌트(헤더, 사이드바)보다 낮아서 생긴 문제였다. 멘토님이 추천해주신 방식은 Modal Portal을 이용하는 것이였다! 나는 text editor을 열심히 만지던 중이라 팀원분께서 적용해주셨는데! 결과는 성공! 야호 ㅜㅜ 속이 아주 시원했다~!! 나중에 쓰일 것 같아 팀원분이 성공하시고 난 후 적용 과정에 대한 설명을 들었고, 이를 이해한 바탕으로 기록해보자! public/index.html에 'root' div하단에 modal portal을 위한 'modal-box'라는 이름의 div를 생성해준다. 이로써 modal compone..
[react] z-index, position, map reverse, axios (feat. typescript) 1. z-index z-index는 같은 레벨에 있는 요소 간에는 적용되지만, 부모 자식 요소간에는 그 우선순위가 적용되지 않는다. 그래서 왠만하면 z-index는 사용하지 않는게 좋다고 한다...ㅠㅠ 헤더와 사이드바 컴포넌트가 모달 컴포넌트의 부모 요소여서 background 짙게 되는 효과에서 배제 된다!!! 해결하려고 노력해봤지만..아직까지 해결 못했다 ㅠㅠ 멘토님께 여쭤봐야지(모달 포탈 사용해 해결 완료~) 2. postion이 fixed 인 컴포넌트 중앙 정렬 position: fixed; margin: 0 auto; left: 0; right: 0; 아직까지도 나한텐 position 개념이 어렵다..ㅠㅠ 얼른 익숙해지고싶다! 3. position : relative vs absolute rel..
StackOverflow 클론코딩(12/28) 내가 두 번째로 맡게 된 파트는 두둥.... 질문 작성 페이지다!! 도움말 카드?도 조건부 렌더링이 되어야하고, 유효성 검사도 해야하고.. 눈물 쓱.. 제일 어려운 페이지가 되겠구나 싶었는데 내가 만들게 되었다. 마치 가위바위보 제안한 사람이 항상 지는 것 마냥^^7 어제부터 총 이틀간 밤까지 노트북 붙들고 졸린 눈을 비벼가며 만들었다 ㅠㅠ 내 새끼 같이 이뻐보인다! 이제 텍스트 에디터 부분만 적용하면 끝날 것 같다! 팀원분이 토스트 ui로 구현 중이신데, 퍽 어렵다 ㅠㅠ 까다로운 자식 텍스트 에디터가 의외의 복병이 될 줄은 몰랐다. 내일 꼭 텍스트 에디터도 넣어볼 수 있기를! 오늘의 TIL 이 에러는 Tags 부분을 작업했을 때 만나게 되었다. 이런 에러메세지는 태그 요소가 button이 아닌 경우에 ..
Stack Overflow 클론코딩(12/23) 우리 팀은 먼저 질문 전체 조회 컴포넌트를 만들기 시작했고(CRUD 기능이 가장 중요하기 때문), 나는 그 중 Header에 해당하는 부분을 만들기로 했다. 내가 만든 헤더,,,(내가 만든 쿠키 따라한 것 맞음(feat. 뉴진스) 만드는데에는 약 두 시간 조금 넘게 걸렸던 것 같다. 평소에는 css 파일을 따로 만드는 방법을 사용했는데, 이번 프리 프로젝트에서 우리 팀은 styled-component를 사용하기로 하여 나도 익숙치는 않지만 열심히 styled-component 연습을 하였다! 나중엔 더 손에 익겠지 ㅠㅠ styled-component 및 css의 개념이 부족한터라... 조오금 해맸다!! ^^ 오늘의 TIL 1. 너무 많은 컴포넌트를 만들지 말자. 굳이 styled 컴포넌트로 만들어주지 않..
Section4 회고 ▷ 목표 상기하기 2023년안에 취뽀하기! ▷ KEEP 매일 학습 내용 블로그에 정리하며 기록 습관화하기 스터디 활동에 적극적으로 참여하기 & 활발한 소통하기 6시 정규 수업 시간 끝나고 보충 공부하기 리액트에 친숙해지려고 노력하기(투두 리스트, 인강 등..) ▷ Problem 여.전.히 아침에 일어나는게 힘들다고 느껴진다. 체력이 부족했다. 섹션4 시작 후 코스 내용이 너무 어렵다보니 보충하느라 산책을 전혀 못갔다.. 자신감이 너무 없었다. 배우는게 처음이니 당연히 어려운건데, 뭐든 겁부터 먹고 시작했던 것 같다. ▷ Try 적어도 일주일에 세 번 이상은 걷자. 마음 급하게 먹지 말자. 스트레스 조절 잘하자. 너무 겁 먹지말자. 노력하면 뭐라도 된다는 마음으로... 섹션4가 끝이 났..
정규표현식 정규표현식(정규식:正規式)은 문자열에서 특정한 규칙에 따른 문자열 집합을 표현하기 위해 사용되는 형식 언어이다. 정규표현식을 이용한다면 수십 줄이 필요한 코딩 작업을 간단하게 한 두 줄로 끝낼 수 있다. 정규표현식은 특정한 규칙을 갖는 문자열로 이루어진 표현식이며, 정규표현식에서의 특수 문자는 각각의 고유한 규칙을 갖고 있다. 우리는 이러한 규칙들을 조합하여 원하는 패턴을 만들고, 특정 문자열에서 해당 패턴과 대응하는 문자를 찾을 수 있다. 정규 표현식 예시 아래의 코드는 사용자가 입력한 이메일이나 휴대전화 번호가 유효한지 확인하고자 할 때 사용하는 정규표현식이다. 정규표현식을 사용한다면, 한 줄의 코드만으로 이메일이나 휴대전화 번호의 유효성을 검사할 수 있지만, 만약 그렇지 않았다면 같은 결과를 얻기 ..
[알고리즘/javascipt][Greedy] 편의점 알바 문제 편의점에서 아르바이트를 하고 있는 중에, 하필이면 피크 시간대에 손님에게 거스름돈으로 줄 동전이 부족하다는 것을 알게 되었습니다. 현재 가지고 있는 동전은 1원, 5원, 10원, 50원, 100원, 500원으로 오름차순으로 정렬되어 있고, 각 동전들은 서로 배수 관계에 있습니다. 동전 개수를 최소화하여 거스름돈 K를 만들어야 합니다. 이때, 필요한 동전 개수의 최솟값을 구하는 함수를 작성해 주세요. 입력 인자: k number 타입의 k 1 18 코드 function partTimeJob(k) { // TODO: 여기에 코드를 작성하세요. let coin = [500,100,50,10,5,1]; let answer = 0; for(let i=0;i
[알고리즘/javascript] [구현] 보드 게임 문제 N * N의 크기를 가진 보드판 위에서 게임을 하려고 합니다. 게임의 룰은 다음과 같습니다. 좌표 왼쪽 상단(0, 0)에 말을 놓는다. 말은 상, 하, 좌, 우로 이동할 수 있고, 플레이어가 조작할 수 있다. 조작의 기회는 딱 한 번 주어진다. 조작할 때 U, D, L, R은 각각 상, 하, 좌, 우를 의미하며 한 줄에 띄어쓰기 없이 써야 한다. 예시: UDDLLRRDRR, RRRRR 한 번 움직일 때마다 한 칸씩 움직이게 되며, 그 칸 안의 요소인 숫자를 획득할 수 있다. 방문한 곳을 또 방문해도 숫자를 획득할 수 있다. 보드 밖을 나간 말은 OUT 처리가 된다. 칸 안의 숫자는 0 또는 1이다. 단, 좌표 왼쪽 상단(0, 0)은 항상 0이다. 획득한 숫자를 합산하여 숫자가 제일 큰 사람이 이기게..

반응형