본문 바로가기

전체 글105

Semantic Tag, 반복문 정리 및 복습 너무떨리는 마음에 ...! 웹개발의 기본적인 기본인 HTML과 CSS 문제에 명확하게 정리해서 답을 못한것 같아서 이렇게 정리하는 시간을 가져보습니다. Semantic Tag 란? 의미를 부여한 태그라는 뜻으로, 쉽게 말하면 태그에 의미를 부여한 혹은 같은 태그들을 말합니다. 이렇게 이름만 봐도 상단과 하단이라는 것을 알 수 있으며, 시맨틱 태그의 등장으로 태그만 보고서도 문서를 더 쉽게 이해할 수 있게 되었습니다. 태그를 활용하여 웹 문서를 만들 수 있지만, 시맨틱 태그를 사용해야 하는 이유 ? 1. HTML 문서의 가독성과 유지보수가 쉬워지기 때문입니다. 2. 웹 브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer), 사이드(aside) 어느 영역인지 쉽게 알 수 있.. 2023. 7. 14.
면접질문중 헷갈렸던것 (프로토콜,SSR,CSR,브라우저 저장소,콜백 함수,GET) 요즘 면접을 보고 있는데, 개념을 익히고 있다고 생각했지만 막상 물어보면 대답을 제대로 못하는 것 같아 아쉬운 마음에.. 끝나고라도 정리해 보자 하고 마음먹었는데 지금 해야겠다.. 히히 이렇게 하나하나 배워가는거지뭐.. ㅠ_ㅠ 여튼..정리시작!! 1. 여태 한 프로젝트 중에서 프로토콜을 이용한 사례 및 방법에 대해서 말해주세요. 여기서...HTTP말씀하시는거 맞냐고 물어보고 조금 헛소리한것같아서.. 모르는것은 바로바로 알아야하기때문에 !! 정리해본다 !! 먼저, 프로토콜 ? : 프로토콜은 통신하기 위한 약속들을 기술적으로 잘 정의해 준 것으로, 데이터를 송수신하는 순서와 내용을 결정한다. ex) HTTP , TCP/IP, UDP HTTP(Hypertext Transfer Protocol): 웹 브라우저와.. 2023. 7. 14.
[Next.js] 3. 페이지 레이아웃 만들기 웹사이트 레이아웃을 만드려면 html, css를 작성해야 한다. next 에서는 ? 리엑트버전 (jsx) html, css를 사용하면 된다 1. return () 안에 HTML넣을 때 : 평행해서 태그들을 2개이상 넣을 수 없다. (전체를 감싸는 하나의 태그가 있어야 한다) 2. 스타일 적용하고 싶을 때 : className 이라고 써야한다. ex) 3. HTML안에 변수 넣을 때 : { } 중괄호 안에 넣어준다. (jsx의 데이터바인딩 문법 이라고도 불린다) 중괄호 안에 넣어주었고, 결과는 위의 화면과 똑같은것을 확인 할 수 있다. 4. style 속성을 넣으려면 style={ { 어쩌고 : 저쩌고 } } : 중괄호 두개를 이용한다 : 이 때, -기호가 들어가야 하는 font-size 같은 속성은 fo.. 2023. 7. 5.
[Next.js] 2.개발환경 세팅, 오류, 파일 Next.js 써보려 이제 개발환경 세팅을 하려 한다!!! 1. 바탕화면에 폴더 하나 만들어주고 vscode에서 열어준다 2. 프로젝트 생성을 위해 터미널을 열고 npx create-next-app@latest --experimental -app 를 쳐서 엔터를 누르니 이런게 떠서 (y) 누르고 진행 프로젝트 이름 설정해주기 타입스크립트를 쓸 것인지도 물어보는데, 방향키로 선택이 가능하다 ESLint도 사용할 것인지 물어보고 Tailwind CSS도 쓸 것인지 src/directory 도 쓸 것인지 App Router도 쓸 것인지 (이건 그래도 Recommended라고 되어있다!) 그러면 이제 생성이 된다! 3. 에디터로 생성된 프로젝트 열고 코드 짜면 된다! 내 프로젝트 이름은 fresh 이라, cd .. 2023. 7. 4.
[Next.js] 1. 쓰는 이유 요새 주니어 개발자..취직 너무 힘들다.. 😂 뭐가 부족한지, 그리고 면접 갔었을 때 물어보던 것 들중 하나였던 ' Next.js 쓸줄 알아요? '... 그래서.. 준비하고 공부하려한다.. 일단.. 인강질렀다.. ㅎ 코딩애플 강의자분이 되게 말도 재밌게 해주시고, 이해도 잘 되게 말씀해주셔서 질렀고 ㅎ 프론트엔드 시대가 가고,, 이제 점점 풀스텍을 지향하는 시대가 오고 있다는데.. 미리 대비해야지.. ㅎ 취직 넘어렵짜냐... ㅠ_ㅠ..!! 나이제 Next.js 배워서 써먹을 예정이니 제발 나 뽑아줘라...ㅠ_ㅠ힝...!!!! 여튼!!! 여기서 부터 시작해보쟈 ~~ 웹 개발시 Client-side Rendering 시대가 가고 Server-side Rendering 시대가 오고 있기 때문! Client-s.. 2023. 7. 4.
[React] Redux 드디어 Redux를 공부해본다... 그토록 어렵다고 들었던... 그래서 일단은 시작은 조심스럽게..해보쟈 ... 😣 Redux란? - 공식문서에서는 자바스크립트 앱을 위한 예측가능한 컨테이너 라고 소개한다. : 단방향 데이터 흐름을 이용해 예측 가능하고, 일관적인 상태 컨테이너의 역할을 제공하는 라이브러리 : Flux 패턴에 영감을 받은 Dan Abramov 가 개발함 : React 또는 다른 View 라이브러리들과 함께 사용할 수 있다. : Flux패턴과 혼동이될 수 있는데, Flux는 디자인패턴으로 일종의 실체가 없는 개념이다. 이러한 패턴을 쉽게 적용할 수 있도록 자바스크립트로 구현한 구현체가 Redux 이다. Redux의 3가지 원칙 1. 진실은 하나의 소스로부터 2. 상태는 읽기 전용이다 3. .. 2023. 7. 2.

티스토리툴바