본문 바로가기

전체 글28

[react] useState/useEffect 알아보기(Hook 함수) useState와 useEffect는 React에서 제공하는 훅(Hook) 함수로, 함수형 컴포넌트에서 상태 관리와 부수 효과를 처리하는 데 사용된다. useState와 useEffect를 알아보기 전에 훅(Hook)은 무엇일까? [특징] - 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있다. - 훅(Hook)은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있게 도와준다. - Hook을 통해 서로 비슷한 동작을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있다. - Class 없이 React 기능들을 사용하는 방법을 제시한다. (Class 안에서 동작하지 않음) - Hook은 존재하는 코드와 함께 나란히 작동함으로써 점진적으로 적용할 수 있다... 2023. 6. 14.
[과제] Javascript 프로젝트 과제 후기 Javascript를 공부하면서 느낀 점 제로베이스를 만나기 전에 국비 지원되는 강의도 들어본 적이 없어서 태어나서 처음으로 자바스크립트를 배우고 실습해 볼 수 있는 시간이었다. 처음에 html은 뼈대, css는 외관, javascript는 동적인 움직임을 나타낸다고 해서 javascript를 이렇게 많이 사용하는지 몰랐다. html/css를 배울 때 생각보다 효과를 줄 수 있는 게 많다고 생각해서 그렇게 생각했던 거 같다. 그리고 html/css를 배울 때와 다른 점이 있었다. html는 태그별로 그리고 css는 속성별로 배우게 되니까 이해가 잘 되지 않으면 다음 속성을 듣고 다시 들어도 점이 있었다. 하지만 javascript는 이해하지 못하면 넘어갈 수가 없다.🫠 큰 틀 안에 배우게 있고 또 안에 .. 2023. 5. 24.
HTTP/HTTPS 차이점과 적용 방법 HTTP/HTTPS 설명 및 차이점 HTTP는 Hypertext Transfer Protocol의 약자이고 HTTPS는 Hypertext Transfer Protocol Secure약자로, 두 개 전부 인터넷에서 데이터를 전송하는 프로토콜이다. 두 개의 하는 역할은 동일한데 보안이라는 특징으로 나뉘고 있다. HTTP는 데이터를 암호화하지 않고 전송을 하기때문에 중간에 데이터를 가로채면 개인 정보나 비니지스 정보같은 민감한 정보를 제 3자가 쉽게 확인할 수 있다. HTTPS는 HTTP에 보안 기술인 SSL(Secure Socket Layer), TLS(Transport Layer Security) 프로토콜을 사용해 데이터를 암호화하고 전송한다. 그래서 데이터를 제 3자가 가로채더라도 데이터가 암호화가 되어.. 2023. 5. 5.
Class를 활용해서 모듈화 & 브라우저 저장소 각각의 장단점 주제 1 [Class를 활용해서 모듈화] 주제 2 [브라우저 저장소 각각의 장단점] class 모듈화 자바스크립트는 함수 또는 식을 만들고 export 하면, 다른 파일에서 import해 사용할 수 있는 구조이다. 특정 행동을 할 수 있는 함수를 다양하게 코드를 작성하고 export만 한다면 어느 파일에서나 사용할 수 있는데, Class를 이용하면 다양한 함수들을 모듈화 시킬 수 있다. 쉽게 말해 '연산식에 대한 결과를 도출하는 함수', '반복할 수 있는 함수' 등 특정 기준에 따라 구조화하고, 구조화된 함수들을 한번에 export 할 수 있는것이다. 쉽게 작성하려고 두루뭉술하게 작성을 해놨는데 mdn 공식 문서에 따르면 class는 객체를 생성하기 위함 템플릿이라고 되어있다. 이렇게 Class를 활용해.. 2023. 4. 30.
[제로베이스] 13기 2개월 차 후기 2023.03.30 - [front-end] - [제로베이스] 13기 1개월 차 후기 [제로베이스] 13기 1개월차 후기 한 달간 좋았던 점 3월 1일부터 시작한 13기 제로베이스 스쿨이 벌써 한 달이 흘렀다.. 시간이 굉장히 빠르다는 것을 새삼스레 다시 체감하고 지난 한 달 동안의 돌아보는 시간을 가지려고 한다. qorguswp.com 한 달 전에 1개월 차의 후기를 작성했었는데, 2개월이 된 시점 후기를 다시 작성해 보려고 한다. 두 달 좋았던 점 처음 한 달 전에 좋았던 점에 대해 todo-list를 제공해 주는 것과, 데일리 스크럼 하는 것을 꼽았었다. 지금 시점에서의 좋았던 점을 생각했을 해보면 이 전과 생각이 바뀌지 않았다. 가장 큰 장점은 todo-list 제공해 주는 것과, 데일리 스크럼을.. 2023. 4. 25.
[CSS] css 레이아웃 Flex와 Grid 비교(사용하면 적합한 레이아웃) 들어가기 전에 웹 사이트를 구성하는 요소들의 배치 공간을 분할하고 정렬하는 것이 레이아웃인데, Flex와 Grid는 레이아웃을 구성할 수 있는 대표적인 CSS 속성이다. Flex를 사용하면 적합한 레이아웃 먼저 Flexbox는 요소를 배치할 때 ①요소들 사이에 동일한 간격을 준다, ②요소를 중앙 정렬할 수 있다, ③요소를 일렬로 배치할 수 있는 등 기준을 통해 원하는 배치를 쉽게 할 수 있고, 디바이스에 동적인(반응형) 레이아웃을 제공할 수 있어서 굉장히 유용하다. 하지만 배치할 요소가 너무 많고 복잡한 레이아웃을 구현할 경우 Grid를 사용하는 것이 좋을 것이라고 생각한다. 왜냐하면 Flexbox는 수직적으로 배치 or 수평적으로 배치만 가능하기 때문이다. 쉽게 말해 각각 다른 여러 가지 모양을 내가 .. 2023. 4. 24.