분류 전체보기 (59) 썸네일형 리스트형 position:fixed 고정 후, 스크롤 페이지의 헤더를 꾸미다 보니, position : fixed 를 쓰게 되었다. 말풍선 안에 글을 넣은 모습을 하고싶었는데, 다른 영역을 침범해야 원하는 위치로 갈 수 있어서 사용했다. 그 후, 메인 UI를 다듬고 스크롤을 하는데, 말풍선이 계속 따라다닌것을 알게 되었다. 💡 따라다니는 말풍선은 fixed인데 어떻게 스크롤 시 화면에서 없앨 수 있을까? → 스크롤 했을 때, 헤더를 없애면 말풍선도 자연스럽게 사라질 것. useEffect(() => { const handleScroll = () => { const scrollThreshold = 50; // 스크롤 50px 을 임계값으로 설정 const currentScrollY = window.scrollY; // 현재 스크롤 // 현재가 50px 이하일.. 프론트의 서버 인증 (쿠키, 토큰, 세션) 2 회원가입 / 로그인을 구현하며, 권한이 있는 유저인지 인증하는 과정에서 많은 일을 겪었습니다. 아마 프로젝트를 백엔드와 함께 구현하면서 많이 일어나는 일이겠죠. 1) CORS 에러와의 싸움 2) 401과 403 코드의 콜라보 3) 응답 헤더에 접근 불가 4) 요청헤더에 토큰 넣기 해결했던 과정들을 공유하고, 다시 되새기는 시간을 갖도록 하겠습니다. 3) 응답 헤더에 접근 불가 서버에서 응답헤더에 토큰을 넣어 보내주었는데, 개발자 도구로 확인했을 때는 있었던 토큰이 무슨 수를 써도 접근이 불가여서 많은 시간을 썼습니다. 💡접근이 불가능한데, 응답 헤더를 어떻게 확인하나요? → 토큰 확인이 안되는데 서버는 보냈다고 할 때, 진짜 보낸 게 맞는 지 확인해야합니다. 브라우저의 개발자 도구에서 Network에 들.. 프론트의 서버 인증 (쿠키, 토큰, 세션) 1 회원가입 / 로그인을 구현하며, 권한이 있는 유저인지 인증하는 과정에서 많은 일을 겪었습니다. 아마 프로젝트를 백엔드와 함께 구현하면서 많이 일어나는 일이겠죠. 1) CORS 에러와의 싸움 2) 401과 403 코드의 콜라보 3) 응답 헤더에 접근 불가 4) 요청헤더에 토큰 넣기 해결했던 과정들을 공유하고, 다시 되새기는 시간을 갖도록 하겠습니다. 1) CORS와의 싸움 💡CORS가 정확히 어떤건가요? → cors는 동일 출처가 아닌 다른 출처의 리소스를 사용중이라는 것을 의미합니다. 기본정책인 sop (같은 출처 리소스 사용)를 위반하 고 있으니, 다른 출처 리소스를 사용하고 싶다면 권한을 부여하라는 것 입니다. 따라서 프론트에게 서버에 접근할 권한이 없다는 것을 뜻합니다. 자세한 CORS 개념은 전에.. CI / CD 를 통한 Github Action, Netlify 프론트엔드 페이지를 배포하기 위해 Netlify를 사용해보게 되었습니다. 정말 간단하게 배포가 가능하며, git에 push만 해도 자동으로 build와 배포가 이루어지는 프로그램입니다. 이걸 사용해보니, 이렇게 간단히 CI/CD가 이루어지나? 싶더라구요. 그래서 이 사이트를 소개할 겸, CI/CD와 Github Action에 대해 알아보겠습니다. 💡 CI/CD가 뭔가요? 꼭 해야하는 건가요? → 개발부터 배포까지의 단계를 자동화하여 빠르고 효율적이게 배포할 수 있게 하는 것입니다. 하지 않으면 배포가 불가한 것은 아니지만, 배포 후 업데이트를 하거나 수정을 하는 경우 빌드부터 배포를 다시 하는 것이 아닌 자동으로 진행시키기 때문에 따로 시간을 낼 필요가 없습니다. 따라서 빠르게 수정본의 테스트가 가능하며.. HTTP 메서드 사용하기 서버에 있는 리소스를 사용하기 위해 , 어떤 동작을 원하는 지 요청해야한다. 우리는 HTTP 메서드를 사용하여 서버에게 원하는 바를 요청하게 된다. 💡 HTTP 메서드가 어떤건가요? → HTTP 메서드는 클라이언트와 서버 사이에 이뤄지는 요청과 응답 데이터를 전송하는 방식 입니다. 총 9가지의 메서드가 있으나, 자주 사용하는 메서드는 POST, GET, PUT, PATCH, DELETE 입니다. GET : 리소스 조회 POST: 요청 데이터 처리, 리소스 추가(등록) PUT : 리소스 대체 , 해당 리소스가 없으면 생성 PATCH : 리소스 부분 변경 DELETE : 리소스 삭제 1) GET 사용하기 데이터를 조회하는 과정에서 사용합니다. url에 쿼리스트링을 이용하여 원하는 데이터를 조회할 수 있으며,.. Redux-toolkit (Todo-List에서 사용하기) 기존에 만들었던 Todo-List를 수정했습니다. → 캘린더 형태의 Todo-List로, 캘린더에서 선택한 날짜를 Redux-toolkit으로 상태관리하여 Todo-List에서 각 개별 날짜마다 todo를 만들고, 만든 날짜에 색을 부여해 캘린더에서 한 눈에 확인할 수 있도록 했습니다. 💡 모든 자원을 상태관리하는 것이 좋은건가요? → 가장 좋은 것은 관리할 것이 없는 것이다. 그래야 코드부담이 적고, 복잡해지지 않는다. 그래서, 내가 사용하려고 하는 자원이 많은 곳에서 사용이 되는가? 정말 필요한 자원인가? 를 판단하여 상태관리를 하는 것이 좋다. 만약 해당되지 않는다면, 상태관리는 되도록 안쓰는 것이 깨끗한 코드에 도움이 된다. 하지만, 그렇다고 필요한 부분에도 고심하여 사용하지 말라는 것은 아니다... 운영체제 (OS) 💡 운영체제(OS)가 정확히 뭘까? → 각각의 하드웨어를 연결했다고 원하는 프로그램을 수행할 수 있는 것이 아닙니다. 하드웨어는 특정한 자신의 기능을 수행하는 것 뿐, 이를 동작시키기 위해서는 하드웨어들과 적절하게 데이터를 주고 받으며 논리적인 일들을 해야합니다. 그리고 이를 시키는 주체가 바로 운영체제(OS)인 것이죠. 💡 운영체제(OS)는 알아서 작동하는데 왜 알아야 하는걸까? → 운영체제는 개발자보다 더 프로그램이 어떻게 작동하는지 알고 있는 주체 입니다. 그래서 우리는 프로그램이 문제가 생겼을 때, 운영체제를 통해 문제를 해결 할 수 있습니다. 운영체제를 이해하면, 프로그램과 하드웨어를 더 깊이 알 수 있게 되는거죠. 하드웨어에 문제가 생겼을 경우, 가령 메모리 누수가 생겼을 때 우리는 이런 메세.. Dynamic Programming 💡 다이나믹 프로그래밍은 어떤 상황에서 사용하나요? → 컴퓨터는 빠르지만, 무한대로 빠른 것은 아닙니다. 컴퓨터에도 연산 속도에 한계가 있습니다. 또한, 메모리 공간도 한정적이죠. 이로인해 개발자들은 연산 속도와 메모리 공간을 최대한 활용할 수 있는 알고리즘을 작성해야합니다. 이를 위한 대표적인 방법이 다이나믹 프로그래밍입니다. 동적 계획법이라고도 불리며, 1) 큰 문제를 작은 문제로 나눌 수 있으며, 나눈 작은 문제를 풀면 큰 문제 를 풀 수 있을 때 2) 그 작은 문제들이 중복 되는 문제일 때. 다이나믹 프로그래밍을 사용합니다. 💡 왜 다이나믹 프로그래밍 인가요? 다른 알고리즘으로는 불가능한가요? → 아니요, 다른 알고리즘으로도 가능합니다. 겹치는 하위 문제들이 있는 경우에도 재귀적으로 호출하는 재귀.. 이전 1 2 3 4 ··· 8 다음
