분류 전체보기 108

[OS/운영체제] Mac M1/M2/M3 M시리즈에서 x86 아키텍처 Docker 환경 구축하기 / XV6 운영체제 설치하기

XV6를 설치하는 운영체제 과제를 하기 위해 인텔의 x86 아키텍쳐를 구성해야 했다.여기서 잠깐 차이를 짚고 넘어가자면x86은 하드웨어 아키텍처이고, XV6는 소프트웨어(운영체제)이다. x86 아키텍처에서 XV6 운영체제가 실행된다고 이해하면 된다.보통의 Mac 유저라면 UTM이나 Parallels를 사용해 가상환경을 구성한 후 ubuntu 환경을 만들곤 하는데그렇게 구성한 ubuntu도 사실은 ARM 기반 아키텍처이기 때문에 일반적인 윈도우 환경, 즉 AMD64와는 차이가 있다.사진은 내가 utm에 ubuntu를 설치해 사용하는 모습이다.얘도 어차피 arm 기반이라 인텔의 x86과는 완전히 똑같지 않다.웬만하면 이걸로 쓰면 전부 되지만 이번 운영체제 과제 환경 구성은,,,, 안된다 ;;; Packag..

공부 기록 2024.09.25

[Spring] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 #5

본 글은 해당 강의를 보고 작성한 글입니다.https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%EC%9E%85%EB%AC%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8 [지금 무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 강의 | 김영한 - 인프김영한 | 스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., 스프링 학습 첫 길잡이! 개발 공부의 길을 잃지 않도록 도와드립니다. 📣 확www.inflearn.com#5 회원 관리 예제 - 웹 MVC 개발1. 멤버 컨트롤러를 만들고 의존관계 설정까지 완료 + 멤버 컨트롤러로 회원을..

Spring 2024.09.06

[Spring] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 #4

본 글은 해당 강의를 보고 작성한 글입니다.https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%EC%9E%85%EB%AC%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8 [지금 무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 강의 | 김영한 - 인프김영한 | 스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., 스프링 학습 첫 길잡이! 개발 공부의 길을 잃지 않도록 도와드립니다. 📣 확www.inflearn.com#4 스프링 빈과 의존관계1. 스프링 빈을 등록하고, 의존관계를 어떻게 설정하는지 알아보기 회원 컨트롤러에 의존관계 ..

Spring 2024.09.06

[Spring] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 #3

본 글은 해당 강의를 보고 작성한 글입니다.https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%EC%9E%85%EB%AC%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8 [지금 무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 강의 | 김영한 - 인프김영한 | 스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., 스프링 학습 첫 길잡이! 개발 공부의 길을 잃지 않도록 도와드립니다. 📣 확www.inflearn.com#3 회원 관리 예제 - 백엔드 개발1. 비즈니스 요구사항 정리- 데이터 : 회원 ID,이름- 기능 : 회원 등록, ..

Spring 2024.09.06

[React/리액트] 상태 관리 추천 / Zustand 사용법

현재 개발중인 프로젝트에서 상태관리로 zustand를 사용하기로 했다.recoil충이었던 내가 zustand를?!!익숙해지기 위해 이론과 간단한 todo list를 만들어서 직접 사용해보자!왜 이렇게까지 하냐면,,, 코드 잠깐 봤는데 한 번에 이해가 안돼서 직접 써봐야겠어서,,, 핳머리가 나쁘면 몸이 고생한다는 걸 하 머래 난 말이 너무 많아그냥 빨리 해보자Zustand 관련 내용 정리Zustand란?- React의 상태 관리 라이브러리이다. Zustand는 독일어로 "상태"를 의미해서 이런 이름이 붙었다고 한다 주요 특징1. API 설정이 간단하다.2. 경량 라이브러리이다.3.  Redux 미들웨어와 유사하게 미들웨어를 사용할 수 있다. 이왕 정리하는 김에 정리해본...주요 상태관리 도구들 특징 비교z..

React 2024.08.03

[React/TS] 주소 검색 기능 구현하기 / 주소를 위도 경도로 변환하기 / 카카오맵 API 타입 정의

주소 검색 라이브러리 추천 유명한 주소 검색 라이브러리들은 다음과 같다.Google Places API: 구글의 위치 검색 API를 사용하여 자동 완성 주소 검색 기능을 구현할 수 있습니다.Daum Postcode API: 한국에서 널리 사용되는 주소 검색 API로, 다음(카카오)의 주소 검색 기능을 제공합니다.네이버 지도 API: 네이버의 지도 API를 사용하여 주소 검색 기능을 구현할 수 있습니다.사용자 정의 주소 목록: 사용자가 직접 주소 목록을 선택하거나 입력하도록 할 수 있습니다.장점과 단점을 정리해보자면, Google Places API장점글로벌 적용 가능: 전 세계 어디서나 사용할 수 있는 주소 검색 기능을 제공한다.자동 완성 기능: 사용자가 주소를 입력할 때 자동 완성 기능이 작동하여 빠르..

React 2024.07.30

[React/리액트] 파일 업로드와 미리보기 기능 구현하기

구현할 기능 및 문제 상황다음과 같이 갤러리에서 이미지를 업로드하는 기능을 구현해야 했다.각자 다른 페이지에서 두 번 씩이나 쓰이기 때문에 이미지를 등록하는 기능을 hook으로 구현해서 재사용을 할 예정이다.구현에 앞서 이미지 등록에 필요한 개념들을 정리해보고자 한다! 이미지 등록 관련 개념 정리1. Blob이란?Blob(Binary Large Object)은 큰 파일(이미지, 비디오 등)을 다루기 위한 데이터 타입이다. 읽기 전용의 원시 데이터를 나타내며 주로 대용량 바이너리 데이터를 다루기 위해 사용된다. 파일 업로드/다운로드, 바이너리 데이터를 이미지로 생성, 미디어 파일 작업 등에 유용하다.주요 기능은 다음과 같다. 1. Blob 생성Blob() 생성자를 사용하여 배열 또는 문자열로부터 Blob을..

React 2024.07.28

[React/리액트]React에서 요소에 접근과 제어하는 방법 / useRef와 getElementByIdref 비교 / input에 useRef를 쓰는 이유

https://5ffthewall.tistory.com/112 [React/리액트] 파일 업로드와 미리보기 기능 구현하기구현할 기능 및 문제 상황다음과 같이 갤러리에서 이미지를 업로드하는 기능을 구현해야 했다.각자 다른 페이지에서 두 번 씩이나 쓰이기 때문에 이미지를 등록하는 기능을 hook으로 구현해서5ffthewall.tistory.com  위 글에서 파일 업로드를 구현하다가 궁금증이 생겼다. 대부분의 파일 업로드 코드들이 useRef를 사용해서 나도 useRef로 값을 참조했는데 useState를 써도 될 것 같다는 생각이 들었다. 구글링하다가 useRef를 안좋아한다는 사람도 있고.... useRef 쓸 바에 useState쓴다는 말도 있고... 그래서 직접 코드를 비교해보기로 했다!useRef ..

React 2024.07.28

[React/CSS-in-JS] Styled-Components를 사용하여 고정 푸터(버튼)와 스크롤 가능한 콘텐츠 구현하기

이거는 사실 css 카테고리인데... 그냥 여기에 씀 문제 상황웹앱 st로 세로가 긴 화면을 개발하는 중에 화면 안의 컴포넌트들이 많아서 화면의 세로 길이를 넘어갈 때 스크롤이 되지 않거나 하단에 고정해둔 다음으로 넘어가는 버튼에 가려지는 문제가 생겼다.이게 내가 개발중인 화면이다.보통의 비율의 핸드폰에서는 평범한 화면이겠지만이제 se같은 극단적인 화면 비율의 상황에서는 이런 상황이 발생한다. 문제 원인다음 버튼을 bottom 스타일을 적용해서 화면의 하단에 footer마냥 위치해둬서 생기는 문제이다.다음 버튼도 그냥 화면의 컴포넌트의 가장 밑에 위치해두고 scroll 여부를 허용하면 금방 해결 될 문제겠지만 나는 다음 버튼을 footer처럼 모든 스크린의 바닥에 위치하게 하고 싶었다. 이유 : 그게 더..

React 2024.07.27

돌아왔다

노잼시기... ㅜㅜㅜ 이겨내견뎌버텨 이제 진짜 할 일을 하자 ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ그만 놀아할 일을 정리해보자 7월1. umc 프로젝트 -> ts 적응이나 하자...2. 스프링 기본편 강의 전부 듣고 정리하기 + jpa를 듣는게 낫다는 소문이 있습니다... 일단 기본편 듣고 게시판 api 구현까지3. 모리딥 or 딥다이브자바스크립트 or 이펙티브타스 셋 중 하나 스터디 열기 일단 열어!!!4. 알고리즘 ㅜㅜ 차근차근 그냥 c++로 풀자5. 알고리즘 풀기 싫으면 typehero 풀기!6. 솦프 수정하기?? 결과 나오면 ㅎㅎ 8월1. umc 플젝 -> 배포 무사히 끝내기 (버셀? 배포 내가 하고싶다고 해야겠다) + rn 갖다 붙이기 머 후반에 할 게 많을 듯2. 모든 면접 복기 하기! + 2학기 동아리 후보 정..

일기 2024.07.23
728x90