본문 바로가기

분류 전체보기198

[Javascript] **(프로그래머스 level 0) 짝수는 싫어요** [Javascript] (프로그래머스 level 0) 짝수는 싫어요 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 function solution(n) { return Array.from({ length : Math.ceil(n / 2) }, (_, i) => (i * 2) + 1); } 배운 점, 느낀 점 Level 0 이라 쉽게 봤는데, Array.from 문법을 잘 몰라서 시간이 조금 걸렸다. 기초가 단단해야한다! 열심히 하자! 2022. 10. 7.
[Next.js] Next.js 초기세팅에서 yarn start 하면 생기는 일 원티드 챌린지 10월 (SSR, CSR, Next.js)에서 내준 과제입니다. 해당 과제를 이해조차 못했는데, 수강하시는 분들 중 좋은 블로그 글이 있어 참고하였습니다. 아니 그냥 거의 따라 해봤습니다. 😭 개발세계엔 대단하신 분들이 많아요~! 존경 존경 과제를 잘 해주셨다고 칭찬받으신 포스팅 Next.js 초기세팅에서 Yarn Start 하면 생기는 일 import '../styles/globals.css' function MyApp({ Component, pageProps }) { return } export default MyApp yarn start를 하면 '_app.js' 파일이 먼저 실행되나 봅니다. 해당 파일은 프롭스로 { 컴포넌트와 페이지 프롭스를 받습니다. }.. 2022. 10. 6.
[React.js] Github Page를 활용한 개인 프로젝트 배포 npm install --save gh-pages 로 gh-pages를 dev 용으로 설치한다. 아래 그림 처럼 "homepage"이름을 정해주세요. 아래 그림 처럼 "predeploy"와 "deploy" 스크립츠를 선언해주세요. 아래 그림처럼 BrowserRouter에 basename="깃헙 레포이름" 으로 설정해주세요. userPage가 아니라면 해당 깃헙 레포이름이 필요합니다. npm run deploy 하시면 build폴더가 생기며 모든 준비가 끝이 납니다. 404 에러 저는 처음에 404에러가 뜨면서 계속 배포가 안되는 에러가 있었습니다. 해결방법은.... 좀 기다리시면 돼요.... 만약 이미지가 들어있다면 경로를 잘 확인하라고 하네요. https 에러 https로 들어왔는데, 왜 http로 s.. 2022. 10. 4.
[React.js] delete fetch 시 'Undexpected end of JSON input' 에러 Todo App을 Delete를 구현하다 fetch 후 Delete는 제대로 되었지만, 자꾸 fetch의 try-catch 문에서 error가 잡히면서 위 "Unexpected end of JSON input"에러가 발생했다. 구글링을 통해 알게 된 새로운 사실로는 (스오플 링크) "204 OK"로 오더라도 body값에 아무것도 담겨있지 않은 상태로 왔는데 response.json()을 하니 생긴 에러라고 한다. 해당 에러 메세지가 발생 하지 않도록 아래 처럼 204일 때 분기처리를 해주었다. 해당 코드가 현업에서의 Best Practice인지 아직은 모르지만, 현 상태에선 문제 해결을 위해 만들어 낸 최선의 코드일 것 같다. export const request = async (uri, options .. 2022. 10. 3.
[Javascript] (프로그래머스 level 2) 카펫 [Javascript] (프로그래머스 level 2) 카펫 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 function solution(brown, yellow) { for (let i = 1; i 2022. 9. 30.
[Javascript] (프로그래머스 level 2) 올바른 괄호 [Javascript] (프로그래머스 level 2) 올바른 괄호 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 function solution(s){ let count = 0; for (let i = 0; i < s.length; i++) { if (s[i] === &#39;(&#39;) { count++; continue; } else if (s[i] === &#39;)&#39;) { count--; } if (count < 0) { return false } } return count === 0; } 스택 문제라는 걸 알고 있어서 push() pop()을 통해 풀었더니 “시간 초과”가 뜨네요.. 그래서 그냥 위 코드 처럼 count해서 ‘(’ 이면 ++.. 2022. 9. 29.
[Vue.js] Emit, v-model로 컴포넌트간 데이터 보내기 (자식 컴포넌트 => 부모 컴포넌트) Vue.js에서 컴포넌트간 데이터 통신은 Props와 Emit으로 가능하다. React.js : 부모=> 자식 컴포넌트 방향으로 Props만 내릴 수 있는 단반향 데이터 흐름 Vue.js : 부모 => 자식 방향은 Props로 데이터 내리기, 자식 => 부모 방향은 Event Emit으로 데이터 올리기가 가능한 양방향 데이터 흐름 부모 컴포넌트의 데이터를 자식 컴포넌트에서 변경하여 부모 컴포넌트로 다시 올리려면? react에선 부모 컴포넌트에 있는 state를 자식 컴포넌트에서 setState만 props로 받으면 쉽게 변경이 가능했습니다. Vue.js에선 어떻게 할까요? Vue.js에선 emit을 사용해 데이터를 보낼수 있습니다. watch: { selectedValue: function (newVal.. 2022. 9. 28.
[Vue.js] 로컬스토리지 새로고침 문제 ;; (해결) To Do App을 만들다. vue2로 컴포넌트간 데이터 주고 받는게 이해가 안되서 혼자 To Do App을 만들어 보고 있습니다. 프롭스로 데이터 내리고, 이벤트로 올리는 걸 하면서 익숙해지는 중이었습니다. ⁉️ 근데 문제가 생겼네요. 말이 안되는 문제라 지금 아직 해결을 못했어요. created() { for (let i = 0; i < localStorage.length; i++) { let todoKey = localStorage.key(i); console.log(todoKey) let item = JSON.parse(localStorage.getItem(todoKey)); console.log(item); this.todoList.push(item); } }, 문제가 발생한 코드는 위 코드입니.. 2022. 9. 28.
CSR과 SSR CSR (Client Side Rendering) SSR(Server Side Rendering) CSR이란? CSR이란 Client Side Rendering의 약자이다. 직역 하면 클라이언트 측에서 렌더링을 한다는 의미가 된다. CSR이라는 용어가 낯설지만, 생각보다 간단한 개념이다. CSR은 특별한 것이 아니라 나처럼 웹 개발, 프론트엔드 개발을 시작한지 얼마 안된 사람이라면 웹의 기본적인 동작으로 알고 있는 방식이다. 그 방식은 바로 서버에서는 데이터를 보내 주는 역할을 하고, 클라이언트에서는 해당 데이터를 통해 화면을 보여주고, 유저 인터렉션을 통해 데이터를 요청하는 방식이다. CSR 동작 방식을 순서대로 표현하면 다음과 같다. 클라이언트에서 서버로 Javascript 요청 서버에서 클라이언트로.. 2022. 9. 28.
[Javascript] (프로그래머스) 짝지어 제거하기 (level 2) [Javascript] (프로그래머스) 짝지어 제거하기 (level 2) 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 function solution(s) { const stack = [&#39;&#39;]; for (let i = 0; i < s.length; i++) { let curIndex = stack.push(s[i]) - 1; if (stack[curIndex - 1] === stack[curIndex]) { stack.pop(); stack.pop(); } } return stack.length === 1 ? 1 : 0; } 투포인터로 돌리려고 코드를 짜고 있었습니다. 근데 갑자기 이게 도대체 뭐하는 짓이지… 라는 현타가 오면서 더 좋은 방법.. 2022. 9. 28.

티스토리툴바