전체 글 357

프론트엔드가 이미지 색상을 실시간으로 바꾸는 법 - svg 시도

구현해야 하는 목표 보기와 같이 유저가 파레트를 이용하여 색상을 자유롭게 고르면 그 색상이 우리의 사진에 실시간으로(!) 적용되어 미리보기를 할 수 있어야 했다. 구상 처음 기획을 받았을때는 솔직하게 “이게 말이돼?” 라는 생각과 함께 분명 다른 방법이 있을꺼야 서버를 경유한다거나 특정 전용 라이브러리가 있다거나 하는 생각을 했다. 하지만 마음 한편에는 구현할 수 있으면 진짜 대박이겠다 라는 생각도 했다. 그런 와중에 주위의 다른 기획자분께서 cto님께서 이 부분을 진행중에 있고 코드로 구현한다는 말을 들었다. 그때 머릿속을 딱 지나가는 게 아! svg는 vscode상에서 코드로 볼 수 있으니까 거기서 색상 관련된부분을 css in js 로 제어할 수 있다면 불가능한 일은 아니다! 라는 생각이 들었다. ..

develop 2023.01.20

props in styled-componenets, 템플릿 리터럴, 조건부 렌더링

작업을 하다보면 스타일링을 할 때 주로 쓰는 방법이 몇 개 정해져 있다. 자주 쓰는 방법이지만 쓸때마다 레퍼런스를 참고하고는 한다. 이번에는 이런 방법들을 한 번에 모아서 정리해보기로 했다. props in styled-components css in js의 대표격인 styled-components의 장점 중 한가지는 jsx상에서 props를 주면 그거에 맞춰서 조건부로 스타일링을 할 수 있다는 점이다. 이번에 요긴하게 사용한 부분은 유저의 선택에 따라 미리보기 화면에서 특정 버튼의 위치가 바뀌어야 하는 부분이었다. 이걸 만들기 위해서는 // 유저의 선택에 따라 변하는 상태 rightState를 만든다. const [rightState, setRightState] = useState("50px"); //..

develop 2023.01.20

react로 회원가입(3)-중복검사, 조건부 렌더링, 에러시 포커스이동

중복검사 앞서 onBlur에서 호출한 onClickIdDup에서 idChecker를 통해 공백과 정규식 검사를 통과했다면 다음은 중복검사이다. 중복검사는 서버와의 비동기통신을 통해 검증하면 된다. 나의 경우는 redux-toolkit을 사용했다. 우선 get요청으로 서버에 쿼리스트링으로 이메일을 보내준다. 이 경우 나는 input의 velue가 전달되는 쿼리스트링 값이다. dispatch(__duplicate_check(id)); /duplicate_check?member_id=${encodeURIComponent(member_id)} 이때 이런식으로 encodeURI를 사용해주면 이메일의 경우 @이나 .의 특수문자를 오류없이 잘 보낼 수 있다. 이제 slice에서 initialState에 checkId..

develop 2023.01.20

react로 회원가입(2)-onBlur, trim, 정규식

