profile
기록장

Next.js의 Image는 img가 아니다

Next.js에서 img를 사용하려면 Image를 next/image에서 import 해야한다.그런데 살펴 보면 Image태그는 img태그가 span으로 wrapping 돼있는 구조다. ↑이렇게 img가 꽁꽁 감춰져있다.문제는 css가 맘처럼 안된다는 것이다...특히

3일 전
·
0개의 댓글
·

component unmount때 애니메이션 적용

보통 모달창 같은거 띄울 때 이런식으로 한다.하지만 이런식으로 하게되면 component가 unmount될 때 애니메이션을 줄 수 없다.애니메이션이 동작하기 전에 사라져 버리기 때문에...그래서 transition group같은 라이브러리들이 있다.하지만 상남자특 )

7일 전
·
0개의 댓글
·

Next.js + Redux toolkit + Typscript

React에서 상태관리 할때 압도적으로 Redux가 쓰이는건 맞지만 그냥 제일 먼저 나와서 많이 쓰는게 아닌가 싶다. 관리할 상태가 많아질 수록 파일이 너무 커진다. saga...thunk...최근에 recoil이랑 zustand를 잠깐 봤는데 (신세계임 ㅋ) 조만간

2022년 7월 30일
·
0개의 댓글
·
post-thumbnail

스크롤 위치에 따라 다른 css 적용하기

토스 slash 사이트를 보다가 헤더가 깜찍해보여서 해보려 한다.↑ 헤더가 스크롤 최상단에 위치해 있을 땐 배경색과 같고,↑ 스크롤을 내리면 투명도를 줘서 구분을 해준다. (관계자분 모자이크 해드림ㅋ)useState에 스크롤 상태를 넣어준다.현재 스크롤 위치를 set해

2022년 7월 30일
·
0개의 댓글
·

TS+Next.js에서 SVG 컴포넌트로 사용하기

Next.js에서 SVG를 사용하려면, 두가지 방법정도가 있다.(예시)잘 작동하지만, 색을 바꾼다던지 SVG파일 자체에 속성을 주기가 어렵다.그래서 두번째 방법을 쓰는게 좋다.이렇게 사용하면 svg에 속성 값을 줄 수 있어서 좋다.export하는 module에 아래 속

2022년 7월 20일
·
0개의 댓글
·
post-thumbnail

[Web] Atomic CSS

최근 리액트에서 많이 사용되는 스타일링 방법은 sass(scss), styled-components, tailwind정도 이지 않을까 싶다. 그래서 CSS-in-CSS, CSS-in-JS를 비교해 볼 것이다. (근데 CSS-in-JS가 대세인 것 같음ㅎ) CSS-in-

2022년 7월 13일
·
0개의 댓글
·

styled-components로 animation주기

항간에 프론트엔드는 "예술"이라는 말이있다. (사실 없음ㅋ)그래서 가끔 혼자 css 효과 주면서 노는데 (별로 재미없음ㅋ)요즘엔 css같은 마크업 언어가 팔수록 더 어려운것같다...그러다 문득 styled-components에서 keyframe을 사용법이 궁금해져서 해

2022년 7월 12일
·
0개의 댓글
·

[k8s] minikube deployment 해보기

replicaSet vs deployment? k8s에는 replicaSet과 deployment라는 개념이있다. 둘다 서비스에서 여러개의 pod의 가용을 보장해준다. (pod이 돌다가 뭐 하나 죽으면 소생시켜줌ㅎ) replicaSet은 단순히 pod의 갯수 유지에

2022년 5월 31일
·
0개의 댓글
·

[Web] CRA 웹팩 뜯기

웹팩같은 번들러는 위 그림 하나로 설명할 수 있다. (사실 그 정돈 아님ㅋ)그림의 왼쪽을 보면 하나의 웹을 구성하기 위해 수 많은 파일들이 있고, 수 많은 dependency가 걸려있다. 웹팩 같은 번들러가 하는 일은,웹을 구성하는 모든 파일들의 dependency를

2022년 5월 28일
·
0개의 댓글
·

[Web] CORS와 SOP

