본문 바로가기

전체 글63

[Tailwind CSS] px 값 부여하기 & 반응형 레이아웃 만들기 px값 부여하는법 tailwind CSS 의 장점 중 하나는 이미 설정되어 있는 값을 손쉽게 쓸 수 있다는 점이다. 이미지처럼 width에 값들이 설정되어 있기 때문에 width-72, width-sreen 등으로 편하게 너비를 설정할 수 있다. 하지만 테일윈드 CSS 속성값에 없는 사이즈를 주고 싶다면? 나는 384px보다 더 큰 600px를 주고 싶다면 어떻게 해야 할까? [대괄호] 안에 원하는 픽셀 값을 넣으면 된다. 그러면 이렇게 원하는 값으로 width를 설정할 수 있다. 하나만 하면 재미 없으니깐 이번엔 반응형 레이아웃도 알아보자! 반응형 레이아웃 공식문서를 보면 sm, md, lg, xl, 2xl 로 최대 너비를 설정할 수 있다. 이렇게 해서는 안된다. 이 코드의 결과물은 다음과 같다. w.. 2023. 3. 22.
2차 프로젝트 회고 : W.A.B 🥨 2023년 2월 12일 작성 2차 프로젝트가 끝났다! 지난 번엔 프로젝트 회고를 비교적 세세하게 적었었는데 이번에는 내용들이 서로 연관이 많아 세부적으로 나누기가 좀 애매해 간단하게 작성하고 끝낼까 한다. ✔️프로젝트의 시작 프로젝트 기간은 01.30~2.10이다. 초반에 주제를 정하고, 프로덕트 매니저와 프로젝트 매니저를 뽑았다. 주제는 제과영업점 공유 사이트이다. SNS로만 소통하는 맛있는 빵집들이 많아지고 있는데 그런 정보들을 모두가 볼 수 있도록 공유 사이트를 만드는 것이 목표였다. 그리고 나는 프로젝트 매니저를 맡아 회의 주관, trello 및 회의록 관리를 했다. 맨 처음 프론트엔드 팀원들끼리 역할 분담을 할 때 나는 다른 분들 하고픈 기능 먼저 맡으시고 남는 역할을 담당하겠다고 했다. 그래서.. 2023. 3. 20.
1차 프로젝트 회고 : Market GGoGi🥩 2023년 01월 16일 작성 ✔️ 프로젝트 개요 사이트 소개 마켓꼬기는 마켓컬리 클론 사이트로 전 품목이 아닌 고기만 취급하는 사이트 첫 번째 프로젝트인 만큼 디자인은 마켓컬리 사이트를 따라 구현함 개발기간 2023.01.02~2023.01.13 개발인원 프론트엔드 3명 백엔드 2명 적용기술 프론트엔드 : React, Javascript(ES6), SCSS 협업도구 : Github, Trello, Slack, Notion ✔️ 담당 업무 1. 로그인 백엔드와 POST 메서드로 통신 - result.message 결과에 따라 안내 메세지 띄우기 로컬스트리지에 토큰 저장 2. 회원가입 백엔드와 POST 메서드로 통신 - 유효성 검사 규칙을 충족하지 못할 경우 result.message에 따라 안내 메세지 .. 2023. 3. 20.
[Tailwind CSS] background-image 경로 설정 이번에 프로젝트로 tailwind css를 활용하기로 해서 tailwind css를 연습하는 중이다. tailwind css는 클래스네임에 css 속성을 입력하기 때문에 클래스네임이 매우 지저분해진다는 단점이 있긴 하지만, 약어로 코드를 빠르게 칠 수 있고, reset CSS가 필요 없다는 장점이 있다. 아직은 미숙해서 tailwind css 사이트에서 속성을 찾아보면서 코드를 치고 있지만 손에 익으면 빠르게 레이아웃을 구현할 것으로 기대된다! 오늘은 배경 이미지의 경로를 설정하는 데 어려움을 겪어서 경로 설정을 어떻게 했는지 공유해보려고 한다. 폴더 구조 활용할 사진은 [src] 폴더 - [assets] 폴더 - [images] 폴더 안에 sky.jpg를 넣어두었다. [public] 폴더에 이미지를 넣.. 2023. 3. 20.
[Javascript] 실행 컨텍스트 지난 글에 이어 오늘은 모던 자바스크립트 딥 다이브를 참고해서 실행 컨텍스트를 정리했다. 아직 제대로 이해를 못해서 단순 요약글에 그칠 예정이다. 나중에 이해가 되면 내가 이해하지 못했던 부분을 알기 쉽게 변경할 예정이다. [이전 글] [Javascript] 변수의 스코프, 호이스팅, TDZ 지난 번에 변수의 정의와 선언, 할당에 대한 글을 정리했었다. 이번에는 모던 자바스크립트 딥 다이브 책을 참고해서 변수 스코프를 공부해보고 설명할 예정이다. [이전글] [Javascript] 변수의 정 dalsong-00.tistory.com 실행 컨텍스트 실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고, 코드의 실행 결과를 실제로 관리하는 영역이다. 실행 컨텍스트를 알아야 자바스크립트가 어떻게 동작.. 2023. 3. 15.
퇴사 면담 팁 : 아름다운 마무리하기 회사를 다니는 동안 선배님에게 귀에 딱지가 생기도록 들은 말이 있다. 바로 '우리 부서에서는 퇴사가 정말 어렵다'는 것이다. 다른 회사에 합격을 해서 그만두려는 사람이 있었지만 부장님 면담에 지쳐 퇴사를 포기했다는 이야기가 들릴 정도였다. 나는 부장님과 같은 사무실에서 근무해본 적은 없지만 그 말이 사실일 거라고 100% 확신했다. 가까운 곳에 산 증인이 있었기 때문이다....내 짝꿍 과장님 마저도 세 번이나 퇴사를 시도했지만 못 나가서 10년 이상 근무를 하고 계셨다. 그래서 나는 퇴사날까지 한 달 넘게 여유를 두고 센터장님께 10월 말까지만 회사를 다니고 그만둘 예정이라고 말씀을 드렸다. 퇴사하기 전 나는 몇 번이나 면담을 했을까? 바로 네 번이다. 세 번째 면담이 끝났을 때 퇴사를 향한 확고한 의.. 2023. 3. 15.