[CS50] 메모리 - 메모리 할당과 해제
TIL
메모리를 할당한 후에 저장한 값이 필요 없어지고 나면 어떻게 해야 할까?유한한 메모리를 효과적으로 관리하기 위해 할당한 메모리를 어떻게 관리해야 하는지 알아보자.메모리 해제의 필요성malloc 함수를 이용하여 메모리를 할당한 후에는 free 함수를 이용하여 메모리를 해제해야 한다.그렇지 않으면 메모리에 저장한 값은 쓰레기 값으로 남게 되어 메모리 용량의 낭비가 발생하는데, 이러한 현상을 메모리 누수(Memory Leak)라고 한다. 문제가 있는 코드다음 코드를 살펴보자.#include void f(void){ int *x = malloc(10 * sizeof(int)); x[10] = 0;}int main(void){ f(); return 0;}함수 f는 포인터 x에 int형의 크기..
[PeaNutter] TypeScript에서 버튼 클릭 이벤트 타입 에러 해결
Dev Log
문제 상황Firebase의 GoogleAuthProvider와 GithubAuthProvider를 사용하여 소셜 로그인 기능을 구현하던 중, 하나의 함수에서 버튼의 name 속성에 따라 다른 provider를 호출하도록 구현했다. Sign up with Google Sign up with Githubconst onClickSocialLogin = async (e: React.MouseEvent) => { const { target: { name }, } = e; let provider; const auth = getAuth(app); if (name === "google") { provider = new GoogleAuthProvider(); } if (name === "git..
[CS50] 메모리 - 문자열 복사
TIL
이미 저장되어 있는 문자열을 다른 곳에 복사하려면 어떻게 해야 할까? 문자열을 복사하는 방법과 주의사항을 알아보자.잘못된 문자열 복사문자열을 복사하기 위해 아래 코드를 실행해보자.#include #include #include int main(void){ string s = get_string("s: "); string t = s; t[0] = toupper(t[0]); printf("s: %s\n", s); printf("t: %s\n", t);} 입력: emma출력:s: Emmat: Emmas 변수에는 'emma'라는 문자열이 아닌 그 문자열이 있는 메모리 주소가 저장된다. string s는 char *s와 동일한 의미이므로, t도 s와 동일한 주소를 가리킨다. 그렇기 때문..
[PearNutter] 소셜미디어 앱 마이그레이션 계획
Dev Log
PeaNutter는 만화 Peanuts를 테마로 한 소셜미디어 프로젝트다.노마드코더 트위터 클론코딩 컨테스트에 참여하여 만들었으며, 사용자들이 자신의 소소한 일상과 생각을 'nut'으로 공유하고 소통하는 플랫폼을 구상했다. Peanuts는 땅콩이라는 뜻 외에도 '별 볼 일 없는 것들'이라는 의미로 쓰인다. 이 의미에서 착안하여 누구나 일상의 소소한 순간들을 가볍게 나누는 공간을 상징하고자 PeaNutter라는 이름을 붙였다.마이그레이션 배경컨테스트 당시 2주 동안 매주 제공되는 미션을 진행하며 기획안부터 필수 기능 3가지까지 구현해야 했다. 개인적으로 추가하고 싶었던 부가 기능까지 욕심내다 보니, 결과적으로 만족스러운 완성도에 도달하지 못했다. 이러한 아쉬움으로 PeaNutter는 리팩토링 및 마이그레이..
[AI 감성 일기장] LocalStorage를 활용한 데이터 영속성 구현
Dev Log
로컬 스토리지를 활용하여 사용자의 다크모드 설정, 일기 데이터, AI 답장을 저장하고 관리하는 기능을 구현했다.페이지를 새로고침하거나 재방문해도 사용자의 데이터가 유지된다.다크모드 설정 저장설정 불러오기애플리케이션 로드 시 로컬 스토리지에서 사용자의 마지막 다크모드 설정을 불러온다.const ThemeProvider = ({ children }: ThemeProviderProps) => { const loadDarkModeSetting = () => { const storedDarkModeSetting = localStorage.getItem("darkMode"); return storedDarkModeSetting ? JSON.parse(storedDarkModeSetting) : fals..
[AI 감성 일기장] GPT API를 활용한 AI 답장 기능 구현
Dev Log
사용자가 작성한 일기에 대해 GPT API를 활용하여 상담 전문가 관점의 답장을 받을 수 있는 기능을 구현했다.GPT API 연동프롬프트 설정GPT API에 전달할 메시지 구조를 정의했다.const messages = [ // 역할 정의 { role: "system", content: "You are a Counseling Expert, specializing in personal development through diary writing.", }, // 사용자 일기 입력 { role: "user", content: ` """ ${prompt} """`, }, // AI 지시 사항 { role: "user", conten..
[AI 감성 일기장] Tailwind CSS와 Context API를 활용한 다크모드 구현
Dev Log
Tailwind CSS의 다크모드 기능과 React Context API를 활용하여 애플리케이션 전체에서 일관된 다크모드 전환 기능을 구현했다.Tailwind 설정tailwind.config.ts에서 다크모드를 클래스 기반으로 설정했다.darkMode: "class", // .dark 클래스 존재 여부에 따라 다크모드 활성화theme: { extend: { colors: { // 색상 스키마 }, },},이를 통해 HTML 요소에 .dark 클래스가 추가되면 다크모드 스타일이 적용되도록 했다. 다크모드 상태 관리ThemeContext 생성Context API를 사용해 다크모드 상태를 전역으로 관리했다.const ThemeContext = createContext({ isDark..
[CS50] 메모리 - 문자열 비교
TIL
두 문자열이 같은 내용을 담고 있는지는 어떻게 비교할 수 있을까?문자열이 저장되어 있는 방식을 들여다보며, 문자열을 직접 비교하는 것이 가능한지 알아보자.문자열의 메모리 주소#include int main(void){ char *s = "EMMA"; printf("%p\n", s); // "E"의 메모리 주소}이 코드는 포인터 s의 값을 출력한다. 즉, "EMMA"라는 문자열의 가장 첫 번째 값인 "E"에 해당하는 메모리 주소를 출력한다. 각 문자의 주소printf("%p\n", &s[0]); // "E"의 메모리 주소printf("%p\n", &s[1]); // "M"의 메모리 주소printf("%p\n", &s[2]); // "M"의 메모리 주소printf("%p\n", ..
[AI 감성 일기장] Diary 페이지 일기 상세보기 기능 구현
Dev Log
Diary 페이지에서 특정 일기를 불러와 상세 내용을 보여주는 기능을 구현했다.URL 파라미터로 전달된 일기 ID를 통해 데이터를 조회하고, 존재하지 않는 일기에 대한 예외 처리도 추가했다.일기 데이터 불러오기useDiary 커스텀 훅특정 ID의 일기를 찾아 반환하는 커스텀 훅을 구현했다.const data = useContext(DiaryStateContext);DiaryStateContext를 통해 전역에서 관리되는 일기 데이터에 접근한다. 특정 일기 찾기 및 예외 처리const [curDiaryItem, setCurDiaryItem] = useState();useEffect(() => { const currentDiaryItem = data.find((item) => item.id === id);..
[CS50] 메모리 - 문자열과 메모리
TIL
우리는 이전에 string이라는 자료형을 사용했지만, 이는 실제로 C에서 존재하지 않는 자료형이다.문자열이 실제로 메모리상에 어떻게 저장되어 있는지, 문자열을 손쉽게 저장하고 접근하기 위한 방법을 배워보자.문자열의 정체지금까지 문자열을 저장하기 위해 CS50 라이브러리에 포함된 string 자료형을 사용했다.string s = "EMMA"; 문자열은 결국 문자의 배열이다. s[0], s[1], s[2], ...와 같이 하나의 문자가 배열의 한 부분을 나타낸다. 가장 마지막의 \0은 0으로 이루어진 바이트로, 문자열의 끝을 표시하는 약속이다.변수 s는 결국 이러한 문자열을 가리키는 포인터가 된다.더 정확히는 문자열의 가장 첫 번째 문자, 즉 주소 0x123에 있는 s[0]을 가리킨다. string의 정의실..