전체 글237

• 

  [Java] JDK, JRE, JVM 서론 이 글은 자바를 공부하기 전에 알아두면 좋을 것들!! #1(링크)를 참조하여 정리한 글임을 밝힙니다. 본론 자바의 특성 유명한 문구죠. "Write Once, Run Anywhere". C언어의 경우, 운영체제마다 각각 다른 컴파일러가 존재합니다. 같은 바이트 코드임에도, 운영체제에 따라 다르게 해석됩니다. 그러나 자바는 하나의 컴파일러만 존재하고 각 운영체제에 맞게 바이트 코드를 변환해주는 JVM이 존재합니다. 따라서 어떤 운영체제든, 같은 컴파일러를 사용할 수 있고 이로인해 운영체제와 상관 없이 일정하게 코드를 호환할 수 있습니다. 컴파일 되기까지 자바 언어를 컴퓨터가 이해하려면 0과 1로 구성된 바이너리로 변환되어야 합니다. 이를 컴파일이라고 합니다. 운영체제마다 컴파일러가 다른데, 앞서 말했.. Language/Java & Kotlin 2022. 5. 22.

• 

  [Spring] Spring Boot MVC 패턴 익히기 서론 오늘은 Spring의 MVC 패턴에 대해 간단히 알아보고 직접 실습해보도록 하겠습니다. 이 글은 김영한님의 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술을 보고 정리한 글임을 서두에 밝힙니다. 본론 MVC의 역할 MVC는 각각 M(Model), V(View), C(Controller)에 약자입니다. 각각 역할이 구분되는데요, Model의 경우에는 데이터의 상태를 나타내는 역할을 합니다. View의 경우에는 화면을 구성하는 역할을 하며, Model의 data와 함께 HTML 파일을 브라우저에 전송합니다. Controller의 경우, View와 Model 간의 인터페이스 역할을 하며, 클라이언트의 요청 및 전송 데이터를 수신하고 적절한 결과물을 Model에 담아 View에 전.. Framework/Spring 2022. 5. 21.

• 

  [Java] 자주 쓰이는 util 클래스 정리하기 (1) HashMap 서론 오늘은 자바 프로그래밍을 하면서 유용하게 쓰이는 util 클래스 중 하나인 HashMap에 관해 정리하는 시간을 갖겠습니다. 본론 정의 먼저, Map은 key와 value로 구성된 객체를 저장하는 자료구조입니다. key와 value는 모두 객체이며, value는 중복될 수 있지만 key 값은 중복될 수 없습니다. 식별자로 유일한 key를 갖으므로 O(1)의 탐색시간을 특성을 갖고 있습니다. HashMap은 이러한 Map의 인터페이스를 구현한 대표적인 Map 컬렉션입니다. 차이점은 Map의 key 값을 저장할 때 Hashing(해싱)을 사용하여 많은 양의 데이터를 검색할 때 빠른 속도로 탐색할 수 있도록 돕는다는 점입니다. 선언방법 HashMap은 아래와 같이 선언할 수 있습니다. 첫번째 제너릭 인자.. Language/Java & Kotlin 2022. 5. 12.

• 

  [React] Creact React App을 분석해보자 서론 오늘은 리액트 환경설정을 자동화해주는 툴인 CRA에 관해서 알아보도록 하겠습니다. 본론 CRA란 CRA란 별다른 설정 없이 react 개발환경을 구축해주는 boilerplate 입니다. 이를 활용하면, 쉽게 환경설정을 할 수 있다는 장점이 있습니다. 구체적으로 CRA가 해주는 역할은 대표적으로 다음과 같습니다. public 디렉토리에 index.html과 logo, favicon 등의 static asset 및 기본적인 리액트 코드(index.js, app.js) 설정 webpack, babel, eslint, jest 등 리액트 개발에 필요한 각종 환경설정 react, react-dom, react-scripts 등 각종 라이브러리 설치 react-scripts를 사용하여 package.json에.. Framework/React & RN 2022. 4. 26.

