분류 전체보기
-
색깔 적용 안됨개발공부/TailwindCss 2023. 12. 12. 20:14
최근에 지인들과 새로운 프로젝트를 진행하기로 했다. (Next.js와 Tailwind css를 사용) 오늘은 프로젝트에서 발생했던 문제와 내가 시도 했던 방법들을 공유하고자 한다. 문제 발생 Tailwind css를 사용했는데 다른 거 다 되는데 색깔만 적용되지 않는 문제가 발생했다. (폰트, 배경 등) 1차 해결 방법 구글의 도움 받아 1차 해결 방법을 찾았다. 바로 @layer를 사용해 색깔을 정의하는 방법이다. @layer { .text-white { color: white; } } .title_section { @apply flex flex-col p-[30px] font-bold text-5xl text-white; } 하지만 이 방법을 적용한 뒤에 글자 색깔을 바꿀 수 있었지만, 혼자 생각해봤..
-
SPA, CSR, SSR개발공부/CS 2023. 12. 5. 15:51
오늘은 렌더링 방식에 대해 공부하고자 한다. 왜냐하면 프론트엔드 개발자는 각 렌더링 방식의 장단점을 이해하고, 웹 어플리케이션의 특성에 맞는 렌더링 방식을 선택할 줄 알아야 하기 때문이다! 렌더링 종류 렌더링 종류는 아래와 같다. 싱글 페이지 어플리케이션 (Single Page Application) 클라이언트 사이드 렌더링 (Client-Side Rendering) 서버 사이드 렌더링 (Server-Side Rendering) 이제 하나씩 자세히 알아보려고 한다. 싱글 페이지 어플리케이션 (Single Page Application) 모든 페이지가 단일 페이지로 구성되어 있는 방식 최초 한번 페이지 전체를 로딩한 후부터 데이터만 변경해서 사용할 수 있는 웹 애플리케이션 예시로는 React, Vue.js..
-
Restful API개발공부/CS 2023. 12. 1. 16:46
프론트엔드 개발자는 Restful API를 이해하고 활용하는 능력을 갖춰야 한다. Restful API를 통해 데이터를 조회, 생성, 업데이트, 삭제할 수 있고, 서버와 통신할 수 있기 때문이다. 그래서 오늘은 Restful API에 대해 공부하고자 한다. Restful API 종류 GET: 요청받은 URI의 정보를 검색하여 응답 POST: 요청된 자원을 생성 DELETE: 요청된 자원을 삭제할 것을 요청 PUT: 요청된 자원을 전체 수정 PATCH: 요청된 자원을 일부 수정 HEAD: GET 방식과 동일, 하지만 응답에 BODY가 존재 X, 응답코드와 HEAD만 응답 CONNECT: 동적으로 터널모드를 교환, 프록시 기능을 요청시 사용 터널모드: 헤더와 IP의 내용(payload) 모두 보호하는 모드 ..
-
Next.js개발공부/Next.js 2023. 11. 30. 20:10
오늘부터 Next.js를 공부하려고 한다. Next.js란? 리액트 문제 해결 도구 Next.js 관련해서 정말 많은 글들을 읽어봤는데 결국 간단하게 정리하면 리액트의 문제를 해결하기 위해 만들어진 JS 웹 프레임워크이다. 리액트의 어떤 문제를 해결해줄까? 느린 페이지 로딩 속도 리액트는 클라이언트 사이드 렌더링(CSR)을 기본으로 하기 때문에 페이지 로딩 속도가 느림 왜 느리지? CSR은 JS 파일을 먼저 다운로드한 후 데이터를 받아오기 때문 SEO 속도 느림 CSR이기 때문에 검색 엔진이 웹 페이지의 콘텐츠를 이해하는 어려움 발생 개발 편의성 리액트는 다양한 기능 제공을 하지 않아 개발자가 직접 설정하는 부분이 많음 Next.js의 장점 결국 Next.js는 리액트의 단점을 보완했기 때문에 위에 내용..
-
브라우저 저장소의 차이점개발공부/CS 2023. 11. 30. 13:58
프론트엔드 개발자는 언제 어떤 저장소를 사용해야 하는지 판단 할 수 있어야 한다. 이를 위해서는 브라우저 저장소의 종류 및 특징을 정확하게 알고 있어야 해서 오늘은 이를 공부하고자 한다! 저장소 종류 저장소 종류는 아래와 같다. Local Storage Session Storage Cookie 간단하게 먼저 정리하자면 데이터 용량이 작고, 서버 전송이 필요한 경우 쿠키 더 큰 용량이 필요하거나, 서버 전송이 필요 없는 경우 로컬 스토리지 또는 세션 스토리지 이제 하나씩 자세하게 알아보자. 로컬 스토리지 (Local Storage) 저장한 데이터를 지우지 않는 이상 영구적으로 보관 가능 단순하면서도 효과적인 클라이언트 측 데이터 저장 방법 중 하나 최대 크기: 5MB 사용 예시: 사용자 설정과 같은 간단한..
-
REST API개발공부/CS 2023. 11. 24. 17:22
REST API 개념 이해를 통해 효율적인 데이터 관리, 독립적인 개발과 통합, 상태 관리의 분리 등을 알게 되어 웹 어플리케이션을 효과적으로 개발할 수 있게 되어 프론트엔드 개발자로서 필요한 소양을 쌓을 수 있다! 즉, REST API 개념은 프론트엔드 개발자가 기본으로 알고있어야 하는 개념이기 때문에 오늘 하나씩 공부해보고자 한다. REST API 자원을 정의하고 이를 표현하기 위해 HTTP 프로토콜을 이용하는 인터페이스 REST API는 클라이언트와 서버 간의 상호 작용을 용이하게 하고, 분리된 구성 요소 간의 상호 작용을 간소화하기 위해 고안되었다고 한다. 이 인터페이스를 확실하게 이해하기 위해서는 필요한 개념이 2가지가 있다. 바로 REST와 API REST 자원의 이름을 구분하여 해당 자원의 ..
-
클로저 (Closure)개발공부/CS 2023. 11. 24. 16:55
클로저의 동작 원리를 이해하면 코드의 유연성, 안정성, 모듈화 등 여러 측면에서 이점을 얻을 수 있다고 한다. 그래서 오늘은 클로저에 대해 공부하여 프론트엔드 개발자로서 필요한 소양을 쌓아보자! 클로저 (Closure) 먼저 클로저에 대한 정의를 살펴봤다. 함수가 선언된 시점에서의 환경(스코프)를 기억하고 있는 함수 위에 내용은 정말 간단하게 이해할 수 있도록 정리한 것이고, 실제로 찾아봤을 때는 아래와 같은 문구를 확인할 수 있었다. 함수가 속한 렉시컬스코프를 기억하여 함수가 해당 구간 밖에서 실행되어도 그 스코프에 접근할 수 있게 해주는 기능! // one: 렉시컬 환경에는 올라갔지만 초기화되지 않아 사용 불가 // addOne: 렉시컬 환경 O, 사용 가능 let one; // 사용 가능 (하지만 ..
-
호이스팅 (hoisting)개발공부/CS 2023. 11. 20. 20:00
자바스크립트에서 중요한 개념 중 하나가 "호이스팅"이라고 생각한다. 호이스팅을 이해해야지 코드의 동작을 더 정확하게 파악할 수 있고, 예상 외 동작을 방지할 수 있다. 그래서 오늘은 호이스팅에 대해 자세하게 공부해보려고 한다. 호이스팅이란? 변수 및 함수의 선언문이 스코프 내의 최상단으로 끌어올려지는 현상 (대입문이 아닌 선언문이 끌어올려진다는 것을 기억할 것!) 위에 내용을 이해하기 위해서는 자바스크립트 엔진의 실행 과정을 알아야 한다. JS 엔진은 코드 실행 전 실행 가능한 코드를 형상화 및 구분하는 과정(실행 컨텍스트를 위한 과정)을 거치는데, 이 과정에서 모든 선언 (var, let, const, function, class)를 스코프에 등록한다. 이로 인해 이미 코드 실행 전 변수 및 함수 선언..