본문 바로가기

분류 전체보기

 (204)
[Javascript] var, let, const 차이 - 중복선언, 호이스팅, 스코프 관점 var만 쓰고 있다가 ES6에서 let과 const가 추가됨 var & let 중복선언 관점에서의 차이점 var은 중복선언이 가능하다. let은 중복선언이 불가능하다. 둘다 재할당은 가능(당연한 소리) case1) var은 재할당, 중복선언 모두 가능하다. --> 이상한것.. var gender = 'female' console.log(gender) // 변수 재할당 가능 gender = 'none' console.log(gender) // 변수 중복 선언 가능 var gender = 'male' console.log(gender) case2) let은 재할당은 가능하나 중복선언이 불가하다. -> 당연한것.. let name = 'Mike' console.log(name) // output: Mike /..
docker-compose.yml 작성법 사이드프로젝트에서 mysql을 도커를 사용하여 올려서 DB 서버로 이용한다. mysql 서버를 올릴 때 사용하는 docker-compose.yml 파일의 작성법에 대해 정리해 보려한다. dockerfile과 docker-compose.yml의 차이점과 함께 docker-compose.yml의 작성법을 정리해보자 1. Dockerfile - 목적 base Image 파일로 수정된 image를 만드는 일련의 과정들을 정리해 놓은 파일 docker는 이 dockerfile을 이용하여 손쉽게 동일한 이미지를 반복해서 만들 수 있다. - 예시(문법) # 베이스를 만들 이미지를 지정 FROM node:16 # 명령어들이 이루어질 기본 디렉토리 설정 WORKDIR /app # 소스를 복사, 자주 바뀌는 소스일 수록 ..
[Web] em 과 rem, CORS 란? 혼나고 배우는 것은 기억에 오래 남는 법. 1. em과 rem의 차이 1) 상대 단위란? 고정되지 않고 유동적으로 바뀔 수 있는 길이 단위이다. em, rem 을 포함해 %, vh, vw 등이 대표적인 css의 상대단위이다. 반대로 절대단위는 고정된 길이 단위이다. 대표적으로 px, pt를 들 수 있다. 쉽게 말해 1cm는 항상 손가락 한마디 반정도의 길이인것 처럼, 1px은 항상 0.02645833cm 인 것이다. 2) em과 rem의 공통점 em과 rem은 css의 font-size 속성값에 비례해서 결정되는 상대 단위이다. 예를 들어 기본 font-size가 16px의 경우 다음 과 같이 em의 크기가 정해진다 0.5em 16px * 0.5 8px 1em 16px * 1 16px 2em 16px *..
[JAVA] (1) 환경 설정 - 다운로드 1. JDK 설치 : x64 Compressed Archive zip 파일 다운로드 https://www.oracle.com/java/technologies/downloads/#jdk17-windows 2. 이클립스 설치 : Eclipse IDE for Enterprise Java and Web Developers (Windows x86_64) 다운로드 https://www.eclipse.org/downloads/packages/ Eclipse Packages | The Eclipse Foundation - home to a global community, the Eclipse IDE, Jakarta EE and over 350 open source pro 509 MB 566,255 DOWNLOADS T..
[Error] Get 으로 보내는 주소에 한글이 있을 때 TypeError [ERR_UNESCAPED_CHARACTERS]: Request path contains unescaped characters 일단 상황은 해시태그를 url 에 담아서 서버로 get 요청을 하는 것이다. 해시태그는 당연히 한글이 될 수 있다. 프론트 서버에서는 다음과 같은 에러를 뱉어냈다. 에러발생의 원인인 axios 로 서버에 API 요청을 하는 부분을 보자 axios.get(`/hashtag/${data}?lastId=${lastId || 0}`); data 변수에 hashtag 가 들어간다. lastId 는 페이지네이션을 위한 것이므로 여기서는 무시한다. data 에 한글이 들어갈경우 백엔드로 요청하는 API는 '/hashtag/크리스마스' 가 되는 것이다. 여기서 바로 에러가 발..
react-hook-form 과 meterial-UI 함께 쓰기 (3) - DateRangePicker (1) TextField https://tacit.tistory.com/41 react-hook-form 과 meterial-UI 함께 쓰기 (1) - TextField react-hook-form은 material-UI 나 ant-D같은 외부 UI 라이브러리와 함께 사용할 수 있다. 그 중 가장 기본이 되는 TextField와 연결하는 방법을 정리해보려한다. import TextField from '@material-ui/core/TextF.. tacit.tistory.com (2) ToggleButton https://tacit.tistory.com/42 react-hook-form 과 meterial-UI 함께 쓰기 (2) - ToggleButton 이전 게시물(1) - TextField 에 이어서..
react-hook-form 과 meterial-UI 함께 쓰기 (2) - ToggleButton 이전 게시물(1) - TextField 에 이어서 https://tacit.tistory.com/41 react-hook-form 과 meterial-UI 함께 쓰기 (1) - TextField react-hook-form은 material-UI 나 ant-D같은 외부 UI 라이브러리와 함께 사용할 수 있다. 그 중 가장 기본이 되는 TextField와 연결하는 방법을 정리해보려한다. import TextField from '@material-ui/core/TextF.. tacit.tistory.com 이번엔 ToggleButton 과 함께 사용하는 방법에 대해 정리해보려한다. CheckBox로 예시들이 몇개 구글에 나와있다. ToggleButton도 비슷한 맥락이다. import ToggleButton..
react-hook-form 과 meterial-UI 함께 쓰기 (1) - TextField react-hook-form은 material-UI 나 ant-D같은 외부 UI 라이브러리와 함께 사용할 수 있다. 그 중 가장 기본이 되는 TextField와 연결하는 방법을 정리해보려한다. import TextField from '@material-ui/core/TextField'; import { useForm, Controller } from 'react-hook-form'; export default function App() { const { handleSubmit, control, formState: {errors} } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( ( )}/> 전송 ); } 전달하는 속성들에..
[Web] 색상 코드 추출하기 (컬러콥 color cop 추천 및 오류 해결) 컬러콥을 사용하고는 신세계가 열렸었다.ㅋㅋ ppt 만들때나, 문서작성, 디자인 등등에 유용한 색상 추출 프로그램을 소개하려 한다. 뭐 이미 유명한 프로그램이겠지만 ㅎㅎㅎㅎㅎ colorcop.net/download/ download The easiest way to install Color Cop is to download the self-installing version. If you use the installer it's easy to remove the application by using add/remove programs under Windows. Standalone 5.4.6 BETA beta.zip I have a new version here, but I'd like colorcop.net..
[Web] url로 queryparameter 쿼리파라미터 가져오기 지금 작성하는 글의 url을 캡쳐해보았다. 뒤쪽에 보면 ? 로 시작해서 & 로 이어지는 글자들이 보인다. type = post returnURL= %2Fmanage%2Fpost%2F 위의 경우는 이처럼 2가지의 쿼리 파라미터를 가지고 있다고 볼 수 있다. 그럼 html 상에서 위의 쿼리파라미터를 변수로 가져와서 사용하는 방법을 소개하겠다. $(document).ready(function() { var param_type = new URLSearchParams(location.search).get('type'); var param_returnURL = new URLSearchParams(location.search).get('returnURL'); console.log("param_type은? ", par..

티스토리툴바