• 

  소프트웨어분야 전문성을 키우기 위한 노력들 소프트웨어분야 전문성을 키우기 위한 노력들 첫째, 저는 팀원들의 기술적 성장을 위해, 주도적인 역할을 하고자 노력했습니다. 회사에는 프론트와 백엔드 개발을 총괄할 수 있는 대표 두 분이 계셨지만, 자사 서비스 개발과 클라이언트 미팅 등으로 바빴기 때문에 사수가 없는 것과 마찬가지였습니다. 그래서 저와 비슷한 시기에 입사한 동료 개발자들이 오롯이 하나의 제품을 완성해야 했습니다. 그러나 다들 처음 접하는 개발환경과 기술 스택으로 프로젝트가 구성되었기 때문에, 프로젝트 진행 속도가 더뎠습니다. 클라이언트가 원하는 기한에 맞추려면 현재 진행하는 속도보다 더 빠르게 개발해야 했고, 그러려면 빠르게 새로운 지식을 습득해야 했습니다. 이러한 문제상황을 해결하기 위해 동료들에게 참여 의사를 물어 사내 스터디를 조직했.. 생각정리 2022. 4. 22.

• 

  [React] CRA 없이, 리액트 개발 환경을 설정해보자 서론 학습목표 오늘은 리액트 개발 환경셋팅을 자동으로 해주는 CRA 없이 리액트 개발환경을 설정할 수 있다. 웹팩, 바벨이 하는 역할을 알고 직접 관련된 설정을 해줄 수 있다. CRA가 해주는 역할에 대해서 바르게 안다. 본론 리액트로 처음 개발할 땐, CRA로 개발환경을 셋팅해주곤 합니다. CRA란 Create React App의 약자로 바벨, 웹팩, 린트 등 복잡한 개발환경을 쉽게 설정해줄 수 있도록 돕는 툴입니다. 사용법은 정말 쉽습니다. 그러나 문제는 개발자로써 더 환경설정을 커스터마이징하고 싶을 때, 하기 어렵다는 점입니다. 따라서 오늘은 CRA 없이 밑바닥부터 리액트 개발환경을 설정해보도록 하겠습니다. 참고로 2022년 4월 21일 기준으로 패키지 버젼을 맞춰 줬습니다. 프로젝트 셋팅하기 먼저.. Framework/React & RN 2022. 4. 21.

• 

  [CSS] 마진 상쇄(marign Collapsing)와 해결방법 서론 형제 태그 간 marign 간격이 중복되어, 의도치 않은 방식으로 간격 조정이 될 때가 있습니다. 그럴 때 의심해볼만한 것은 마진병합. 오늘은 이에 대해서 알아보도록 하겠습니다. 본론 마진 상쇄란? In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin. (W3C) 일반적으로 마진 병합(마진 병합 현상), 마진 겹침 등으로 더 .. Web/CSS 2022. 4. 20.

• 

  HTML5의 콘텐츠 분류 체계에 대해서 알아보자 서론 기존 HTML은 인라인과 블록요소, 이렇게 크게 두 가지로 구분되었는데요. 2014년에 HTML5가 새롭게 개편됨에 따라서, 태그에 대한 분류 또한 더욱 다양해졌습니다. 그래서 오늘은 총 10가지의 태그 분류 체계에 대해서 알아보며, 기존 태그 분류와의 차이점은 무엇인지 함께 알아가봅시다. 본론 컨텐츠 분류 카테고리는 다음과 같습니다. 물론 웹 개발을 할 때, 이 모든 분류를 다 암기하고 있어야 하는 것은 아닙다만, 무의식적으로 분류하던 태그들을 의식적으로 분류하고자 노력하는 것이 전에 비해 더 나은 개발을 위해 도움이 되리라 생각합니다. Flow Content Phrasing content Metadata Content Sectioning Content Heading Content Interact.. Web/HTML 2022. 4. 20.

