crabLab

글의 목적 면접하듯이 외워서 대답해야할 수 있게 정리한다. 레퍼런스 Parameter와 Argument / 매개변수, 인자 그리고 인수 용어 구분 WEB2 JavaScript - 26.함수 : 매개변수와 인자 [10분 테코톡] 포키의 Parameter와 Argument 본문 차이를 알기 위해서는 먼저 영어의 뜻을 해석해보고 넘어가야 할 것 같습니다. parameter는 우리말로 매개변수라고 하고 argument는 인자라고 합니다. 이 용어를 좀 더 풀어 쓰면 매개변수는 두 곳을 연결, 매개해주는 변수를 뜻이 있고 인자는 끌어오는 값이라는 뜻이 있습니다. 그럼 이 차이를 프로그래밍 적으로 보면 매개변수는 함수를 정의할 때 사용되어지는 변수를 의미합니다. 즉, 함수를 호출할 때 전해주는..

글의 목적 면접하듯이 외워서 대답해야할 수 있게 정리한다. 레퍼런스 [JavaScript] 호이스팅(Hoisting)과 시간상 사각지대(Temporal Dead Zone, TDZ) 자바스크립트를 배우는데 아직도 let과 var의 차이를 모른다고? : 호이스팅 모던 JavaScript 튜토리얼 오래된 var [10분 테코톡] 💙 하루의 실행 컨텍스트 본문 hoisiting이란 자바스크립트엔진이 script를 해석하는 초기 시점에 모든 변수와 함수를 미리 할당하는 것을 의미합니다. 여기서 var로 선언한 변수의 경우 자바스크립트 엔진은 호이스팅시 undefined로 변수를 바로 초기화하기 때문에 스크립트내에서 선언전에 변수를 사용해도 에러를 내지 않아 선언 라인 이전에는 변수를 참조할 수 ..

fileUpload 및 fileDelete aws의 s3를 이용한 파일 업로드 및 삭제시 여기의 코드를 사용하면 손쉽게 이용할 수 있다. 코드에서 받는 e는 input 의 onChange라는 이벤트를 사용하는데, 이벤트에 등록하는 함수에서는 이벤트 객체 e를 파라미터로 받아와서 사용 할 수 있다. 추가로 이 객체의 e.target은 이벤트가 발생한 DOM 인 input DOM 을 가르키게된다. 이 DOM 의 value값, 즉 e.target.value를 조회하면 현재 input 에 입력한 값이 무엇인지 알 수 있다. //fileUpload import AWS from "aws-sdk"; const OnFileUpload = e => { const ACCESS_KEY = process.env.REACT_A..

유저에게 텍스트를 보여주는 경우 줄바꿈을 해야하는 경우가 있다. 이 경우는 css에 white-space: pre-line을 주면 된다. 우선 react에서 텍스트를 넣는 방법은 텍스트입니다!띄어쓸거야 /// >>텍스트입니다!띄어쓸거야 모두가 알듯한 이런 방식으로 넣어주면 된다. 하지만 줄바꿈 기호는 다른 프로그래밍언어들과 비슷하게 \\n 이다. 텍스트입니다!\\n띄어쓸거야 /// >>텍스트입니다!\\n띄어쓸거야 하지만 당연하게도 \n을 바로 쓰면 줄바꿈이 먹히지 않는다. 따라서 이럴때 쓰는 것이 중괄호이다. {텍스트입니다!\\n띄어쓸거야} /// >>error 왜 error가 날까? jsx문법에서의 중괄호 중괄호는 jsx코드 사이에 자바스크립트 문법을 이용하고 싶을 때 사용한다. 따라서 {}를 쓴다면 ..

