전체 글
-
스크롤 해도 배경 이미지는 고정하기(background-attachment)Dev/CSS 2023. 5. 20. 22:07
전체 wrapper에 백그라운드 이미지를 주고, 스크롤했을 시 고정이 되게 하고 싶었다. 결론을 먼저 말하자면 한 줄의 코드로 이 기능이 구현되었다. background-attachment: fixed; -scroll(기본값) : 스크롤 시 페이지와 함께 같이 움직이는 속성. -fixed : 스크롤 시 보이는 페이지와 다르게 배경 이미지는 고정되는 속성. 하지만 모바일 브라우저에선 사용할 수 없고, 가끔 버벅거리는 듯한 느낌을 주며 스크롤이 내려간다. 해결책을 찾아보았다. 배경 레이어를 따로 나누어서 적용하기 //HTML // 배경 처리할 레이어를 따로 분리 // CSS .bg { position: fixed; // 배경 이미지가 아닌 배경 레이어를 고정 top: 0; ┓ left: 0; ┣ // 배경 ..
-
Alert창 이쁜 라이브러리 추천 - SweetAlert2Dev/NPM 2023. 5. 20. 21:57
웹 개발을 하다 보면 사용자에게 알림 창으로 필요한 정보를 알려줘야 할 경우가 자주 발생한다. 그래서 보통은 이러한 alert창이나 modal을 이쁘게 디자인하여 사용자에게 보여준다. 디자인 및 기능구현에 있어 생각보다 시간이 소요되는데 간편하고 이쁜 alert 라이브러리를 알게 되었다. 심플하게 사용할 수 있으면서 엄청 이쁘다! 심지어 애니메이션도 구성할 수 있다! 공식문서를 보면 테마도 추가할 수 있다. 최신 업데이트도 빠른 거 같고 매달 다운로드 수도 200만이 넘어간다. 공식문서도 엄청 이쁘고 설명을 잘 써놨으므로 꼭 공식문서를 보는 것을 추천한다. 아래는 유명한 블로그에서 예시를 만들어놔서 가져와보았다. 꼭 이 분 블로그 들어가보시길! SweetAlert2 Using sweetalert2... ..
-
Next.js - 기본 동작 2편Dev/Next.js 2023. 5. 8. 21:36
기본 동작 2편에서는 백엔드에 해당하는 부분을 다룰 것이다. api를 통신하기 위하여 포스트맨도 함께 사용할 것이다. api route handlers 페이지의 라우팅하는 방법과 비슷하게 간다. 이때에는 app디렉토리 아래에 api라는 폴더를 생성한 후, 라우팅되기위한 폴더와 그 아래에 route.js 단일 파일을 생성하여 엔드포인트를 만든다. route.js파일에는 다음과 같이 만들어서 응답한다. Postman으로 해당 엔드포인트에 요청을 보내면 아래와 같이 응답이 온다. json형태로의 응답값을 보내고 싶다면 NextResponse를 사용한다. 다음과 같이 쿼리스트링을 넘길 때에는 어떻게 해야할까? ( http://localhost:3000/api/sample/search?userId=2) 지금껏 해..
-
Next.js - 설치 및 기본 동작 1편Dev/Next.js 2023. 5. 8. 21:13
Next.js를 실무에 사용하기 위하여 유튜브에서 Crash Course 영상을 토대로 작성하였다. 프론트 진영에서 트랜드가 빨라서 새로은 또 무엇인가를 공부해야하는 걱정이였으나 그나마 다행히 Next.js는 React를 바탕으로 만들어진 웹 front-end 프레임워크라 그런지 생각보다 할만하다는 생각이 들었다. 프레임워크라 react에서 부족하거나 일일이 해야했던 작업들을 편하게 해주기도 하였다. 왜 Next.js가 핫한지 체감이 되는 강의였다. https://www.youtube.com/watch?v=Y6KDk5iyrYE Next.js 프로젝트 설치 $ npx create-next-app next-crash automatic routing 기존의 next.js에서는 automatic routing을..
-
Next.js - 소개Dev/Next.js 2023. 5. 8. 20:46
Next.js 는 React로 만드는 서버사이드랜더링(SSR) 프레임워크이다. Next.js를 사용하면 어떠한 장점이 있고, 왜 사용하는 것일까? 우선, 클라이언트 랜더링(CSR)의 경우 모든 js 파일을 로드하고 사용자는 이러한 웹을 보게 된다. 그래서 처음(초기 랜더링)에 많은 대기시간을 가지는 문제점이 있다. 또한, SEO(search engine optimization,검색 엔진 최적화) 문제를 발생시킨다. 자바스크립트가 로드되지 않았을 때, 검색엔진이 스캔함으로써 아무 페이지도 걸리지 않게 된다. Next.js를 사용하게 되면 pre-reloading을 통해 미리 데이터가 랜더링 된 페이지를 가져올 수 있게 해 주므로 사용자에게 더 좋은 경험을 선사한다. 그리고 검색 엔진에 잘 노출될 수 있도록..
-
자바스크립트 this 이해하기Dev/Javascript 2023. 4. 14. 02:46
자바스크립트에서 this는 심심치 않게 나온다. this에 대하여 설명하라고 하면, 머리로는 아는데 말로 표현하기가 어렵다. 지금은 사용하지 않지만 예전에 React를 클래스형 컴포넌트로 생성할 때에도 종종 등장했던 부분이다. 그래서 this에 대하여 간략하게 정리하고자 한다. 자바스크립트에서 this는 인스턴스 자신을 가리키는 참조변수이다. 이렇게 말하는 것이 가장 쉽게 이해되는 문장인 것 같다. 다른 언어에서(자바같은)도 this가 존재하는데 자바스크립트에서는 함수를 호출하는 객체에 대한 참조이다. 이것은 자바스크립트에서 객체 지향 프로그래밍을 구현하는 방식 때문이라고 한다. (말 나온 김에 객체지향 프로그래밍에 대해서도 포스팅해야겠다) this는 함수가 호출되는 방식에 따라 값을 다르게 가지게 된다..
-
[책 리뷰] 당신은 생각보다 강하다Private 2023. 3. 26. 15:13
나는 매번 복잡한 생각이 머릿속에 가득 차 피곤하고, 힘든 경우가 많다. 최대한 단순히 생각하려 노력을 하지만 금방 다시 온갖 생각으로 가득 차곤 했다. 시간이 지나면 별게 아닌 상황이 많았었다. 돌이켜보면 나는 쓸데없는 생각에 에너지가 많이 쓰인다. 남이 보는 시선에 신경을 많이 쓰기도 한다. 그러다 보니 나에 대한 기준이 엄격해졌고, 늘 스스로에 대해 자책하고, 후회하고, 걱정이었다. 너무 과소평가하기도 했다. 그것은 자신감결여로 이어지기도 했다. 겉으로 보이는 모습은 괜찮아 보이지만 속으로는 과거, 그리고 스스로와 매번 싸우기 바빴다. 마음의 양식이 필요할 때쯤이 되었던 걸까? 서점에서 『당신은 생각보다 강하다』라는 책 제목이 눈에 띄었다. 그 아래에는 "생각 속에서 빠져나와 진짜 인생을 사세요"라..
-
Git Flow 전략 - 브랜치 이해Dev/Git 2023. 3. 23. 02:52
Git Flow 일반적으로 가장 많이 사용하는 git branch 관리 전략. git flow를 구성하는 브랜치 타입들을 먼저 살펴보자. 1. Master(main) 브랜치 실제로 사용자들에게 서비스가 되고 있는 코드를 담고 있는 브랜치. 검증이 완료되고, 빌드 에러 등이 없는 상태 코드가 들어있어야 한다. 일반적으로 오직 PR과 merge를 통해서만 코드를 넣도록 설정하여 직접 푸시를 할 수 없도록 막아둔다. 실제 사용자들에게 서비스가 되는 코드는 이 마스터 브랜치를 배포하여 제공된다. 2. develop 브랜치 배포일에 다음 master branch로 병합될 코드들이 있는 브랜치. 마스터 브랜치에서 checkout 하여 생성되는 브랜치. 마스터 브랜치로 병합시켜 실제 사용자들을 사용하고 있는 프로덕션..