• 

  NPM과 NPX의 차이점에 대해 알아보자 서론 오늘은 비슷하지만 다른 역할을 하는 NPM과 NPX의 차이점에 관해서 알아보도록 하겠습니다. 본론 NPM이란 NPM이란 node.js 환경에서 사용되는 패키지 관리자입니다. 패키지 매니저(Package manager)는 패키지를 다루는 작업을 편리하고 안전하게 수행하기 위해 사용되는 툴이며, 라이브러리가 코드의 작성을 위해 사용되는 코드의 묶음이라면 패키지는 코드의 배포를 위해 사용되는 코드의 묶음입니다. 또한 많은 패키지들은 다른 패키지들이 설치되어야만 제대로 동작하는데, 기존 패키지를 제대로 동작시키기 위해 필요한 다른 패키지들을 dependency(의존성)라고 한다. 따라서 패키지를 사용하고자 할 때, 의존성을 갖는 다른 패키지들을 전부 설치해 줄 필요가 있다. 다만, 이는 패키지가 늘어갈 때.. 기타 2022. 4. 16.

• 

  [Hooks] 모달 띄웠을 때 스크롤을 막는 방법 오늘은 모달이 떠있는 상태에서 스크롤이 안되도록 처리해보겠습니다. 방법은 아주 간단합니다! 모달을 띄울 때, body의 style로 overflow hidden을 주면 됩니다. 반대로, 모달을 닫을 땐 overflow 속성을 지워주면 되겠죠? import { useCallback } from 'react'; export function useBodyScrollLock() { const lockScroll = useCallback(() => { document.body.style.overflow = 'hidden'; }, []); const openScroll = useCallback(() => { document.body.style.removeProperty('over.. Framework/React & RN 2022. 4. 15.

• 

  [React] 리스트에 key 값을 잘못 입력하면 어떻게 될까? 서론 리액트에선 리스트 컴포넌트에 key 값을 입력하도록 권장합니다. 오늘은 그 까닭과 올바른 key 값을 입력하지 않으면 어떤 문제가 발생할 수 있는지 함께 살펴보도록 하겠습니다. 본론 키 값을 입력해주는 것은 왜 중요할까? 질문에 답을 하기에 앞서서, 리스트 형태의 리액트 컴포넌트에 key 값을 입력해주는 것은 왜 중요할까요? 목록의 데이터 간 값 비교를 사용자가 입력한 key 값을 바탕으로 하기 때문입니다. 올바르지 못한 key 값을 입력하면 어떤 에러가 발생될까? 흔히 하는 실수가 Array의 map 메서드의 index를 key 값으로 제공하는 것입니다. 허나, 이는 배열의 원소가 삭제/추가되어 배열의 순서가 변동되는 경우에는 적합하지 않습니다. 아래의 예제처럼 말이죠. 실제 동작은 해당 링크를 .. Framework/React & RN 2022. 4. 14.

• 

  [HTML] Input readonly와 disabled의 차이점은 무엇인가? 서론 정말 오랜만에 HTML 포스팅을 올리는데요, 오늘은 기본 html Input의 속성 중 비슷한듯(?), 다른 두 속성에 관해 비교해보겠습니다. 본론 아마 많은 분들이 disabled와 readOnly를 사용자가 Input에 값을 입력하지 못하도록 처리하기 위해 사용하실 것입니다. 두 요소 모두, 해당 역할을 수행할 수 있습니다. 그러나 차이점은 폼에 해당 Input value 값이 포함되느냐 마느냐의 여부입니다. 아래 예제를 살펴봅시다. See the Pen form readonly vs disabled by joonfluence (@joonfluence) on CodePen. 차이점이 보이시나요? disabled된 Input의 value는 폼 값에 포함되지 않습니다. 따라서 사용자의 입력은 막고 .. Web/HTML 2022. 4. 13.