100일은 해야지

Next.js!!!!  pages 폴더에 넣어주는 것만으로도 페이지가 만들어진다.그 파일이름이 페이지가 되는 거임 리액트 라우터를 사용 안 해도 됨일단 index가 기본이고  about폴더 주소는 아래처럼....  pages폴더에 폴더를 하나 더 만들고 파일을 만들어주면 페이지가 뙇next.js가 pages폴더의 파일들의 이름을 가져다가 url이름으로 만드는 거임  그리고 뼈대는 설치할 때 app router사용할 것인지 선택하는 부분에서 초큼 바뀌는 듯하다.app router를 사용하게 되면 pages폴더 대신 app폴더가 생기고 page.tsx가 기본 페이지layout.tsx는 페이지에서 공통으로 쓰는 header 같은 걸 작성하는 파일이다.(참고로 app router를 사용하지 않으면 pages폴더..

4주 차 회고(06.19~06.25) 벌써 4주 차가 지나고 지금 5주 차째!! 4주 차에는 많은 일을 한 것은 아님 그냥 게시글 등록 UI 만든 정도? 잠깐 쉬어가는 시간이라고 생각함 이때 공부했어야 하는데.... 일단 이번주는 게시판 새 글 작성에 대한 것을 했다. input으로 쓰기에는 좀 긴 것 같아서 본문 입력창을 textarea태그로 해놨다. 거기다 textarea의 속성으로 row를 주면 줄 수만큼 크기가 커지고 사용자가 마음대로 본문창의 크기를 늘리고 줄이는 게 좋을 것 같아서 결정. 글 작성창에서 x를 누르면 진짜 닫기를 누를 건지 확인하는 모달창이 또 뜨게 만들었다. 사진은 최대 3개까지 담을 수 있고 담긴 사진을 미리 보기 할 수 있게 했다. 사진 위에 X버튼을 누르면 지워진다. 아직..

문제 설명 : 인덱스 바꾸기 문자열 my_string과 정수 num1, num2가 매개변수로 주어질 때, my_string에서 인덱스 num1과 인덱스 num2에 해당하는 문자를 바꾼 문자열을 return 하는 solution 함수?? 제한사항 1 < my_string의 길이 < 100 0 ≤ num1, num2 < my_string의 길이 my_string은 소문자로 이루어져 있다. num1 ≠ num2 입출력예 my_string num1 num2 result "hello" 1 2 "hlelo" "I love you" 3 6 "I l veoyou" 문제 풀이 접근1) 새로운 문자열에 하나씩 더해주다가 num1의 인덱스가 나오면 num2의 값을 넣어주고, num2의 인덱스가 나오면 num1의 값을 넣어줬..

문제 설명 : OX퀴즈 덧셈, 뺄셈 수식들이 'X [연산자] Y = Z' 형태로 들어있는 문자열 배열 quiz가 매개변수로 주어진다. 수식이 옳다면 "O"를 틀리다면 "X"를 순서대로 담은 배열을 return하는 solution함수??? 제한사항 연산 기호와 숫자 사이는 항상 하나의 공백이 존재한다. 단 음수를 표시하는 마이너스 기호와 숫자 사이에는 공백이 존재하지 않는다. 1 ≤ quiz의 길이 ≤ 10 X, Y, Z는 각각 0부터 9까지 숫자로 이루어진 정수를 의미하며, 각 숫자의 맨 앞에 마이너스 기호가 하나 있을 수 있고 이는 음수를 의미한다. X, Y, Z는 0을 제외하고는 0으로 시작하지 않는다. -10,000 ≤ X, Y ≤ 10,000 -20,000 ≤ Z ≤ 20,000 [연산자]는 +와..

문제 설명 : 7의 개수 정수 배열 array가 매개변수로 주어질 때, 7이 총 몇 개 있는지 return 하는 solution 함수??? 제한 사항 1 ≤ array의 길이 ≤ 100 0 ≤ array의 원소 ≤ 100,000 입출력 예 array result [7, 77, 17] 4 [10, 29] 0 문제 풀이 배열안의 7의 개수를 구하는 것이기 때문에 그냥 다 합치고, 7만 필터링해서 길이를 구해주면 된다 function solution(array) { return array.join("").split("").filter((v)=> v==="7").length } 문제 설명 : 문자열 정렬하기(2) 영어 대소문자로 이루어진 문자열 my_string이 매개변수로 주어질 때, my_string을 모두..

문제 설명 : 종이 자르기 큰 종이를 1 *1 크기로 자르려 한다. 예를 들어 2*2 크기의 종이를 1*1 크기로 자르려면 최소 가위질 세 번이 필요하다. 정수 M, N이 매개변수로 주어질 때, M * N 크기의 종이를 최소로 가위질 해야하는 횟수를 return 하는 solution함수??? 제한사항 0 < M,N < 100 종이를 겹쳐서 자를 수 없습니다. 입출력 예 M N result 2 2 3 2 5 9 1 1 0 문제 풀이 function solution(M, N) { return M * N - 1 } 문제 설명 : 문자열 밀기 문자열 "hello"에서 각 문자를 오른쪽으로 한 칸씩 밀고 마지막 문자는 맨 앞으로 이동시키면 "ohell"이 됩니다. 이것을 문자열을 민다고 정의한다면 문자열 A와 B..

드디어 가계부를 마무리했다! 중간중간에 변경 사항이 좀 있어서 계속 바꾸다 보니 엄청 밀려서 끝냈다 그리고 계속 Prop으로 넘기고 넘기다 보니 여러 개의 기능을 같이 쓰는 페이지를 만들 때 헷갈리고 오류가 자꾸 생겨서 힘들어하다가 아... recoil 사용하기로 했지? recoil로 전역상태관리하기로 했던 게 뒤늦게야 생각이 나서 그때부터는 술술 풀렸다. 그 대신 리코일은 지금 한창 쓰려고 노력하는 중이라 useRecoilState 코드가 많아졌다. 아직 조금 서툴러서 그런가 보다 하고 넘기려 함 차차 나아지겠지. 4주 차 때 리팩토링 하면서 정리할 거니 되었다. 그리고 이번에 react-datepicker라는 라이브러리 써봤다. 처음에는 조금 어려웠지만 https://reactdatepicker.co..

문제 설명 : 옹알이(1) "aya", "ye", "woo", "ma" 네 가지 발음을 최대 한 번씩 사용해 조합한(이어 붙인) 발음만 할 수 있는 조카가 있음 문자열 배열 babbling이 매개변수로 주어 질 때, 조카가 발음할 수 있는 단어의 개수를 return 하는 solution함수?? 제한사항 1 ≤ babbling의 길이 ≤ 100 1 ≤ babbling[i]의 길이 ≤ 15 babbling의 각 문자열에서 "aya", "ye", "woo", "ma"는 각각 최대 한 번씩만 등장 즉, 각 문자열의 가능한 모든 부분 문자열 중에서 "aya", "ye", "woo", "ma"가 한 번씩만 등장 문자열은 알파벳 소문자로만 이루어져 있음 입출력 예 babbling result ["aya", "yee"..