겨리의 개발일기

조건부 렌더링이란? ✅ 특정 조건에 따라 다른 결과물을 렌더링 하는 것 Hello 컴포넌트를 통해 실습 ✅ isSpecial이라는 props를 받도록 구현 ✅ isSpecialdl true면 '특별한' 이라는 글자가 노출되고 false면 비노출되게 처리 cf) JSX에서 null, false, undefined 값을 렌더링하게 되면 아무것도 나타나지 않게 된다. 삼항연산자를 사용한 방법 ✅ 삼항연산자는 주로 특정 조건에 따라 보여줘야하는 내용이 다를 때 사용한다. // Hello.js export default function Hello({ isSpecial }) { return ( {isSpecial ? 특별한 : null} Hello!!!!!!! ); } &&연산자를 사용한 방법 ✅ 이처럼 내용이 달..

Programming/React 2023. 5. 30. 17:28

기존 React + JavaScript 를 사용하여 개발하던 프로젝트를 TypeScript로 변경하는 과정에서 에러가 발생했다. .js 파일을 .tsx 파일로 변경하고 타입을 잡아줬는데도 에러가 잡히지 않았다. 에러 사진 에러 내용 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead. 대강 'React'는 UMD 전역을 뜻하지만 현재 파일은 모듈이니 가져오기를 추가하는 것이 낫다 라는 뜻이다. 해결 방법 🔨 첫 번째 방법 가장 간단한 해결 방법은 각 파일에 React를 import 하는 코드를 추가해주는 것! import React from 'react' 하지만 이 방법은 각 파..

Programming/TypeScript 2023. 5. 26. 15:29

https://school.programmers.co.kr/learn/courses/30/lessons/17681 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다. 1. 지도는 한 변의 길이가 n인 정사각형 배열 형태로, 각 칸은 "공백"(" ") 또는 "벽"("#") 두 종류로 이루어져 있다 2. 전체 지도는 두..

Programming/Algorithm 2023. 5. 25. 15:25

세팅하기 create-react-app 사용해서 설치하기 ✅ npx create-react-app 명령어 사용 cf) git에 node_modules 폴더는 올리지 않는 것이 낫다. (크기도 크고 파일도 많음) package.json 만 올리면 된다! → package.json에 있는 걸로 설치하면 되니까 프로젝트 실행하기 npm run start 사용 (npm run start == npm start) start 명령어가 실행되면 해당 화면을 확인할 수 있다! npm start 등의 명령어는 package.json 내의 script 쪽에 명시되어있다. ✅ “react-scripts start” : 개발모드로 프로그램 실행 ✅ “react-scripts build” : 실제 배포모드로 만들어줌 ✅ “re..

Programming/React 2023. 5. 22. 23:54

최근 네이버 변경된 UI를 구경하다가 의문이 생겼다! 바로 이 부분인데..! 개발자도구로 들여다보면 각 메뉴의 아이콘 부분에 태그를 사용하지 않고, 아이콘 이미지가 여러개 들어있는 파일을 backgound-image에 넣고 backgound-position 을 이용해서 표현하고 있는 것을 확인할 수 있다. 근데 왜 저렇게 한거지..? 궁금해서 찾아본 내용들을 정리해봤다. HTML 태그는 언제 사용하는 것이 좋을까? 1. 해당 내용이 디자인 요소가 아닌 콘텐츠와 관련된 경우 2. 검색시 노출이 필요한 경우 → 검색 엔진에서 인덱스(색인)를 생성하기 때문에 검색시 노출이 된다. 🔍 좀 더 자세히 알아보자면.. 태그는 시맨틱요소이며 이미지라는 의미를 가진다. 검색엔진이 웹사이트의 정보를 수집할 때 크롤러가 크..

HTML&CSS 2023. 5. 18. 00:33

DOM(Document Object Model)이란? ✅ 문서 객체 모델 ✅ HTML, XML 문서의 프로그래밍 interface ✅ 문서의 구조화된 표현을 제공하고 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다. DOM 자신에게 접근, 수정하는 방법은 일반적으로 프로퍼티와 메소드를 갖는 자바스크립트 객체로 제공되는데, 이를 DOM API(Application Programming Interface)라고 한다. DOM의 기능 1. HTML 문서에 대한 모델 구성 브라우저는 HTML 문서를 로드한 후 해당 문서에 대한 모델을 메모리에 생성한다.이 때 모델은 객체의 트리(DOM Tree)로 구성된다. 2. HTML 문서 내의 각 요소에 접근/수정 DOM은 모델 내의 각 객체에 접근하고 수정..

Programming/JavaScript 2023. 5. 15. 23:00

1.업무 3월 회고를 건너뛰었기 때문에..간략하게 설명하자면 2월 말 철수했던 프로젝트에 3월 중반 쯤 다시 투입되었다. 아직 프로젝트 초반이라 바쁜 일은 딱히 없었고, 세 개의 신규페이지를 개발했다. 세개 중 하나는 컨텐츠성 페이지라 간단하게 끝냈고, 나머지는 웹뷰로 다른 서비스의 페이지를 띄워주는 건이었는데 개발 후 테스트를 했을 때 웹뷰로 띄운 페이지가 제대로 작동을 안 하는 케이스를 발견했다. 특히 카카오톡 로그인이나, 채널로 메세지 보내기 등 카카오와 관련된 기능이 제대로 동작하지 않았는데 디버깅 해본 결과 다른 서비스 사이트는 웹브라우저를 기반으로 개발이 되었고 그걸 웹뷰에서 띄웠을 때 나타나는 문제임을 알 수 있었다. 결국 이건 리스크가 너무 커서(운영 중인데 공통쪽을 싹 건드리기엔 시간도 ..

회고 2023. 5. 2. 17:21

객체(Object)란? ✅ 자바스크립트에서 원시타입(Primitives)을 제외한 나머지 값들은 모두 객체이다. ✅ 자바스크립트의 객체는 key(키)-value(값) 으로 구성된 Property들의 집합이다. ✅ 함수는 일급 객체 이므로 값으로 취급할 수 있다. → Property 값으로 함수를 사용할 수 있음. 이 경우 일반 함수와 구분하기 위해 method 라고 부른다. ✅ 객체는 데이터를 의미하는 property와 데이터를 참조하고 조작할 수 잇는 동작을 뜻하는 method로 구성된 집합 ✅ 자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 prototype 이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다. 1. Property(프로퍼티) ✅ 프로퍼티키(이름)와 프로퍼티 값으로 구성된..

Programming/JavaScript 2023. 5. 1. 18:31