반응형

전체 글 50

[Next.js, Github Pages] Image 컴포넌트 에러 해결

문제 상황Next.js의 Image 컴포넌트를 사용하여 프로필 이미지를 불러오도록 작성했는데,아래와 같은 에러가 발생했다.Error: Image Optimization using the default loader is not compatible with `{ output: 'export' }`. Possible solutions: - Remove `{ output: 'export' }` and run "next start" to run server mode including the Image Optimization API. - Configure `{ images: { unoptimized: true } }` in `next.config.js` to disable the Image Optimi..

Front-End 2024.09.10

[Figma] 프로토타입 위로 가기 효과 적용하기

이전 글에 이어서, 포트폴리오 사이트를 구현하기에 앞서 피그마로 디자인하며 프로토타입으로 실제 느낌을 확인해보고, 피그마를 공부하기 위해 ‘위로 가기’ 버튼의 효과를 적용하려 한다. 처음엔 막연하게 ppt 처럼 위로 올라가기 효과같은게 있을 거라고 생각했는데,서치해보며 여러 효과 적용 예제를 보다 보니, 피그마에서는 효과 적용 전/적용 후 화면을 별도로 만들어둔 후 그 화면을 연결하는 식으로 프로토타입 효과를 적용하는 것 같다. 위로 가기 효과도 비슷하게 레이어를 복사해서 두개를 만들어 두고, 위로 가기 버튼이 클릭되면 다른 레이어로 이동시키는 방식으로 적용할 수 있었다.레이어 복사하기우선 레이어를 복사해서 두개를 만들어 둔다.  위로 가기 버튼의 Interactions 설정하기위로 가기 컴포넌트를 클릭..

Front-End 2024.09.05

[Figma] 프로토타입 헤더&네비게이션 고정된 스크롤 효과 적용하기