웹 개발 중 한번 쯤은 CORS정책 위반을 해보셨을겁니다.보통 api request를 보낼 때 많이 접하는데저는 vue로 프로젝트를 할 때 처음 본 기억이 있습니다ㅠkakaomap api와 공공데이터 포털의 api서버를 이용해서지도에 핀을 찍고 해당 위치의 상권을 분석

2022년 5월 12일
·
1개의 댓글
·

[OS] #4. Synchronization(2)

저번엔 Low-level, 즉 OS단계에서 사용하는 synchronization 방식을 알아봤으니 이번엔 Application단계의 synchronization 방식인 Semaphore, Monitor방식을 알아볼 것이다. **※ Application단에서 synch

2022년 4월 30일
·
0개의 댓글
·

[Docker] docker swarm

Docker swarm? 만약 관리하는 도커 머신, 컨테이너 갯수, 이미지가 수 없이 많아지면? 일일히 CLI창으로 관리 할 수 없기에, docker swarm이 필요하다. 도커스웜, 쿠버네티스와 같은 서비스를 오케스트레이터라고도 하는데, 말그대로 컨테이너들을 관리

2022년 4월 23일
·
0개의 댓글
·

[issue] docker-machine "This computer doesn't have VT-X/AMD-v enabled. Enabling it in the BIOS is mandatory"오류 해결

VMware와 docker-machine를 같이 사용하려 했는데 오류가 발생했다.가상화도 켜놨고 하이퍼바이저도 다 꺼놨는데... 그런데 해결방법은 찾았다.그냥 create할때 가상화체크를 무시하도록 하면 된다.잘된다!

2022년 4월 22일
·
0개의 댓글
·

[DB] #3. SQL

https://velog.io/@leejaehyuck9/DB-2.-%EA%B4%80%EA%B3%84%EB%8C%80%EC%88%98 저번에 관계대수를 포스팅했었는데, SQL은 관계대수를 선언적으로 사용하면 된다! 예를들어 π\dno,empname(employees)를

2022년 4월 20일
·
0개의 댓글
·

[DB] #2. 관계대수

두번째 DB포스팅은 관계대수이다. 관계대수는 sql의 근간이

2022년 4월 19일
·
0개의 댓글
·

[DB] #1. RDBMS

데이터베이스관한 글을 쓰기 전에, 바로 sql부터 포스팅할 예정이었다. 하지만, sql의 이론적 기초가되는 관계대수 또한 매우 중요하다고 생각되어 DB, 특히 RDBMS가 무엇인지, 그리고 관계대수는 무엇인지부터 정리할 것이다. RDBMS? 우선 DBMS는 Datab

2022년 4월 19일
·
0개의 댓글
·

[OS] #2. OS의 기능

저번 포스팅에서 OS는 hardware을 효율적으로 관리 해주는 software라고 했다.오늘은 그래서 어떻게! 효율적으로 관리해준다는건지 알아볼 것이다.표시된 부분이 OS의 중요한 기능들인데, 가볍게 짚고 넘어가면user interfacesCLI(bash, shell

2022년 4월 19일
·
0개의 댓글
·

[OS] #3. Synchronization(1)

프로세스나 스레드가 동일한 shared resoure에 access하지 못하도록 하는 것이다.두 프로세스가 하나의 변수에 접근해서 각자 값을 바꿔버리면 안될것이기 때문이다. 아래 예시를 보자.ATM에서 돈을 인출하는 process인데, synchronization에 대

2022년 4월 18일
·
0개의 댓글
·

[Docker] docker volume+jenkins

도커 컨테이너 내에 데이터를 저장하면, 컨테이너의 소멸과 함께 데이터도 운명을 같이한다. 그래서 데이터를 저장하고, 컨테이너간 데이터를 공유할 수 있는 방법들이 있다.Docker volumebind amounttmpfs등이 그것인데, 오늘은 이 셋의 특징을 알아보고 D

2022년 4월 17일
·
0개의 댓글
·

[JS]Array methods

자바스크립트의 Array methods를 정리해보자.물론 가장 좋은건 레퍼런스를 참조하는 것이다.spread 연산자를 이용한 항목 추가(원본 배열을 손상시키지 않음)이런 immutable한 특성은,리액트의 useState같이 배열을 직접 수정할 수 없을 때 유용하다.배

2022년 4월 13일
·
0개의 댓글
·