리액트 개발자 (삐약)

CSS for the Age Styling your way with speed, strong typing, and flexibility. 여러 프로젝트의 기술스택에서 자주 봤던 Styled-components. CSS in Js 라이브러리 중에서 가장 인기있는 라이브러리라고 한다. 잠깐 CSS in JS를 살짝 짚고 넘어가보자. CSS in JS는, 말 그대로 CSS를 JS 코드 안에서 작성하는 개념이다. 기존의 CSS는 JS코드와 분리되어 작성되는 것과는 차이가 있다. CSS in JS를 사용하면 아래와 같은 이점이 있다. 컴포넌트 기반 스타일링: 각 컴포넌트마다 독립적인 스타일을 적용하여 컴포넌트를 더 쉽게 재사용 스타일 스코프: 스타일이 컴포넌트의 범위로 제한되므로 이름 충돌이나 스타일 오염 문제를..

간단한 토이프로젝트를 배포하려한다. 이번엔 Netlify 대신 AWS Amplify! 구글의 Firebase와 비슷하다. 작성된 코드를 깃헙 레포지토리에 올리는것 부터 시작한다. 1. AWS에 가입하고, Amplify를 찾아들어간다. 그리고 이미 만들어진 코드로 배포만 할것이니까, 웹앱 호스팅 시작하기 클릭. 2. GitHub 레포지토리 연결 3. 브랜치 연결 깃헙 로그인+연결 해주면 레포지토리를 연결할 수 있다. 배포할 브랜치를 선택하고 다음으로 누르면 빌드설정을 할 수있고, 배포 할 수 있다. 4. API 키 환경변수 설정해주기 환경변수에 들어가서 API ID와 값을 넣어주면 간단하게 작동한다.

dompurify - npm (npmjs.com) dompurify DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. It's written in JavaScript and works in all modern browsers (Safari, Opera (15+), Internet Explorer (10+), Firefox and Chrome - as well as almost anything else usin. www.npmjs.com Dompurify 이름 그대로 Dom를 정화하기 위한 라이브러리이다. 2014년에 만들어졌고, 글을 쓰는 시점 기준, 3.0.5 버전까지 업데이트 되었다. 자바..

TIL/Coding Test at master · younggyung/TIL · GitHub

어제, 리덕스로 로그인상태를 관리하는데에 성공했다. 그리고 게시글 작성할때 작성자 정보를 추가해서 전송하기 위해 로직을 변경했다. 그 과정을 통해 생각해보면 당연하지만 겪기 전에는 생각하지 못했던 부분을 다시 한번 학습할 수 있었다. 기계적인 코딩 금지! 첫번째, HTML의 form과 input은 사실 너무 당연하게 쓰고있어서 오히려 작동원리를 생각하지 않게 된달까? (나만 그래?) 다양한 input태그로 수집된 사용자의 선택 정보들은 submit될때 form 요소의 action 속성에 지정된 URL로 HTTP 요청이 생성된다. 폼이 전송되면 브라우저는 자동으로 HTTP 요청을 만들어 전송한다. 원래는 그렇다. 그러나, 리액트는 클라이언트 사이드에서 작동하는 라이브러리기 때문에, 백엔드가 없는 상태에서는..

토이프로젝트를 시작한지 어언 한달쯤이 지나가는 것 같다. 거창한걸 만들려고 한것은 아니였지만 끝이 날듯 말듯.. 자꾸 늘어나는 할일 😂 프로젝트 성과를 떠나, 그동안 어떤 깨달음이 있었는지 정리해보자. 1. 공식문서를 꼼꼼히 잘 읽자. - 지금도 초보지만, 왕왕초보 시절엔 공식문서 봐도 몰랐기 때문에, 누군가 친절하게 설명해놓은 자료를 우선적으로 참고했는데. 이제는 공식문서부터 먼저 읽고, 그래도 모르겠으면 google로 영문검색 때린다. 여기서 느낀게, 프론트쪽 자료는 국내자료보다 외국자료가 후어얼씬 많아서 공식문서+구글 영문검색이 최고다. 그리고 라이브러리 이용할때 공식문서가 얼마나 잘 작성되어있나를 기준으로 골라쓰는 분들이 많던데, 왜그런지 납득납득. 영어의 벽을 조금만 견디고 공식문서를 꼼꼼히 읽..

편두통이...쎄게 찾아온날.. 두통을 이겨내며 useEffect에 대해 새로 터득한 지식을 정리해보자. React에서 생명주기를 담당하는 훅이라고 배운 useEffect 내가 기억하기로는 리액트에서 useState를 사용해서 상태값을 만들어 주면, 그 값이 변경될때마다 화면을 새롭게 렌더링하는데...! 이 부수효과를 컨트롤 하기 위해서 useEffect를 사용한다고 했다. state값이 바뀜에 따라 렌더링이 바뀌어야할 때도 있고, 바뀌지 말아야할 때도 있으니까 state의 기본 동작을 제어해준다고 보면 되겠다. useEffect( ()=>{ 실행될 함수 }, [의존할 상태]) 이런 모양새로 알고 있었는데 return을 사용해서 리소스를 해제하는방법(클린 업) 도 있었다. useEffect(()=>{ 실행..

독서노트 미니 프로젝트 진행중, 생각했던 최~~소한의 기능을 구현 하고 1차 배포를 했다. 프로젝트 빌드 : Vite fake server : (로컬) json-server 로그인,회원가입 : Firebase 배포 : Netlify 우선, json-server로 로컬에서 구동하던 페이크 서버를 어떻게 netlify 에서 배포하느냐가 문제였는데, 이런 저런 시도를 해봤지만 순수하게 Netlify 에서 json-server를 구동할순 없었다. Netlify를 쓰려면 서버리스 백엔드 기능을 제공하는 Netlify Functions 을 이용해야했는데 함수를 작성해야한다는 점이 간단해보이지 않아서, 그냥 호스팅 플랫폼인 Glitch를 이용해서 페이크 서버를 만들었다. (개인 작업이니까!) younggyung/db..

import { useEffect } from "react"; import React from "react"; import classes from "./Modal.module.css"; function Modal({ id, children, closeModal }) { //모달창 실행시, 백그라운드 스크롤은 중지 useEffect(() => { const $body = document.querySelector("body"); const overflow = $body.style.overflow; $body.style.overflow = "hidden"; return () => { $body.style.overflow = overflow; }; }, []); let selectedChildren = Reac..

TIL문제풀이는 여기에 😉 GitHub - younggyung/TIL: 공부 로그 공부 로그. Contribute to younggyung/TIL development by creating an account on GitHub. github.com 솔루션하다가 궁금해서 비교! 처음에 싱글쿼츠를 더블쿼츠로 바꿔서 돌려보니까 런타임 차이가 엄청 나길래 깜짝 놀라서 몇번 더 테스트를 돌렸는데 그냥 컴퓨터 문제였는지, 유의미한 차이는 없었다. 그럼, 데이터 타입을 비교하지 않았을때는 어떤지도 돌려보니, 테스트2,10,11를 봤을때 확실히 차이가 나는듯 하다. 데이터 타입을 비교하지 않을때가 더 느리다. 비교군을 더 확실하게 줘야 빨리 돌아가나보다! while(s !== '1') 싱글 쿼츠를 썼을때 테스트 1 〉..