힘내봐요 개발의 숲

웹 프론트엔드 개발에 대한 이해도를 높이고 기초부터 숙달하기 위하여, 새로운 프로젝트를 Vanilla JS로 진행해 보기로 했다. 페이지 전환 속도를 감소하여 사용자 경험을 향상시키기 위하여, React처럼 SPA(Single Page Application)로 구현했다.꽤나 어렵고 번거로운 일이었지만, 직접 구현해보며 어떤 식으로 돌아가는지 공부해 볼 수 있었고, 프레임워크나 라이브러리를 쓰며 얼마나 편하게 작업할 수 있었던 것인지 깨달을 수 있었던 유익한 시간이었다. 구현 시 아래 목표들을 달성하기 위해 많은 고민을 하며 진행했다.페이지 이동 시 URL의 경로도 변경될 것URL의 경로가 깔끔할 것뒤로 가기가 가능할 것해당 페이지의 CSS가 적용될 것URL의 경로를 직접 수정하여도 해당 페이지로 이동될 ..

웹프로젝트에서 필요한 key 들을 .env 파일에 저장하고, 접근하도록 적용해두었다. 그러나 .env 파일은 보안을 위해 github 에 올리지 않는 파일인데, 배포 때는 어떻게 되는거지? 하는 의문이 생겼고, 백엔드 팀원이 github actions에 secrets 로 환경변수를 관리하는 방식을 알려주어, 공부하며 기록해둔다.Github Actions 란?Github에서 제공하는 CI(Continuos Integration, 지속통합)와 CD(Continuous Deployment, 지속배포)를 위한 서비스이다.Github Actions 은 특정 이벤트가 발생했을 때, 특정 작업이 일어나게 하거나, 주기적으로 특정 작업을 반복해서 실행시킬 수 있는 자동화 툴이다. 예를 들어 main 브랜치에 코드가 p..

메인페이지에서 새로고침 시 Recoil state 에 저장해둔 토큰이 초기화되어서 API 호출 에러가 발생했다.(아직 API 호출 에러를 핸들링 하지 않았다.) 리프레쉬 토큰 없이 진행하다 보니, 토큰을 보호하기 위해 로컬 스토리지에 저장하지 않고 내부 변수로 들고 있으려 했던 것인데, 지금 상태로는 새로고침 시 다시 로그인이 필요한 상황이기 때문에 사용자 경험이 좋지 않다고 판단 되었다. Recoil Persist 라이브러리를 사용하면, 간단하게 필요한 변수를 로컬 스토리지에 저장시킬 수 있다.  1. recoil-persist 를 설치한다.npm install recoil-persist//oryarn add recoil-persist2. state 를 관리하는 파일에 recoil-persist를 im..

모달창이 close 될 때마다 관련 state 를 초기화해주는 함수를 호출하는데, 세개의 파일에서 동일한 함수를 추가해 쓰고 있었다.반복되는 코드를 줄이기 위해서, 함수를 새 파일로 뺀 후 컴포넌트처럼 호출해서 쓰려고 수정했더니 아래처럼 에러가 났다. Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:1. You might have mismatching versions of React and the renderer (such as React DOM)2. You might be br..

CSS 는 대부분 재미있지만, 정렬하는 부분에서 꽤 애를 먹게 되는 것 같다.예전 프로젝트 때도 정렬 때문에 CSS 하면서 힘들었던 기억이 있어서, 이번 붕어빵을 부탁해 프로젝트를 하며 기록해두려고 한다.  붕어빵을 부탁해 메인페이지를 만드는 중인데, div 들이 좌측 정렬 된 채로 가운데 정렬이 잘 안되어서 우선 배치만 해두었다. 요소들이 세로로 배치되어 있고, 이걸 세로로 가운데 정렬 해야하는 상황이다. 서치해보면서 몇몇 시도를 했는데 원하는 결과가 나오지 않았다🥲margin : auto 를 줘라 - tailwind에서는 해당 속성이 없어서 불가text-align : center 를 줘라 - 적용해도 정렬되지 않음서치하며 이것저것 하다가, flexbox 로 하는 방법을 알게 되었고, 드디어 성공! ..

(42Seoul의 CPP04 과제를 진행하며 공부한 내용을 작성한 TIL을 정리한 글 입니다.)개념 공부📓가상 함수가상함수는 ‘virtual’ 키워드를 사용하여 선언한 함수를 의미가상 함수 테이블은 대체로 아래 순서로 구현됨‘virtual’ 키워드를 사용하여 가상 함수 선언클래스에 대한 가상 함수 테이블을 생성함. 가상 함수 테이블은 가상 함수들에 대한 포인터들의 배열객체에 가상 함수 테이블 포인터를 추가하여, 해당 클래스의 가상함수 테이블을 가리키게 함가상함수 호출 시, 해당 클래스의 가상 함수 테이블 포인터를 따라가 적절한 가상 함수를 찾아 호출가상 소멸자클래스 상속 시, 해당 클래스의 소멸자도 가상 소멸자로 선언해야 함가상 소멸자로 선언하지 않으면, 해당 클래스를 동적으로 할당하고 삭제 시, 메모..

(42Seoul의 CPP03 과제를 진행하며 공부한 내용을 작성한 TIL을 정리한 글 입니다.)개념 공부📓클래스 상속기존 클래스의 특성과 기능을 새로운 클래스가 물려받는 것상속을 통해 기존 클래스의 멤버 변수와 멤버 함수를 그대로 사용하거나, 새로운 멤버 변수와 멤버 함수를 추가하여 새롭게 정의할 수 있음상속을 통해 만들어진 새로운 클래스를 ‘파생 클래스’ 또는 ‘하위 클래스’ 라고 하며, 기존 클래스는 ‘기본 클래스’ 또는 ‘상위 클래스’ 라고 함클래스 상속 방법class BaseClass { // 기본 클래스의 멤버 변수와 멤버 함수 선언}class DerivedClass : access-specifier BaseClass { // 파생 클래스의 멤버 변수와 멤버 함수 선언}BaseClass : 기..

(42Seoul의 CPP02 과제를 진행하며 공부한 내용을 작성한 TIL을 정리한 글 입니다.) 개념 공부📓 Orthodox Canonical Form OCCF 란, 클래스의 기본적인 형식 또는 일반적인 형식을 따르는 규칙 집합 이 규칙들은 클래스의 일관성과 호환성을 유지하고, 예기치 않은 동작을 방지하는데 도움을 줌 C++ 98 버전의 OCCF 는 아래 규칙을 포함함 기본 생성자(Default Constructor) 복사 생성자(Copy Constructor) 소멸자(Destructor) 대입 연산자(Assignment Operator) 동등 연산자(Equality Operator) 복사 할당 연산자(Copy Assignment Operator) ostream 연산자(’’) 오버로딩 42 과제에서는 위..