포커스 아웃시 유효성 검사 요즘의 웹서비스들은 따로 중복검사 버튼을 누르지 않아도 유저의 포커스 아웃(기입칸외의 다른 곳을 클릭)시 유효성 검사를 하게 되어있다.(과거에도 많이 그랬다면.. 할 말은 없다) 이것을 구현하려면 기본적으로 input 태그의 onBlur속성을 알아야 한다. onBlur onFocus가 input창이 포커스되었을 때 호출할 함수를 사용한다면 onBlur는 input창이 포커스아웃되었을 때 호출할 함수를 사용한다. 이런식으로 사용한다면 포커스아웃 될때마다 onClickIdDup이라는 함수를 호출하며 유효성 검사를 할 수 있다. const onClickIdDup = useCallback( e => { e.preventDefault(); if (!id.trim()) { setIdTri..

develop 2023.01.20

react로 회원가입(1)-커스텀훅,구조분해할당,useCallback

회원가입 기능 웹 서비스를 만든다면 제일 처음에 만드는 기능은 회원가입이지 않을까 싶다. 다양한 회원가입 형식들이 있지만 이번에 내가 사용한 방식을 작성해보고자 한다. 우선 기입사항은 아이디(이메일), 비밀번호, 비밀번호 확인 이렇게 3가지의 기본형태이다. 커스텀 hook 회원가입과 로그인에 사용되는 input은 꽤나 자주 같은 방식으로 사용되기에 useInput이라는 hook을 만들어 관리하면 편하다. 여기서 크게 짚고 넘어갈게 두가지 있는데 하나는 구조분해할당, 다른 하나는 useCallback이다. 구조분해할당 구조분해할당은 객체나 배열을 변수로 ‘분해’할 수 있게 해주는 특별한 문법이다. 따라서 사용할때 const [id, onChangeId] = useInput(""); 을 하면 useInput..

develop 2023.01.20

호스팅 업체와 FTP와 cors..

호스팅이란? 호스팅(Hosting)이란 서버컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해 주는 서비스를 말한다. 사용자가 직접 서버를 구입하고 운영할 필요 없이 호스팅 업체가 미리 준비해 놓은 서버를 빌려 사용하는 형식이다. 호스팅 서비스에는 웹 호스팅과 서버 호스팅, 메일호스팅 등 다양한 종류가 있다. 쇼핑몰 호스팅 호스팅의 종류중에는 쇼핑몰 호스팅 또한 있다. 대표적으로는 cafe24가 있다. 인터넷 쇼핑몰 사이트를 운영할 수 있도록 서버 공간과 쇼핑몰 프로그램 및 결제 시스템 등을 제공해 주는 서비스이다. 이번에 하려 했던 일 cafe24의 api중에는 scripttag라는 api가 있다. 이 api를 이용해서 유저와의 상호작용으로 유저의 자사몰(유저는 이미 cafe24를 통해 쇼핑몰 호..

develop 2023.01.20

termius 와 remote -ssh 와 ssh 프로토콜

사용 배경 다른 대학교에 있는 서버를 원격 접속해서 테스트를 해야하는 상황이 발생했다. termius란? ssh 클라이언트 중 하나입니다. (자매품 putty) 자신의 컴퓨터의 alias, hostname, username, password를 적고 port번호는 ssh일때 22번으로 지정해서 쓰기 때문에 22번으로 하면 지정한 컴퓨터의 terminal로 접속할 수 있습니다. 더 자세한 설명을 위해 레퍼런스가 많은 putty로 다시 설명하겠습니다. putty란? 가상 단말기 프로그램입니다. 서버는 물리적으로 떨어져 있어도 단말 장비를 통해서 원격으로 접속하여 작업할 필요가 있는데 이때 윈도우같은 개인 pc 운영체제에서도 서버로 접속할 수 있도록 물리적인 단말장비가 아닌 논리적인 가상 단말기를 제공합니다. ..

develop 2023.01.20

이력서관련 질문 리스트

https://www.youtube.com/watch?v=7VcG--ufRXc 자기소개를 포함한 팀스파르타 지원한 지원동기 안녕하십니까 성장하는 프론트엔드 개발자 박준수입니다. 다른이의 피드백을 진지하게 받아들이고 자신이 자신에게도 피드백을 하여 메타인지를 하며 더 나아가 피드백하는 방식을 피드백하여 에자일하게 실력이 상승하는 개발자가 성장하는 개발자라고 생각합니다. 애자일 방법론을 적용하기 위해서 블로그와 유튜브를 운영하고 있고, 시간이 날때마다 틈틈이 다시 보며 내가 진정으로 이 지식을 알고 있는지 또 다른 효과적인 피드백 방식이 있지는 않은지 고민합니다. 또한 서비스에서 유저에게 구글애널리틱스나 구글폼을 통한 설문조사로 피드백을 받아 서비스를 개선하는 데도 노력합니다. 저는 같이 코딩하는 것의 가치..

Question 2022.10.24

상태란 무엇이고 왜 상태관리를 할까요?

https://www.youtube.com/watch?v=G49oNOa8hFI 프론트엔드에서 상태란 무엇인가? 먼저, 상태의 뜻에 대해 알아보면 상태란, 사물이나 현상이 처해있는 형편이나 모양을 뜻합니다. 이것만 보면 사실 감이 잘 안옵니다. 우리가 일상생활에서 접하는 다양한 화면들을 떠올려보며 상태란 무엇인가에 대해 생각해보겠습니다. 요약) State는 plain Javascript Object that influences output of render and is managed within the component. 상태는 컴포넌트 내부에서 관리되며 어플리케이션의 렌더에 영향을 미치는 플레인 자바스크립트 객체입니다. 공식 문서에 나와있는 상태에 대한 이야기인데, 축약하자면 "어플리케이션의 화면에 영향..

Question 2022.10.23

웹 브라우저의 동작원리

https://www.youtube.com/watch?v=BWprng2Jpvc 브라우저의 주요 기능은 사용자가 자원을 서버에 요청하고 요청한 자원을 브라우저에 표시하는 것입니다. 웹 브라우저에 URL을 입력하면 웹 서버라 불리는 프로그램이 웹 브라우저에 웹 페이지를 제공합니다. 웹 브라우저가 웹서버에 웹 페이지를 달라고 하는것 : 요청(request) 요청한 웹 페이지를 웹 브라우저에 제공하는 것 : 응답(response) 보통 웹 브라우저와 웹 서버는 다른 컴퓨터에 위치합니다. 웹 서버가 다른 컴퓨터에서 실행되고 있기 때문에, 웹 브라우저가 웹 서버에 연결하려면, 웹 서버가 실행중인 컴퓨터의 주소를 알아야 하는데, 이 주소를 IP 주소라 합니다. 각 컴퓨터는 IP주소를 가지고 있습니다. 그런데 IP주소..

Question 2022.10.22