림찌의 개발일기 💻

개인 프로젝트 진행 중... 한번 파일을 삭제하거나 했을 때 app crashed - waiting for file changes before starting... 이라는 에러가 뜨는걸 목격했다... 처음 떴을 땐 터미널을 전부 종료하고 vscode 도 완전 종료를 하니까 해결이 됐지만, 두번째로 에러가 발생하니까 해결해봐야겠다고 생각이 들었다. 뭐, 난 알고보니 오타로 인한 에러였지만, app crashed 에러를 해결할 여러가지 방법을 찾아보게 되어 정리하려고 한다. 1. node_modules 삭제 후 재설치 말 그대로 node_modules 삭제 후 재설치이다. 이 경우는 파일 경로가 꼬였을 때 app crash 가 일어났을 때 사용하는 방법이다. // 1단계 삭제 rm -rf node_modul..

프로그래머스 1단계 문제 연속적으로 사용된 숫자값을 제거해야하는 문제이다. 처음엔 문제를 잘 못읽고 중복되는 값을 다 제거하라는 줄 알고 function solution(arr) { var answer = arr; const set = new Set(answer); const result = [...set]; return result; } 이렇게 작성해주었는데 틀렸길래 엥? 왜지? 싶어서 문제를 다시 읽보았다. 아..연속적으로 중복되는 값을 걸러주란 얘기였구나... function solution(arr){ var answer = []; for(let i = 0; i val != arr[index+1]); } 다른사람의 풀이를 보니...wow... 짧고 간결한것이...최고... filter 사용해볼까 했..

손에 난 혹을 방치하다 점점 커져서 병원에 가니... 갑작스론 수술과 입원 ㅜㅜ 11월 3일부터 8일까지 입원을 했고 실밥은 24일에 뺄거같아 그때까진 깁스신세다ㅠㅠ 입원하는 동안 뭐라도 포스팅하고자 리덕스관련 포스팅을 하다가 수술후 너무 아프고 링겔과 깁스땜에 타자치는거ㅛ도 힘들어서 포기했다. 지금은 아픈건 덜하지만 깁스땜에 타자치기가 넘 힘들다ㅠㅠㅠ 나 공부해야하는데에에에 그래도 코드 한줄이라도 쳐서 깃에 올려야겠다고 다짐했다. 얼른 깁스풀고 코드치고싶어ㅜㅜㅜㅜㅜㅜ 면접도 보러가고싶어서 너무너무 속상하다. 몸 건강이 진짜 최고라는걸 다시 느꼈다. 다들 몸조심 하시길... 손가락은 나와있어서 타자 치기 가능이라 생각했는데... 조금만 힘주거나 손가락을 벌리면 상처가 벌어지는 기분과 따끔거림이 날 조심스..

해결 : 정규 표현식과 replace() 메서드를 이용하여 풀이한다. 1단계 : toLowerCase() 메소드를 이용하여 대문자를 소문자로 치환 2단계 : replace() 메소드를 이용하여 문자열으로 치환해준다. (/[^a-z0-9-_.]/g. '') ➡️ '[]': 이 안에 있는 정규표현식이 일치한다면 ''(빈 문자열) 를 반환해주라는 뜻. 3단계: replace() 메소드를 이용하여 문자열으로 치환해준다. (/\.+/g, '.') ➡️ '.'(마침표) 는 정규표현식에서 어떤 문자든 상관없이 1개의 문자 자체를 뜻한다. 그래서 이를 마침표로 인식하기 위해서는 백슬러시를 사용해야한다. \. 은 마침표가 포함된 문자열을 찾으라는 뜻이고 뒤에 붙은 + 는 한개 이상이 포함되어 있을 때라는 뜻이다. 마침표..

✅ 무엇을 공부했는지 - CSR, SSR, TTV, TTI, SSG ✅ 공부한 것에 대한 짧막한 요약 클라이언트사이드 렌더링 : 웹 사이트 접속시 우선 빈 html 파일을 클라에 불러오고 그 후에 동적인 js 와 같은 프레임워크, 라이브러리를 불러온다. 장점 : TTV 와 TTI 가 불일치할 일이 없다. 단점 : 검색엔진최적화가 최악이다. 빈화면만 최초에 보내지기 때문에 검색엔진에 걸러지게 된다. 또한 최초 로딩이 엄청 길수도.... 서버사이드 렌더링 : 웹 사이트 접속시 필요한 데이터들을 모두 가져와 html 파일을 생성하게 되고, 이렇게 만들어진 html 파일을 동적으로 제어할 수 있는 소스 코드를 클라이언트에 보내주게 된다. 장점 : 최초 로딩이 빠르다, 검색엔진최적화에 좋다 단점 : TTV 와 T..

