Sadie의 개발일기

react app gets 404 when fetching url parameter 이 글을 쓰게 만든 문제 상황 자체는 위 키워드와 같았다. 빌드한 리액트 프로젝트에 url 파라미터를 붙여서 접속하면 자꾸 404가 뜨는 것. 아래에서 자세히 쓸 거지만... 주요 원인이 클라이언트 사이트 라우팅 등과 관련된 것 때문이라는 걸 몰라서 더 헤맸다. 때문에 나와 같은 상황에 처한 누군가가 비슷한 키워드로 서치했을 때 원인을 바로 파악했으면 하는 마음에 내가 서치했던 키워드를 글 상단에 추가해 보았다. 문제 상황 나의 토이프로젝트인 사이퍼즈 성향 테스트는 카카오톡으로 테스트 결과를 공유하는 기능이 있었다. 즉 해당 버튼을 누르면 카카오톡으로 결과 페이지 url을 전송해서 다른 사람들로 하여금 접속할 수 있게 하..

브라우저 창에 꽉꽉 차는 화면.Height를 full로 하기 위한 여정을 기록한다.먼저 간단하게 전체 화면을 구성하는 컨테이너 div태그의 height를 100vh로 주었다.vh란, 뷰포트 높이에 따라 달라지는 단위이다. 1vh는 뷰포트 높이의 1%이므로, 100vh는 뷰포트의 100%, 즉 full 높이를 말한다고 볼 수 있다.이렇게 하니 정말 화면이 꽉꽉 차 보인다.하지만 모바일 화면으로 접속해 보니 이상했다.간격이 적용되지 않는 문제는 둘째치고, 화면이 묘하게 아래로 처져 있었다.찾아보니 모바일에서는 vh 계산을 할 때 상단에 위치한 url바와 하단의 네비게이션바의 높이까지 포함하여 계산한다고 한다. 그래서 조금씩 어긋나게 되는 것.구글링을 통해 해결방안을 구했다.먼저 url바와 네비게이션바의 높이..

프로젝트를 빌드하기로 했다. 구글에 치니, netlify를 이용하면 간단하게 깃허브 프로젝트를 빌드할 수 있다는 말이 굉장히 많았기에 netlify 이용! 회원가입하고 깃허브에서 빌드할 프로젝트 레포지토리를 선택 후, 빌드한다. 빌드 세팅은 이렇게 해 주었다. 사실 여러 에러를 겪은 결과인데, 처음엔 Build command에 npm run build만 저장하고 빌드했다. 그랬더니 에러 발생. 각 버튼을 클릭하면 에러 이유를 알 수 있는 Deploy log를 볼 수 있다. 쭉쭉 내려 보니 Treating warnings as errors because process.env.CI = true.라는 문구와 함께 컴파일 실패 문구가 떠 있었다. 구글링해보니 빌드 명령어를 npm run build에서 CI=fa..

문제 링크 다음처럼 풀었다. const fs = require("fs"); const input = fs.readFileSync("/dev/stdin").toString().trim(); const chroa = ["c=", "c-", "dz=", "d-", "lj", "nj", "s=", "z="]; let result = input; const getChroa = (text, word, count = 0) => { if (text.indexOf(word) === -1) { result = result.replaceAll(word, "0"); return count; } else if (text.indexOf(word) !== -1) { count++; return getChroa(text.replac..

문제 링크는 여기로! 다음과 같이 풀었다. const fs = require("fs"); const input = fs.readFileSync("/dev/stdin").toString().split("\n"); const number = Number(input[0]); for (let i = 1; i

문제 링크는 이곳 클릭! 우선 정답 코드는 다음과 같다. let fs = require("fs"); let input = fs.readFileSync("/dev/stdin").toString().split("\n"); let number = Number(input[0]); for (let i = 1; i { const quesArray = ques.split(""); let curScore = 0; const answer = quesArray.reduce((acc, cur, idx) => { if (cur === "O") { curScore++; return acc + curScore; } else { curScore = 0; return acc; } }, 0); console.log(answer); }..

호이스팅이란? 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징. console.log(score); //undefined var score; //변수 선언문 위 코드는 변수 선언문보다 변수를 참조하는 코드가 앞에 있다. 그러나 참조 에러가 발생하지 않고 undefined가 출력된다. 그 이유는 호이스팅에 의해 변수 선언이 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다. 자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서, 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행한다. ⇒ score 변수는 console.log()에서 찍을 시점에 호이스팅에 의해 이미 선언된 이후이므로, 에러가 나지 않고 undefined가 찍힌다. 변수 선..

파워셸에서 scoop 명령어를 쳐서 프로그램을 설치하려는데 계속 오류 발생... Get-ChildItem : 'C:\c\Scoop\shims' 경로는 존재하지 않으므로 찾을 수 없습니다. FullyQualifiedErrorId : PathNotFound,Microsoft.PowerShell.Commands.GetChildItemCommand뭐 이런 에러 메시지가 뜨면서 계속 설치가 실패했다... 약 30분을 들여 해결 방법 발견! 환경변수에서 오타가 난 것이었다.. C:\로 시작해야 하는데 c\로 시작하고 있었다. 너무 허망하고 슬프지만 기록해 둔다.

기존 책 내용에 보충하고 싶은 부분들(ex: 컴파일 과정)을 이것저것 추가해서 1.7.3 가상메모리까지만 정리해 보았다.(그 뒤는 시간관계상 생략...) 지금은 3장 읽고 있는데 책이 이상하게 잘 읽히지가 않아서 머리 싸매고 있다... 정글러 분들... 요약정리글 공유해요...😂 서문 프로그램의 수명주기를 따라가면서 주요 개념과 용어, 관련된 구성요소를 간략하게 소개하고자 한다. 다음 코드로 이루어진 hello.c 프로그램을 통해 이를 공부해 보자. #include int main() { printf("hello, world\n"); return 0; } 1.1 정보는 비트와 컨텍스트로 이루어진다 hello 프로그램은 소스 프로그램으로 생성되어, hello.c라는 텍스트 파일로 저장된다. 소스 프로그램 ..

오랜만에 포스팅한다... 블로그도 벨로그에서 티스토리로 옮겼고... 어느덧 4주차가 되었고 텅텅 빈 회고록... 늦게나마 한달간 알고리즘 문제풀이 주간을 진행하며 느꼈던 점들을 써보려 한다. 처음 입소했을 때와 지금 심정을 비교하자면... 약간 철든 느낌이다. 그때는 알수없는 근거없는 자신감에 차 있었고... 아하하 나는 잘 할거야~ 하는 낙관적인 생각뿐이었는데 와서 다른 사람들을 보고 1개월동안 알고리즘 문제들에 치이면서 조금 제정신이 들었다. 나는 우주먼지라는걸.... 나름 입소하기 전에 알고리즘 문제들을 풀었었고, 특히 입소 한달 전부터는 프로그래머스 Lv2~3 문제를 하루에 하나씩 풀다가 왔던지라 난....내가 잘할거라 믿었다. 0주차는 확실히 문제가 쉬웠고(다행히도), 파이썬에 익숙해지는 데 시..