프론트 작업을 하다보면 input에 숫자만 적을 수 있게 해야하는 경우가 종종 있다. 회원가입의 비밀번호 이벤트 등록시 물품의 금액을 적음 이런 경우 크게 두가지 방법이 있어 정리해보고자 한다. input의 type:number 를 사용하는 방법 아주 간단하고 심플한 방법이다. 이 방법의 장점은 추가로 최소값과 최대값도 손쉽게 설정할 수 있다는 점이다. 다만 이렇게 할 경우 input 창에 불필요하게 화살표가 나오게 되는데 간단한 해결방법은 css를 추가하는 것이다. /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margi..

cafe24라는 호스팅을 이용한 쇼핑몰 운영자들의 자사몰 홈페이지에 플로팅버튼을 띄우는 작업을 한다. 인증코드 발급 우선 쇼핑몰 운영자가 앱을 최초 실행시키면 클라이언트에서 cafe 24측에 인증코드를 요청한다. 이때 필요한 정보는 {mallid} : 해당 쇼핑몰ID를 입력합니다. {client_id} : 개발자 센터에서 생성한 앱의 client_id를 입력합니다. {state} : 위변조 방지를 위해 입력하는 값으로 코드 반환시 같은 값이 반환됩니다. {redirect_uri} : 개발자 센터에서 생성한 앱의 Redirect URL을 입력합니다. {scope} : 해당 접근 토큰으로 접근할 리소스 서버의 권한을 입력할 수 있습니다. 이렇게 5가지인데 이 정보들을 통해 cafe24 측에서 제시한 GET ..

해결방법 final 2. useRef 사용 import { useEffect, useRef } from "react"; import { useState } from "react"; export default function StateTestT() { const [memberId, setMemberId] = useState(1); const memberIdRef = useRef(); memberIdRef.current = memberId; const updateMemberId = () => { // (1) memberIdRef.current = memberIdRef.current + 1; console.log(memberIdRef.current); memberIdRef.current = memberIdRe..

해결방법 1. 함수형 업데이트 해결방법 중 하나는 useState의 인자로 값이 아닌 업데이트된 최신의 state와 함께 함수를 전달하는 방법이다. react의 setState코드를 보면 다음과 같이 값을 받거나, 이전 state와 함께 함수를 전달받을 수 있도록 되어있다. // React Hooks // ---------------------------------------------------------------------- // based on the code in // Unlike the class component setState, the updates are not allowed to be partial type SetStateAction = S | ((prevState: S) => S); ..

프론트 작업을 하면서 정말 나를 끈질기게 괴롭히고 또 이해하기 힘든 제일 큰 문제가 하나 있었다. 바로 useState의 비동기 문제이다. 구글링을 아무리 하고 구현을 아무리해도 안되고, 또 어쩔때는 됐었다. 그나마 useEffect를 사용해서 매번 해결은 했었지만 불완전한 이해를 바탕으로 한 사상누각이었고 무엇보다 나 자신이 확신이 없었다. 모든게 완전하게 이해를 못했어서 발생한 일이었다. 심지어 어떨때 비동기문제가 발생하고 어떨때 안 발생하는지도 몰랐으니 그야말로 슈뢰딩거의 비동기였다.. 그래도 이제는 useState의 비동기 문제를 조금은 이해하고 해결할 수 있게 되어 정리를 해본다. 문제 상황 import { useState } from "react"; export default function ..

scale 애증의 scale이다. 왜 애증이냐면 진짜 시간을 많이 쏟았기 때문이다.. 특히 그래프 하나에 두 개의 데이터셋을 넣는게 상당히 어려웠다. 물론 알고나면 엄청나게 간단하다.. 뭐든지 공식문서와 기초가 중요하다. 여기서 나오는 것들은 다 축을 의미한다. 즉, 이름은 크게 중요하지 않다. x 나는 가로축을 x라는 이름으로 커스텀했다. 기본적으로 들어가야할 속성은 axis: “x” postion: “bottom” 이다. 또 유용하게 쓸 수 있는게 ticks가 있는데 각 value마다의 스타일링을 할 수 있다. ticks: { // minRotation: 45, padding: 5, autoSkip: true, maxTicksLimit: 15, // label 조정 }, y 나는 세로축을 y라는 이름..