JSON 이 무엇인지 한 번 파해쳐보자. 지금까지 프로젝트를 작업하거나 공부를 하면서 자주 들었던 'JSON'. 데이터가 담긴 파일 형식이라는 것만 두루뭉실하게 알고 있었다. 이렇게만 알고 있어도 개발을 하는데에 큰 무리가 없었던 지라, 그냥 그렇게만 알고 있었는데 어느날 친구가 '그래서 JSON 이 뭔데?' 하고 물어봤을때, 속 시원하게 대답하지 못한게 마음에 걸려 이번에 제대로 알아보고자 한다. 우리는 클라이언트가 서버로 보내는 'Request(요청)'과 서버가 클라이언트로 보내는 'Response(응답)' 에 대해 알고 있을 것이다. 그리고 이 요청과 응답을 서로 주고 받을 때, 데이터가 담겨 있을 수 있다. 이 데이터를 서로 주고받기 위해 데이터가 담겨있는 '형식' 이 있다. 이 '형식' 중 하나..

로컬 json data 파일을 이용해 포트폴리오 사이트를 만드는 중에 뭔가 이상한 점을 발견했다. 난, 단일 데이터를 가져오는 페이지에서 파람값으로 id 를 전달해주었고, 파람 id 와 json data id 값이 일치하면 데이터가 뿌려지도록 작성을 해주었었다. const Component = ({id}) => { return( {jsonData.map((item) => ( {id == item.id ? 나는 예시예요 ㅎㅎ : null} ))} ); } 간단하게 이런식으로 작성을 했다고 치자... 가져온 id 는 '2' 라고 생각하자. 화면만 봤을 때는, 내가 원하는대로 특전 id 를 가진 json data 만 화면에 그려졌기 때문에 ,정상적으로 불러오는 줄 알았다. 그런데 css 수정을 위해 개발 모드..

리액트 작업 도중 props를 넘겨주었는데, 넘겨준 prop에 빨간 줄이 떠서 마우스를 갖다 대니 이러한 문구가 떴다. 그런데 웹이 작동이 안되는 것은 아니다. 정상적으로 props를 받아오고, 실행도 되는데... 뭐지? esLint 에 걸리는 거 같은디~~! --- 우선 해결 방법부터 말하자면 props type 을 검사해주어야 빨간 줄이 사라진다. props type 검사 방법은 아래와 같은 명령어로 props-types를 설치를 해주고 yarn add prop-types import React from 'react'; import PropTypes from 'prop-types'; const ComponentName = ({children}) => { return(저는 예시 컴포넌트에요 👏 {chi..

✅ 무엇을 공부했는지 - 자바스크립트 클래스의 사용법 / 재활용성 ✅ 공부한 것에 대한 짧막한 요약 - 자바스크립트 클래스의 사용법 / 재활용성 자바스크립트 클래스 내부에서 함수를 생성하면 function 키워드 없이 그냥 함수 이름만 적어서 생성해줘도 된다. 만들어준 클래스는 `new` 연산자를 통해 클래스를 생성하게 되면 constructor가 실행이 되는데, 여기서 초기값을 설정해주면 된다. 클래스를 new 연산자를 이용해 생성할때, 인자 값으로 서로 다른 함수 이름을 보내주면, 같은 클래스를 사용하지만 받아온 함수 값은 달라서 한 개의 클래스로 다양한 오브젝트를 생성할 수 있다. 그리고 클래스를 이용해 함수를 여러번 호출할때... 매번 인자값에 함수 이름을 적어주기 번거로우면 constructor..

✅ 무엇을 공부했는지 - async / await - promise 의 apis ✅ 공부한 것에 대한 짧막한 요약 async, await 은 promise 를 좀더 간편하게 사용하도록 도와주는 syntactic sugar 이다. 사용법은 함수 앞에 async를 붙이면 자동으로 그 블록안에 있는 코드들은 promise에 감싸지게 된다. await을 사용하면 몇 초뒤에 실행할건지 등의 제약(?) 을 걸수 있다. 이를 활용하면 프로미스 체이닝에 의한 콜백지옥을 빗겨나갈 수 있다. 또한 서로 관계 없이 병렬적으로 실행되는 함수라면, 서로 기다려줄 필요가 없으니 프로미스를 미리 불러와서 실행시켜서 기다릴 필요 없이 동시 출력을 하는게 효율적이다. 이러한 구조를 좀더 코드로 짧게 구현할 수 있는 프로미스 api가 ..