포트폴리오 사이트를 구현하기 위해서 Figma에 디자인을 했다.하나의 페이지에서 쭈욱 스크롤 되며 정보를 볼 수 있도록 하기 위해서, 각 카테고리(표지/About Me/Project) 별로 프레임에 그린 후 한 프레임에 합친 상태이다.   구현 전, 실제로 화면에서 스크롤 되는 느낌까지도 확인해보고 싶었고, 피그마 공부도 할 겸 프로토타입으로 스크롤 효과를 적용해보기로 했다.아래 몇가지의 목표를 갖고 스크롤 효과를 적용하려 한다.스크롤 시에도 우측 하단에 네비게이션 바와 위로 가기 버튼이 있도록 고정About Me 카테고리부터 헤더가 있으며, 이후로는 상단에 있도록 고정 레이어(Layers) 구성하기우선 스크롤 효과를 적용하기 위해서는, 스크롤 되어야 하는 컨텐츠가 화면 사이즈(ex: Macbook Ai..

Front-End 2024.09.05

[혼공컴운] '혼자 공부하는 컴퓨터구조 + 운영체제' 스터디 6주차

스와핑(Swapping)스와핑은 메모리 관리 기법 중 하나로, 사용되지 않는 프로세스를 메모리에서 보조 기억 장치로 이동시키고, 실행할 프로세스를 메모리로 가져오는 방식이다. 이를 통해 메모리의 효율적인 사용을 가능하게 하며, 프로세스 간의 자원 경쟁을 완화할 수 있다.메모리 할당 방식최초 적합 방식(First Fit Method): 최초 적합 방식은 메모리에서 첫 번째로 발견한 적재 가능한 빈 공간에 프로세스를 배치하는 방법이다. 이 방식은 탐색 시간을 줄일 수 있으나, 공간 활용이 비효율적일 수 있다.최적 적합 방식(Best Fit Method): 최적 적합 방식은 프로세스가 적재될 수 있는 가장 작은 빈 공간에 프로세스를 배치하는 방법이다. 이 방식은 메모리 공간을 효율적으로 사용할 수 있지만, 작..

TIL::Today I Learn 2024.08.18

[혼공컴운] '혼자 공부하는 컴퓨터구조 + 운영체제' 스터디 5주차

동기화(Synchronization)동기화는 특정 자원에 접근할 때 한 번에 하나의 프로세스만 접근하거나, 프로세스를 올바른 순서대로 실행되도록 제어하는 것을 의미한다. 이는 시스템의 안정성을 보장하고, 자원 충돌을 방지하기 위해 필수적인 개념이다.공유 자원(Shared Resources)공유 자원은 여러 프로세스가 공동으로 사용하는 자원으로, 전역 변수, 파일, 입출력 장치, 보조 기억 장치 등이 될 수 있다. 이러한 자원은 동시에 여러 프로세스가 접근하면 문제가 발생할 수 있으므로, 접근에 대한 관리가 필요하다.임계 구역(Critical Section)임계 구역은 공유 자원에 접근하는 코드 중에서 동시에 실행하면 문제가 발생할 수 있는 코드 영역을 의미한다. 임계 구역에 한 프로세스가 들어가 있다면,..

TIL::Today I Learn 2024.08.11

[혼공컴운] '혼자 공부하는 컴퓨터구조 + 운영체제' 스터디 4주차

운영체제의 역할과 기능운영체제는 컴퓨터 시스템에서 실행할 프로그램에 필요한 자원을 할당하고, 프로그램이 올바르게 실행되도록 돕는 특별한 소프트웨어이다. 운영체제와의 상호작용을 통해 하드웨어와 소프트웨어의 동작을 이해하고 문제 해결의 실마리를 찾을 수 있다.커널과 이중 모드커널은 운영체제의 핵심 기능을 담당하는 부분이다. 이중 모드는 CPU가 명령어를 실행하는 방식을 두 가지 모드, 즉 커널 모드와 사용자 모드로 구분한다. 시스템 호출은 운영체제의 서비스를 이용하기 위해 사용자 모드에서 커널 모드로 전환하는 방법이다. 대표적인 운영체제 서비스에는 프로세스 관리, 자원 접근 및 할당, 파일 시스템 관리 등이 있다.프로세스와 프로세스 관리프로세스는 실행 중인 프로그램을 의미한다. 프로세스는 포그라운드 프로세스..

TIL::Today I Learn 2024.07.28

[혼공컴운] '혼자 공부하는 컴퓨터구조 + 운영체제' 스터디 3주차

RAM의 종류DRAM (Dynamic RAM): 시간이 지나면 저장된 데이터가 점차 사라지기 때문에 주기적으로 데이터를 새로 고쳐야 한다.SRAM (Static RAM): DRAM과 달리 시간이 지나도 저장된 데이터가 사라지지 않으며, 주기적인 리프레시가 필요 없다.SDRAM (Synchronous DRAM): 클럭 신호와 동기화되어 작동하는 DRAM이다.DDR SDRAM (Double Data Rate SDRAM): SDR SDRAM보다 대역폭이 두 배로 넓어 빠른 데이터 전송이 가능하다.주소 변환과 관리물리 주소: 메모리 하드웨어에서 사용하는 주소이다.논리 주소: CPU와 실행 중인 프로그램이 사용하는 주소이다.MMU (Memory Management Unit): 논리 주소를 물리 주소로 변환한다.베..

TIL::Today I Learn 2024.07.21

[혼공컴운] '혼자 공부하는 컴퓨터구조 + 운영체제' 스터디 2주차

산술 논리 장치(ALU)와 제어장치산술 논리 장치(ALU)는 CPU의 핵심 부품 중 하나로, 주로 계산과 논리 연산을 담당한다. ALU는 레지스터로부터 데이터를 받아 연산을 수행하고, 제어장치로부터 제어 신호를 받아 작업을 지시받는다. 연산 결과와 상태 플래그를 출력하여 시스템의 다른 부분에서 사용할 수 있게 한다.제어장치는 CPU의 다른 부분과 외부 장치와의 상호작용을 관리한다. 클럭 신호, 현재 실행 중인 명령어, 상태 플래그, 그리고 제어 신호를 받아들이며, 이를 바탕으로 CPU 내부와 외부로 제어 신호를 보낸다.레지스터CPU에는 다양한 종류의 레지스터가 존재하며, 각각의 역할이 다르다.프로그램 카운터(PC): 다음에 실행할 명령어의 메모리 주소를 저장한다.명령어 레지스터(IR): 현재 실행 중인 ..

TIL::Today I Learn 2024.07.13
반응형