티스토리

개발일지

검색하기

블로그 홈

개발일지

mothercargasoline.tistory.com/m

MotherCarGasoline 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

소확행 무라카미 하루키에게 속은거다. 꿈을 꾸는자 이 자들은 씨앗이 크고 굵어요. 작은 것에 만족하는 것이 소확행이 아니라 작은 것에 만족하는 그 행복을 통해서 내가 우주적 넓이로 커질 수 있다는 것 때문에 소확행의 의미가 있는거지 이렇게 큰 생각과 작은 행복을 연결시키는 용기가 없으면 그냥 이 작은 행복만 만들어 내는거죠 그럼 무라카미 하루키한테 완전 속은거에요 https://www.youtube.com/watch?v=-4aFvCgVQso 공감수 0 댓글수 0 2022. 7. 12.
변수의 유효범위와 렉시컬 환경 반. https://ko.javascript.info/closure 변수의 유효범위와 클로저 ko.javascript.info let 함수의 변수 선언은 코드블로{…} 안에서만 사용할 수 있습니다. ‘렉시컬 환경’은 명세서에서 자바스크립트가 어떻게 도악하는지 설명하는데 쓰이는 ‘이론상의’ 객체 입니다. 따라서 코드를 사용해 직접 렉시컬 환경을 얻거나 조작하는 것은 불가능. 단계 1. 변수 자바스크립트에선 실행 중인 함수, 코드 블록 {...}, 스크립트 전체는 렉시컬 환경(Lexical Environment) 이라 불리는 내부 숨김 연관 객체(internal hidden associated object)를 갖습니다. 렉시컬 환경 객체는 두 부분으로 구성됩니다. 환경 레코드(Environment Record) .. 공감수 0 댓글수 0 2022. 7. 1.
ASI, ; 자바스크립트에 세미콜론이 왜 자동으로 들어가요?? 유튜브 구독이 된 얄팍한 코딩사전 세미콜론 영상이 올라와 바로 작성해본다 https://www.youtube.com/watch?v=hJjYvVOEO7s 코딩을 처음 시작할때 파이썬에서도 그랬고 세미콜론을 안찍어주면 오류가 나기도했는데 또 어느 부분은 세미콜론을 안찍어도 작동이 되는 부분도 있었다. 그래서 결국은 가로가 끝날 때면 그냥 다 붙여버렸다 코드를 짜다보면 어떨때는 세미콜론을 자동으로 붙여준다 개발자의 의도와는 다르게 세미콜론을 찍거나 안찍어준다. 이를 ASI라고 한다. (Automatic Semicolon Inserion, 자동 세미콜론 삽입) 특징은 줄바꿈을 찾아내 자동으로 세미콜론을 붙여준다. 신경써줘야 하는 부분을 아래 예시로 확인해보자 1. 줄 바꿈에 자동으로 찍힐 때 왼쪽사진과 같이 세.. 공감수 0 댓글수 0 2022. 7. 1.
redux 코드 사용 관련 팁들. 내가 잘못한 것들에 대한 피드백 개발 공부를 시작하니 총 3달이 되어 가는 과정에 급한 진도를 빼느라 따라했던것들이 잘못된것이라면?? 혹은 잘못된지도 몰랐다면?? 홀리시이시이잇~ 그래서 몇가지 피드백 받은것들을 적어보자구 1. action.payload에는 한가지 값만 들어간다. 위에는 모르고 디스패치에 값을 여러개 넣어놓고 그냥 쓰고있는거다 정작 들어간느건 username 하나일것이다. 근데 회원가입과 로그인에는 전역상태가 필요없으니 확인도 안하고 그냥 저렇게 코드를 내버려 두고 있었다. 리더님이 말한다 이게 왜 여기에서 필요한지 이유를 꼭 생각하라고. 혹시나 사용한다면 이런식으로 담아서 data를 보내야겠지 2. 미들웨어를 왜 쓰는지 리덕스 미들웨어는 액션과 리듀서의 중간자이고 액션을 디스패치 할 때 사전에 지정된 작업을 실행할 수.. 공감수 0 댓글수 0 2022. 7. 1.
로그인, 회원가입 Refresh Token 구현하기! + local storage, access EP.6 오늘은 아침에 일어나 하루 종일 Refresh Token에 매달렸다ㅎㅎㅎㅎ 아침에 일어나서 어제 봤던 JWT와 Token 자료들을 훑어보고 점심 지나 시작하려했지만 진짜 어떻게 시작을 해야할지 몰라서 리더님께 도움좀 청하고 큰 틀과 'setTimeout은 일단 두고 토큰 두개가 받아오는지부터 확인하시죠' , 코드는 블로그에서 이 부분을 사용하시면 금방 하실걸요? 와 함께 시작했는데 또 조언 몇번 받으니까 매끄럽게 풀리는 느낌이었다. 서버오류 500과 함께 백엔드에 서버문의를 드리고 요청과 응답 부분을 합의하면서 나도 오류 몇개 고쳐보고 진행하니 오래 걸리지않고 토큰을 받아오게 되었다! 그리고 타이머를 걸어 토큰만료 1분 전에 새로운 토큰을 받아오게 세팅했다. 아 그전에 아침부터 읽었던 JWT와 토큰, 그.. 공감수 0 댓글수 0 2022. 7. 1.
JWT, Access, Refresh Token https://tansfil.tistory.com/58?category=475681 쉽게 알아보는 서버 인증 1편(세션/쿠키 , JWT) 앱 개발을 처음 배우게 됐을 때, 각종 화면을 디자인해보면서 프론트엔드 개발에 큰 흥미가 생겼습니다. 한때 프론트엔드 개발자를 꿈꾸기도 했었죠(현실은 ...) 그러나 서버와 통신을 처음 배 tansfil.tistory.com 1. 이미 발급된 JWT에 대해서는 돌이킬 수 없습니다. 세션/쿠키의 경우 만일 쿠키가 악의적으로 이용된다면, 해당하는 세션을 지워버리면 됩니다. 하지만 JWT는 한 번 발급되면 유효기간이 완료될 때 까지는 계속 사용이 가능합니다. 따라서 악의적인 사용자는 유효기간이 지나기 전까지 신나게 정보들을 털어갈 수 있습니다. -> 해결책 기존의 Acces.. 공감수 0 댓글수 0 2022. 6. 30.
로그인, 회원가입 구현 어디까지 갔니? Truoble Shooting EP.5 아직 와이어프레임이 안나와서 기능 구현에 힘을 실었다. 처음이다 보니 많이 더욱 더 얼탈줄 알았는데 옆에 멘토같은 리더님이랑 코드를 그래도 조금 써봤다고 전에 CRUD할 때 보다는 많이 성장했다고 느꼈다.. 그래도 한참 멀었지만?! 먼저 유효성 검사 코드는 이렇다. // 유효성검사 if (id === "" || pw === "" || nick === "") { alert("아이디, 닉네임, 비밀번호를 모두 입력해주세요."); return; } // 이메일 검사: '@', '.' 이 둘다 포함될것. const isValidEmail = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; if (!isValid.. 공감수 0 댓글수 0 2022. 6. 30.
프론트 엔드 규칙 정하기! EP.4 6월 27일 해야 하는 것 CI/CD 연결 확인 기술 스택 선정 코드 규칙 정하기 커밋 규칙 정하기 ** 기술 스택 선정 ** - Redux Toolkit → 이걸 쓴다 O / 전역 상태 관리 - 전역적으로 사용할 전역 데이터도 사용 - 미들웨어를 통해서 axios 에서 가져온 데이터를 툴킷에 넣어서 사용 - React Query → 리덕스를 기준으로 작성을 하고 시간 남을 때 쿼리로 재작성 (자기파트) - Styled-Components / tailwind → 같이 * 코드 규칙 - camelCase → 첫글자는 소문자 단어마다 대문자 * 코드포매터 prettier * 태그 id는 camelCase, 클래스명 (_) * 커밋 규칙 https://jason-api.tistory.com/89 https:/.. 공감수 0 댓글수 0 2022. 6. 29.
재귀와 스택, for문과 pow로 비교해보시오 https://ko.javascript.info/recursion 재귀와 스택 ko.javascript.info 재귀와 스택 함수에 대해 좀 더 깊이 알아보도록 하겠습니다. 함수 심화학습, 첫 번째 주제는 재귀(recursion) 입니다. 프로그래밍을 새롭게 학습하는 초심자가 아니라 이 주제에 익숙하시다면, 본 챕터를 건너뛰어도 괜찮습니다. 재귀는 큰 목표 작업 하나를 동일하면서 간단한 작업 여러 개로 나눌 수 있을 때 유용한 프로그래밍 패턴입니다. 목표 작업을 간단한 동작 하나와 목표 작업을 변형한 작업으로 단순화시킬 수 있을 때도 재귀를 사용할 수 있습니다. 곧 살펴보겠지만, 특정 자료구조를 다뤄야 할 때도 재귀가 사용됩니다. 문제 해결을 하다 보면 함수에서 다른 함수를 호출해야 할 때가 있습니다. .. 공감수 0 댓글수 0 2022. 6. 29.
멘토님께 MVP 목표와 기술스펙을 피드백 받다!! EP.3 먼저 우리는 프로젝트 주제를 드라이브 방식의 데이터 관리로 정했다. 구글드라이브와 핀터레스트를 처음에 레퍼런스로 잡고 진행을 하다가 서로 장점을 겹치다 보니 방향성을 잃어버리는게 있어서 기획회의에 조금 더 구체적으로 정해야함을 느껴 수정 중이다. 먼저 작성해둔 스펙은 첫 회의 때 작성해두고 두 번째에 바뀐 것들이 있는데 첫번째로 피드백을 받게 되어 아쉽지만 큰틀은 거의 같고 기술 피드백에서 소중한 부분이 많아 중요한 것들을 체크해보겠다. 토큰 방식을 access token, refresh token 두개를 기간 차이를 두고 사용하기로 했고. 파일 관리하며 드는 서버 비용을 알아봐서 이미지는 s3 storage 프리티어로 정했고 CI/CD 구축완료 목표 피드백으로는 기획을 더 탄탄하게 잡기 API 설계는 .. 공감수 0 댓글수 0 2022. 6. 29.
두번 째 회의! 그리고 프론트 파일명 정하기 EP.2 아침에 굿모닝 프론트 회의를 진행했다ㅎㅎ 컴포넌트와 폴더 이름명을 정하고 오후 전체회의에서 얘기해 볼 백엔드와 JWT 로그인시 Refresh 토큰까지 적용할 것인지. 디자이너님과는 기존 mvp에 있던 온보드 페이지를 뒤로 미루고 띄운다면 팝업이나 어느 페이지에서 띄울지 그리고 모달창 디자인 정도가 있고 다같이 만나서는 게시글 부분에서 타입 설정하고 우선순위를 어떤것부터 만들어둘지, 쓰기, 편집시 어떤 형태로 할지, 전체적인 상세기획 추가로 하고 폴더를 메인 관리페이지에서 공개,비공개 설정을 명확히 하나로 정해야한다. 그렇게 회의를 마친 결과는 이렇다. 1. 온보딩 페이지 ( 앱 소개 페이지 ) → 나중에 좀 진행이 됬을때 1. 웹서비스 소개 영역 2. 처음에 소개처럼 나올수도 있고 3. 온보딩이 메인에서.. 공감수 0 댓글수 0 2022. 6. 29.
실전 프로젝트 시작! 기획 회의 정리 EP.1 6월 24일을 시작으로 실전 프로젝트 조가 배정되었다. 우리는 프론트 3명, 백엔드 3명 , 디자이너 1명이다 다들 가볍게 자기소개 한 뒤 바로 기획회의를 시작해서 저녁에도 디자이너님과 저녁회의를 한 번도 안쉬고 3시간 30분에 걸친 대장정을 끝냈다ㅎㅎㅎㅎ 그 첫번째 모두가 진 빠진 대장정의 결과는 이렇다!! 전체 기획 # 링크,글 자료 기반 카탈로그 작성 및 공유하는 소셜 네트워킹 서비스 # 정보 아카이브 서비스 1. 온보딩 페이지 ( 앱 소개 페이지 ) a. 웹서비스 소개 영역 2. 로그인/회원가입 페이지 1. JWT 토큰 발급을 통한 로그인 2. 일반 로그인 3. 소셜 로그인 3. 메인 페이지 1. 드래그 앤 드롭으로 내 계정 폴더에 복사/붙여넣기 2. 게시물 공개/비공개 설정 3. 게시물 작성하기.. 공감수 0 댓글수 0 2022. 6. 29.
실전 프로젝트하며 기술적으로 막힌 Troble Shooting과 해결법 + 8주차 회고 이번 프로젝트를 진행하면서 처음 기능 구현하는 로그인와 회원가입에서 트러블 슈팅들을 정리해둔 글이다 처음이다보니 당연히 어려웠지만 그 중에서도 지금 진행중인 유효성검사hook-form사용과 토큰 받아오기다. 로그인과 회원가입은 프로젝트에서 계속 포함되면서 질문에 대한 답과 참고할 코드가 있지만 refresh토큰 받아오기와 유효성 검사 hook-form 사용은 찾아보기 어려웠다. 지금 현재는 유효성 검사에 hook-form과 Ref를 같이 사용하는데 오류가나서 헤매는 중이다. 추후에 해결 후 작성하고자 한다. 고민이 되는것은 훅폼+Ref을 먼저할지, 로컬에 있는 refresh를 쿠키로 받아오는것을 먼저 할지 우선순위가 애매해진 상황이다. 결과들은 카테고리 - 실전프로젝트 - 에 올리겠다. https://m.. 공감수 0 댓글수 0 2022. 6. 29.
navigate를 사용했는데 Invalid hook call. error 해결법 리액트 회원가입 부분을 만들면서 navigate로 회원가입 axios/post 후 메인으로 페이지 이동을 넣으려고 작성한 코드이다 // userSlice.js import { useNavigate } from "react-router-dom"; ㅡㅡㅡㅡㅡㅡㅡ export const signup = (username, nickname, password) => { return async function (dispatch) { const navigate = useNavigate(); try { const repsonse = await axios.post("http://localhost:5001/signup", { username: username, nickname: nickname, imgPath: null,.. 공감수 0 댓글수 0 2022. 6. 28.
Object.assign() 값을 차례대로 겹쳐 복사하기 (드림코딩 자바스크립트 입문편) 처음 Object.assign을 보고 차례대로 값을 복사한다고 생각해서 중첩되는줄 알았다. 그래서 콘솔 결과값은 color = red,blue size = big 인줄 알았지만 차례대로 덮어가면서 복사한다는 메소드로 설명되었다. assign 아래 추가 설명 (제네릭 관련 기호이기 때문에 아직 모르는게 당연하다) 복사하려는 target과 복사하려는 source로 구성되어있다. 차례대로 T와 U와 V가 겹쳐서 복사된다. 위에 color와 같이 복사되면서 없는 property는 덮어진다. 교집합처럼 https://www.youtube.com/watch?v=1Lbr29tzAA8&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=7 공감수 0 댓글수 0 2022. 6. 26.
for [i] 반복문 보다 쉽고 편리한 for(value of array), forEach 드림코딩 프론트엔드 개발자 입문편에서 자바스크립트 문법강의를 보던 중 되게 편리해서 쉽게 사용해보자! 라는 생각에 가져와 봤습니다! 기존 for반복문을 사용했을 부분을 value부분으로 돌려 보아도 되겠군요. 단, 알고리즘 공부하며 직접 오브젝트를 건드린다는 의미로 사용하기를 자제하라했던 말이 남겨두고 사용전에 찾아보도록 하겠습니다. 일단 아래 문법은 이렇습니다. value of array로 변신 14분 20초 추가 강의에서는 foreach도 나온다 8강 16분 45초 https://www.youtube.com/watch?v=1Lbr29tzAA8&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=7 https://www.youtube.com/watch?v=yOdAVDuHU.. 공감수 0 댓글수 0 2022. 6. 26.
이번 주차를 진행하며 내가 가장 신경 쓴 부분/기술에 대한 정리 + 7주차 회고 우리는 클론 주차에 웹소켓을 중점으로 잡았기 때문에 먼저 나는 프론트 리덕스 툴킷( 상태관리 )를 완성 후 투입을 해야 겠다고 생각했다. 다만 회고에 작성한대로 웹소켓에 대한 지식부족으로 후에 컴포넌트 분리 과정에서 코드를 벌려 써서, 파라미터값이나 props를 불러 들이기가 정말 헷갈렸고 깨지는 css를 마지막에 다듬지도 않고 일단 소켓을 연결해보자! 라는식으로 방치하게 되었다. 이 상황에 기획의 중요성과 도전하려는 기술에 대한 지식습득이 필요하다는 것을 느꼈다. 먼저 나는 채팅홈 뷰, 채팅방 조회, 생성, 삭제와 채팅메세지 조회, 추가 부분을 맡았다 저번 첫날에 기획을 끝내고 초기 세팅(깃, 폴더, 컴포넌트 등)을 하고 채팅방을 클릭하면 그 해당 채팅방 메세지가 조회되게 설정하였다. 질문 중에 map.. 공감수 1 댓글수 4 2022. 6. 26.
옵셔널 체이닝 '?.'이 필요한 이유?? https://ko.javascript.info/optional-chaining 옵셔널 체이닝 '?.' ko.javascript.info 옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다. 옵셔널 체이닝이 필요한 이유 사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정해봅시다. 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있습니다. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 또 다른 사례.. 공감수 0 댓글수 0 2022. 6. 21.
Vscode 폴더 경로 설정하는 법 - 시간낭비 그만 import from "../../"; 폴더는 이렇게 되어있었고 chatSlice.js에서 axios의 instace 변수를 가져오려고했다 전에 쓰던 함수들의 대부분이 근처 폴더였기 때문에 ./ 정도만 하면 바로 미리보기가 나와서 쉽게 설정이 가능했다 근데 지금은 폴더를 나오고 나와서 폴더를 들어가 설정해야했다 src폴더로 나와 shared폴더에서 axios.js를 설정해줘야하는데 이걸 한참해맸다 정답은 import instance from "../../shared/axios"; 처음에 늘 하던대로 ../ 했지만 같은 폴더안에 있는 작성중인 파일만 나오고 아무것도 나오지 않았다. 그전에는 그냥 이러면 나오겠지하고 자세히는 안알아봐서 그렇다 나도 그렇지만 초보자들은 분명히 헷갈릴 것 같아서 작성합니다!! - 3가지를 간단히 정리하자면, 1 '/.. 공감수 0 댓글수 0 2022. 6. 19.
인터넷은 어떻게 연결되나?? 프로토콜과 매커니즘 63, 표준과 프로토콜의 세계 전화시스템은 전 세계의 전화기를 연결한다. 그럼 전 세계의 컴퓨터를 연결하려면 어떻게 해야 할까? 장비와 기술이 변화함에 따라 전체 네트워크가 매끄럽게 확장되도록 하려면 어떻게 해야 할까?? 서로 멀리 떨어져 있더라도.. 우선 네트워크와 컴퓨터를 식별하기 위해 이름과 주소가 필요하고, 직접 연결되지 않은 네트워크 사이의 경로를 찾을 수 있어야 한다. 모든 네트워크에서, 특히 인터넷에서 오는 데이터를 어떤 형식으로 구성할지, 누가 먼저 말할 것이고 어떤 응답이 이어질 수 있는지, 오류를 어떻게 처리할지 등에 대한 합의는 프로토콜(protocol)로 처리된다. 프로토콜은 일반적인 대화에서 이루어지는 약속과 어느 정도 비슷하다. 즉, 상대방과 소통하기 위한 일련의 규칙이다. 하지.. 공감수 0 댓글수 0 2022. 6. 18.
메서드와 this~ is method 설명 밑줄 메서드와 this 객체는 사용자(user), 주문(order) 등과 같이 실제 존재하는 개체(entity)를 표현하고자 할 때 생성됩니다. let user = { name: "John", age: 30 }; 사용자는 현실에서 장바구니에서 물건 선택하기, 로그인하기, 로그아웃하기 등의 행동을 합니다. 이와 마찬가지로 사용자를 나타내는 객체 user도 특정한 행동을 할 수 있습니다. 자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해줍니다. 메서드 만들기 객체 user에게 인사할 수 있는 능력을 부여해 줍시다. let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sa.. 공감수 0 댓글수 0 2022. 6. 17.
가비지 컬렉션??? JS의 휴지통?! 자바스크립트는 눈에 보이지 않는 곳에서 메모리 관리를 수행합니다. 원시값, 객체, 함수 등 우리가 만드는 모든 것은 메모리를 차지합니다. 그렇다면 더는 쓸모 없어지게 된 것들은 어떻게 처리될까요? 지금부턴 자바스크립트 엔진이 어떻게 필요 없는 것을 찾아내 삭제하는지 알아보겠습니다. 그 전에 생명주기 먼저 알아가보시라고 링크 남겨드렸습니다!! 1. Allocate memory(메모리 할당) : 프로그램이 사용할 수 있도록 운영체제가 메모리를 할당하는 단계입니다 2. Use Memory(메모리 사용) : 할당된 메모리를 실제로 프로그램이 사용하는 단계를 말합니다. 3. Release Memory(메모리 해제) : 프로그램에서 필요하지 않은 메모리 전체를 되돌려주어 재활용 하게 만드는 단계입니다. 가비지 컬.. 공감수 0 댓글수 0 2022. 6. 15.
첫 협업을 진행하며 느낀 아쉬운 점, 뿌듯한 점 "todo" + 6주차 회고 이번에 미니 프로젝트로 첫 협업을 경험했다. 다들 어렵다 뭐다 하는데 당연히 어렵다 하지만, 재밌었다ㅎㅎㅎㅎ 일단 아쉬운점으로는 내 실력이 뭔가 백엔드분들의 실력을 따라가지 못한 느낌이었고 백엔드에서 스프링의 코드를 모르다보니 내가 어디까지 해야되고 어느정도를 해야 돌아오는지도 몰랐다. 내 생각은 2~3일 걸릴일이였는데 하루 만에 끝내서 결과를 내주고 기다리셨다. 근데 그 이후에 서버 배포 부분에서 오류가 나더라도 이게 정확히 누구 잘못인지도 모르고 같이 찾기도 했지만 끝내 해결하지 못했다ㅠㅠㅠ 오류도 각각 해결해봐도 결국 서버 배포 문제로 갔고 발표 전에는 로컬까지 고장나서 발표도 망쳐버렸다.. 현타가 좀 오더라 질문이라도 잘해서 마무리했어야하는데 로컬에 질문리스트를 버킷처럼 적어놨는데 날아가니 잠깐 .. 공감수 0 댓글수 0 2022. 6. 15.
객체가 뭔가요오~ 이건 복사되는데 저건 안돼요! 참조에 의한 객체 복사 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어있는 '메모리 주소’인 객체에 대한 '참조 값’이 저장됩니다. 객체는 메모리 내 어딘가에 저장되고, 변수 user엔 객체를 '참조’할 수 있는 값이 저장됩니다. 따라서 객체가 할당된 변수를 복사할 땐 객체의 참조 값이 복사되고 객체는 복사되지 않습니다. 예시: let user = { name: "John" }; let admin = user; // 참조값을 복사함 변수는 두 개이지만 각 변수엔 동일 객체에 대한 참조 값이 저장되죠. let user = { name: 'John' }; let admin = user; admin.name = 'Pete'; // 'admin' 참조 값에 의해 변경됨 alert(user.name).. 공감수 0 댓글수 0 2022. 6. 14.
JS. 객체 간단소개와 궁금했는데 못 찾았던 것들! 객체 객체는 중괄호{...}를 이용해 만들 수 있습니다. 중괄호 안에는 'key' : 'value' 쌍으로 구성된 프로퍼티를 여러개 넣을 수 있는데, 키엔 문자형, 벨류엔 모든 자료형이 허용됩니다. 예시로 서랍장을 설명하는데 복잡한 서랍장안에서 이름표를 보고 원하는 파일을 쉽게 찾을 수 있듯이, 객체에선 키를 이용해 프로퍼티를 쉽게 찾을 수 있습니다. 추가 삭제도 마찬가지. 중괄호 {..}를 이용해 객체를 선언하는 것을 '객체 리터럴' 이라고 부릅니다. 객체 선언할 때는 주로 이 방법을 많이 사용하죠 let user = { // 객체 name: "John", // 키: "name", 값: "John" age: 30 // 키: "age", 값: 30 }; 매달리는 쉼표 (trailing, hanging) .. 공감수 0 댓글수 0 2022. 6. 13.
미니프로젝트 2일차 - map, axios , proxy 오늘은 맵을 돌려 state 데이터를 받아다가 나열하였고 뷰로 나올 모달을 대비해 인풋박스를 Home에다가 넣어 놨다 진행이 얼추 되면 Post페이지를 없애고 한 페이지에서만 가능하도록 하면 좋겠다 깔끔하게. 심플이즈베스트 https://mothercargasoline.tistory.com/90 리액트,스프링 axios 연결 CORS 오류 / has been blocked by CORS policy: No 'Access-Control-Allow-Origin' 미니 프로젝트 중에 처음으로 axios를 사용하게 되었는데 리덕스랑 연결해야하나 정말 헷갈리고 일단 파일을 새로 해서 악시오스 미들웨어 코드를 받아 적용 시키고 url, 변수정도 수정해서 요청 mothercargasoline.tistory.com 아.. 공감수 0 댓글수 0 2022. 6. 12.
리액트,스프링 axios 연결 CORS 오류 / has been blocked by CORS policy: No 'Access-Control-Allow-Origin' 미니 프로젝트 중에 처음으로 axios를 사용하게 되었는데 리덕스랑 연결해야하나 정말 헷갈리고 일단 파일을 새로 해서 악시오스 미들웨어 코드를 받아 적용 시키고 url, 변수정도 수정해서 요청을 보내보았다. 에러를 검색해보니 관련 자료들이 많이 나왔는데 공식 문서에 있는 리액트 관련 사항들을 보려한다. 문서에는 수동으로 프록시 구성하기로 되어있는데 자체적으로 프록시 미들웨어를 연결하며 많은 분들과 타 블로그도 이용하는걸로 보니 이걸로 준비해보자! 1. 패키지 설치 먼저 http-proxy-middleware를 설치해주자! $ npm install http-proxy-middleware --save $ # or $ yarn add http-proxy-middleware 2. 파일 생성 후 코드 복.붙 sr.. 공감수 0 댓글수 0 2022. 6. 12.
미니 프로젝트 시작! - SA 작성 드디어 미니 프로젝트 시작!! 이전 진도도 못따라갔는데 이미 시작되었다! 큰일이다 얼릉 따라가보자 근데 또 조장이 되어버렸다~ 우리 SA작성은 이렇다 주제를 정하되 너무 깊게 들어가지 않고 상황에 따라 수정할 가능성을 남겨두었다 3. 와이어 프레임 5. API 기능명세서 그래서 프론트 엔드 뷰를 작성하기 위해 최대한 빠르게 작성하였고 axios와 리덕스를 어떻게 해야할지를 찾아봐야했다. 다른 영상을 보고 axios에서 바로 가져오는걸 보고 어라?? 리덕스가 필요없나했지만 렌더링이나 액션,useEffect로 리듀서와 스토어가 필요함을 느꼈다. 일단 틀을 만든 뷰는 이렇다 이렇게 저녁에 완성하였고 스프링분들과 만나서 방향성을 다시 정하고 기능 구현이 어디까지 됐다 얘기를 했다 근데 나는 백엔드 자체가 시간이.. 공감수 0 댓글수 0 2022. 6. 11.
객체(배열[],딕셔너리{})는 상수 const로 선언되었을때도 할당 되는 이유는?? const d = [111, "aaaaa", true]; let e = {a: 1, b: "b"}; d[0] = 222; console.log(d); = '222' // my_cat이라는 상수를 만들었어요! const my_cat = { name: "perl", status: "좀 언짢음", } my_cat.name = "펄이"; console.log(my_cat) // = { name: "펄이", status: "좀 언짢음" } // 여기에선 에러가 날거예요. 프로퍼티는 변경이 되지만, 객체 자체를 제할당할 순 없거든요! my_cat = {name: "perl2", status: "많이 언짢음"}; // my_cat이라는 상수를 만들었어요! const my_cat = { name: "perl", sta.. 공감수 0 댓글수 0 2022. 6. 11.
데이터 타입 불변성?? 불변객체 const 불변 객체 변수에 값을 할당해도 변수가 바뀌는게 아니라 새로운 주솟값에 입력된 값을 보여주는거다 단, 객체를 할당한다면 객체 자체가 변경된다 불변성이라고 하면 값이 안바뀌는데 변수 선언을 하면 바뀐다는게 무슨 말?? 중복되는 값이 안들어오면 새로운 공간에 값을 입력하고 그 주소를 변수에 보여주기 때문에 https://velog.io/@solmii/%EC%BD%94%EC%96%B4-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%83%80%EC%9E%85%EC%83%81 https://sustainable-dev.tistory.com/156 공감수 0 댓글수 0 2022. 6. 11.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.