티스토리

Jieun's

검색하기

블로그 홈

Jieun's

yjyyls6.tistory.com/m

찌우닝 님의 블로그입니다.

구독자: 3

방명록 방문하기

주요 글 목록

230407 📌요소는 왜 요소의 자식 요소여야만 하나요? li태그는 'list item'으로 목록을 만드는 태그이다. 그래서 목록을 나타내는 ul 태그의 자식 요소로 들어가야 한다. 📌HTML 의 inline 요소와 block 요소의 차이점을 설명해주세요. 예시도 들어주세요 block 요소 모든 인라인 요소를 포함할 수 있고, 다른 블록 요소도 일부 포함할 수 있다. 가로 전체 넓이를 가진다. (기본값 100%) 줄바꿈이 일어난다. 크기 지정 가능 수직으로 쌓인다. 상하좌우 여백 사용 가능. (margin, padding) 레이아웃을 위한 용도로 사용 block 요소 종류 address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcap.. 공감수 0 댓글수 3 2023. 4. 7.
230406 📌Semantic HTML의 필요성을 예시를 들어 설명해주세요. Semantic HTML이란? semantic 단어 뜻은 '의미의', '의미론적인' 이다. 따라서, Semantic HTML은 '의미론적 HTML'이 된다. HTML에서 Semantic element는 브라우저와 개발자 모두에게 명확하게 의미를 전달하는 요소(element). Semantic Tag란? 의미가 있는 태그. non-semantic semantic 더 자세한 건 여기서 참고 Semantic HTML의 필요성 검색엔진 최적화 (SEO) 검색엔진이 알맞은 결과를 내기 위해 웹사이트의 내부에 담긴 정보를 토대로 사이트를 분석하는데, 의미 있는 태그를 사용하면 그렇지 않은 태그를 사용했을 때 보다 더 적절한 키워드를 추출 할 수 있다... 공감수 0 댓글수 0 2023. 4. 6.
230405 📌순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여설명해주세요. 순수함수란? 동일한 입력에는 항상 같은 값을 반환해야 하는 함수 side effect를 만들지 않으므로 외부 상태를 바꿀 수 없다. 사이드 이펙트(side effect)란? 의도하지 않게 외부 변수를 참조하거나 외부 변수를 변경하는 모든 종류의 코드를 의미. 즉, 함수 외부의 값, 상태를 변경시키는 것 순수 함수란 동일한 입력에 대해 언제나 동일한 결과를 리턴하는 함수이며, 사이드 이펙트를 일으키지 않는 함수이다. 변화를 예측할 수 없기 때문에 예기치 못한 오류를 발생시킬 가능성이 있다. 리액트에서는 단방향 데이터 흐름을 유지하기 위해 리액트 컴포넌트의 props를 직접 변경하지 않는 방법으로 순수 함수를 지향하고 있다. 💡참고 더보.. 공감수 0 댓글수 0 2023. 4. 5.
230404 📌useRef가 필요한 상황을 예시를 들어 설명해 주세요. useRef란? React 공식 문서에 따르면, .current프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. 본질적으로 useRef는 .current프로퍼티에 변경 가능한 값을 담고 있는 상자와 같습니다. 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook Ref는 reference, 즉 참조를 뜻함 useRef는 리렌더링 하지 않는다. 컴포넌트의 속성만 조회&수정한다. 사용예시 컴포넌트에 focus를 위치시킬 필요가 있는 경우 특정 DOM에 접근해 focus를 주고 싶을 때 쓸 수 있다. const 변수명 = use.. 공감수 0 댓글수 0 2023. 4. 4.
230403 📌require와 import차이점을 설명해주세요. 각각 어떤 상황에서 쓸 수 있나요? 둘 다 모듈 키워드. 외부 파일이나 라이브러리를 불러올 때 사용 Babel같은 ES6 코드 변환 도구를 사용할 수 없다면 require 키워드를 사용해야함 require NodeJs에서 사용되고 있는 CommonJS 키워드 Ruby 언어 스타일과 비슷함 파일에 들어있는 곳에 남아있음 프로그램의 어느 지점에서나 호출 할 수 있음 특정 변수나 그 변수의 속성으로 내보낼 객체를 세팅해줘야 함. 여러개의 객체를 내보낼 경우 -> export.변수의 개별 속성으로 할당, 딱 하나의 객체를 내보낼 경우 -> module.exports = 객체 자체에 할당. require로 가져오고, esports/module.exports로 내.. 공감수 0 댓글수 0 2023. 4. 3.
230331 📌this 가 동작하는 원리와 용법을 아는대로 설명해주세요. 평소 코드 중에서는 어떤 부분에서 가장 큰 차이가 생기나요? this란? 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수. 현재 실행 중인 함수의 객체를 참조. this의 값은 함수 호출 방식에 따라 달라진다. this의 동작 원리 일반 함수 호출에서 this는 전역 객체를 가리킨다. 객체의 메소드로 호출된 함수에서 this는 해당 객체를 가리킨다. 생성자 함수에서 this는 생성된 객체를 가리킨다. call() 또는 apply() , bind() 메소드 사용 시 메소드에 첫 번째 인수로 전달하는 객체에 바인딩된다. 💡참고 더보기 https://velog.io/@wjddms0501/This-%EB%8F%99%EC%9E%.. 공감수 0 댓글수 0 2023. 3. 31.
230330 📌HTTP에 대해 설명하고, 알고있다면 HTTP 메세지 구조에 대해 더 자세히 설명해주세요. HTTP란? HyperText Transfer Protocol의 줄임말, 직역하면 하이퍼텍스트 전달 프로토콜 하이퍼텍스트는 인터넷 사용자가 필요한 정보의 자유로운 검색을 가능하도록 해주는 텍스트 전개 방식 HTTP는 이러한 하이퍼텍스트 방식의 정보를 교환하기 위한 하나의 규칙. 즉, HTML가 같은 문서를 전송하기 위해 사용되며 OSI 7 계층에서 응용 계층에 있는 프로토콜이다. 전통적인 클라이언트-서버 아키텍처 모델에서 클라이언트가 HTTP 메시지 양식에 맞춰 요청을 보내면, 이에 서버는 HTTP 메시지 양식에 맞춰 응답을 한다. 특정 상태를 유지하지 않는 무상태성(Stateless) HTTP 메세지 구조 클라.. 공감수 0 댓글수 0 2023. 3. 31.
230329 📌프레임워크와 라이브러리 차이점에 대해 설명해주세요. 프레임워크 애플리케이션 개발 시 필수적인 코드, 알고리즘, DB 커넥션 등의 기능등을 위해 뼈대(구조)를 제공 소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합 즉, 특정 프로그램을 개발하기 위한 여러 요소들과 메뉴얼인 룰을 제공하는 프로그램 예시 Java -> Spring Python -> Django JavaScript -> Node.js PHP -> Laravel 라이브러리 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임 여기에는 구성 데이터, 문서, 도움말 자료, 메시지 틀, 미리 작성된 코드, 함수, 클래스, 값, 자료형 사양을 포함 프로그래머가 어떠한 기능을 수행하기 위해서 도움을 주는.. 공감수 0 댓글수 0 2023. 3. 29.
230328 📌Hoisting 이란? TDZ란? Hoisting이란? 코드가 실행하기 전 변수,함수 선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상. 자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정을 거친다. 이 과정에서 자바스크립트 엔진은 코드 실행을 위한 모든 선언들을 스코프에 등록(메모리에 저장)한다. Hoisting 대상에는 변수 선언과 함수 선언 두 가지가 있다. 변수 선언(var, let, const 키워드) 자바스크립트의 모든 선언에는 호이스팅이 일어남 var 키워드로 선언된 변수와는 달리 let 키워드로 선언된 변수를 선언문 이전에 참조하면 참조 에러 (ReferenceError)가 발생함. 이는 let 키워드로 선언된 변수는 스코프의 시작에서 변수의 선언.. 공감수 0 댓글수 0 2023. 3. 28.
230327 📌웹페이지가 브라우저에 랜더링되는 과정을 설명해주세요. 렌더링이란? 서버로부터 HTML, CSS, JavaScript 등 작성한 파일을 받아 브라우저에 뿌려주는 것. 파싱 (Parsing) 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토근에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정. 쉽게 말해, 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것 파싱 결과는 문서 구조를 나타내는 노드 트리인데 파싱 트리(parse tree) 또는 문법 트리(syntax tree)라고 부름. 렌더링 과정 1. 서버로부터 넘겨받은 HTML, CSS 파일 다운 2. DOM / CSSOM 생성 :.. 공감수 0 댓글수 0 2023. 3. 27.
230224 TIL 최종 프로젝트 중간발표 KPT🔥 Keep 모르는 거, 막히는 거, 궁금한 거 그때그때 물어보고 소통을 많이 많이 하는 게 정말 좋은 거 같음!! Problem 문제점 : 기획을 나름 잘했다고 생각했는데 막상 개발을 시작하고나니 부족한 부분이 생각보다 많았음 해결방안 : 기획을 처음 짤 때 정말 완벽하게 유저입장에서 하나도 놓침없이 짜야할 거 같다 Try 리액트 쿼리, 리코일 공부 state에 대해서 정확하게 알기 useRef, useEffect 공부 Feel 팀워크의 중요성을 너무나도 느꼈고 열정도 가득한데 서로 가르쳐주고 배우면서 하니 내가 뭐라도 하고 있구나 싶었고 힘든 것도 많았지만 수료기간 동안 제일 많은 걸 얻어가는 시간이었다. 아직 2주 더 남았지만 2주 동안 열심히 달려서 더 성장하고 싶다. 공감수 1 댓글수 0 2023. 2. 25.
230217 TIL CORS 에러 알아보기 state 개념 다시 잡기 useRef useQuery {isLoading, isError, data, error} 써서 옵셔널 체이닝 안쓰기(map) 옵셔널 체이닝은 data가 있으면 map을 하고 없으면 안하기 때문에 실행된다 공감수 0 댓글수 0 2023. 2. 24.
230214-15 TIL 이미지 슬라이드 코드 import React, { useEffect, useState } from 'react'; import { useLocation } from 'react-router-dom'; import Slider from 'react-slick'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; import styled from 'styled-components'; const TestImgSlide = () => { const { state: detailData } = useLocation(); const img = detailData.imgURL; // console.log('det.. 공감수 0 댓글수 0 2023. 2. 14.
230210 TIL 오늘 한 일 프로젝트 계획 디테일 하게 수정 Figma 수정 파일 구조 조정 오늘 오전에 기술 멘토링 피드백을 받았는데 나름 기획을 잘 했다고 생각했는데 피드백을 듣고 나니 빠진 부분이 많았다... 그래서 오늘 하루는 각 잡고 기획을 다시 하자 해서 하루종일 회의 했는데 왜 하면 할수록 할 게 늘어나는 것인가...ㅜㅜㅜ 진짜 기획이 엄~~청 중요하다는 걸 느꼈다. 이제 본격적으로 시작해야하는데 할 건 세상 많고 시간은 세상 짧은 거 같아서 매우 걱정스럽다... 그래도 해야지!!!! 진짜 최종 프로젝트 끝나고 그래도 내가 얻어 나가는게 있구나 나 뭐라도 했구나를 느끼고 싶다! 우리 팀 화이팅!!!! 공감수 0 댓글수 0 2023. 2. 10.
230209 TIL 오늘 한 일 db 데이터 추가 공감수 0 댓글수 0 2023. 2. 10.
230208 TIL 오늘의 삽질 일단 UI는 나중에 디자인 나오면 하는 거로 하고 차례차례 기능 구현해 나가기로 하고 어제부터 내일까지 기한을 주고 시작한 첫 번째 기능은 유저가 팝업스토어 제보하는 게시판을 만들어서 파이어베이스에 연결하는거였다. 파이어베이스도 타입스크립트도 거의 모르는 상태여서 하기 전부터 걱정이 앞섰었다. 그래도 여기저기 찾아보고 다른 사람 코드도 보고 열심히 했지만 에러는 피할 수 없음.... 📌첫 번째 이미지 파일을 추가하는데 위 사진처럼 네모 칸 안을 눌러서 파일을 추가하고 그 이미지 파일이 네모 안에 미리 보기가 됐으면 싶었다. 그러기 위해서는 label 태그를 이용해 input 태그와 id를 동일하게 해서 연결시켜 주고 label을 css 해주면 된다. 그리고 label 태그 안에 image 태.. 공감수 0 댓글수 0 2023. 2. 9.
230202 TIL Memoization 컴포넌트가 리렌더링 되는 조건에는 state 변경, props 변경, 부모 컴포넌트 변경 3가지 조건이 있다. 그러나 리렌더링은 좋지 않다. 그러므로 리액트에서 불필요한 렌더링이 발생하지 않도록 최적화 하는게 중요! 1. memo(React.memo) : 컴포넌트를 캐싱 -> 부모 컴포넌트 변경 : 컴포넌트를 메모이제이션 export default React.memo(Box1) memo는 리액트 안에 있는 API로 import 해서 쓸 수 있다. import {memo} from "react" 그러면 export default memo(Box1) 로 쓸 수도 있다는 말! *무조건 쓰는게 아니라 자식 컴포넌트가 가벼운 변경이면 굳이 안써도 됨! *props 변경이 많이 일어나는 컴포넌.. 공감수 0 댓글수 3 2023. 2. 3.
230201 TIL 노션에 필기 정리 해놓은 거 가지고 옴 노션이 정리하기 딱 좋다 리액트 컴포넌트 실행 순서 공감수 0 댓글수 0 2023. 2. 1.
230131 TIL 정예부대 마지막 수업 - 리액트 총정리 DB가져와서 리액트 프로젝트 만들어보기 (투두리스트 같은거) 비동기 통신 이용 배열과 관련된 API 다룰 수 있어야한다. (map, filter, find 등등) jsonplaceholder 이용해서 db 뽑아볼 수 있어야한다. json 공부 esport와 esport default 차이 공감수 0 댓글수 0 2023. 1. 31.
230130 TIL 리액트 심화 아웃소싱 프로젝트 KPT (무드망고) Keep : 협업 규칙과 git 커밋 컨벤션을 미리 세세하게 정해놓고 시작하니 훨씬 편했습니다. Problem : 타입스트립트 공부가 부족해서 적용시키지 못해 아쉽습니다. 최종 프로젝트 전에 공부를 많이하고 들어가야 할 거 같습니다. Try : 기본기를 더 탄탄하게 다져야겠고 코드를 직접 써보고 응용해보는 시간을 가져야 할 거 같습니다. Feel : 기본기 탄탄하게 다지기! 에러를 겁내하지말기! 모르는 건 무조건 물어보기! 공감수 0 댓글수 0 2023. 1. 31.
230121 12주 차 - WIL 최종 프로젝트 전 마지막 심화 프로젝트 시작.. 소통도 실력도 좋은 팀원들을 만나 꽤 진행이 잘되고 있는 거 같다. 사실상 나는 지금 개인 공부가 절실한 상황이지만 팀 프로젝트이니 팀원들께 폐 끼치지 않고 정말 사소한 것일지라도 내가 맡은 건 열심히 해볼 것이다. 안되면 안된다고 어떤 게 안되는지 뭘 못하겠는지 팀원들에게 얘기를 하고 양해를 구할지언정 일단 해보자! 지금의 나는 초심으로 다시 돌아가 정신 상태부터 다시 세팅을 해야 할 거 같다. 내가 왜 코딩을 시작하게 되었는지 내가 지금 어떤 부분이 정확하게 안되는건지 어디까지 내가 진짜 할 수 있는지 정말 나는 열심히 해왔다고 자부할 수 있는지 내 자신에게 질문하고 답하는 시간을 가져야 할 거 같다. 공감수 1 댓글수 2 2023. 1. 24.
230119 TIL 기존 JS로 한 React 프로젝트를 TS로 리팩토링 일단 터미널에서 Typescript 추가 yarn add typescript @types/node @types/react @types/react-dom tsc --init 위 명령어를 입력해 tsconfig.json 파일 생성 그리고 js, jsx 파일을 ts, tsx로 변경해준다. 공감수 0 댓글수 0 2023. 1. 19.
230117 TIL 비동기 통신 import "App.css"; // async, await // then, catch, finally function App() { // fetch 키워드를 이용해서... fetch("http://localhost:4000/posts/1") .then((response) => { // 정상인 경우 console.log("response", response); }) .catch((error) => { // 오류인 경우 console.log("error", error); }) .finally(() => { // 무조건 나옴 console.log("무조건"); }); return Hello React!!; } export default App; // 비동기 : 제어권이 넘어간 상태 // then.. 공감수 0 댓글수 0 2023. 1. 17.
230116 TIL 리덕스 툴킷 createSlice의 결과물이 action creators와 reducers createSlice 함수 안에는 객체가 인자로 들어간다. const todosSlice = createSlice({ name: "", initialState: "", reducers: "", }) reducers에는 객체로 구성되어 있고, todoList에서 쓰이는 reducer로 구성해 보면 addTodo, removeTodo, switchTodo가 있고 얘네들은 함수이다, 이 함수 하나하나가 action creator의 이름이 됨 외부에서 이것을 호출하면 type과 payload를 가진 action을 만들어줌. const todosSlice = createSlice({ name: "todos", initial.. 공감수 0 댓글수 0 2023. 1. 16.
230115 11주 차 - WIL 이번 주차는 개인적인 일로 힘들어서 제대로 집중 못했고 공부도 많이 못했다. 그래서 쓸게 없다.. 다음 주차부터는 진짜 정신 바짝 차리고 멘탈 잘 잡고 나아가야겠다. 공감수 0 댓글수 0 2023. 1. 16.
230113 TIL 밀린 TIL 한 번에 작성하기... 프로젝트 기간 동안 회의감이 많이 들고 하는 게 딱히 없었어서 TIL 쓸 내용이 없었다. 이번 프로젝트는 기여한 바가 정말 없고 팀원들이 고생이 많았다고 생각한다. 별개로 나 스스로가 많이 현타가 왔고 회의감도 왔고 개인적으로 힘든 일도 겹쳐서 이번 프로젝트에는 집중을 못했던 거 같다. 이번주에 정신을 좀 재정비해서 다음 주부터 최종까지 잘 마무리할 수 있도록 해야겠다. 리액트 네이티브 프로젝트 KPT (3%) Keep : git PR을 자주 하는 게 충돌을 최소화시키는 거 같아서 유지했으면 좋겠습니다. Problem : css가 웹과 다르게 안 먹히는 부분이 많아서 힘들었습니다. 해결 : native에 사용할 수 없는 css요소가 어떤 게 있는지 미리 알아보는 게 좋.. 공감수 0 댓글수 0 2023. 1. 13.
230110 TIL 리덕스에서는 action creators와 reducers를 수기로 만들어 줬는데 이걸 편리하게 해주는게 createSlice라는 리덕스 툴킷 API 정예부대 수업 질문 리스트 1. 렌더링 되는 기준 -> state, props, 부모 컴포넌트 변경 2. 리액트에서 불변성 유지 -> 화면이 변경되려면 state가 변경 됐는지 아닌지 리액트가 알아차려야함 주소값을 참조하는 배열이나 객체는 메서드로 인해 주소값은 안바뀌고 가지고 있는 값만 바뀜 spread문법, map 메서드를 통해 state가 변경됐는지 리액트가 알 수 있음 그래서 불변성을 유지해야함. 3. ../와 ./ -> ./은 현재 디렉토리 ../은 상대경로 4. 일반 함수와 화살표 함수 차이 -> 디스바인딩 여부 디스바인딩이란 함수 내부에서 디스.. 공감수 0 댓글수 0 2023. 1. 11.
220108 10주 차 - WIL 어느덧 10주 차가 되었다. 그동안 정말 많은 걸 배웠지만 정작 기억 속에 남는 건 왜 많이 없는 것인지 도통 알 수가 없네.. 프로젝트를 시작할 때 마다 기초 개념이 부족한 거 같아서 기초 개념을 공부하다가 또 프로젝트가 시작되면 새로운 걸 배워서 그전에 공부했던 것들이 기억이 나질 않는다. 뭐가 문젤까... 네이티브 프로젝트를 하고 있는데 폰에 화면이 딱딱 뜨는 게 신기하지만 웹보다는 정이 덜 가는 느낌이다 리액트, 리덕스라도 제대로 완벽하게 익혀야 어떻게든 취업을 할 텐데 앞으로 공부를 어떻게 적절하게 배분해서 새로운 거와 기존 거를 같이 할 수 있을지 생각해봐야 할 거 같다. 공감수 0 댓글수 0 2023. 1. 9.
220106 TIL 네이티브 프로젝트를 시작했는데 UI구성하는게 생각보다 많이 어려웠다. 안드로이드에 안되는 것도 좀 있고 css도 안먹히는게 있는 거 같고... 일단 해보자! 공감수 0 댓글수 0 2023. 1. 9.
220105 TIL 리액트 네이티브에서 input창은 TextInput이라는 태그를 쓰고 onSubmit 속성을 onSubmitEditing 으로 쓰면 된다. 버튼도 button 태그가 아니라 TouchableOpacity로 쓴다. 웹이랑 비슷한 듯 하면서도 다른게 많아서 새로 익히려면 또 오랜 시간이 걸릴 듯 싶다.. 공감수 0 댓글수 0 2023. 1. 9.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.