api를 사용하여 개발을 하다보면 API_KEY, Admin_Id 등 처럼 외부로 알려지면 안되는 보안이 필요한 값들이 있다. 이러한 값들을 보안이나 유지보수를 좋게하기 위하여 .env라는 파일에 환경변수로 만들어서 변수를 꺼내와서 사용하게 된다. 이번에 만들어본 것도 API_KEY를 발급받아서 사용해야했기 때문에 환경변수로 만들어 사용하던 중 제대로 알지 못하고 계속 검색을 해서 사용했기 때문에 이번에 내가 정리를 하고자 간단하게 작성하려한다. Vite와 CRA는 환경변수 사용방법이 다르기 때문에 Vite빌드 도구를 활용한다는 가정하에 작성한다. 먼저, 최상위 루트에 .env라는 파일을 만든다. 그리고 잊지 말아야하는게 .env파일을 반드시 gitIgnore에 추가해줘야한다. 추가를 하지 않으면 깃에 ..
이전에 작성했던 리팩토링 / 최적화를 마저 이어가보려고한다. 먼저, 저번 포스팅에서도 말했듯이 이정도의 규모에서는 크게 코드의가독성, 유지보수에 대한 리팩토링 외에는 최적화에 대한 의미가 크게 와닿지도 않고, 오히려 메모리공간만 차지할 수 있지만 그냥 이런 방법도 있구나 라는걸 경험해보기 위해 이어가본다. RAWG-API 사용 store 리팩토링/최적화 -1 역시는 역시였나..? 만드는 도중에도 계속해서 렌더링횟수를 생각한다고 생각했는데 어림도없었다. 해치웠나..? 생각해보고 성능테스트를 돌려보았지만 라이트하우스에서 나오는 점수는 56... jhbljs92.tistory.com 저번 포스팅에서 개선방법3까지 진행했으니, 개선방법4부터 가보자 개선방법4 react-icons 번들사이즈 줄이기 항상 reac..
역시는 역시였나..? 만드는 도중에도 계속해서 렌더링횟수를 생각한다고 생각했는데 어림도없었다. 해치웠나..? 생각해보고 성능테스트를 돌려보았지만 라이트하우스에서 나오는 점수는 56... 하하하 라이트하우스에서 제공해주는 지표를 하나하나보면서 다시 리팩토링을 해보자 ✅ 개선사항 개선방법1 useCallback사용, loadGames함수 컴포넌트 밖으로 빼기 첫번째로 진행한 리팩토링은 useCallback을 활용하여 콜백함수를 메모이제이션 하는 방법을 진행해보았다. 사용한 방법은 아주 간단했다. 리렌더링이 될 때마다 초기화되는 함수를 useCallback으로 감싸서 초기화를 막고, 함수가 다시 필요할 때마다 함수를 새로 생성하는 것이 아닌 메모리에서 가져와서 재사용할 수 있게 만들어주는 것이다. 직접 바꾼 ..
이전의 포스팅에서 SCSS의 기능을 소개했다. 그 중에 첫번째인 변수의 사용의 기능을 확실하게 알기 위해 포스팅을 진행하려한다. SCSS에서의 변수사용 기능 SCSS는 CSS에 변수 개념을 도입해주는 기능이 있다. 숫자, 문자열, 폰트, 색상 등등의 형태를 사용할 수 있게 해준다. 내가 작성했던 코드를 예시로 살펴보겠다. GitHub - plla2/game-store Contribute to plla2/game-store development by creating an account on GitHub. github.com 나는 먼저 테마컬러를 미리 잡아두고, 나머지 배경, 텍스트의 컬러를 변수로 만들어 사용하였다. 변수 등록, 사용 // _colors.scss $bg1: #141516; $bg2: #0f..
Sass(SCSS)문법은 무엇이고 왜 등장하였을까 먼저, CSS의 단점에 대해 나열해보면 선택자를 만들 때 매번 불필요한 부모요소 선택자를 작성해야함 동적으로 변경할 때 일일이 수동으로 변경해야한다. 중복되는 코드가 많아져 유지보수에 좋지 않다. 즉, 쉽게 잘하면 선택자 과용, 코드 중복이 많아져서 유지보수가 어려워진다는 단점이 있다. 위와 같은 CSS의 단점으로 인해 Sass(SCSS)가 등장하였다. Sass(SCSS)문법은 코드의 재활용성을 높이고, 가독성을 올림으로서 개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어이다. 하지만 여기서 헷갈리면 안되는 것이 전처리기 언어의 동작 방식이다. 전처리기 언어로 작성을 한다고 전처리기 언어로 직접 동작시키는게 아니다. 웹은 CSS만 인식하기 때문에 문..
요즘 지금까지 해왔던 프로젝트들에 대한 최적화에 대한 리팩토링을 계속해서 고민하고 고치려고 노력중이다. 아직 리팩토링하는 방법, 해야하는 기준에 대해 공부가 잘 안되어있기 때문에 프로젝트의 코드들을 쭉보면서 반복되는 코드들에 대한 리팩토링부터 시작하기로 했다. 1. Board 컴포넌트의 엄청난 반복코드 처음에 이 프로젝트를 구현할 때 왜이렇게 했는지 지금생각해보면 이해가 가지는 않지만, 어쨌든 내가 친 코드니까,, 페이지 좌측에 backgroundnoise를 주는 보드가 있다. ReactAudioPlayer, Slider mui라이브러리를 사용하여 slider를 이용하여 볼륨을 조절하고 자동재생, 반복, 소스(src) 등등을 속성으로 하여 총 11개의 noise를 아래의 사진처럼 하나씩 다 주고 앉아있었..
해당 면접 답변용 정리 카테고리의 글들은 내용 전체적인 포스팅이 아니라 면접에서 질문을 받았을 때 대답해야할 것들만 정리해둔 것으로 해당 내용을 공부하고 이해한 것들을 바탕으로 답변용으로 정리해둔 것이다. 내용을 자세히 알고 싶다면 다른 정리해둔 글을 보는게 더 효과적일 것이다. HTTP 메서드 클라이언트와 서버 사이에 이루어지는 요청과 응답 데이터를 전송하는 방식 HTTP 메서드의 속성 안전(Safe Methods) - 이 말은 계속해서 메소드를 호출해도 리소스를 변경하지 않는다는 뜻이다. 주요 메소드중에는 GET 메소드가 안전하다고 볼 수 있다. 멱등(Idempotent Methods) - 이 말은 메소드를 계속 호출해도 결과가 똑같다는 뜻이다. GET, PUT, DELETE는 멱등하다고 볼 수 있지..
해당 면접 답변용 정리 카테고리의 글들은 내용 전체적인 포스팅이 아니라 면접에서 질문을 받았을 때 대답해야할 것들만 정리해둔 것으로 해당 내용을 공부하고 이해한 것들을 바탕으로 답변용으로 정리해둔 것이다. 내용을 자세히 알고 싶다면 다른 정리해둔 글을 보는게 더 효과적일 것이다. HTTP 상태 코드란? 클라이언트가 보낸 HTTP 요청에 대한 서버의 응답 코드 상태 코드에 따라 요청의 성공/실패 여부를 세 자릿수로 구분한다. HTTP 상태 코드 분류 분류 내용 1xx Informational (조건부 응답) 클라이언트가 서버에 정보를 요청했지만 해당 요청이 여전히 처리 중임을 나타낸다. 2xx Successful (성공) 서버가 브라우저의 요청을 성공적으로 받고, 처리했음을 나타낸다. 3xx Redirec..
